more stuff and some polish on EventSigning.

app.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import {render} from 'react-dom'
 
 import Nothing from './handlers/Nothing'
@@ -7,7 +7,11 @@ import EventSigning from './handlers/EventSigning'
 const handlers = [EventSigning, Nothing]
 
 function App() {
-  let [value, setValue] = useState(null)
+  let [value, setValue] = useState(localStorage.getItem('value'))
+
+  useEffect(() => {
+    localStorage.setItem('value', value)
+  }, [value])
 
   let Result
   for (let i = 0; i < handlers.length; i++) {
@@ -29,6 +33,7 @@ function App() {
         <h1>nostr army knife</h1>
         paste something nostric
         <textarea
+          value={value}
           onChange={e => setValue(e.target.value)}
           style={{
             padding: '7px',

components/item.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export default function Item({label, children}) {
+export default function Item({label, hint, children}) {
   return (
     <div
       style={{
@@ -10,7 +10,9 @@ export default function Item({label, children}) {
         wordBreak: 'break-all'
       }}
     >
-      <b>{label}: </b>
+      <b data-wenk={hint} data-wenk-pos="right">
+        {label}:{' '}
+      </b>
       {children}
     </div>
   )

handlers/EventSigning.jsx

@@ -1,17 +1,71 @@
-import React from 'react'
-import {getEventHash, serializeEvent} from 'nostr-tools'
+import React, {useState, useEffect} from 'react'
+import useBooleanState from 'use-boolean-state'
+import useComputedState from 'use-computed-state'
+import {
+  getPublicKey,
+  getEventHash,
+  serializeEvent,
+  verifySignature,
+  signEvent
+} from 'nostr-tools'
 
 import Item from '../components/item'
 
 export default function EventSigning({value}) {
+  let [privateKey, setPrivateKey] = useState(
+    'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
+  )
+  let [isValidSignature, signatureGood, signatureBad] = useBooleanState(false)
+  let privateKeyIsValid = useComputedState(
+    () => privateKey.match(/[a-f0-9]{64}/),
+    [privateKey]
+  )
+  let publicKey = useComputedState(
+    () => (privateKeyIsValid ? getPublicKey(privateKey) : null),
+    [privateKeyIsValid]
+  )
+  let signature = useComputedState(async () => {
+    evt.pubkey = publicKey
+    return await signEvent(evt, privateKey)
+  }, [value, privateKey])
+
   let evt = JSON.parse(value)
 
+  useEffect(() => {
+    verifySignature(evt)
+      .then(ok => (ok ? signatureGood() : signatureBad()))
+      .catch(signatureBad)
+  }, [value])
+
   return (
     <>
-      <Item label="serialized event">{serializeEvent(evt)}</Item>
-      <Item label="event id" hint="sha256 hash of serialized">
+      <Item
+        label="serialized event"
+        hint="according to nip-01 signature algorithm"
+      >
+        {serializeEvent(evt)}
+      </Item>
+      <Item label="event id" hint="sha256 hash of serialized event">
         {getEventHash(evt)}
       </Item>
+      {evt.sig ? (
+        <Item label="signature valid">{isValidSignature.toString()}</Item>
+      ) : (
+        <>
+          <Item
+            label="private key"
+            hint="paste any private key here (32 bytes hex-encoded)"
+          >
+            <input
+              value={privateKey}
+              onChange={e => setPrivateKey(e.target.value.toLowerCase())}
+            />{' '}
+            {privateKeyIsValid ? 'valid' : 'invalid'}
+          </Item>
+          <Item label="public key">{publicKey}</Item>
+          <Item label="signature">{privateKeyIsValid ? signature : ''}</Item>
+        </>
+      )}
     </>
   )
 }

package.json

@@ -6,7 +6,9 @@
     "events": "^3.3.0",
     "nostr-tools": "^0.21.4",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "use-boolean-state": "^1.0.2",
+    "use-computed-state": "1.1.0"
   },
   "scripts": {
     "build": "./build.js prod",