feat: add WalletConnect reconnect dialog

This commit is contained in:
Danil Kovtonyuk 2022-05-30 23:27:44 +10:00
parent d7eed4262e
commit 95ef203ed4
6 changed files with 41 additions and 16 deletions

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

@ -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}`)

@ -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"

@ -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()
}
}
},

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

@ -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)