12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <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'
- 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>
|