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

ordershape fixes

Browse Source
This commit is contained in:
tim
2024-09-23 02:44:57 -04:00
parent b82171dfb0
commit bc443172a1
9 changed files with 113 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/charts/chart.js
View File

@@ -51,7 +51,7 @@ function changeInterval(interval, _timeframe) {
function dataLoaded() { function dataLoaded() {
const range = chartMeanRange() const range = chartMeanRange()
console.log('new mean range', range) console.log('new mean range', range,)
co.meanRange = range co.meanRange = range
} }
@@ -400,6 +400,8 @@ export function deleteShapeId(id) {
chart.removeEntity(id) chart.removeEntity(id)
} }
const MEAN_RANGE_MULTIPLIER = 10
function chartMeanRange() { function chartMeanRange() {
let range = 0 let range = 0
const series = chart.getSeries() const series = chart.getSeries()
@@ -415,5 +417,5 @@ function chartMeanRange() {
range /= count range /= count
else else
range = 1 range = 1
return range return range * MEAN_RANGE_MULTIPLIER
} }

45
src/charts/ordershapes.js
View File

@@ -1,7 +1,6 @@
import {DISTANT_FUTURE, DISTANT_PAST} from "@/blockchain/orderlib.js"; import {DISTANT_FUTURE, DISTANT_PAST} from "@/blockchain/orderlib.js";
import {DLine, HLine} from "@/charts/shape.js"; import {allocationText, DLine, HLine} from "@/charts/shape.js";
import {createShape, deleteShapeId} from "@/charts/chart.js"; import {createShape, deleteShapeId} from "@/charts/chart.js";
import {allocationText} from "@/orderbuild.js";
import {timestamp} from "@/misc.js"; import {timestamp} from "@/misc.js";
export class OrderShapes { export class OrderShapes {
@@ -63,28 +62,37 @@ class TrancheShapes {
const symbol = this.symbol const symbol = this.symbol
const scale = 10**symbol.decimals; const scale = 10**symbol.decimals;
const buy = order.tokenIn === this.symbol.quote.a const buy = order.tokenIn === this.symbol.quote.a
const inverted = buy === symbol.inverted const amountIsBase = buy !== this.status.order.amountIsInput
const filledAmount = this.status.order.amountIsInput ? f.filledIn : f.filledOut;
const amount = Number(filledAmount)
* 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)
const time = f.time const time = f.time
const out = Number(f.filledOut) / (1-this.status.order.route.fee/1000000) const out = Number(f.filledOut) / (1-this.status.order.route.fee/1000000)
let price = out / Number(f.filledIn) let price = out / Number(f.filledIn)
if (inverted) if (buy)
price = 1/price price = 1/price
price *= scale price *= scale
// console.log('price', price) // console.log('price', price)
const channel = buy?'low':'high'; const channel = buy?'low':'high';
const text = (buy ? 'Buy ' : 'Sell ') + allocationText(null, f.filled, '') const text = (buy ? 'Buy ' : 'Sell ') + allocationText(weight, amount, amountSymbol, '\n')
const s = createShape(buy?'arrow_up':'arrow_down', {time, price}, {channel,text,lock:true}) 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) this.fills.push(s)
} }
createLine(slope, intercept) { createLine(slope, intercept, amount) {
const t = this.tranche const t = this.tranche
const status = this.status const status = this.status
const symbol = this.symbol const symbol = this.symbol
const scale = 10**symbol.decimals; const scale = 10**symbol.decimals;
const buy = status.order.tokenIn === this.symbol.quote.a const buy = status.order.tokenIn === this.symbol.quote.a
const inverted = buy === symbol.inverted const inverted = buy === symbol.inverted
amount = Number(amount)
* 10 ** -(buy ? this.symbol.base.d : this.symbol.quote.d)
const amountSymbol = buy ? this.symbol.base.s : this.symbol.quote.s
const color = buy ? 'green' : 'red' const color = buy ? 'green' : 'red'
if (intercept !== 0 || slope !== 0) { if (intercept !== 0 || slope !== 0) {
// console.log('tranche line', intercept, slope) // console.log('tranche line', intercept, slope)
@@ -96,19 +104,16 @@ class TrancheShapes {
price *= scale price *= scale
// horizontal line // horizontal line
// console.log('hline', price, inverted) // console.log('hline', price, inverted)
const s = new HLine({price, color, const model = {price, color, maxAllocation: status.order.amount, amount, amountSymbol};
// todo allocation maxAllocation amount amountSymbol const s = new HLine(model, null, null, null, true)
}, null, null, null, true)
this.shapes.push(s) this.shapes.push(s)
} else { } else {
// diagonal line // diagonal line
let startTime = t.startTime let startTime = t.startTime
// noinspection EqualityComparisonWithCoercionJS if (startTime === DISTANT_PAST)
if (startTime == DISTANT_PAST)
startTime = 1231006505 // use Bitcoin genesis as the drawing point's start time. unnecessary. startTime = 1231006505 // use Bitcoin genesis as the drawing point's start time. unnecessary.
let endTime = t.endTime let endTime = t.endTime
// noinspection EqualityComparisonWithCoercionJS if (endTime === DISTANT_FUTURE)
if (endTime == DISTANT_FUTURE)
endTime = timestamp() // use "now" as the drawing point's time endTime = timestamp() // use "now" as the drawing point's time
let startPrice = (intercept + slope * startTime); let startPrice = (intercept + slope * startTime);
let endPrice = (intercept + slope * endTime); let endPrice = (intercept + slope * endTime);
@@ -118,15 +123,17 @@ class TrancheShapes {
} }
startPrice *= scale startPrice *= scale
endPrice *= scale endPrice *= scale
// console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice) console.log('dline', startTime, endTime, DISTANT_FUTURE, startPrice, endPrice)
const s = new DLine({ // noinspection EqualityComparisonWithCoercionJS
pointA: {time: t.startTime, price: startPrice}, const model = {
pointB: {time: t.endTime, price: endPrice}, pointA: {time: startTime, price: startPrice},
pointB: {time: endTime, price: endPrice},
extendLeft: t.startTime === DISTANT_PAST, extendLeft: t.startTime === DISTANT_PAST,
extendRight: t.endTime === DISTANT_FUTURE, extendRight: t.endTime === DISTANT_FUTURE,
color, color,
// todo allocation maxAllocation amount amountSymbol maxAllocation: status.order.amount, amount, amountSymbol,
}, null, null, null, true) };
const s = new DLine(model, null, null, null, true)
this.shapes.push(s) this.shapes.push(s)
} }
} }

22
src/charts/shape.js
View File

@@ -2,7 +2,6 @@
import {invokeCallback, mixin} from "@/common.js"; import {invokeCallback, mixin} from "@/common.js";
import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js"; import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
import {allocationText} from "@/orderbuild.js";
import Color from "color"; import Color from "color";
import {dirtyItems, dirtyPoints, pointsToTvOhlcStart} from "@/charts/chart-misc.js"; import {dirtyItems, dirtyPoints, pointsToTvOhlcStart} from "@/charts/chart-misc.js";
@@ -39,6 +38,25 @@ export const ShapeType = {
} }
export function allocationText(weight, amount, symbol, separator = ' ') {
const hasAmount = amount !== null && amount !== undefined && amount > 0
if (hasAmount)
amount = Number(amount)
const hasWeight = weight !== null && weight !== undefined
if (hasWeight)
weight = Number(weight)
let text = ''
if (hasWeight)
text += `${(weight * 100).toFixed(1)}%`
const hasSymbol = symbol !== null && symbol !== undefined
if (hasAmount && hasSymbol) {
if (hasWeight)
text += separator
text += `${amount.toPrecision(3).toLocaleString('fullwide')} ${symbol}`
}
return text
}
export class Shape { export class Shape {
constructor(type, onModel=null, onDelete=null, props=null, readonly=false, overrides={}) { constructor(type, onModel=null, onDelete=null, props=null, readonly=false, overrides={}) {
@@ -555,6 +573,7 @@ export class DLine extends Line {
if (model.pointA === null && model.pointB === null) if (model.pointA === null && model.pointB === null)
this.delete() this.delete()
else { else {
this.setProps({extendLeft:model.extendLeft, extendRight: model.extendRight})
if ('pointA' in model && 'pointB' in model) { if ('pointA' in model && 'pointB' in model) {
const newPoints = [model.pointA, model.pointB]; const newPoints = [model.pointA, model.pointB];
const oldPoints = [this.model.pointA, this.model.pointB]; const oldPoints = [this.model.pointA, this.model.pointB];
@@ -564,7 +583,6 @@ export class DLine extends Line {
this.setPoints(newPoints) this.setPoints(newPoints)
} }
} }
this.setProps({extendLeft:model.extendLeft, extendRight: model.extendRight})
} }
} }

97
src/components/Status.vue
View File

@@ -80,68 +80,77 @@
<!-- </btn>--> <!-- </btn>-->
<!-- </template>--> <!-- </template>-->
<template v-slot:expanded-row="{item}"> <template v-slot:expanded-row="{item}">
<tr v-for="(t, i) in item.order.tranches"> <template v-for="(t, i) in item.order.tranches">
<td class="text-right" colspan="2"> <tr>
Tranche {{ i + 1 }} <td class="text-right" colspan="2">
<div class="text-right"> Tranche {{ i + 1 }}
<div v-if="s.clock < item.trancheStatus[i].startTime"> <div class="text-right">
Activates {{timestampString(item.trancheStatus[i].startTime)}} <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 v-if="item.trancheStatus[i].endTime<DISTANT_FUTURE"> <div>
Expires {{timestampString(item.trancheStatus[i].endTime)}} <div class="mx-3" v-if="t.marketOrder">market order</div>
<line-price class="mx-3" v-if="!t.marketOrder"
:base="item.order.tokenIn" :quote="item.order.tokenOut"
:b="t.minLine.intercept" :m="t.minLine.slope" :is-min="true"
:show-btn="false"/>
<line-price class="mx-3" v-if="!t.marketOrder"
:base="item.order.tokenIn" :quote="item.order.tokenOut"
:b="t.maxLine.intercept" :m="t.maxLine.slope" :is-min="false"
:show-btn="false"/>
</div> </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.order.tokenIn" :quote="item.order.tokenOut"
:b="t.minLine.intercept" :m="t.minLine.slope" :is-min="true"
:show-btn="false"/>
<line-price class="mx-3" v-if="!t.marketOrder"
:base="item.order.tokenIn" :quote="item.order.tokenOut"
:b="t.maxLine.intercept" :m="t.maxLine.slope" :is-min="false"
:show-btn="false"/>
</div>
</td> </td>
<td class="text-right"> <td class="text-right">
<suspense> <suspense>
<span v-if="item.state > OrderState.Signing"> <span v-if="item.state > OrderState.Signing">
<pulse :touch="item.trancheStatus[i].filledIn"> <pulse :touch="item.trancheStatus[i].filledIn">
<token-amount :chain-id="item.chainId" :addr="item.order.tokenIn" :amount="item.trancheStatus[i].filledIn" :raw="true"/> <token-amount :chain-id="item.chainId" :addr="item.order.tokenIn"
:amount="item.trancheStatus[i].filledIn" :raw="true"/>
</pulse> </pulse>
</span> </span>
</suspense> </suspense>
<suspense> <suspense>
<span v-if="item.order.amountIsInput"> <span v-if="item.order.amountIsInput">
/ /
<token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/> <token-amount :chain-id="item.chainId" :addr="item.amountToken"
:amount="item.order.amount*BigInt(t.fraction)/65535n"/>
</span> </span>
</suspense> </suspense>
</td> </td>
<td class="text-right w-33"> <td class="text-right w-33">
<suspense> <suspense>
<span v-if="item.state > OrderState.Signing"> <span v-if="item.state > OrderState.Signing">
<pulse :touch="item.trancheStatus[i].filledOut"> <pulse :touch="item.trancheStatus[i].filledOut">
<token-amount :chain-id="item.chainId" :addr="item.order.tokenOut" :amount="item.trancheStatus[i].filledOut" :raw="true"/> <token-amount :chain-id="item.chainId" :addr="item.order.tokenOut"
:amount="item.trancheStatus[i].filledOut" :raw="true"/>
</pulse> </pulse>
<token-symbol :addr="item.order.tokenOut"/> <token-symbol :addr="item.order.tokenOut"/>
</span> </span>
</suspense> </suspense>
<suspense> <suspense>
<span v-if="!item.order.amountIsInput"> <span v-if="!item.order.amountIsInput">
/ /
<token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/> <token-amount :chain-id="item.chainId" :addr="item.amountToken"
:amount="item.order.amount*BigInt(t.fraction)/65535n"/>
</span> </span>
</suspense> </suspense>
</td> </td>
<td class="text-right"> <td class="text-right">
<suspense> <suspense>
<pair-price :base="item.order.tokenIn" :quote="item.order.tokenOut" :value="item.trancheStatus[i].avg" :show-btn="false"/> <pair-price :base="item.order.tokenIn" :quote="item.order.tokenOut" :value="item.trancheStatus[i].avg"
</suspense> :show-btn="false"/>
</td> </suspense>
<td>{{ item.trancheStatus[i].status }}<!--todo:tranche status--></td> </td>
</tr> <td>{{ item.trancheStatus[i].status }}<!--todo:tranche status--></td>
</tr>
<tr>
</tr>
</template>
</template> </template>
</v-data-table> </v-data-table>
</div> </div>

4
src/components/chart/DCABuilder.vue
View File

@@ -39,8 +39,8 @@
</template> </template>
<script setup> <script setup>
import {allocationText, builderDefaults, MIN_EXECUTION_TIME, useChartOrderStore} from "@/orderbuild.js"; import {builderDefaults, MIN_EXECUTION_TIME, useChartOrderStore} from "@/orderbuild.js";
import {VLine} from "@/charts/shape.js"; import {allocationText, VLine} from "@/charts/shape.js";
import {sideColor} from "@/misc.js"; import {sideColor} from "@/misc.js";
import {useTheme} from "vuetify"; import {useTheme} from "vuetify";
import {useOrderStore, useStore} from "@/store/store.js"; import {useOrderStore, useStore} from "@/store/store.js";

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

@@ -92,12 +92,12 @@
</template> </template>
<script setup> <script setup>
import {allocationText, applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js"; import {applyLinePoints, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
import {sideColor} from "@/misc.js"; import {sideColor} from "@/misc.js";
import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js"; import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
import RungBuilder from "@/components/chart/RungBuilder.vue"; import RungBuilder from "@/components/chart/RungBuilder.vue";
import {computed, ref} from "vue"; import {computed, ref} from "vue";
import {DLine} from "@/charts/shape.js"; import {allocationText, DLine} from "@/charts/shape.js";
import {vectorEquals, vectorInterpolate} from "@/vector.js"; import {vectorEquals, vectorInterpolate} from "@/vector.js";
import AbsoluteTimeEntry from "@/components/AbsoluteTimeEntry.vue"; import AbsoluteTimeEntry from "@/components/AbsoluteTimeEntry.vue";
@@ -345,7 +345,7 @@ const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol
const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value))) const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*props.order.amount, amountSymbol.value)))
const stdWidth = computed(()=>[0, 2 * co.meanRange, 0, 2 * co.meanRange]) const stdWidth = computed(()=>[0, co.meanRange, 0, co.meanRange])
function getModelValue(model) { function getModelValue(model) {

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

@@ -41,13 +41,13 @@
</template> </template>
<script setup> <script setup>
import {allocationText, applyLinePoint, builderDefaults, useChartOrderStore} from "@/orderbuild.js"; import {applyLinePoint, builderDefaults, useChartOrderStore} from "@/orderbuild.js";
import {sideColor} from "@/misc.js"; import {sideColor} from "@/misc.js";
import {useOrderStore, useStore} from "@/store/store.js"; import {useOrderStore, useStore} from "@/store/store.js";
import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js"; import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
import RungBuilder from "@/components/chart/RungBuilder.vue"; import RungBuilder from "@/components/chart/RungBuilder.vue";
import {computed, ref} from "vue"; import {computed, ref} from "vue";
import {HLine} from "@/charts/shape.js"; import {allocationText, HLine} from "@/charts/shape.js";
const s = useStore() const s = useStore()
const os = useOrderStore() const os = useOrderStore()
@@ -194,7 +194,7 @@ const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(w, w*
const color = computed(()=>props.builder.color ? props.builder.color : defaultColor) const color = computed(()=>props.builder.color ? props.builder.color : defaultColor)
const stdWidth = computed(()=>2*co.meanRange) const stdWidth = computed(()=>co.meanRange)
function getModelValue(model) { function getModelValue(model) {

2
src/misc.js
View File

@@ -66,7 +66,7 @@ export const vAutoSelect = {
input.onfocus = () => setTimeout(() => input.select(), 0) input.onfocus = () => setTimeout(() => input.select(), 0)
} }
} }
export const uint32max = 4294967295n export const uint32max = 4294967295
export const uint64max = 18446744073709551615n export const uint64max = 18446744073709551615n
export function tokenNumber(token, balance) { export function tokenNumber(token, balance) {

21
src/orderbuild.js
View File

@@ -1,4 +1,4 @@
import {routeInverted, timestamp, uuid} from "@/misc.js"; import {timestamp, uuid} from "@/misc.js";
import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js"; import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
import {useOrderStore, useStore} from "@/store/store.js"; import {useOrderStore, useStore} from "@/store/store.js";
import {encodeIEE754} from "@/common.js"; import {encodeIEE754} from "@/common.js";
@@ -251,25 +251,6 @@ export function weightColors(weights, color) {
return adj.map((a) => a.string()) return adj.map((a) => a.string())
} }
export function allocationText(weight, amount, symbol) {
const hasAmount = amount!==null && amount!==undefined && amount > 0
if (hasAmount)
amount = Number(amount)
const hasWeight = weight!==null && weight!==undefined
if (hasWeight)
weight = Number(weight)
let text = ''
if (hasWeight)
text += `${(weight * 100).toFixed(1)}%`
const hasSymbol = symbol!==null && symbol!==undefined
if (hasAmount && hasSymbol) {
if (hasWeight)
text += ' = '
text += `${amount.toPrecision(3).toLocaleString('fullwide')} ${symbol}`
}
return text
}
export function deleteBuilder(order, builder) { export function deleteBuilder(order, builder) {
order.builders = order.builders.filter((b) => b !== builder) order.builders = order.builders.filter((b) => b !== builder)
} }