order status updates working

src/components/Orders.vue

@@ -2,22 +2,121 @@
   <v-table>
     <thead>
       <tr>
-        <th></th>
+        <th>#</th>
+        <th>Buy Token</th>
+        <th>Sell Token</th>
+        <th>Amount</th>
+        <th>Filled</th>
+        <th>Remaining</th>
+        <th>Average Price</th>
+        <th>&nbsp;</th> <!-- actions -->
       </tr>
     </thead>
     <tbody>
-      <tr v-for="order in orders">
-        <td></td>
+      <tr v-for="[index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avgPrice] in orders">
+        <td>{{parseInt(index)+1}}</td>
+        <td>{{tokenSymbol(inTokenAddr)}}</td>
+        <td>{{tokenSymbol(outTokenAddr)}}</td>
+        <td>{{tokenAmount(amountTokenAddr, amount)}}</td>
+        <td>{{tokenAmount(amountTokenAddr, filled)}}</td>
+        <td>{{tokenAmount(amountTokenAddr, amount-filled)}}</td>
+        <td>
+          {{pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)}}
+          <btn v-if="pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)!==''" size="small"
+               @click="inverted[[vaultAddr,index]] = !inverted[[vaultAddr,index]]">
+            {{pair(inTokenAddr, outTokenAddr, vaultAddr,index)}}
+          </btn>
+        </td>
       </tr>
     </tbody>
   </v-table>
 </template>
 
 <script setup>
+import {FixedNumber} from "ethers";
 import {useStore} from "@/store/store";
+import {computed, reactive} from "vue";
+import {token} from "@/blockchain/token.js";
+import Btn from "@/components/Btn.vue"
 
 const s = useStore()
-const orders = 0; // todo tim here
+const props = defineProps(['vault'])
+const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
+const inverted = reactive({})
+
+function tokenSymbol(addr) {
+  const t = token(addr)
+  return t ? t.symbol : addr
+}
+
+function tokenAmount(tokenAddr, amount) {
+  const t = token(tokenAddr)
+  if( !t )
+    return ''
+  const amt = FixedNumber.fromValue(amount, t.decimals, {width:256, decimals:t.decimals, signed:false})
+  return `${amt} ${t.symbol}`
+}
+
+// todo create a Price component that keeps inversion flags in the store and defaults to stablecoins as the quote
+function pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, price) {
+  if( price === null )
+    return ''
+  const inToken = token(inTokenAddr)
+  const outToken = token(outTokenAddr)
+  if( !inToken || !outToken )
+    return ''
+
+  console.log('inout tokens', inToken, outToken)
+  console.log('price1', price, outToken.decimals, inToken.decimals)
+  const decimals = outToken.decimals-inToken.decimals
+  if( decimals > 0 )
+    price /= 10 ** decimals
+  else
+    price *= 10 ** -decimals
+  console.log('price2', price)
+  const invertedKey = [vaultAddr,index];
+  if( !(invertedKey in inverted) ) {
+    // todo prefer stablecoins as the quote asset
+    inverted[invertedKey] = false
+  }
+  const inv = inverted[invertedKey]
+  return inv ? (1 / price).toPrecision(5) : price.toPrecision(5)
+}
+
+function pair(inTokenAddr, outTokenAddr, vaultAddr, index) {
+  const inToken = token(inTokenAddr)
+  const outToken = token(outTokenAddr)
+  return !inToken || !outToken ? null : inverted[[vaultAddr,index]] ?
+      outToken.symbol+'/'+inToken.symbol : inToken.symbol+'/'+outToken.symbol
+}
+
+const orders = computed(()=>{
+  if( !(vaultAddr.value in s.orders) )
+    return {}
+  const result = []
+  for( const [index,status] of Object.entries(s.orders[vaultAddr.value]) ) {
+    console.log('order status', status)
+    // [index, symbolA, symbolB, amount, amountSymbol, filled]
+    const inTokenAddr = status[0][0]
+    const outTokenAddr = status[0][1]
+    const amountIsInput = !!(status[0][4])
+    const amountTokenAddr = amountIsInput ? inTokenAddr : outTokenAddr
+    console.log('getamount', status[0][3])
+    const amount = status[0][3]
+    console.log('amount', amount)
+    console.log('getfilled', amountIsInput ? status[4] : status[5])
+    const filled = amountIsInput ? status[4] : status[5]
+    console.log('filled', filled)
+    const amountIn = BigInt(status[4])
+    const amountOut = BigInt(status[5])
+    const fmtX18 = {decimals:18, width: 256, signed:false};
+    const avg = !amountIn || !amountOut ? null :
+        FixedNumber.fromValue(status[5],0, fmtX18).div(FixedNumber.fromValue(status[4], 0, fmtX18))
+    result.push([index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg])
+  }
+  console.log('result', result)
+  return result
+})
 
 </script>