new pool selection dialog and liquidity

src/components/ScannerButton.vue

@@ -0,0 +1,34 @@
+<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>