feat: simplfied error handling

iframe/html/template.js

@@ -34,7 +34,7 @@ const template = (data,isMobile) => `
             </p>
           </div>
         </div>
-        <div class='${style.actions}'>
+        <div class='${style.actions}' id='action'>
           <button id='accept' class='${style.primaryButton}' ${data.error ? 'style="display:none;"' : ''} >
             Continue
           </button>

iframe/index.js

@@ -3,23 +3,20 @@ import ThreeIdConnectService from './../src/threeIdConnectService.js'
 const store = require('store')
 const assets = require('./assets/assets.js')
 
-store.remove('error')
-
 /**
  *  UI Window Functions
  */
 
 const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
 const checkIsMobile = () => mobileRegex.test(navigator.userAgent)
 
+const error = (error) => `
+  <p class='walletSelect_error'>${error}</p>
+`
+
 // Given a request will render UI module templates
 const render = async (request) => {
-  const errorMessage = store.get('error')
-  let data = {
-    request
-  }
-  if (errorMessage) data.error = errorMessage
-  root.innerHTML = template(data, checkIsMobile())
+  document.getElementById('root').innerHTML = template({request}, checkIsMobile())
 }
 
 /**
@@ -32,11 +29,12 @@ const idwService = new ThreeIdConnectService()
 const getConsent = async (req) => {
   await idwService.displayIframe()
   await render(req)
+  const accept = document.getElementById('accept')
 
   const result = await new Promise((resolve, reject) => {
     accept.addEventListener('click', () => {
       accept.innerHTML = `Confirm in your wallet ${assets.Loading}`;
-      document.getElementById("accept").style.boxShadow = 'none';
+      accept.style.boxShadow = 'none';
       resolve(true)
     })
   })
@@ -45,19 +43,20 @@ const getConsent = async (req) => {
 }
 
 // Service calls on error, renders error to UI
-const errorCb = (err, msg) => {
+const errorCb = (err, msg, req) => {
   if (!msg) msg = err.toString()
   msg = 'Error: Unable to connect'
   console.log(err)
-  store.set('error', msg)
+  document.getElementById('action').innerHTML = error(msg)
 }
 
 // Closure to pass cancel state to IDW iframe service
 let closecallback
 
 window.hideIframe = () => {
   idwService.hideIframe()
-  root.innerHTML = ``
+  const root = document.getElementById('root')
+  if (root) root.innerHTML = ``
   if (closecallback) closecallback()
 }
 

src/threeIdConnectService.js

@@ -134,8 +134,8 @@ class ThreeIdConnectService {
     *  Tells parent window to hide iframe
     */
   async hideIframe() {
-    store.remove('error') //TODO move, so specific to iframe implementation
-    root.innerHTML = ``
+    const root = document.getElementById('root')
+    if (root) root.innerHTML = ``
     return this.hide()
   }
 
@@ -184,7 +184,6 @@ class ThreeIdConnectService {
     */
   async providerRelay(message) {
     const domain = new Url(document.referrer).host
-    let loop = true
 
     const responsePromise = new Promise(async (resolve, reject) => {
       // Register request cancel calback
@@ -196,27 +195,16 @@ class ThreeIdConnectService {
           error: "3id-connect: Request not authorized"
         }
         resolve(res)
-        loop = false
       })
 
-      // Should not be neccessary, but sets bounds on any uncaught errors, so
-      // we dont have infinite loop and freeze
-      let tries = 0
-
       if (message.method === '3id_authenticate') {
-        // Try until response valid, or canceled above
-        while (loop) {
-          tries++
-          try {
-            const res = await this.provider.send(message, domain)
-            if (message.method === `3id_authenticate`) this.hideIframe()
-            resolve(res)
-            loop = false
-          } catch (e) {
-            this.errorCb(e, 'There was an error. Use the same account you used for this app.')
-            this._removeConsents(message, domain)
-          }
-          if (tries >= 10) loop = false
+        try {
+          const res = await this.provider.send(message, domain)
+          this.hideIframe()
+          resolve(res)
+        } catch (e) {
+          this.errorCb(e, 'Error: Unable to connect')
+          this._removeConsents(message, domain)
         }
       } else {
         const res = await this.provider.send(message, domain)