classic-ui/components/NetworkNavbarIcon.vue
Danil Kovtonyuk 44f31f8b9f
init
2022-04-22 13:14:19 +10:00

74 lines
1.4 KiB
Vue

<template>
<b-button :icon-left="iconName" class="network-button" @click="onClick">{{ shortNetworkName }}</b-button>
</template>
<script>
import { mapGetters } from 'vuex'
import NetworkModal from '@/components/NetworkModal'
export default {
computed: {
...mapGetters('metamask', ['networkName', 'netId']),
iconName() {
return `${this.networkName}`.replace(/\)?\s\(?/g, '-').toLowerCase()
},
shortNetworkName() {
switch (this.netId) {
case 1:
return 'Ethereum'
case 5:
return 'Goerli'
case 56:
return 'BSC Mainnet'
case 137:
return 'Polygon Network'
case 42161:
return 'Arbitrum'
case 43114:
return 'Avalanche'
default:
return this.networkName
}
}
},
methods: {
onClick() {
this.$buefy.modal.open({
parent: this,
component: NetworkModal,
hasModalCard: true,
width: 440
})
}
}
}
</script>
<style lang="scss" scoped>
.network-button {
padding-left: 0;
border: 0;
background-color: #242424;
&:hover {
color: #fff;
background-color: #393939;
}
::v-deep .icon {
height: 2.857em;
width: 2.857em;
background-color: #0f1f19;
border: 1px solid #94febf;
border-radius: 4px;
&:first-child:not(:last-child) {
margin-right: 1em;
}
.trnd {
background-color: #94febf;
}
}
}
</style>