feat: add WalletConnect reconnect dialog

assets/styles/app.scss

@@ -79,7 +79,7 @@ body {
 
     &-foot {
       .button {
-        flex: 1 1 auto;
+        flex: 1 1 50%;
       }
     }
   }

components/NetworkModal.vue

@@ -21,6 +21,8 @@
 </template>
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
+
+import { sleep } from '@/utils'
 import config from '@/networkConfig'
 
 export default {
@@ -48,7 +50,7 @@ export default {
     async setNetwork(netId) {
       this.enable({ message: this.$t('changingNetwork') })
 
-      await this.sleep()
+      await sleep(800)
 
       try {
         const providerName = window.localStorage.getItem('provider')
@@ -68,13 +70,6 @@ export default {
         this.disable()
       }
     },
-    sleep() {
-      return new Promise((resolve) =>
-        setTimeout(() => {
-          resolve()
-        }, 800)
-      )
-    },
     checkSupportNetwork(netId) {
       const isSupport = Object.keys(this.networkConfig).includes(`netId${netId}`)
 

langs/en.json

@@ -424,6 +424,10 @@
   "connectAccount": "Connect Note Account",
   "fetchFile": "Cannot fetch proving keys, please check your internet connection or try to use VPN.",
   "mobileWallet": {
+    "reconnect": {
+      "message": "Your current connection will be terminated and you will need to reconnect through WalletConnect. Please make sure {networkName} is selected in your wallet before reconnecting.",
+      "action": "Reconnect"
+    },
     "loading": {
       "alert": "If you have not received a notification in your wallet, please reconnect your wallet",
       "action": "Reconnect"

layouts/error.vue

@@ -25,6 +25,7 @@
 <script>
 import { mapActions } from 'vuex'
 
+import { sleep } from '@/utils'
 import { ErrorIcon } from '@/components/icons'
 
 export default {
@@ -45,16 +46,27 @@ export default {
   },
   methods: {
     ...mapActions('metamask', ['networkChangeHandler']),
+    ...mapActions('loading', ['enable', 'disable']),
     handleRedirect() {
       this.$router.push('/')
     },
     async handleSwitchNetwork() {
-      const providerName = window.localStorage.getItem('provider')
+      this.enable({ message: this.$t('changingNetwork') })
 
-      await this.networkChangeHandler({ netId: 1 })
+      await sleep(800)
 
-      if (!providerName) {
+      try {
-        this.$router.go()
+        const providerName = window.localStorage.getItem('provider')
+
+        await this.networkChangeHandler({ netId: 1 })
+
+        if (!providerName) {
+          this.$router.go()
+        }
+      } catch (err) {
+        console.log(`handleSwitchNetwork has error ${err.message}`)
+      } finally {
+        this.disable()
       }
     }
   },

nuxt.config.js

@@ -136,6 +136,7 @@ export default {
         materialDesignIcons: false,
         defaultIconPack: 'trnd',
         defaultModalCanCancel: ['escape', 'button', 'outside'],
+        defaultProgrammaticPromise: true,
         customIconPacks: {
           trnd: {
             sizes: {

store/metamask.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import BN from 'bignumber.js'
 import { hexToNumber, numberToHex } from 'web3-utils'
-import { SnackbarProgrammatic as Snackbar } from 'buefy'
+import { SnackbarProgrammatic as Snackbar, DialogProgrammatic as Dialog } from 'buefy'
 
 import { PROVIDERS } from '@/constants'
 import networkConfig from '@/networkConfig'
@@ -307,8 +307,21 @@ const actions = {
   async networkChangeHandler({ state, getters, commit, dispatch }, params) {
     try {
       if (getters.isWalletConnect) {
-        await dispatch('mobileWalletReconnect', params)
+        dispatch('loading/disable', {}, { root: true })
-        this.$provider._onNetworkChanged({ id: params.netId })
+
+        const networkName = networkConfig[`netId${params.netId}`].networkName
+
+        const { result } = await Dialog.confirm({
+          title: this.app.i18n.t('changeNetwork'),
+          message: this.app.i18n.t('mobileWallet.reconnect.message', { networkName }),
+          cancelText: this.app.i18n.t('cancelButton'),
+          confirmText: this.app.i18n.t('mobileWallet.reconnect.action')
+        })
+
+        if (result) {
+          await dispatch('mobileWalletReconnect', params)
+          this.$provider._onNetworkChanged({ id: params.netId })
+        }
       } else {
         if (state.isInitialized) {
           await dispatch('switchNetwork', params)