new pool selection dialog and liquidity

src/components/CopyButton.vue

@@ -1,14 +1,16 @@
 <template>
   <v-tooltip :model-value="!error&&copied" :open-on-hover="false" location="top">
     <template v-slot:activator="{ props }">
-      <span v-bind="props" style="cursor: pointer" @click="copy()">
+      <div class="d-inline-flex align-center" v-bind="props" style="cursor: pointer" @click="copy()">
+        <slot>
+          <span :style="{maxWidth:width}" style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ text }}</span>
+        </slot>
         <v-btn v-bind="props" v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()"
                :class="error?'error':copied?'success':''"
                :icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"
                :text="showText?text:''"
         />
-        <slot>{{text}}</slot>
-      </span>
+      </div>
     </template>
     <span>Copied!</span>
   </v-tooltip>
@@ -17,7 +19,7 @@
 <script setup lang="ts">
 import {ref} from "vue";
 
-const props = defineProps({text:String, showText:{default:false}})
+const props = defineProps({text:String, showText:{default:false}, width: {default:null}})
 const permitted = ref(true)
 const copied = ref(false)
 const error = ref(false)

src/components/PoolSelectionDialog.vue

@@ -0,0 +1,78 @@
+<template>
+    <v-dialog v-model="co.showPoolSelection" max-width="300">
+      <v-card title="Pool Selection">
+        <v-card-text>
+          <table>
+            <tbody>
+            <tr><td>Pool</td><td><scanner-button :addr="co.selectedSymbol.address"/></td></tr>
+            <tr><td>{{ co.selectedSymbol.base.s }}</td><td><scanner-button :addr="co.selectedSymbol.base.a"/></td></tr>
+            <tr><td>{{ co.selectedSymbol.quote.s }}</td><td><scanner-button :addr="co.selectedSymbol.quote.a"/></td></tr>
+            </tbody>
+          </table>
+          <v-table class="mt-4">
+            <thead>
+              <tr><th>Selected</th><th>Fee</th><td>Liquidity</td></tr>
+            </thead>
+            <tbody>
+              <tr v-for="([addr,fee],i) in co.selectedSymbol.feeGroup"
+                  :class="co.selectedSymbol.fee === fee ? 'selected' : 'selectable'" @click="selectFee(fee)">
+                <td><v-icon v-if="co.selectedSymbol.fee===fee" icon="mdi-check"/></td>
+                <td>{{(fee/10_000).toFixed(2)}}%</td>
+                <td>{{ !co.selectedSymbol.liquiditySymbol ? '' :
+                        co.selectedSymbol.liquiditySymbol === 'USD' ?
+                        `$${toHuman(co.selectedSymbol.liquidities[i])}` :
+                        toHuman(co.selectedSymbol.liquidities[i]) +' '+co.selectedSymbol.liquiditySymbol }}</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+</template>
+
+<script setup>
+
+import {toHuman} from "@/misc.js";
+import ScannerButton from "@/components/ScannerButton.vue";
+import {useChartOrderStore} from "@/orderbuild.js";
+import {feelessTickerKey} from "@/charts/datafeed.js";
+import {setSymbolTicker} from "@/charts/chart.js";
+
+const co = useChartOrderStore()
+
+
+function selectFee(fee) {
+  if (fee === co.selectedSymbol.fee) return
+  const symbol = co.selectedSymbol;
+  const ticker = feelessTickerKey(symbol.ticker) + '|' + fee
+  if (ticker !== symbol.ticker)
+    setSymbolTicker(ticker).catch((e) => console.error('Could not change TV symbol to', ticker))
+  co.showPoolSelection = false
+}
+
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+td {
+  padding-right: 1em;
+}
+tr.selected {
+
+}
+tr.selectable {
+  cursor: pointer;
+  &:hover {
+    background-color: #333;
+  }
+}
+</style>
+
+<style lang="scss">
+.pool-button {
+  color: blue;
+  background-color: white;
+}
+</style>

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>

src/components/chart/ChartPlaceOrder.vue

@@ -75,7 +75,7 @@ function changeSymbol(symbol) {
   console.log('changeSymbol', symbol)
   os.tokenA = symbol.base
   os.tokenB = symbol.quote
-  routeFinder.invoke()
+  // routeFinder.invoke()
 }