ordershapes

src/blockchain/orderlib.js

@@ -159,11 +159,22 @@ export function parseOrderStatus(chainId, status) {
     return result
 }
 
-function parseTrancheStatus(obj) {
+function parseFill(obj) {
-    let [filledIn, filledOut, activationTime, startTime, endTime,] = obj
+    let [tx, time, filledIn, filledOut, fee] = obj
     filledIn = BigInt(filledIn)
     filledOut = BigInt(filledOut)
-    return {filledIn, filledOut, activationTime, startTime, endTime}
+    fee = BigInt(fee)
+    return {tx, time, filledIn, filledOut, fee}
+}
+
+function parseTrancheStatus(obj) {
+    let [filledIn, filledOut, activationTime, startTime, endTime, rawFills,] = obj
+    filledIn = BigInt(filledIn)
+    filledOut = BigInt(filledOut)
+    const fills = []
+    for (const fill of rawFills)
+        fills.push(parseFill(fill))
+    return {filledIn, filledOut, activationTime, startTime, endTime, fills}
 }
 
 export function parseOrder(order) {
@@ -210,14 +221,16 @@ export function parseTranche(tranche) {
         minLine,
         maxLine,
     ] = tranche
-    minLine = {intercept: minLine.intercept, slope: minLine.slope }
+    const [minB,minS] = minLine
-    maxLine = {intercept: maxLine.intercept, slope: maxLine.slope }
+    minLine = {intercept: minB, slope: minS }
+    const [maxB,maxS] = maxLine
+    maxLine = {intercept: maxB, slope: maxS }
     const result = {
         fraction, startTimeIsRelative, endTimeIsRelative, minIsBarrier, maxIsBarrier, marketOrder,
         minIsRatio, maxIsRatio, rateLimitFraction, rateLimitPeriod,
         startTime, endTime, minLine, maxLine,
     }
-    console.log('parseTranche', tranche, result)
+    // console.log('parseTranche', tranche, result)
     return result
 }
 

src/blockchain/wallet.js

@@ -384,7 +384,7 @@ function pendOrderAsTransaction(pend) {
       const [orderFee, gasFee] = await placementFee(pend.vault, pend.order)
       pend.fee = orderFee + gasFee
     }
-    console.log('placing order', pend.id, pend.order)
+    console.log('placing order', pend.id, pend.fee, pend.order)
     const tx = await contract.placeDexorder(pend.order, {value:pend.fee})
     pend.tx = tx
     pend.state = PendingOrderState.Sent

src/charts/chart.js

@@ -3,7 +3,6 @@ import {invokeCallbacks, prototype} from "@/common.js";
 import {DataFeed, initFeeDropdown, lookupSymbol} from "@/charts/datafeed.js";
 import {intervalToSeconds, SingletonCoroutine} from "@/misc.js";
 import {useStore} from "@/store/store.js";
-import {dirtyPoints} from "@/charts/chart-misc.js";
 
 export let widget = null
 export let chart = null
@@ -162,12 +161,17 @@ export function drawShape(shapeType, ...callbacks) {
 
 
 export function createShape(shapeType, points, options={}, ...callbacks) {
+    const chart = widget.activeChart()
     drawingCallbacks = null
     cancelDrawing()
-    options.shape = shapeType.code
+    if (typeof shapeType === 'string' )
+        options.shape = shapeType
+    else
+        options.shape = shapeType.code
     // programatically adds a shape to the chart
     let shapeId
     try {
+        console.log('creating shape', points, options)
         if (points.time || points.price)
             shapeId = chart.createShape(points, options)
         else if (points.length === 1)

src/charts/datafeed.js

@@ -144,7 +144,7 @@ function addSymbol(p, base, quote, inverted) {
 	const description = `${base.n} / ${quote.n}`
 	const type = 'swap'
 	const pools = [[p.a, p.f]]
-	const decimals = p.d
+	const decimals = inverted ? -p.d : p.d
 	_symbols[key] = {
 		ticker: key, full_name, symbol, description,
 		exchange, type, inverted, base, quote, pools, decimals, x:p.x
@@ -221,7 +221,7 @@ function getAllSymbols() {
 	return _symbols
 }
 
-export function lookupSymbol(key) { // lookup by fullname
+export function lookupSymbol(key) { // lookup by ticker which is "0xbaseAddress/0xquoteAddress"
 	return getAllSymbols()[key]
 }
 

src/charts/ordershapes.js

@@ -0,0 +1,122 @@
+import {DISTANT_FUTURE, DISTANT_PAST} from "@/blockchain/orderlib.js";
+import {DLine, HLine} from "@/charts/shape.js";
+import {createShape, deleteShapeId} from "@/charts/chart.js";
+import {allocationText} from "@/orderbuild.js";
+
+export class OrderShapes {
+    constructor(symbol, orderStatus) {
+        this.symbol = symbol
+        this.status = orderStatus
+        this.trancheShapes = [];
+        this.update(orderStatus)
+    }
+
+    update(orderStatus) {
+        // todo delete old shapes
+        for (const old of this.trancheShapes)
+            old.delete()
+        this.status = orderStatus
+        this.trancheShapes = [];
+        for (let i = 0; i < orderStatus.trancheStatus.length; i++)
+            this.trancheShapes.push(new TrancheShapes(this.symbol, this.status, i));
+        // todo TV shape group
+    }
+
+    show() {for (const t of this.trancheShapes) t.show();}
+    hide() {for (const t of this.trancheShapes) t.hide();}
+    delete() {for (const t of this.trancheShapes) t.delete(); this.shapes=[]}
+}
+
+
+class TrancheShapes {
+    constructor(symbol, orderStatus, trancheIndex) {
+        this.symbol = symbol
+        this.status = orderStatus
+        this.trancheIndex = trancheIndex
+        this.tranche = orderStatus.order.tranches[trancheIndex]
+        this.shapes = []
+        this.fills = []
+        this.createShapes();
+    }
+
+    createShapes() {
+        // todo amounts
+        const t = this.tranche
+        // console.log('create tranche shapes', t)
+        if (t.marketOrder) {
+            if (t.startTime !== DISTANT_PAST) {
+                // todo vertical line
+            }
+        } else {
+            // check lines
+            this.createLine(t.minLine.slope, t.minLine.intercept);
+            this.createLine(t.maxLine.slope, t.maxLine.intercept);
+        }
+        for (const f of this.status.trancheStatus[this.trancheIndex].fills)
+            this.createFillPoint(f)
+    }
+
+    createFillPoint(f) {
+        // console.log('draw fill', f, this.symbol)
+        const order = this.status.order;
+        let buy = order.tokenIn === this.symbol.quote.a
+        if (this.symbol.inverted)
+            buy = !buy
+        const time = f.time
+        const out = Number(f.filledOut) * (1+this.status.order.route.fee/1000000)
+        let price = buy ?
+            Number(f.filledIn) / out * 10**this.symbol.decimals :
+            out / Number(f.filledIn) * 10**this.symbol.decimals
+        // console.log('price', price)
+        const channel = buy?'low':'high';
+        const text = (buy ? 'Buy ' : 'Sell ') + allocationText(null, f.filled, '')
+        const s = createShape(buy?'arrow_up':'arrow_down', {time, price}, {channel,text})
+        console.log('created fill shape at', time, price)
+        this.fills.push(s)
+    }
+
+    createLine(slope, intercept) {
+        const t = this.tranche
+        const status = this.status
+        const symbol = this.symbol
+        const scale = 10**symbol.decimals;
+        const buy = status.order.tokenIn === this.symbol.quote.a
+        const color = buy ? 'green' : 'red'
+        if (intercept !== 0 || slope !== 0) {
+            // line active
+            if (slope === 0) {
+                // horizontal line
+                const s = new HLine({
+                    price: intercept * scale,
+                    color,
+                    // todo allocation maxAllocation amount amountSymbol
+                })
+                this.shapes.push(s)
+            } else {
+                // diagonal line
+                const startPrice = intercept + slope * t.startTime;
+                const endPrice = intercept + slope * t.endTime;
+                const s = new DLine({
+                    pointA: {time: t.startTime, price: startPrice},
+                    pointB: {time: t.endTime, price: endPrice},
+                    extendLeft: t.startTime === DISTANT_PAST,
+                    extendRight: t.endTime === DISTANT_FUTURE,
+                    color,
+                    // todo allocation maxAllocation amount amountSymbol
+                })
+                this.shapes.push(s)
+            }
+        }
+    }
+
+    // todo like this?
+    show() {for (const s of this.shapes) s.show();}
+    hide() {for (const s of this.shapes) s.hide();}
+    delete() {
+        for (const s of this.shapes)
+            s.delete();
+        this.shapes=[]
+        for (const s of this.fills)
+            deleteShapeId(s)
+    }
+}

src/common.js

@@ -131,3 +131,5 @@ export function abiPath(name) {
     const file = files[name]
     return `${file??name}.sol/${name}.json`
 }
+
+

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>
+        <tr v-for="(t, i) in item.order.tranches">
-          <td>&nbsp;</td>
+          <td class="text-right">
-          <td colspan="100">
+            Tranche {{ i + 1 }}
-            <v-table>
+            <div class="text-right">
-              <!--
+              <div v-if="s.clock < item.trancheStatus[i].startTime">
-                          <thead>
+                Activates {{timestampString(item.trancheStatus[i].startTime)}}
-                          <tr>
+              </div>
-                            <th></th>
+              <div v-if="item.trancheStatus[i].endTime<DISTANT_FUTURE">
-                            <th>Filled</th>
+                Expires {{timestampString(item.trancheStatus[i].endTime)}}
-                            <th></th>
+              </div>
-                          </tr>
+            </div>
-                          </thead>
+            <div>
-              -->
+              <div class="mx-3" v-if="t.marketOrder">market order</div>
-              <tbody>
+              <line-price class="mx-3" v-if="!t.marketOrder"
-              <tr v-for="(t, i) in item.order.tranches">
+                          :base="item.token0" :quote="item.token1"
-                <td class="text-right">Tranche {{ i + 1 }}</td>
+                          :b="t.minLine.intercept" :m="t.minLine.slope" :is-min="true"
-                <td class="text-center w-33">
+                          :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
-                  <suspense>
+              <line-price class="mx-3" v-if="!t.marketOrder"
-                    <span v-if="item.state > OrderState.Signing">
+                          :base="item.token0" :quote="item.token1"
-                      <pulse :touch="item.trancheStatus[i].filled">
+                          :b="t.maxLine.intercept" :m="t.maxLine.slope" :is-min="false"
-                        <token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.trancheStatus[i].filled" :raw="true"/>
+                          :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
-                      </pulse>
+            </div>
-                      /
+
-                    </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>
           </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)
+        let filledIn = 0n
-        ts.filledOut = BigInt(ts.filledOut)
+        let filledOut = 0n
-        ts.filled = o.amountIsInput ? ts.filledIn : ts.filledOut
+        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) + ' '

src/components/chart/MarketBuilder.vue

@@ -37,7 +37,7 @@ const slippage = computed({
 })
 
 function buildTranches() {
-  return [newTranche({slippage: slippage.value})]
+  return [newTranche({slippage: slippage.value/100})]
 }
 
 onMounted(() => builderFuncs[props.builder.id] = buildTranches)

src/orderbuild.js

@@ -139,21 +139,22 @@ export function linePointsValue(time0, price0, time1, price1, unixTime = null) {
 
 
 export function applyLinePoint(tranche, symbol, buy, price0) {
-    price0 *= 10 ** symbol.decimals
+    console.log('applyLinePoint', buy?'BUY':'SELL', symbol, price0)
     if (symbol.inverted)
         price0 = 1/price0
+    price0 *= 10 ** -symbol.decimals
     applyLine(tranche, symbol, buy, price0, 0)
 }
 
 
 export function applyLinePoints(tranche, symbol, buy, time0, price0, time1, price1) {
-    const scale = 10 ** symbol.decimals
-    price0 *= scale
-    price1 *= scale
     if (symbol.inverted) {
         price0 = 1/price0
         price1 = 1/price1
     }
+    const scale = 10 ** -symbol.decimals
+    price0 *= scale
+    price1 *= scale
     const [intercept, slope] = computeInterceptSlope(time0, price0, time1, price1);
     applyLine(tranche, symbol, buy, intercept, slope)
 }
@@ -162,10 +163,10 @@ export function applyLinePoints(tranche, symbol, buy, time0, price0, time1, pric
 function applyLine(tranche, symbol, buy, intercept, slope) {
     let m = slope
     let b = intercept
-    console.log('applyLine current line value', m*timestamp()+b, 1./(m*timestamp()+b))
+    const isMinimum = !buy;
+    console.log('applyLine current line value', isMinimum?'min':'max', m*timestamp()+b, 1./(m*timestamp()+b))
     m = encodeIEE754(m)
     b = encodeIEE754(b)
-    const isMinimum = symbol.inverted===buy;
     if (isMinimum) {
         tranche.minLine.intercept = b;
         tranche.minLine.slope = m;
@@ -250,13 +251,15 @@ export function weightColors(weights, color) {
 }
 
 export function allocationText(weight, amount, symbol) {
-    amount = Number(amount)
+    const hasAmount = amount!==null && amount!==undefined && amount > 0
-    weight = Number(weight)
+    if (hasAmount)
-    let text = ''
+        amount = Number(amount)
     const hasWeight = weight!==null && weight!==undefined
+    if (hasWeight)
+        weight = Number(weight)
+    let text = ''
     if (hasWeight)
         text += `${(weight * 100).toFixed(1)}%`
-    const hasAmount = amount!==null && amount!==undefined && amount > 0
     const hasSymbol = symbol!==null && symbol!==undefined
     if (hasAmount && hasSymbol) {
         if (hasWeight)

src/socket.js

@@ -95,13 +95,29 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
 
     const status = s.orders[vault][orderIndex]
     console.log('apply fills', status, filled)
-    status.filledIn = BigInt(filled[0][0])
+
-    status.filledOut = BigInt(filled[0][1])
+    let orderIn = 0n
-    for( const i in filled[1] ) {
+    let orderOut = 0n
-        const [filledIn, filledOut] = filled[1][i]
+    const ts = status.trancheStatus[i]
-        status.trancheStatus[i].filledIn = BigInt(filledIn)
+    for (const i in filled) {
-        status.trancheStatus[i].filledOut = BigInt(filledOut)
+        let filledIn = 0n
+        let filledOut = 0n
+        const [activationTime, fills] = filled[i];
+        ts.fills = []
+        for (const fill of fills) {
+            const [tx, time, fi, fo, fee] = fill
+            filledIn += fi
+            filledOut += fo
+            ts.fills.push({tx, time, filledIn:fi, filledOut:fo, fee, filled:status.order.amountIsInput?fi:fo})
+        }
+        ts.filledIn = filledIn
+        ts.filledOut = filledOut
+        ts.activationTime = activationTime
+        orderIn += filledIn
+        orderOut += filledOut
     }
-    // s.orders[vault][orderIndex] = status
+    status[7] = orderIn.toString()
-    console.log('applied fills', status)
+    status[8] = orderOut.toString()
+
+    console.log('apply fills completed', status)
 })