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 { &-foot {
.button { .button {
flex: 1 1 auto; flex: 1 1 50%;
} }
} }
} }

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

@ -424,6 +424,10 @@
"connectAccount": "Connect Note Account", "connectAccount": "Connect Note Account",
"fetchFile": "Cannot fetch proving keys, please check your internet connection or try to use VPN.", "fetchFile": "Cannot fetch proving keys, please check your internet connection or try to use VPN.",
"mobileWallet": { "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": { "loading": {
"alert": "If you have not received a notification in your wallet, please reconnect your wallet", "alert": "If you have not received a notification in your wallet, please reconnect your wallet",
"action": "Reconnect" "action": "Reconnect"

@ -25,6 +25,7 @@
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import { sleep } from '@/utils'
import { ErrorIcon } from '@/components/icons' import { ErrorIcon } from '@/components/icons'
export default { export default {
@ -45,16 +46,27 @@ export default {
}, },
methods: { methods: {
...mapActions('metamask', ['networkChangeHandler']), ...mapActions('metamask', ['networkChangeHandler']),
...mapActions('loading', ['enable', 'disable']),
handleRedirect() { handleRedirect() {
this.$router.push('/') this.$router.push('/')
}, },
async handleSwitchNetwork() { 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()
} }
} }
}, },

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

@ -1,7 +1,7 @@
/* eslint-disable no-console */ /* eslint-disable no-console */
import BN from 'bignumber.js' import BN from 'bignumber.js'
import { hexToNumber, numberToHex } from 'web3-utils' 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 { PROVIDERS } from '@/constants'
import networkConfig from '@/networkConfig' import networkConfig from '@/networkConfig'
@ -307,8 +307,21 @@ const actions = {
async networkChangeHandler({ state, getters, commit, dispatch }, params) { async networkChangeHandler({ state, getters, commit, dispatch }, params) {
try { try {
if (getters.isWalletConnect) { 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 { } else {
if (state.isInitialized) { if (state.isInitialized) {
await dispatch('switchNetwork', params) await dispatch('switchNetwork', params)