dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

post-order line draw improvements

Browse Source
This commit is contained in:
tim
2024-11-04 18:39:09 -04:00
parent cfcba95445
commit 28dd64b1cf
20 changed files with 140 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/blockchain/contract.js
View File

@@ -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)
}

17
src/blockchain/orderlib.js
View File

@@ -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))
return {filledIn, filledOut, activationTime, startTime, endTime, fills}
fills.push(parseFill(fill, amountIsInput))
const filled = amountIsInput ? filledIn : filledOut
return {filledIn, filledOut, filled, activationTime, startTime, endTime, fills}
}
export function parseOrder(order) {

1
src/charts/datafeed.js
View File

@@ -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

119
src/charts/ordershapes.js
View File

@@ -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) {
// todo validate base/quote
constructor(symbol, orderStatus, trancheIndex, maxAllocation) {
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);
this.createLine(t.maxLine.slope, t.maxLine.intercept);
const amount = this.status.order.amount * BigInt(t.fraction) / BigInt(MAX_FRACTION)
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,67 +76,78 @@ 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)
* 10 ** -(buy ? this.symbol.base.d : this.symbol.quote.d)
const decimals = 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'
if (intercept !== 0 || slope !== 0) {
// console.log('tranche line', intercept, slope)
// 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 s = new HLine(model, null, null, null, true)
this.shapes.push(s)
} else {
// diagonal line
let startTime = t.startTime
if (startTime === DISTANT_PAST)
startTime = timestamp() - useChartOrderStore().intervalSecs * 20 // 20 bars ago
let endTime = t.endTime
if (endTime === DISTANT_FUTURE)
endTime = timestamp() // use "now" as the drawing point's time
let startPrice = (intercept + slope * startTime);
let endPrice = (intercept + slope * endTime);
startPrice *= scale
endPrice *= scale
// console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice)
// noinspection EqualityComparisonWithCoercionJS
const model = {
pointA: {time: startTime, price: startPrice},
pointB: {time: endTime, price: endPrice},
extendLeft: t.startTime === DISTANT_PAST,
extendRight: t.endTime === DISTANT_FUTURE,
color,
maxAllocation: status.order.amount, amount, amountSymbol,
};
const s = new DLine(model, null, null, null, true)
this.shapes.push(s)
const color = sideColor(buy)
const maxAllocation = this.maxAllocation
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, breakout, color, extraText, textLocation,
allocation, maxAllocation, amount, amountSymbol,
}
const s = new HLine(model, null, null, null, true)
this.shapes.push(s)
} else {
// diagonal line
let startTime = t.startTime
if (startTime === DISTANT_PAST)
startTime = timestamp() - useChartOrderStore().intervalSecs * 20 // 20 bars ago
let endTime = t.endTime
if (endTime === DISTANT_FUTURE)
endTime = timestamp() // use "now" as the drawing point's time
let startPrice = (intercept + slope * startTime);
let endPrice = (intercept + slope * endTime);
startPrice *= scale
endPrice *= scale
// console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice)
// noinspection EqualityComparisonWithCoercionJS
const model = {
pointA: {time: startTime, price: startPrice},
pointB: {time: endTime, price: endPrice},
extendLeft: t.startTime === DISTANT_PAST,
extendRight: t.endTime === DISTANT_FUTURE,
breakout, color, extraText, textLocation,
allocation, maxAllocation, amount, amountSymbol,
}
const s = new DLine(model, null, null, null, true)
this.shapes.push(s)
}
}

28
src/charts/shape.js
View File

@@ -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
}

8
src/common.js
View File

@@ -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}
}

2
src/components/LimitPrice.vue
View File

@@ -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({

3
src/components/Order.vue
View File

@@ -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";

7
src/components/PairChoice.vue
View File

@@ -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 {SingletonCoroutine, routeInverted} from "@/misc.js";
import {computed, ref} from "vue";
import {queryHelperContract} from "@/blockchain/contract.js";
import {routeFinder} from "@/blockchain/route.js";
import {computed} from "vue";
import {routeInverted} from "@/misc.js";
const s = useStore()
const os = useOrderStore()

2
src/components/RoutePrice.vue
View File

@@ -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()

1
src/components/SplitPane.vue
View File

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

2
src/components/Status.vue
View File

@@ -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'))

4
src/components/TimedOrder.vue
View File

@@ -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";

7
src/components/TokenChoice.vue
View File

@@ -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 *;

2
src/components/chart/DiagonalBuilder.vue
View File

@@ -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

2
src/components/chart/LimitBuilder.vue
View File

@@ -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"

13
src/components/chart/RungBuilder.vue
View File

@@ -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>
<div class="description">{{description}}</div>
<v-btn variant="outlined" style="width: 8em"
@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 ? ' ' :
// (above ? '↑ Breakout ↑' : '↓ Breakout ↓')
(above ? '▲ Breakout ▲' : '▼ Breakout ▼')
breakout: props.builder.breakout,
extraText: null,
}
setModelValue(result, values.value[index])
return result

1
src/components/chart/ToolbarButton.vue
View File

@@ -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>

11
src/misc.js
View File

@@ -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
}
@@ -252,4 +252,9 @@ export function computeInterceptSlope(time0, price0, time1, price1) {
const slope = (price1 - price0) / (t1 - t0)
const intercept = price1 - slope * t1
return [intercept, slope]
}
}
export function defined(v) {
return v !== undefined && v !== null
}

14
src/socket.js
View File

@@ -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[8] = orderOut.toString()
status.filledIn = orderIn
status.filledOut = orderOut
status.filled = status.order.amountIsInput ? orderIn : orderOut
console.log('apply fills completed', status)
// console.log('apply fills completed', status)
})