classic-ui/components/NetworkNavbarIcon.vue

78 lines
1.5 KiB
Vue

<template>
<b-button :icon-left="iconName" class="network-button" data-test="button_network" @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'
case 11155111:
return 'Sepolia'
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>