token metadata fixes for vault and orders view; faucet fix

src/blockchain/token.js

@@ -2,6 +2,7 @@ import {socket} from "@/socket.js";
 import {useStore} from "@/store/store.js";
 import {erc20Abi} from "@/blockchain/abi.js";
 import {ethers} from "ethers";
+import {metadata, metadataMap} from "@/version.js";
 
 
 // synchronous version may return null but will trigger a lookup
@@ -24,19 +25,31 @@ export function token(addr) {
 
 
 // async version doesnt return until it has a token value
-export async function getToken(addr) {
+export async function getToken(chainId, addr) {
     // todo deprecated.  use metadataMap[chainId][addr]
-    console.warn('getToken() is deprecated')
     const s = useStore()
+    if (addr===undefined) {
+        console.warn('getToken(addr) is deprecated.  use getToken(chainId,addr)')
+        addr = chainId
+        chainId = s.chainId
+    }
+    let found = metadataMap[chainId][addr]
+    if (found)
+        return found
     if (!(addr in s.tokens))
-        await addExtraToken(addr)
+        await addExtraToken(chainId, addr)
     return s.tokens[addr]
 }
 
 
 const _inFlightLookups = {}
 
-export async function addExtraToken(addr) {
+export async function addExtraToken(chainId, addr) {
+    if (addr===undefined) {
+        console.warn('addExtraToken(addr) is deprecated.  use addExtraToken(chainId,addr)')
+        addr = chainId
+        chainId = s.chainId
+    }
     if( !addr ) {
         console.log('ignoring call to add extra token', addr)
         return
@@ -45,7 +58,6 @@ export async function addExtraToken(addr) {
         _inFlightLookups[addr] = true
         const prom = new Promise((resolve) => {
             const s = useStore()
-            const chainId = s.chainId
             console.log('querying token', addr)
             socket.emit('lookupToken', chainId, addr, (info) => {
                 console.log('server token info', addr, info)

src/components/CopyButton.vue

@@ -1,11 +1,14 @@
 <template>
   <v-tooltip :model-value="!error&&copied" :open-on-hover="false">
     <template v-slot:activator="{ props }">
-      <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:''"
-      />
+      <span v-bind="props" style="cursor: pointer" @click="copy()">
+        <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/>
+      </span>
     </template>
     <span>Copied!</span>
   </v-tooltip>

src/components/TokenAmount.vue

@@ -1,5 +1,5 @@
 <template>
-    <span>{{fmtAmount}} {{ raw ? '' : (token.symbol || '') }}</span>
+    <span>{{fmtAmount}} {{ raw ? '' : (token.s || '') }}</span>
 </template>
 
 <script setup>
@@ -14,9 +14,9 @@ const token = await getToken(props.addr)
 const fmtAmount = computed(() => {
   if( props.amount === null || props.amount === undefined )
     return ''
-  return FixedNumber.fromValue(props.amount, token.decimals, {
+  return FixedNumber.fromValue(props.amount, token.d, {
     width: 256,
-    decimals: token.decimals
+    decimals: token.d
   }).toUnsafeFloat().toPrecision(5) // todo precision
 })
 </script>

src/components/TokenRow.vue

@@ -3,9 +3,9 @@
     <td>
       <v-avatar v-if="imageSrc" :image="imageSrc"/>
     </td>
-    <td class="d-none d-sm-table-cell">{{ token.name || '' }}</td>
+    <td class="d-none d-sm-table-cell">{{ token.n || '' }}</td>
     <td class="text-right">{{ fixed }}</td>
-    <td class="text-left">{{ token.symbol }}</td>
+    <td class="text-left">{{ token.s }}</td>
     <!-- todo price and value columns -->
     <td>
       <v-menu>
@@ -13,9 +13,9 @@
           <v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
         </template>
         <v-list>
-          <v-list-subheader :title="token.symbol"/>
+          <v-list-subheader :title="token.s"/>
           <v-list-item title="Withdraw" key="withdraw" value="withdraw" prepend-icon="mdi-arrow-down-bold"
-          @click="()=>onWithdraw(token.address)"/>
+          @click="()=>onWithdraw(token.a)"/>
         </v-list>
       </v-menu>
     </td>
@@ -31,9 +31,9 @@ import {computed, ref} from "vue";
 const s = useStore()
 const props = defineProps(['addr', 'amount', 'onWithdraw'])
 const token = await getToken(props.addr)
-const fixed = computed(() => FixedNumber.fromValue(props.amount, token.decimals, {
+const fixed = computed(() => FixedNumber.fromValue(props.amount, token.d, {
   width: 256,
-  decimals: token.decimals
+  decimals: token.d
 }))
 const imageSrc = computed(() => token.image)
 </script>

src/components/Vault.vue

@@ -53,8 +53,7 @@
         Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}
       </v-card-title> <!-- todo vault nicknames -->
       <v-card-subtitle v-if="exists" class="overflow-x-hidden">
-        <copy-button :text="addr"/>
-        {{ addr }}
+        <copy-button :text="addr">{{addr}}</copy-button>
       </v-card-subtitle>
       <v-card-text v-if="empty">
         <!--

src/components/chart/ChartOrders.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="d-flex flex-column h-100">
-    <toolbar title="Orders" icon="mdi-format-list-bulleted-square">
-    </toolbar>
-    <orders-view/>
-  </div>
+  <toolbar-pane title="Orders" icon="mdi-format-list-bulleted-square">
+    <needs-provider>
+      <needs-signer>
+        <orders/>
+      </needs-signer>
+    </needs-provider>
+  </toolbar-pane>
 </template>
 
 <script setup>
 
-import Toolbar from "@/components/chart/Toolbar.vue";
-import OrdersView from "@/views/OrdersView.vue";
+import ToolbarPane from "@/components/chart/ToolbarPane.vue";
+import NeedsProvider from "@/components/NeedsProvider.vue";
+import Orders from "@/components/Orders.vue";
+import NeedsSigner from "@/components/NeedsSigner.vue";
 </script>
 
 <style scoped lang="scss">

src/components/chart/ChartPlaceOrder.vue

@@ -1,29 +1,27 @@
 <template>
-  <div class="d-flex flex-column h-100">
-    <toolbar>
-      <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
-      <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
-             :color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing">
-        Place Order
-      </v-btn>
-      <v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
-    </toolbar>
-    <v-dialog v-model="showCancel" max-width="300">
-      <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
-        <v-card-actions>
-          <v-spacer/>
-          <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
-          <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
-    <div class="overflow-y-auto">
-        <template v-for="o in co.orders">
-          <chart-order :order="o"/>
-        </template>
-    </div>
-  </div>
+    <toolbar-pane>
+      <template v-slot:toolbar>
+        <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
+        <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
+               :color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing">
+          Place Order
+        </v-btn>
+        <v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
+      </template>
+    <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
+      <template v-for="o in co.orders">
+        <chart-order :order="o"/>
+      </template>
+      <v-dialog v-model="showCancel" max-width="300">
+        <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
+          <v-card-actions>
+            <v-spacer/>
+            <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
+            <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </toolbar-pane>
 </template>
 
 <script setup>
@@ -38,6 +36,7 @@ import {useTheme} from "vuetify";
 import Toolbar from "@/components/chart/Toolbar.vue";
 import {Exchange, newOrder} from "@/blockchain/orderlib.js";
 import {pendOrder} from "@/blockchain/wallet.js";
+import ToolbarPane from "@/components/chart/ToolbarPane.vue";
 
 const s = useStore()
 const co = useChartOrderStore()

src/components/chart/ChartVault.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="d-flex flex-column h-100">
-    <toolbar title="Assets" icon="mdi-currency-btc"></toolbar>
+  <toolbar-pane title="Assets" icon="mdi-currency-btc">
     <needs-signer>
       <vault :owner="s.account" :num="0"/>
       <faucet variant="outlined" text="Get Free Testnet Coins!" style="width: 15em"/>
     </needs-signer>
-  </div>
+  </toolbar-pane>
 </template>
 
 <script setup>
@@ -15,6 +14,7 @@ import Vault from "@/components/Vault.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import Faucet from "@/components/Faucet.vue";
 import {useStore} from "@/store/store.js";
+import ToolbarPane from "@/components/chart/ToolbarPane.vue";
 
 const s = useStore()
 

src/components/chart/ToolbarPane.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="d-flex flex-column h-100">
+    <toolbar :title="title" :icon="icon">
+      <slot name="toolbar"/>
+    </toolbar>
+    <div class="overflow-y-auto">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import Toolbar from "@/components/chart/Toolbar.vue";
+
+const props = defineProps(['title', 'icon'])
+
+</script>
+
+<style scoped lang="scss">
+
+</style>