order page updates

src/blockchain/token.js

@@ -7,7 +7,12 @@ import {metadata, metadataMap} from "@/version.js";
 
 // synchronous version may return null but will trigger a lookup
 export function token(chainId, addr) {
-    const found = metadataMap[chainId][addr]
+    const chainMd = metadataMap[chainId];
+    if (chainMd===undefined) {
+        console.warn('no metadata for chain', chainId)
+        return null
+    }
+    const found = chainMd[addr]
     return found ? found : null
 }
 

src/components/Orders.vue

@@ -4,15 +4,30 @@
                   item-selectable="selectable" :show-select="false" :show-expand="true">
       <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
       <template v-slot:item.input="{ item }">
-        <suspense>
+        <suspense v-if="item.order.amountIsInput">
-          <token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/>
+          <span>
+            <token-amount :addr="item.order.tokenIn" :amount="item.filled" :raw="true"/>
+            /
+            <token-amount :addr="item.order.tokenIn" :amount="item.order.amount"/>
+          </span>
+        </suspense>
+        <suspense v-if="!item.order.amountIsInput">
+          <token-symbol :addr="item.order.tokenIn"/>
         </suspense>
       </template>
       <template v-slot:item.output="{ item }">
-        <suspense>
+        <suspense v-if="!item.order.amountIsInput">
-          <token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/>
+          <span>
+            <token-amount :addr="item.order.tokenOut" :amount="item.filled" :raw="true"/>
+            /
+            <token-amount :addr="item.order.tokenOut" :amount="item.order.amount"/>
+          </span>
+        </suspense>
+        <suspense v-if="item.order.amountIsInput">
+          <token-symbol :addr="item.order.tokenOut"/>
         </suspense>
       </template>
+<!--
       <template v-slot:item.remaining="{ item }">
         <suspense>
           <token-amount :addr="item.amountToken" :amount="item.remaining"/>
@@ -23,6 +38,7 @@
           <token-amount :addr="item.amountToken" :amount="item.filled"/>
         </suspense>
       </template>
+-->
       <template v-slot:item.avg="{ item }">
         <pair-price :base-addr="item.order.tokenIn" :quote-addr="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
       </template>
@@ -43,11 +59,11 @@
         </v-chip>
         <v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
       </template>
-      <template v-slot:item.action="{item}">
+<!--      <template v-slot:item.action="{item}">-->
-        <btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red"
+<!--        <btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red"-->
-             @click="cancelOrder(vaultAddr,item.index)">Cancel
+<!--             @click="cancelOrder(vaultAddr,item.index)">Cancel-->
-        </btn>
+<!--        </btn>-->
-      </template>
+<!--      </template>-->
       <template v-slot:expanded-row="{item}">
         <tr>
           <td>&nbsp;</td>
@@ -104,6 +120,7 @@ import NewOrder from "@/components/NewOrder.vue";
 import PairPrice from "@/components/PairPrice.vue";
 
 const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
+const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
 
 const s = useStore()
 const props = defineProps(['vault'])
@@ -127,11 +144,11 @@ const datatableHeaders = [
   {title: 'Date', align: 'start', key: 'start'},
   {title: 'Input', align: 'end', key: 'input'},
   {title: 'Output', align: 'end', key: 'output'},
-  {title: 'Remaining', align: 'end', key: 'remaining'},
+  // {title: 'Remaining', align: 'end', key: 'remaining'},
-  {title: 'Filled', align: 'end', key: 'filled'},
+  // {title: 'Filled', align: 'end', key: 'filled'},
   {title: 'Avg Price', align: 'end', key: 'avg'},
   {title: 'Status', align: 'end', key: 'status'},
-  {title: '', align: 'end', key: 'action'},
+  // {title: '', align: 'end', key: 'action'},
 ];
 
 const orders = computed(()=>{
@@ -236,16 +253,17 @@ function describeTrancheTime(st, isStart, t) {
 function describeTrancheLine(st, isMin, b, m) {
   // todo make this a PairPrice
   if( b===0 && m===0 ) return ''
+  const chainId = useStore().chainId
   console.log('tranche line', isMin, b, m)
   const inverted = st.order.tokenIn > st.order.tokenOut
   const t0 = inverted ? st.order.tokenIn : st.order.tokenOut
   const t1 = !inverted ? st.order.tokenIn : st.order.tokenOut
   if( m !== 0 ) {
     const limit = b + m * s.clock
-    const price = pairPriceAddr(t0, t1, limit);
+    const price = pairPriceAddr(chainId, t0, t1, limit);
     return 'diagonal ' + (price === null ? null : price.toPrecision(5))
   }
-  const price = pairPriceAddr(t0, t1, b)
+  const price = pairPriceAddr(chainId, t0, t1, b)
   return (isMin === st.order.amountIsInput ? 'dont-chase ' : 'limit ') + (price === null ? null : price.toPrecision(5))
 }
 

src/components/PairPrice.vue

@@ -1,7 +1,7 @@
 <template>
   <span>
     {{adjValue}}
-    <btn v-if="showBtn && adjValue!==null" size="small" variant="plain" @click="invert()">{{pair?pair.toPrecision(5):''}}</btn>
+    <btn v-if="showBtn && adjValue!==null" size="small" variant="plain" @click="invert()">{{pair.value?pair.value.toPrecision(5):''}}</btn>
   </span>
   <!--  todo optional pair label and inversion button -->
 </template>
@@ -26,7 +26,7 @@ function invert() {
   prefs.inverted[k] = !prefs.inverted[k]
 }
 
-const adjValue = computed(() => props.value === null || props.value === undefined || !base.value || !quote.value ? null : pairPrice(base.value, quote.value, props.value, props.decimals))
+const adjValue = computed(() => props.value === null || props.value === undefined || !base.value || !quote.value ? null : pairPrice(s.chainId, base.value, quote.value, props.value, props.decimals))
 
 const pair = computed(() => {
   const inToken = props.baseToken ? props.baseToken : token(s.chainId, props.baseAddr)

src/components/TokenChip.vue

@@ -1,7 +1,7 @@
 <template>
   <v-chip>
 <!--    <v-avatar start :image="token.image === null ? '' : token.image"/>-->
-    {{token.symbol}}&nbsp;{{token.name}}
+    {{token.s}}&nbsp;{{token.n}}
   </v-chip>
 </template>
 

src/components/TokenSymbol.vue

@@ -0,0 +1,17 @@
+<template>
+    <span>{{token.s}}</span>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store";
+import {getToken} from "@/blockchain/token.js";
+
+const s = useStore()
+const props = defineProps(['addr'])
+const token = await getToken(s.chainId, props.addr)
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>

src/components/Vault.vue

@@ -49,11 +49,11 @@
       </v-card-text>
     </div>
     <div v-if="s.vaults.length>num" :class="empty?'maxw':''">
-      <v-card-title>
+<!--      <v-card-title>-->
-        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}
+<!--        Your Deposit Address {{ s.vaults.length > 1 ? '#' + (num + 1) : '' }}-->
-      </v-card-title> <!-- todo vault nicknames -->
+<!--      </v-card-title> &lt;!&ndash; todo vault nicknames &ndash;&gt;-->
       <v-card-subtitle v-if="exists" class="overflow-x-hidden">
-        <copy-button :text="addr">{{addr}}</copy-button>
+        <copy-button :text="addr">Deposit Address {{addr}}</copy-button>
       </v-card-subtitle>
       <v-card-text v-if="empty">
         <!--

src/misc.js

@@ -107,8 +107,8 @@ export function pairPriceAddr(chainId, baseTokenAddr, quoteTokenAddr, price) {
 
 
 export function pairPrice(chainId, baseToken, quoteToken, price, decimals = null) {
+    console.warn('pairPrice', chainId, baseToken, quoteToken, price, decimals)
     if (!price) return null
-    console.log('pairPrice', chainId, baseToken, quoteToken, price, decimals)
     if (price === null || price === undefined)
         return price
     if (decimals === null)