<template>
  <div class="d-inline-flex align-center" style="cursor: pointer">
    <span @click='click'
          :style="{maxWidth: width, width}" style="white-space: nowrap; display: inline-block; overflow: hidden; text-overflow: ellipsis">{{addr}}</span>
    <v-icon icon="mdi-open-in-new" size="x-small"/>
  </div>
</template>

<script setup>
import {computed} from "vue";
import {useStore} from "@/store/store.js";

const props = defineProps({chainId: {type: Number, default:null}, addr:String, width: {default:'5em'}})
const s = useStore()

function click() {
  window.open(url.value, '_blank')
}

const url = computed(()=>{
  const chain = props.chainId ? props.chainId: s.chainId
  switch (chain) {
    case 31337:
    case 1337:
    case 42161:
      return `https://arbiscan.io/address/${props.addr}`
  }
  throw new Error(`No scanner defined for chain ${chain}`)
})

</script>

<style scoped lang="scss">
</style>
