65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<b-tooltip position="is-bottom" type="is-dark-tooltip" :triggers="[]">
|
||
|
|
<template v-slot:content>
|
||
|
|
<template v-if="isLoggedIn">
|
||
|
|
<p>{{ $t('web3connected') }}</p>
|
||
|
|
<a :href="addressExplorerUrl(ethAccount)" target="_blank">{{ shortAddress(ethAccount) }}</a>
|
||
|
|
<p><NumberFormat :value="balance" /> {{ currency }}</p>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<p>{{ $t('notConnected') }}</p>
|
||
|
|
<connect-button type="is-primary-link mb-0" />
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<b-button type="is-nav-icon" :icon-left="wallet" :class="{ [wallet]: isLoggedIn }"></b-button>
|
||
|
|
</b-tooltip>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState, mapGetters } from 'vuex'
|
||
|
|
|
||
|
|
import { sliceAddress } from '@/utils'
|
||
|
|
import NumberFormat from '@/components/NumberFormat'
|
||
|
|
import { ConnectButton } from '@/components/web3Connect'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
NumberFormat,
|
||
|
|
ConnectButton
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
active: {
|
||
|
|
type: Boolean
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isActive: false,
|
||
|
|
timer: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState('metamask', ['ethAccount', 'ethBalance', 'providerName']),
|
||
|
|
...mapGetters('metamask', ['isLoggedIn', 'currency']),
|
||
|
|
...mapGetters('token', ['toDecimals']),
|
||
|
|
...mapGetters('txHashKeeper', ['addressExplorerUrl']),
|
||
|
|
balance() {
|
||
|
|
return this.toDecimals(this.ethBalance)
|
||
|
|
},
|
||
|
|
wallet() {
|
||
|
|
const supportedWallets = ['metamask', 'walletConnect']
|
||
|
|
|
||
|
|
if (supportedWallets.includes(this.providerName)) {
|
||
|
|
return this.providerName
|
||
|
|
}
|
||
|
|
return 'metamask'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
shortAddress(address) {
|
||
|
|
return sliceAddress(address)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|