From 95ef203ed47be4be327bece7a6d1da66577497fd Mon Sep 17 00:00:00 2001
From: Danil Kovtonyuk <danx.kov@gmail.com>
Date: Mon, 30 May 2022 23:27:44 +1000
Subject: [PATCH] feat: add WalletConnect reconnect dialog

---
 assets/styles/app.scss      |  2 +-
 components/NetworkModal.vue | 11 +++--------
 langs/en.json               |  4 ++++
 layouts/error.vue           | 20 ++++++++++++++++----
 nuxt.config.js              |  1 +
 store/metamask.js           | 19 ++++++++++++++++---
 6 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index aec040a..260c9c2 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -79,7 +79,7 @@ body {
 
     &-foot {
       .button {
-        flex: 1 1 auto;
+        flex: 1 1 50%;
       }
     }
   }
diff --git a/components/NetworkModal.vue b/components/NetworkModal.vue
index ffbf834..4a615d5 100644
--- a/components/NetworkModal.vue
+++ b/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}`)
 
diff --git a/langs/en.json b/langs/en.json
index 1fe494d..f89753a 100644
--- a/langs/en.json
+++ b/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"
diff --git a/layouts/error.vue b/layouts/error.vue
index dec959d..a2c29fc 100644
--- a/layouts/error.vue
+++ b/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) {
-        this.$router.go()
+      try {
+        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()
       }
     }
   },
diff --git a/nuxt.config.js b/nuxt.config.js
index c70e98b..9023a8e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -136,6 +136,7 @@ export default {
         materialDesignIcons: false,
         defaultIconPack: 'trnd',
         defaultModalCanCancel: ['escape', 'button', 'outside'],
+        defaultProgrammaticPromise: true,
         customIconPacks: {
           trnd: {
             sizes: {
diff --git a/store/metamask.js b/store/metamask.js
index 086a500..c03b1e8 100644
--- a/store/metamask.js
+++ b/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)
-        this.$provider._onNetworkChanged({ id: params.netId })
+        dispatch('loading/disable', {}, { root: true })
+
+        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)