relayers-network-ui/containers/Provider/Provider.vue

130 lines
3.3 KiB
Vue

<template>
<div :class="$style.container">
<slot />
</div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { ApplicationMutation, ChainId, SetupMutation, WalletMutation } from '@/types'
import { links } from '@/constants'
import { hexToNumber } from '@/utilities'
import { getWalletProvider } from '@/services'
export default {
provide() {
return {
setupProvider: this.setupProvider,
onChainChange: this.onChainChange,
}
},
data() {
return {
provider: null,
}
},
computed: {
...mapGetters('wallet', ['isConnected', 'nameProvider', 'walletAddress']),
},
async created() {
if (this.isConnected) {
try {
await this.setupProvider(this.nameProvider)
} catch {
this.clearProvider()
}
}
await this.estimateGasWatcher()
},
mounted() {
if (this.isConnected && this.nameProvider) {
this.checkNetwork()
}
},
methods: {
...mapActions('application', ['errorHandler']),
...mapActions('gasPrice', ['estimateGasWatcher']),
...mapActions('wallet', ['setProvider', 'checkNetwork', 'setWalletParams', 'changeChain']),
...mapMutations('wallet', {
clearProvider: WalletMutation.CLEAR_PROVIDER,
setLoaderConnection: WalletMutation.SET_LOADER_CONNECTION,
setProviderConnection: WalletMutation.SET_PROVIDER_CONNECTION,
}),
...mapMutations('setup', {
clearSetup: SetupMutation.CLEAR_STATE,
}),
...mapMutations('application', {
clearApplication: ApplicationMutation.CLEAR_STATE,
}),
async onChainChange() {
try {
await this.changeChain(ChainId.MAINNET)
await this.setupProvider(this.nameProvider)
} catch (err) {
await this.errorHandler({
errorMessage: err.message,
title: 'notifyTitles.changeNetwork',
})
}
},
async setupProvider(key = 'metamask') {
try {
this.setLoaderConnection(true)
this.setProviderConnection(false)
const provider = getWalletProvider(key)
const address = await provider.setupProvider()
const network = await provider.checkNetworkVersion()
await this.setProvider({ network, name: key })
await this.setWalletParams(address)
this.setProviderConnection(true)
provider.on({
method: 'chainChanged',
callback: (network) => {
this.setProvider({ network: hexToNumber(network), name: this.nameProvider })
},
})
provider.on({
method: 'accountsChanged',
callback: ([newAddress]) => {
if (!newAddress) {
this.clearProvider()
} else if (this.isConnected) {
this.clearSetup()
this.clearApplication()
this.setWalletParams(newAddress)
this.$router.push(links.registration)
}
},
})
} catch (err) {
const errorMessage = await this.errorHandler({
errorMessage: err.message,
title: 'notifyTitles.connection',
})
throw new Error(errorMessage)
} finally {
this.setLoaderConnection(false)
}
},
},
}
</script>
<style lang="scss" module>
.container {
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
</style>