ordershapes

src/components/Status.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-data-table :headers="datatableHeaders" :items="orders" item-value="id"
-                  item-selectable="selectable" :show-select="false" :show-expand="true">
+                  :show-select="true" :show-expand="true" v-model="selected">
       <template v-slot:item.startTime="{ value }">{{ timestampString(value) }}</template>
       <template v-slot:item.input="{ item }">
         <span v-if="item.order.amountIsInput">
@@ -83,59 +83,62 @@
 <!--        </btn>-->
 <!--      </template>-->
       <template v-slot:expanded-row="{item}">
-        <tr>
-          <td>&nbsp;</td>
-          <td colspan="100">
-            <v-table>
-              <!--
-                          <thead>
-                          <tr>
-                            <th></th>
-                            <th>Filled</th>
-                            <th></th>
-                          </tr>
-                          </thead>
-              -->
-              <tbody>
-              <tr v-for="(t, i) in item.order.tranches">
-                <td class="text-right">Tranche {{ i + 1 }}</td>
-                <td class="text-center w-33">
-                  <suspense>
-                    <span v-if="item.state > OrderState.Signing">
-                      <pulse :touch="item.trancheStatus[i].filled">
-                        <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.trancheStatus[i].filled" :raw="true"/>
-                      </pulse>
-                      /
-                    </span>
-                  </suspense>
-                  <suspense>
-                    <span>
-                      <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
-                    </span>
-                  </suspense>
-                </td>
-                <td class="d-flex align-center text-left">
-                  <!-- todo describe rate limits -->
-                  <div class="text-right">
-                    <div class="mx-3">{{ describeTrancheTime(item, i, true) }}</div>
-                    <div class="mx-3">{{ describeTrancheTime(item, i, false) }}</div>
-                  </div>
-                  <div>
-                    <div class="mx-3" v-if="t.marketOrder">market order</div>
-                    <line-price class="mx-3" v-if="!t.marketOrder"
-                                :base="item.token0" :quote="item.token1"
-                                :b="t.minLine.intercept" :m="t.minLine.slope" :is-min="true"
-                                :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
-                    <line-price class="mx-3" v-if="!t.marketOrder"
-                                :base="item.token0" :quote="item.token1"
-                                :b="t.maxLine.intercept" :m="t.maxLine.slope" :is-min="false"
-                                :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
-                  </div>
-                </td>
-              </tr>
-              </tbody>
-            </v-table>
+        <tr v-for="(t, i) in item.order.tranches">
+          <td class="text-right">
+            Tranche {{ i + 1 }}
+            <div class="text-right">
+              <div v-if="s.clock < item.trancheStatus[i].startTime">
+                Activates {{timestampString(item.trancheStatus[i].startTime)}}
+              </div>
+              <div v-if="item.trancheStatus[i].endTime<DISTANT_FUTURE">
+                Expires {{timestampString(item.trancheStatus[i].endTime)}}
+              </div>
+            </div>
+            <div>
+              <div class="mx-3" v-if="t.marketOrder">market order</div>
+              <line-price class="mx-3" v-if="!t.marketOrder"
+                          :base="item.token0" :quote="item.token1"
+                          :b="t.minLine.intercept" :m="t.minLine.slope" :is-min="true"
+                          :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
+              <line-price class="mx-3" v-if="!t.marketOrder"
+                          :base="item.token0" :quote="item.token1"
+                          :b="t.maxLine.intercept" :m="t.maxLine.slope" :is-min="false"
+                          :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
+            </div>
+
           </td>
+          <td class="text-center w-33">
+            <suspense>
+              <span v-if="item.state > OrderState.Signing">
+                <pulse :touch="item.trancheStatus[i].filledIn">
+                  <token-amount :chain-id="item.chainId" :addr="item.order.tokenIn" :amount="item.trancheStatus[i].filledIn" :raw="true"/>
+                </pulse>
+              </span>
+            </suspense>
+            <suspense>
+              <span v-if="item.order.amountIsInput">
+                /
+                <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
+              </span>
+            </suspense>
+          </td>
+          <td class="text-center w-33">
+            <suspense>
+              <span v-if="item.state > OrderState.Signing">
+                <pulse :touch="item.trancheStatus[i].filledOut">
+                  <token-amount :chain-id="item.chainId" :addr="item.order.tokenOut" :amount="item.trancheStatus[i].filledOut" :raw="true"/>
+                </pulse>
+              </span>
+            </suspense>
+            <suspense>
+              <span v-if="!item.order.amountIsInput">
+                /
+                <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
+              </span>
+            </suspense>
+          </td>
+          <td>avg price</td>
+          <td>status</td>
         </tr>
       </template>
     </v-data-table>
@@ -146,21 +149,54 @@
 import LinePrice from "@/components/LinePrice.vue";
 import {FixedNumber} from "ethers";
 import {useStore} from "@/store/store";
-import {computed, defineAsyncComponent, ref} from "vue";
+import {computed, defineAsyncComponent, ref, watch, watchEffect} from "vue";
 import Btn from "@/components/Btn.vue"
 import {cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
 import {timestampString} from "@/misc.js";
-import {isOpen, OrderState} from "@/blockchain/orderlib.js";
+import {DISTANT_FUTURE, isOpen, OrderState} from "@/blockchain/orderlib.js";
 import Pulse from "@/components/Pulse.vue";
+import {OrderShapes} from "@/charts/ordershapes.js";
+import {useChartOrderStore} from "@/orderbuild.js";
+import {lookupSymbol} from "@/charts/datafeed.js";
 
 const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
 const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
 const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
 
 const s = useStore()
+const co = useChartOrderStore()
 const ws = useWalletStore()
 const props = defineProps(['vault'])
 const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
+const selected = ref([])
+watch(selected, ()=>{
+  const statusIndex = {}
+  for (const order of orders.value)
+    statusIndex[order.id] = order
+  const selectedIndex = {}
+  for (const id of selected.value) {
+    selectedIndex[id] = true
+    const status = statusIndex[id];
+    if (!(id in orderShapes)) {
+      let base = status.order.tokenIn
+      let quote = status.order.tokenOut
+      if (base > quote)
+        [base, quote] = [quote, base]
+	    const symbolKey = `${base}/${quote}`
+      const symbol = lookupSymbol(symbolKey)
+      orderShapes[id] = new OrderShapes(symbol, status)
+    }
+  }
+  // now delete old shapes
+  const keys = [...Object.keys(orderShapes)]
+  for (const id of keys) {
+    if (!(id in selectedIndex)) {
+      orderShapes[id].delete()
+      delete orderShapes[id]
+    }
+  }
+})
+const orderShapes = {}
 
 
 const datatableHeaders = [
@@ -235,7 +271,7 @@ const orders = computed(()=>{
       const st = status
       const o = st.order
       st.order = o
-      console.log('order status', st)
+      // console.log('order status', st)
       result.push(st)
       st.id = `${vault}|${index}`
       st.index = parseInt(index)
@@ -249,7 +285,7 @@ const orders = computed(()=>{
 */
       const fmtX18 = {decimals: 18, width: 256, signed: false};
       st.filled = o.amountIsInput ? st.filledIn : st.filledOut
-      if(BigInt(st.filled) === 0n)
+      if(st.filled === 0n)
         st.avg = null
       else {
         st.avg = FixedNumber.fromValue(status.filledOut, 0, fmtX18)
@@ -263,25 +299,32 @@ const orders = computed(()=>{
       st.token0 = o.tokenIn < o.tokenOut ? o.tokenIn : o.tokenOut
       st.token1 = o.tokenIn < o.tokenOut ? o.tokenOut : o.tokenIn
       for( const ts of st.trancheStatus ) {
-        ts.filledIn = BigInt(ts.filledIn)
-        ts.filledOut = BigInt(ts.filledOut)
-        ts.filled = o.amountIsInput ? ts.filledIn : ts.filledOut
+        let filledIn = 0n
+        let filledOut = 0n
+        for( const f of ts.fills ) {
+          filledIn += f.filledIn
+          filledOut += f.filledOut
+        }
+        ts.filledIn = filledIn
+        ts.filledOut = filledOut
+        ts.filled = o.amountIsInput ? filledIn : filledOut
       }
     }
   }
   result.sort((a,b)=>b.startTime-a.startTime)
-  console.log('orders', result)
+  // console.log('orders', result)
   return result
 })
 
 function describeTrancheTime(st, trancheIndex, isStart) {
   const t = st.order.tranches[trancheIndex]
   const ts = st.trancheStatus[trancheIndex]
+  console.log('describeTT', t, ts)
   let result = ''
   if( t.minIsBarrier || t.maxIsBarrier )
     return 'barrier'
   const now = s.clock
-  if( isStart && t.startTime > 0 ) {
+  if( isStart && ts.activationTime > 0 ) {
     const start = t.startTimeIsRelative ? st.startTime + t.startTime : t.startTime
     result += now < start ? ts.activationTime < now ? 'Rate Limited ' : 'Activates ' : 'Activated '
     result += timestampString(ts.activationTime) + ' '