fix(safari page auto reload): fixed Safari auto refresh and other issues

Author: Littleor

example/basic-dapp/index.js

@@ -529,11 +529,11 @@ async function walletInitialized() {
       }, 800)
     })
   })
-
-  provider.request({ method: 'anyweb_version' }).then((version) => {
-    getElement('version').innerHTML = version
-  })
   try {
+    provider.request({ method: 'anyweb_version' }).then((version) => {
+      getElement('version').innerHTML = version
+    })
+
     const [chainId, networkId, alreadyAuthedAddresses] = await Promise.all([
       provider.request({ method: 'cfx_chainId' }),
       provider.request({ method: 'cfx_netVersion' }),
@@ -557,7 +557,7 @@ async function walletInitialized() {
     }
   } catch (e) {
     unAuthed()
-    console.error(e)
+    console.error('try 到错误了', e)
   }
 
   connectButton.onclick = () => {
@@ -604,6 +604,9 @@ async function walletInitialized() {
           getElement('get_cfx_result').innerHTML = result
           console.log('result', result)
         })
+        .catch((e) => {
+          console.error('获取CFX失败', e)
+        })
     } catch (err) {
       console.log('err', err)
     }

src/provider.ts

@@ -167,17 +167,23 @@ export class Provider implements IProvider {
             ? params[0]
             : params
           : {}
-        return await callIframe('pages/dapp/auth', {
-          appId: this.appId,
-          chainId: (await this.request({ method: 'cfx_chainId' })) as string,
-          params: params ? JSON.stringify(paramsObj) : '',
-          authType:
-            params && Object.keys(paramsObj).includes('to') && paramsObj['to']
-              ? getAddressType(paramsObj['to']) === AddressType.CONTRACT
-                ? 'callContract'
-                : 'createTransaction'
-              : 'createContract',
-        })
+        try {
+          return await callIframe('pages/dapp/auth', {
+            appId: this.appId,
+            chainId: (await this.request({ method: 'cfx_chainId' })) as string,
+            params: params ? JSON.stringify(paramsObj) : '',
+            authType:
+              params && Object.keys(paramsObj).includes('to') && paramsObj['to']
+                ? getAddressType(paramsObj['to']) === AddressType.CONTRACT
+                  ? 'callContract'
+                  : 'createTransaction'
+                : 'createContract',
+          })
+        } catch (e) {
+          console.error('Error to sendTransaction', e)
+          return 'fail'
+        }
+
       case 'anyweb_version':
         return config.version
       case 'anyweb_home':

src/utils/address.ts

@@ -12,5 +12,11 @@ export enum AddressType {
  * @param address
  */
 export const getAddressType = (address: string): AddressType => {
-  return decode(address).type as AddressType
+  const decodeResult = decode(address)
+  console.log('decodeResult', decodeResult)
+  if (Object.keys(decodeResult).includes('type')) {
+    return decodeResult.type as AddressType
+  } else {
+    return AddressType.USER
+  }
 }

src/utils/common.ts

@@ -64,7 +64,26 @@ const setBodyScrollable = () => {
 export const getIframe = async (
   url: string,
   onClose: () => void
-): Promise<HTMLDivElement> => {
+): Promise<{
+  root: HTMLDivElement
+  close: () => void
+}> => {
+  if (
+    document.getElementById('anyweb-iframe-mask') &&
+    document.getElementById('anyweb-iframe')
+  ) {
+    const mask = document.getElementById('anyweb-iframe-mask') as HTMLDivElement
+    const iframe = document.getElementById('anyweb-iframe') as HTMLIFrameElement
+    iframe.setAttribute('src', url)
+    mask.style.display = 'block'
+    return {
+      root: document.getElementById('anyweb-iframe-mask') as HTMLDivElement,
+      close: () => {
+        onClose()
+        mask.style.display = 'none'
+      },
+    }
+  }
   const mask = document.createElement('div')
   const div = document.createElement('div')
   const iframe = document.createElement('iframe')
@@ -139,6 +158,7 @@ export const getIframe = async (
   button.className = 'iframe-contain-button'
   iframe.className = 'iframe'
 
+  iframe.id = 'anyweb-iframe'
   mask.id = 'anyweb-iframe-mask'
 
   iframe.setAttribute('src', url)
@@ -151,13 +171,21 @@ export const getIframe = async (
   button.onclick = () => {
     setBodyScrollable()
     onClose()
-    mask.remove()
+    mask.style.display = 'none'
   }
   document.body.appendChild(style)
   setBodyNonScrollable()
   document.body.insertBefore(mask, document.body.firstElementChild)
-  return mask
+  return {
+    root: mask,
+    close: () => {
+      setBodyScrollable()
+      onClose()
+      mask.style.display = 'none'
+    },
+  }
 }
+
 export const callIframe = async (
   path: string,
   {
@@ -182,51 +210,61 @@ export const callIframe = async (
     console.error('Get serialNumber error', e)
     throw new Error('Get serialNumber error')
   }
+
   if (waitResult) {
     return new Promise<unknown>(async (resolve, reject) => {
       let timer: NodeJS.Timeout | undefined = undefined
-      const iframeContain = await getIframe(
+      const { close } = await getIframe(
         `${BASE_URL}${path}?appId=${appId}&authType=${authType}&serialNumber=${serialNumber}&hash=${hash}&random=${Math.floor(
           Math.random() * 1000
         )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
         () => {
           if (timer) {
             clearTimeout(timer)
-            reject(new Error('User cancel'))
           }
         }
       )
-      const delay = 800
+      const delay = 1000
       const next = (i: number) => {
         timer = setTimeout(async () => {
+          let data
           try {
-            const data = (
+            data = (
               await axios.post(`${API_BASE_URL}/open/serial/read`, {
                 serialNumber: serialNumber,
                 hash: hash,
               })
             ).data.data
-            if (data && data !== 'false' && data !== false) {
-              timer && clearTimeout(timer)
-              iframeContain.remove()
-              setBodyScrollable()
-              resolve(JSON.parse(data))
-            } else {
-              if (i * delay > 10 * 60 * 1000) {
-                iframeContain.remove()
-                setBodyScrollable()
-                reject(new Error('Timeout'))
-              }
-              next(i++)
-            }
           } catch (e) {
             console.error("Can't get result from iframe", e)
+            next(i++)
+            return
+            // reject(new Error("Can't get result from iframe"))
+          }
+          if (data && data !== 'false' && data !== false) {
+            timer && clearTimeout(timer)
+            close()
+            resolve(JSON.parse(data))
+          } else {
+            if (i * delay > 10 * 60 * 1000) {
+              close()
+              reject(new Error('Timeout'))
+            }
+            next(i++)
           }
         }, delay)
       }
       next(0)
     })
   }
+  await getIframe(
+    `${BASE_URL}${path}?appId=${appId}&authType=${authType}&serialNumber=${serialNumber}&hash=${hash}&random=${Math.floor(
+      Math.random() * 1000
+    )}&chainId=${chainId}&params=${params}&scope=${JSON.stringify(scope)}`,
+    () => {
+      return
+    }
+  )
   return 'ok'
 }