From 9e2f11b4215a287a0a1881116fd943f4a7832dbc Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Tue, 26 Mar 2024 14:55:07 -0400
Subject: [PATCH] token metadata fixes for vault and orders view; faucet fix

---
 src/blockchain/token.js                  | 22 ++++++++---
 src/components/CopyButton.vue            | 13 ++++---
 src/components/TokenAmount.vue           |  6 +--
 src/components/TokenRow.vue              | 12 +++---
 src/components/Vault.vue                 |  3 +-
 src/components/chart/ChartOrders.vue     | 18 +++++----
 src/components/chart/ChartPlaceOrder.vue | 49 ++++++++++++------------
 src/components/chart/ChartVault.vue      |  6 +--
 src/components/chart/ToolbarPane.vue     | 22 +++++++++++
 9 files changed, 95 insertions(+), 56 deletions(-)
 create mode 100644 src/components/chart/ToolbarPane.vue

diff --git a/src/blockchain/token.js b/src/blockchain/token.js
index e6c07fe..ee89509 100644
--- a/src/blockchain/token.js
+++ b/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)
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
index b9ac804..36a0035 100644
--- a/src/components/CopyButton.vue
+++ b/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>
diff --git a/src/components/TokenAmount.vue b/src/components/TokenAmount.vue
index ee5d302..e5657d7 100644
--- a/src/components/TokenAmount.vue
+++ b/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>
diff --git a/src/components/TokenRow.vue b/src/components/TokenRow.vue
index c585127..1011faf 100644
--- a/src/components/TokenRow.vue
+++ b/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>
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
index 511e30b..6734855 100644
--- a/src/components/Vault.vue
+++ b/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">
         <!--
diff --git a/src/components/chart/ChartOrders.vue b/src/components/chart/ChartOrders.vue
index 08bbc41..4dfd54d 100644
--- a/src/components/chart/ChartOrders.vue
+++ b/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">
diff --git a/src/components/chart/ChartPlaceOrder.vue b/src/components/chart/ChartPlaceOrder.vue
index 7027572..cc2a6d1 100644
--- a/src/components/chart/ChartPlaceOrder.vue
+++ b/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()
diff --git a/src/components/chart/ChartVault.vue b/src/components/chart/ChartVault.vue
index e5af88c..3ea805e 100644
--- a/src/components/chart/ChartVault.vue
+++ b/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()
 
diff --git a/src/components/chart/ToolbarPane.vue b/src/components/chart/ToolbarPane.vue
new file mode 100644
index 0000000..bc65abf
--- /dev/null
+++ b/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>
\ No newline at end of file