post-order line draw improvements

src/blockchain/contract.js

@@ -31,7 +31,7 @@ export async function queryHelperContract(helper, provider) {
 // use newContract(addr, 'IVaultImpl', provider, 'IVault') to get the ABI from IVault.sol/IVaultImpl.json
 export async function newContract(addr, name, provider) {
     const abi = await abiCache.get(name)
-    console.log(`${name} ABI`, abi)
+    // console.log(`${name} ABI`, abi)
     return new ethers.Contract(addr, abi, provider)
 }
 

src/blockchain/orderlib.js

@@ -1,5 +1,6 @@
 import {uint32max, uint64max} from "@/misc.js";
 import {decodeIEE754, encodeIEE754} from "@/common.js";
+import order from "@/components/Order.vue";
 
 export const MAX_FRACTION = 65535;
 export const NO_CONDITIONAL_ORDER = uint64max;
@@ -151,10 +152,11 @@ export function parseOrderStatus(chainId, status) {
     order = parseOrder(order)
     filledIn = BigInt(filledIn)
     filledOut = BigInt(filledOut)
-    trancheStatus = trancheStatus.map((obj)=>parseTrancheStatus(obj))
+    const filled = order.amountIsInput ? filledIn : filledOut
+    trancheStatus = trancheStatus.map((obj)=>parseTrancheStatus(obj, order.amountIsInput))
     const result = {
         chainId, order, fillFeeHalfBps, state, startTime, startPrice, ocoGroup,
-        filledIn, filledOut, trancheStatus,
+        filledIn, filledOut, filled, trancheStatus,
     };
     console.log('SwapOrderStatus', result)
     return result
@@ -162,20 +164,23 @@ export function parseOrderStatus(chainId, status) {
 
 function parseFill(obj) {
     let [tx, time, filledIn, filledOut, fee] = obj
+    time = new Date(time * 1000)
     filledIn = BigInt(filledIn)
     filledOut = BigInt(filledOut)
+    const filled = obj.amountIsInput ? filledIn : filledOut
     fee = BigInt(fee)
-    return {tx, time, filledIn, filledOut, fee}
+    return {tx, time, filledIn, filledOut, filled, fee}
 }
 
-function parseTrancheStatus(obj) {
+function parseTrancheStatus(obj, amountIsInput) {
     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))
+        fills.push(parseFill(fill, amountIsInput))
-    return {filledIn, filledOut, activationTime, startTime, endTime, fills}
+    const filled = amountIsInput ? filledIn : filledOut
+    return {filledIn, filledOut, filled, activationTime, startTime, endTime, fills}
 }
 
 export function parseOrder(order) {

src/charts/datafeed.js

@@ -240,7 +240,6 @@ function invertTicker(ticker) {
 }
 
 export function lookupSymbol(ticker) { // lookup by ticker which is "0xbaseAddress/0xquoteAddress"
-	// todo tim lookup default base/quote pool
 	const symbols = getAllSymbols();
 	if (!(ticker in symbols)) {
 		// check the inverted symbol

src/charts/ordershapes.js

@@ -1,7 +1,7 @@
-import {DISTANT_FUTURE, DISTANT_PAST} from "@/blockchain/orderlib.js";
+import {DISTANT_FUTURE, DISTANT_PAST, MAX_FRACTION} from "@/blockchain/orderlib.js";
 import {allocationText, DLine, HLine} from "@/charts/shape.js";
 import {createShape, deleteShapeId} from "@/charts/chart.js";
-import {timestamp} from "@/misc.js";
+import {sideColor, timestamp} from "@/misc.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 
 export class OrderShapes {
@@ -16,9 +16,10 @@ export class OrderShapes {
         for (const old of this.trancheShapes)
             old.delete()
         this.status = orderStatus
-        this.trancheShapes = [];
+        this.trancheShapes = []
+        const maxAllocation = Math.max(...orderStatus.order.tranches.map((ts)=>ts.fraction)) / MAX_FRACTION
         for (let i = 0; i < orderStatus.trancheStatus.length; i++)
-            this.trancheShapes.push(new TrancheShapes(this.symbol, this.status, i));
+            this.trancheShapes.push(new TrancheShapes(this.symbol, this.status, i, maxAllocation));
     }
 
     show() {for (const t of this.trancheShapes) t.show();}
@@ -28,8 +29,7 @@ export class OrderShapes {
 
 
 class TrancheShapes {
-    constructor(symbol, orderStatus, trancheIndex) {
+    constructor(symbol, orderStatus, trancheIndex, maxAllocation) {
-        // todo validate base/quote
         if (symbol.inverted !== orderStatus.order.inverted) {
             console.log('OrderShapes.createLine(): symbol has wrong inverson for this order')
             return
@@ -38,14 +38,16 @@ class TrancheShapes {
         this.status = orderStatus
         this.trancheIndex = trancheIndex
         this.tranche = orderStatus.order.tranches[trancheIndex]
+        this.trancheStatus = orderStatus.trancheStatus[trancheIndex]
         this.shapes = []
         this.fills = []
-        this.createShapes();
+        this.maxAllocation = maxAllocation
+        this.createShapes()
     }
 
     createShapes() {
-        // todo amounts
         const t = this.tranche
+
         // console.log('create tranche shapes', t)
         if (t.marketOrder) {
             if (t.startTime !== DISTANT_PAST) {
@@ -53,8 +55,10 @@ class TrancheShapes {
             }
         } else {
             // check lines
-            this.createLine(t.minLine.slope, t.minLine.intercept);
+            const amount = this.status.order.amount * BigInt(t.fraction) / BigInt(MAX_FRACTION)
-            this.createLine(t.maxLine.slope, t.maxLine.intercept);
+            const buy = this.status.order.tokenIn === this.symbol.quote.a
+            this.createLine(t.minLine.slope, t.minLine.intercept, amount, buy);
+            this.createLine(t.maxLine.slope, t.maxLine.intercept, amount, !buy);
         }
         for (const f of this.status.trancheStatus[this.trancheIndex].fills)
             this.createFillPoint(f)
@@ -72,40 +76,52 @@ class TrancheShapes {
             * 10 ** -(amountIsBase ? this.symbol.base.d : this.symbol.quote.d)
         const weight = Number(filledAmount) / Number(this.status.order.amount)
         const amountSymbol = amountIsBase ? this.symbol.base.s : this.symbol.quote.s
-        console.log('fillpoint', buy, filledAmount, this.status.order, this.symbol)
+        // console.log('fillpoint', buy, filledAmount, this.status.order, this.symbol)
         const time = f.time
         const out = Number(f.filledOut) / (1-this.status.order.route.fee/1000000)
         let price = out / Number(f.filledIn)
         if (buy)
             price = 1/price
         price *= scale
-        console.log('price', price)
+        // console.log('price', price)
         const channel = buy?'low':'high';
         const text = (buy ? 'Buy ' : 'Sell ') + allocationText(weight, amount, amountSymbol, '\n')
         const s = createShape(buy?'arrow_up':'arrow_down', {time, price}, {channel,text,lock:true})
-        console.log('created fill shape at', time, price)
+        // console.log('created fill shape at', time, price)
         this.fills.push(s)
     }
 
-    createLine(slope, intercept, amount) {
+    createLine(slope, intercept, amountBigInt, breakout) {
+        if (intercept === 0 && slope === 0) return
         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
-        amount = Number(amount)
+        const decimals = buy ? this.symbol.base.d : this.symbol.quote.d;
-            * 10 ** -(buy ? this.symbol.base.d : this.symbol.quote.d)
+        amountBigInt = BigInt(amountBigInt)
+        const amount = Number(amountBigInt) * 10 ** - decimals
         const amountSymbol = buy ? this.symbol.base.s : this.symbol.quote.s
-        const color = buy ? 'green' : 'red'
+        const color = sideColor(buy)
-        if (intercept !== 0 || slope !== 0) {
+        const maxAllocation = this.maxAllocation
-            // console.log('tranche line', intercept, slope)
+        const allocation = t.fraction / MAX_FRACTION
+        const ts = this.trancheStatus
+        let sum = 0n
+        for (let i=0; i<ts.fills.length; i++)
+            sum += ts.fills[i].filled
+        const completed = (amountBigInt - sum) < status.order.minFillAmount
+        const extraText = completed ? '✓' : null
+        const textLocation = breakout === buy ? 'above' : 'below'
         // line active
         if (slope === 0) {
             let price = intercept
             price *= scale
             // horizontal line
             // console.log('hline', price)
-                const model = {price, color, maxAllocation: status.order.amount, amount, amountSymbol};
+            const model = {
+                price, breakout, color, extraText, textLocation,
+                allocation, maxAllocation, amount, amountSymbol,
+            }
             const s = new HLine(model, null, null, null, true)
             this.shapes.push(s)
         } else {
@@ -127,14 +143,13 @@ class TrancheShapes {
                 pointB: {time: endTime, price: endPrice},
                 extendLeft: t.startTime === DISTANT_PAST,
                 extendRight: t.endTime === DISTANT_FUTURE,
-                    color,
+                breakout, color, extraText, textLocation,
-                    maxAllocation: status.order.amount, amount, amountSymbol,
+                allocation, maxAllocation, amount, amountSymbol,
-                };
+            }
             const s = new DLine(model, null, null, null, true)
             this.shapes.push(s)
         }
     }
-    }
 
     // todo like this?
     show() {for (const s of this.shapes) s.show();}

src/charts/shape.js

@@ -4,7 +4,7 @@ import {invokeCallback, mixin} from "@/common.js";
 import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
 import Color from "color";
 import {dirtyItems, dirtyPoints, nearestOhlcStart} from "@/charts/chart-misc.js";
-import {computeInterceptSlope} from "@/misc.js";
+import {defined} from "@/misc.js";
 
 
 //
@@ -40,6 +40,7 @@ export const ShapeType = {
 
 
 export function allocationText(weight, amount, symbol, separator = ' ') {
+    // set breakout=true for a buy breakout and breakout=false for a sell breakout
     const hasAmount = amount !== null && amount !== undefined && amount > 0
     if (hasAmount)
         amount = Number(amount)
@@ -109,7 +110,7 @@ export class Shape {
         this.model.amount = null
         this.model.amountSymbol = null
         this.model.extraText = null
-        this.model.textLocation = 'above'
+        this.model.textLocation = null  // defaults to 'above' if not set
 
         // LEAF SUBCLASSES MUST CALL setModel(model) AFTER ALL CONSTRUCTION.
     }
@@ -119,19 +120,21 @@ export class Shape {
     //
 
     setModel(model) {
-        if (model.color)
+        if (defined(model.color))
             this.model.color = model.color
-        if (model.allocation !== null && model.allocation !== undefined)
+        if (defined(model.allocation))
             this.model.allocation = model.allocation
-        if (model.maxAllocation !== null && model.maxAllocation !== undefined)
+        if (defined(model.maxAllocation))
             this.model.maxAllocation = model.maxAllocation
-        if (model.amount !== null && model.amount !== undefined)
+        if (defined(model.amount))
             this.model.amount = model.amount
-        if (model.amountSymbol)
+        if (defined(model.amountSymbol))
             this.model.amountSymbol = model.amountSymbol
-        if (model.extraText)
+        if (defined(model.extraText))
             this.model.extraText = model.extraText
-        if (model.textLocation)
+        if (defined(model.breakout))
+            this.model.breakout = model.breakout
+        if (defined(model.textLocation))
             this.model.textLocation = model.textLocation
 
         const newProps = {}
@@ -141,7 +144,7 @@ export class Shape {
         newProps.textcolor = color
 
         // line color
-        if (this.model.allocation && this.model.maxAllocation) {
+        if (defined(this.model.allocation) && defined(this.model.maxAllocation)) {
             const w = this.model.allocation / this.model.maxAllocation
             if (!w)
                 newProps.linecolor = 'rgba(0,0,0,0)'
@@ -158,6 +161,8 @@ export class Shape {
 
         // text label
         let text = allocationText(this.model.allocation, this.model.amount, this.model.amountSymbol)
+        if (this.model.breakout)
+            text += ' ' + (this.model.textLocation==='above' ? '▲Breakout▲' : '▼Breakout▼')
         if (this.model.extraText)
             text += ' '+this.model.extraText
         if (this.debug) text = `${this.id} ` + text
@@ -199,10 +204,13 @@ export class Shape {
         const p = this.type.drawingProp
         const lc = this.model.lineColor ? this.model.lineColor : this.model.color;
         const tc = this.model.textColor ? this.model.textColor : this.model.color;
+        const tl = this.model.textLocation ? this.model.textLocation : 'above';
         if (lc)
             o[p+".linecolor"] = lc
         if (tc)
             o[p+".textcolor"] = tc
+        if (tl)
+            o[p+".textlocation"] = tl
         return o
     }
 

src/common.js

@@ -133,3 +133,11 @@ export function abiPath(name) {
 }
 
 
+export function parseFill(obj) {
+    let [tx, time, filledIn, filledOut, fee] = obj
+    time = new Date(time * 1000)
+    filledIn = BigInt(filledIn)
+    filledOut = BigInt(filledOut)
+    fee = BigInt(fee)
+    return {tx, time, filledIn, filledOut, fee}
+}

src/components/LimitPrice.vue

@@ -17,12 +17,12 @@
 
 <script setup>
 import {useOrderStore, useStore} from "@/store/store";
-import {routeInverted} from "@/misc.js";
 import RoutePrice from "@/components/RoutePrice.vue";
 import {validateAmount, validateRequired} from "@/validate.js";
 import {computed} from "vue";
 // noinspection ES6UnusedImports
 import {vAutoSelect} from "@/misc.js";
+import {routeInverted} from "@/misc.js";
 
 const os = useOrderStore()
 const props = defineProps({

src/components/Order.vue

@@ -23,11 +23,10 @@ import {useOrderStore, useStore} from "@/store/store";
 import PhoneCard from "@/components/PhoneCard.vue";
 import Amount from "@/components/Amount.vue"
 // noinspection ES6UnusedImports
-import {nav, routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import {nav, SingletonCoroutine, vAutoSelect} from "@/misc.js";
 import {newOrder} from "@/blockchain/orderlib.js";
 import {FixedNumber} from "ethers";
 import {pendOrder} from "@/blockchain/wallet.js";
-import router from "@/router/index.js";
 import PairChoice from "@/components/PairChoice.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import {useChartOrderStore} from "@/orderbuild.js";

src/components/PairChoice.vue

@@ -33,10 +33,9 @@
 import TokenChoice from "@/components/TokenChoice.vue"
 import {useOrderStore, useStore} from "@/store/store";
 import RoutePrice from "@/components/RoutePrice.vue";
-import {findRoute, routeFinder} from "@/blockchain/route.js";
+import {routeFinder} from "@/blockchain/route.js";
-import {SingletonCoroutine, routeInverted} from "@/misc.js";
+import {computed} from "vue";
-import {computed, ref} from "vue";
+import {routeInverted} from "@/misc.js";
-import {queryHelperContract} from "@/blockchain/contract.js";
 
 const s = useStore()
 const os = useOrderStore()

src/components/RoutePrice.vue

@@ -7,8 +7,8 @@ import {useOrderStore, useStore} from "@/store/store";
 import {subPrices, unsubPrices, WIDE_PRICE_FORMAT} from "@/blockchain/prices.js";
 import {computed, onBeforeUnmount} from "vue";
 import {FixedNumber} from "ethers";
-import {routeInverted} from "@/misc.js";
 import {subOHLCs} from "@/blockchain/ohlcs.js";
+import {routeInverted} from "@/misc.js";
 
 const s = useStore()
 const os = useOrderStore()

src/components/SplitPane.vue

@@ -142,5 +142,6 @@ body {
   flex: 1;
   width: 100%;
   min-height: 5em;
+  max-height: 100%;
 }
 </style>

src/components/Status.vue

@@ -177,7 +177,6 @@ import {useStore} from "@/store/store";
 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";
 import {DISTANT_FUTURE, isOpen, OrderState} from "@/blockchain/orderlib.js";
 import Pulse from "@/components/Pulse.vue";
 import {OrderShapes} from "@/charts/ordershapes.js";
@@ -185,6 +184,7 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {lookupSymbol, tickerForOrder} from "@/charts/datafeed.js";
 import {setSymbol} from "@/charts/chart.js";
 import {uniswapV3AveragePrice} from "@/blockchain/uniswap.js";
+import {timestampString} from "@/misc.js";
 
 const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
 const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))

src/components/TimedOrder.vue

@@ -7,10 +7,10 @@
 
 <script setup>
 // noinspection ES6UnusedImports
-import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import {SingletonCoroutine, vAutoSelect} from "@/misc.js";
 import Order from "@/components/Order.vue";
 import LimitPrice from "@/components/LimitPrice.vue";
-import {timesliceTranches, applyLimitOld} from "@/orderbuild.js";
+import {applyLimitOld, timesliceTranches} from "@/orderbuild.js";
 import Tranches from "@/components/Tranches.vue";
 import {useOrderStore} from "@/store/store.js";
 

src/components/TokenChoice.vue

@@ -81,13 +81,6 @@ function updateValue(v) {
 }
 </script>
 
-<script>
-import {ethers} from "ethers";
-import {useStore} from "@/store/store.js";
-const s = useStore()
-
-</script>
-
 
 <style scoped lang="scss">
 @use "src/styles/vars" as *;

src/components/chart/DiagonalBuilder.vue

@@ -398,7 +398,7 @@ function dirtyLine(a, b) {
   return result
 }
 
-const name = computed(()=>(props.builder.breakout?'Breakout':'Limit')+' Diagonal'+(weights.value.length>1?'s':''))
+const name = computed(()=>props.builder.breakout?'Breakout':'Limit')
 
 const description = computed(()=>{
   const buy = props.order.buy

src/components/chart/LimitBuilder.vue

@@ -1,5 +1,5 @@
 <template>
-  <rung-builder :name="(builder.breakout?'Breakout':'Limit')+(prices.length>1?' Ladder':'')"
+  <rung-builder :name="(builder.breakout?'Breakout':'Limit')"
                 :description="description"
                 :order="order" :builder="builder"
                 v-model="priceEndpoints" :mode="0" :flip="flipped"

src/components/chart/RungBuilder.vue

@@ -4,15 +4,16 @@
     <div style="min-width: 4em; font-size: larger" :style="colorStyle"
          class="d-flex flex-column align-self-start ml-2">
       <div class="flex-row align-items-center">
-        <v-btn variant="outlined" @click="props.builder.breakout=!props.builder.breakout">{{ name }}</v-btn>
+        <v-btn variant="outlined" style="width: 8em"
-        <div class="description">{{description}}</div>
+               @click="props.builder.breakout=!props.builder.breakout">{{ name }}</v-btn>
+        <div class="description w-100 text-center">{{description}}</div>
       </div>
       <v-text-field type="number" v-model="rungs"
                     density="compact" hide-details class="mx-1 my-2" variant="outlined"
                     label="Rungs"
                     :color="color" :base-color="color" min="1" :max="MAX_RUNGS"
                     :disabled="rungsDisabled"
-                    style="width: 4.5em;"
+                    style="width: 6.6em;"
       />
     </div>
 
@@ -96,7 +97,6 @@ let lastBuy = null
 watchEffect(()=>{
   if (props.order.buy!==lastBuy) {
     lastBuy = props.order.buy
-    console.log('updating colors')
     props.builder.color=computeDefaultColor()
   }
 })
@@ -332,9 +332,8 @@ function makeModel(index) {
     amount: props.order.amount * alloc,
     amountSymbol: amountSymbol.value,
     textLocation: above ? 'above' : 'below',
-    extraText: !props.builder.breakout ? ' ' :
+    breakout: props.builder.breakout,
-        // (above ? '↑ Breakout ↑' : '↓ Breakout ↓')
+    extraText: null,
-        (above ? '▲ Breakout ▲' : '▼ Breakout ▼')
   }
   setModelValue(result, values.value[index])
   return result

src/components/chart/ToolbarButton.vue

@@ -13,7 +13,6 @@ import {useRoute} from "vue-router";
 import {nav} from "/src/misc.js"
 
 const props = defineProps(['icon', 'route', 'tooltip'])
-console.log('toolbar button props', props.route)
 const router = useRoute();
 const isCurrent = computed(() => router.name === props.route)
 </script>

src/misc.js

@@ -187,7 +187,7 @@ const colorRanges = {
     sell: ['#CC0033', '#CCCC33'],
 }
 
-export function sideColor(buy, index) {
+export function sideColor(buy, index=0) {
     const range = buy ? colorRanges.buy : colorRanges.sell
     const a = new Color(range[0]).rgb()
     const b = new Color(range[1]).rgb()
@@ -232,7 +232,7 @@ export function intervalToSeconds(interval) {
                : interval.endsWith('S') ?                 1
                :                                         60  // if no unit char, then it's minutes
     const result = parseInt(/\d+/.exec(interval)[0]) * unit
-    console.log('intervalToSeconds', interval, result)
+    // console.log('intervalToSeconds', interval, result)
     return result
 }
 
@@ -253,3 +253,8 @@ export function computeInterceptSlope(time0, price0, time1, price1) {
     const intercept = price1 - slope * t1
     return [intercept, slope]
 }
+
+
+export function defined(v) {
+    return v !== undefined && v !== null
+}

src/socket.js

@@ -95,7 +95,7 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
     }
 
     const status = s.orders[vault][orderIndex]
-    console.log('apply fills', status, filled)
+    // console.log('apply fills', status, filled)
 
     let orderIn = 0n
     let orderOut = 0n
@@ -107,7 +107,10 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
         const numOld = ts.fills.length;
         for (let i=0; i<fills.length; i++) {
             const fill = fills[i]
-            const [tx, time, fi, fo, fee] = fill
+            let [tx, time, fi, fo, fee] = fill
+            fi = BigInt(fi)
+            fo = BigInt(fo)
+            fee = BigInt(fee)
             filledIn += fi
             filledOut += fo
             if (i<=numOld) {
@@ -124,8 +127,9 @@ socket.on( 'of', (chainId, vault, orderIndex, filled)=>{
         orderIn += filledIn
         orderOut += filledOut
     }
-    status[7] = orderIn.toString()
+    status.filledIn = orderIn
-    status[8] = orderOut.toString()
+    status.filledOut = orderOut
+    status.filled = status.order.amountIsInput ? orderIn : orderOut
 
-    console.log('apply fills completed', status)
+    // console.log('apply fills completed', status)
 })