Update metamask error handler flow (#393)

* update metamask error handle flow * fix message
sora-xor · Jul 27, 2021 · 067248b · 067248b
1 parent 6d3c2e2
commit 067248b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 30 deletions.
diff --git a/src/components/mixins/WalletConnectMixin.ts b/src/components/mixins/WalletConnectMixin.ts
@@ -8,6 +8,9 @@ import ethersUtil, { Provider } from '@/utils/ethers-util'
 
 import TranslationMixin from '@/components/mixins/TranslationMixin'
 
+const checkExtensionKey = 'provider.messages.checkExtension'
+const installExtensionKey = 'provider.messages.installExtension'
+
 const getProviderName = provider => {
   switch (provider) {
     case Provider.Metamask:
@@ -22,7 +25,7 @@ const handleProviderError = (provider: Provider, error: any): string => {
     case Provider.Metamask:
       return handleMetamaskError(error)
     default:
-      return 'provider.messages.checkExtension'
+      return checkExtensionKey
   }
 }
 
@@ -35,7 +38,7 @@ const handleMetamaskError = (error: any): string => {
     case 4001:
       return 'provider.messages.extensionLogin'
     default:
-      return 'provider.messages.checkExtension'
+      return checkExtensionKey
   }
 }
 
@@ -73,11 +76,22 @@ export default class WalletConnectMixin extends Mixins(TranslationMixin) {
       await this.connectExternalAccount({ provider })
     } catch (error) {
       const name = this.t(getProviderName(provider))
-      const message = this.te(error.message)
+      const key = this.te(error.message)
         ? error.message
         : handleProviderError(provider, error)
 
-      this.$alert(this.t(message, { name }))
+      const message = this.t(key, { name })
+      const showCancelButton = key === installExtensionKey
+
+      this.$alert(message, {
+        showCancelButton,
+        cancelButtonText: this.t('provider.messages.reloadPage'),
+        callback: action => {
+          if (action === 'cancel') {
+            router.go(0)
+          }
+        }
+      })
     } finally {
       this.isExternalWalletConnecting = false
     }
@@ -110,16 +124,14 @@ export default class WalletConnectMixin extends Mixins(TranslationMixin) {
   }
 
   async syncExternalAccountWithAppState () {
-    const connected = await ethersUtil.checkAccountIsConnected(this.evmAddress)
-
-    if (connected) return
-
-    await this.disconnectExternalAccount()
-
-    const account = await ethersUtil.getAccount()
+    try {
+      const connected = await ethersUtil.checkAccountIsConnected(this.evmAddress)
 
-    if (account) {
-      await this.changeExternalWallet({ address: account })
+      if (!connected && this.evmAddress) {
+        await this.disconnectExternalAccount()
+      }
+    } catch (error) {
+      await this.disconnectExternalAccount()
     }
   }
 }
diff --git a/src/lang/en.json b/src/lang/en.json
@@ -728,7 +728,8 @@
         "messages": {
             "checkExtension": "{name} extension is busy, please check it",
             "extensionLogin": "Please login to your {name} extension",
-            "installExtension": "{name} extension is not found. Please install it!"
+            "installExtension": "{name} extension is not found. Please install it!\n\nAlready installed extension? Please reload the page",
+            "reloadPage": "Reload page"
         }
     }
 }
diff --git a/src/lang/messages.ts b/src/lang/messages.ts
@@ -545,7 +545,8 @@ export default {
     messages: {
       checkExtension: '{name} extension is busy, please check it',
       extensionLogin: 'Please login to your {name} extension',
-      installExtension: '{name} extension is not found. Please install it!'
+      installExtension: '{name} extension is not found. Please install it!\n\nAlready installed extension? Please reload the page',
+      reloadPage: 'Reload page'
     }
   }
 }
diff --git a/src/utils/ethers-util.ts b/src/utils/ethers-util.ts
@@ -187,7 +187,7 @@ async function onConnect (options: ConnectOptions): Promise<string> {
 }
 
 async function onConnectMetamask (): Promise<string> {
-  provider = await detectEthereumProvider() as any
+  provider = await detectEthereumProvider({ timeout: 0 }) as any
   if (!provider) {
     throw new Error('provider.messages.installExtension')
   }
@@ -203,15 +203,10 @@ async function onConnectWallet (url = 'https://cloudflare-eth.com'): Promise<str
 }
 
 async function getAccount (): Promise<string> {
-  try {
-    const ethersInstance = await getEthersInstance()
-    await ethersInstance.send('eth_requestAccounts', [])
-    const account = ethersInstance.getSigner()
-    return account.getAddress()
-  } catch (error) {
-    console.error(error)
-    return ''
-  }
+  const ethersInstance = await getEthersInstance()
+  await ethersInstance.send('eth_requestAccounts', [])
+  const account = ethersInstance.getSigner()
+  return account.getAddress()
 }
 
 // TODO: remove this check, when MetaMask issue will be resolved
@@ -227,7 +222,7 @@ async function checkAccountIsConnected (address: string): Promise<boolean> {
 
 async function getEthersInstance (): Promise<ethersProvider> {
   if (!provider) {
-    provider = await detectEthereumProvider() as any
+    provider = await detectEthereumProvider({ timeout: 0 }) as any
   }
   if (!provider) {
     throw new Error('No ethereum provider instance!')

diff --git a/src/views/Rewards.vue b/src/views/Rewards.vue
@@ -306,10 +306,6 @@ export default class Rewards extends Mixins(WalletConnectMixin, TransactionMixin
     }
   }
 
-  async handleWalletChange (): Promise<void> {
-    await this.changeExternalAccountProcess()
-  }
-
   private async checkAccountRewards (showNotification = false): Promise<void> {
     if (this.isSoraAccountConnected) {
       await this.getRewardsProcess(showNotification)