classic-ui-dev/components/NetworkNavbarIcon.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'
        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>