nip-13: add timeout and show user facing error if it exceeds

src/error.css

@@ -0,0 +1,36 @@
+#errorOverlay {
+  background: var(--bgcolor-danger);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  overflow: auto;
+  padding: var(--gap);
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 100;
+}
+
+.error-title {
+  margin-top: 0;
+}
+
+#errorOverlay button {
+  background-color: rgba(0 0 0 / .5);
+  border: none;
+  display: inline-block;
+}
+#errorOverlay button:focus {
+  outline: 2px solid white;
+  outline-offset: var(--focus-outline-offset);
+}
+
+#errorOverlay .buttons {
+  max-width: var(--max-width);
+}
+@media (orientation: portrait) {
+  #errorOverlay .buttons {
+    flex-basis: 4rem;
+  }
+}

src/index.html

@@ -52,6 +52,7 @@
             </article>
             <section id="textnote"></section>
           </div>
+          <div id="errorOverlay" class="form" hidden></div>
         </div>
     
         <div class="tab-content">

src/main.css

@@ -2,6 +2,7 @@
 @import "cards.css";
 @import "form.css";
 @import "write.css";
+@import "error.css";
 
 :root {
   /* 5px auto Highlight */
@@ -14,6 +15,7 @@
   --focus-outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
   --font-small: 1.2rem;
   --gap: 2.4rem;
+  --max-width: 96ch;
 }
 
 ::selection {

src/main.js

@@ -740,6 +740,9 @@ function appendReplyForm(el) {
   requestAnimationFrame(() => writeInput.focus());
 }
 
+const lockScroll = () => document.body.style.overflow = 'hidden';
+const unlockScroll = () => document.body.style.removeProperty('overflow');
+
 const newMessageDiv = document.querySelector('#newMessage');
 document.querySelector('#bubble').addEventListener('click', (e) => {
   localStorage.removeItem('reply_to'); // should it forget old replyto context?
@@ -749,7 +752,7 @@ document.querySelector('#bubble').addEventListener('click', (e) => {
   if (writeInput.value.trimRight()) {
     writeInput.style.removeProperty('height');
   }
-  document.body.style.overflow = 'hidden';
+  lockScroll();
   requestAnimationFrame(() => updateElemHeight(writeInput));
 });
 
@@ -760,7 +763,7 @@ document.body.addEventListener('keyup', (e) => {
 });
 
 function hideNewMessage(hide) {
-  document.body.style.removeProperty('overflow');
+  unlockScroll();
   newMessageDiv.hidden = hide;
 }
 
@@ -772,7 +775,8 @@ async function upvote(eventId, relay) {
     content: '+',
     tags: [['e', eventId, relay, 'reply']],
     created_at: Math.floor(Date.now() * 0.001),
-  }, difficulty);
+  }, difficulty, 10).catch(console.warn);
+  if (newReaction) {
     const sig = await signEvent(newReaction, privatekey).catch(console.error);
     if (sig) {
       const ev = await pool.publish({...newReaction, sig}, (status, url) => {
@@ -785,6 +789,7 @@ async function upvote(eventId, relay) {
       }).catch(console.error);
     }
   }
+}
 
 // send
 const sendStatus = document.querySelector('#sendstatus');
@@ -809,7 +814,8 @@ writeForm.addEventListener('submit', async (e) => {
     pubkey,
     tags,
     created_at: Math.floor(Date.now() * 0.001),
-  }, difficulty);
+  }, difficulty, 10).catch(console.warn);
+  if (newEvent) {
     const sig = await signEvent(newEvent, privatekey).catch(onSendError);
     if (sig) {
       const ev = await pool.publish({...newEvent, sig}, (status, url) => {
@@ -830,6 +836,7 @@ writeForm.addEventListener('submit', async (e) => {
         }
       });
     }
+  }
 });
 
 writeInput.addEventListener('input', () => {
@@ -951,7 +958,8 @@ profileForm.addEventListener('submit', async (e) => {
     content: JSON.stringify(Object.fromEntries(form)),
     tags: [],
     created_at: Math.floor(Date.now() * 0.001),
-  }, difficulty);
+  }, difficulty, 10).catch(console.warn);
+  if (newProfile) {
     const sig = await signEvent(newProfile, privatekey).catch(console.error);
     if (sig) {
       const ev = await pool.publish({...newProfile, sig}, (status, url) => {
@@ -965,8 +973,42 @@ profileForm.addEventListener('submit', async (e) => {
         }
       }).catch(console.error);
     }
+  }
 });
 
+const errorOverlay = document.querySelector('#errorOverlay');
+
+function promptError(error, options = {}) {
+  const {onAgain, onCancel} = options;
+  lockScroll();
+  errorOverlay.replaceChildren(
+    elem('h1', {className: 'error-title'}, error),
+    elem('p', {}, 'something went wrong'),
+    elem('div', {className: 'buttons'}, [
+      onCancel ? elem('button', {data: {action: 'close'}}, 'close') : '',
+      onAgain ? elem('button', {data: {action: 'again'}}, 'try again') : '',
+    ]),
+  );
+  const handleOverlayClick = (e) => {
+    const button = e.target.closest('button');
+    if (button) {
+      switch(button.dataset.action) {
+        case 'close':
+          onCancel();
+          break;
+        case 'again':
+          onAgain();
+          break;
+      }
+      errorOverlay.removeEventListener('click', handleOverlayClick);
+      errorOverlay.hidden = true;
+      unlockScroll();
+    }
+  };
+  errorOverlay.addEventListener('click', handleOverlayClick);
+  errorOverlay.hidden = false;
+}
+
 /**
  * check that the event has the id has the desired number of leading zero bits
  * @param {EventObj} evt to validate
@@ -989,14 +1031,20 @@ function validatePow(evt) {
  * powEvent returns a rejected promise if the funtion runs for longer than timeout.
  * a zero timeout makes mineEvent run without a time limit.
  */
-function powEvent(evt, difficulty, timeout) {
+function powEvent(evt, difficulty, timeout = 0) {
   return new Promise((resolve, reject) => {
     const worker = new Worker('./worker.js');
 
     worker.onmessage = (msg) => {
       worker.terminate();
       if (msg.data.error) {
-        reject(msg.data.error);
+        promptError(msg.data.error, {
+          onCancel: () => reject('canceled'),
+          onAgain: async () => {
+            const result = await powEvent(evt, difficulty, timeout).catch(console.warn);
+            resolve(result);
+          }
+        })
       } else {
         resolve(msg.data.event);
       }

src/tabs.css

@@ -43,7 +43,7 @@ input[type="radio"]:checked + label {
 }
 
 .tab-content {
-  max-width: 96ch;
+  max-width: var(--max-width);
   min-height: 200px;
   padding: calc(.5 * var(--gap)) 0 100px 0;
 }

src/worker.js

@@ -10,14 +10,14 @@ function mine(event, difficulty, timeout = 5) {
   let n = BigInt(0);
   event.tags.unshift(['nonce', n.toString(), `${difficulty}`]);
 
-  const start = Math.floor(Date.now() * 0.001);
+  const until = Math.floor(Date.now() * 0.001) + timeout;
   console.time('pow');
   while (true) {
     const now = Math.floor(Date.now() * 0.001);
-    // if (now > start + 15) {
-    //   console.timeEnd('pow');
-    //   return false;
-    // }
+    if (timeout !== 0 && (now > until)) {
+      console.timeEnd('pow');
+      throw 'timeout';
+    }
     if (now !== event.created_at) {
       event.created_at = now;
       // n = BigInt(0); // could reset nonce as we have a new timestamp
@@ -25,7 +25,6 @@ function mine(event, difficulty, timeout = 5) {
     event.tags[0][1] = (++n).toString();
     const id = getEventHash(event);
     if (zeroLeadingBitsCount(id) === difficulty) {
-      console.log(event.tags[0][1], id);
       console.timeEnd('pow');
       return event;
     }
@@ -33,11 +32,7 @@ function mine(event, difficulty, timeout = 5) {
 }
 
 addEventListener('message', async (msg) => {
-  const {
-    difficulty,
-    event,
-    timeout,
-  } = msg.data;
+  const {difficulty, event, timeout} = msg.data;
   try {
     const minedEvent = mine(event, difficulty, timeout);
     postMessage({event: minedEvent});