35 lines
822 B
Vue
35 lines
822 B
Vue
<template>
|
|
<div :class="['chain-block','chain-'+chainId]"><v-avatar class='chain-avatar' v-if="media.img" :image="media.img" rounded="0" size="1em"/> {{media.name}}</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useStore} from "@/store/store";
|
|
import {computed} from "vue";
|
|
|
|
const unsupportedMedia = {}
|
|
const chainMedia = {
|
|
1: {name: 'Ethereum', img: null},
|
|
42161: { name: 'Arbitrum One', img: '/arbitrum-logo.svg'},
|
|
31331: { name: 'Mockchain', img: null},
|
|
}
|
|
|
|
const s = useStore()
|
|
const props = defineProps(['chainId'])
|
|
const media = computed(()=>chainMedia[props.chainId] || unsupportedMedia)
|
|
|
|
</script>
|
|
|
|
<style lang="scss"> // NOT 'scoped'
|
|
@use "src/styles/vars" as *;
|
|
//.chain-avatar {
|
|
// max-height: 1em;
|
|
// max-width: 1em;
|
|
//}
|
|
.chain-block {
|
|
display: inline;
|
|
}
|
|
.chain-42161 {
|
|
color: #12aaff;
|
|
}
|
|
</style>
|