orderbuild fixes; tranche table work; ordershapes still broken

src/components/Status.vue

@@ -31,12 +31,9 @@
             </suspense>
             /
           </span>
-          <suspense>
-            <token-amount :chain-id="item.chainId" :addr="item.order.tokenOut" :amount="item.order.amount"/>
-          </suspense>
         </span>
         <suspense>
-          <token-symbol :addr="item.order.tokenOut" v-if="item.order.amountIsInput"/>
+          <token-amount :chain-id="item.chainId" :addr="item.order.tokenOut" :amount="item.order.amount"/>
         </suspense>
       </template>
 <!--
@@ -84,7 +81,7 @@
 <!--      </template>-->
       <template v-slot:expanded-row="{item}">
         <tr v-for="(t, i) in item.order.tranches">
-          <td class="text-right">
+          <td class="text-right" colspan="2">
             Tranche {{ i + 1 }}
             <div class="text-right">
               <div v-if="s.clock < item.trancheStatus[i].startTime">
@@ -99,15 +96,15 @@
               <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"/>
+                          :buy="item.order.tokenIn===item.token1" :show-btn="false"/>
               <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"/>
+                          :buy="item.order.tokenIn===item.token1" :show-btn="false"/>
             </div>
 
           </td>
-          <td class="text-center w-33">
+          <td class="text-right">
             <suspense>
               <span v-if="item.state > OrderState.Signing">
                 <pulse :touch="item.trancheStatus[i].filledIn">
@@ -122,12 +119,13 @@
               </span>
             </suspense>
           </td>
-          <td class="text-center w-33">
+          <td class="text-right 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>
+                <token-symbol :addr="item.order.tokenOut"/>
               </span>
             </suspense>
             <suspense>
@@ -137,8 +135,12 @@
               </span>
             </suspense>
           </td>
-          <td>avg price</td>
-          <td>status</td>
+          <td class="text-right">
+            <suspense>
+              <pair-price :base="item.order.tokenIn" :quote="item.order.tokenOut" :value="item.trancheStatus[i].avg" :show-btn="false"/>
+            </suspense>
+          </td>
+          <td>{{ item.trancheStatus[i].status }}(todo:status)</td>
         </tr>
       </template>
     </v-data-table>
@@ -149,7 +151,7 @@
 import LinePrice from "@/components/LinePrice.vue";
 import {FixedNumber} from "ethers";
 import {useStore} from "@/store/store";
-import {computed, defineAsyncComponent, ref, watch, watchEffect} from "vue";
+import {computed, defineAsyncComponent, onUnmounted, ref, watch} from "vue";
 import Btn from "@/components/Btn.vue"
 import {cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
 import {timestampString} from "@/misc.js";
@@ -158,6 +160,8 @@ import Pulse from "@/components/Pulse.vue";
 import {OrderShapes} from "@/charts/ordershapes.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import {lookupSymbol} from "@/charts/datafeed.js";
+import {setSymbol} from "@/charts/chart.js";
+import {uniswapV3AveragePrice} from "@/blockchain/uniswap.js";
 
 const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
 const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
@@ -169,6 +173,7 @@ 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)
@@ -184,6 +189,10 @@ watch(selected, ()=>{
         [base, quote] = [quote, base]
 	    const symbolKey = `${base}/${quote}`
       const symbol = lookupSymbol(symbolKey)
+      if (co.selectedSymbol.ticker !== symbolKey) {
+        co.selectedSymbol = symbol
+        setSymbol(symbol)
+      }
       orderShapes[id] = new OrderShapes(symbol, status)
     }
   }
@@ -196,8 +205,13 @@ watch(selected, ()=>{
     }
   }
 })
+
 const orderShapes = {}
 
+onUnmounted(()=>{
+  for (const s of Object.values(orderShapes))
+    s.delete()
+})
 
 const datatableHeaders = [
   {title: 'Date', align: 'start', key: 'start'},
@@ -283,14 +297,12 @@ const orders = computed(()=>{
         return t
       })
 */
-      const fmtX18 = {decimals: 18, width: 256, signed: false};
       st.filled = o.amountIsInput ? st.filledIn : st.filledOut
+      const fee = st.order.route.fee;
       if(st.filled === 0n)
         st.avg = null
-      else {
-        st.avg = FixedNumber.fromValue(status.filledOut, 0, fmtX18)
-            .div(FixedNumber.fromValue(status.filledIn, 0, fmtX18)).toUnsafeFloat() * (1+st.order.route.fee/1_000_000);
-      }
+      else
+        st.avg = uniswapV3AveragePrice(status.filledIn, status.filledOut, fee)
       st.amountToken = o.amountIsInput ? o.tokenIn : o.tokenOut
       st.input = o.amountIsInput ? o.amount : 0
       st.output = !o.amountIsInput ? o.amount : 0
@@ -308,6 +320,7 @@ const orders = computed(()=>{
         ts.filledIn = filledIn
         ts.filledOut = filledOut
         ts.filled = o.amountIsInput ? filledIn : filledOut
+        ts.avg = uniswapV3AveragePrice(filledIn, filledOut, fee)
       }
     }
   }