withdrawls

src/components/Blockchain.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="['chain-block','chain-'+chainId]"><v-avatar class='chain-avatar' v-if="media.img" :image="media.img" rounded="0" size="1em"/>&nbsp;{{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>