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

ordershapes

Browse Source
This commit is contained in:
tim
2024-09-15 00:59:47 -04:00
parent 80e03f648b
commit 09ef4c5f43
10 changed files with 295 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/blockchain/orderlib.js
View File

@@ -159,11 +159,22 @@ export function parseOrderStatus(chainId, status) {
return result
}
function parseTrancheStatus(obj) {
let [filledIn, filledOut, activationTime, startTime, endTime,] = obj
function parseFill(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 }
maxLine = {intercept: maxLine.intercept, slope: maxLine.slope }
const [minB,minS] = minLine
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
}

2
src/blockchain/wallet.js
View File

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

6
src/charts/chart.js
View File

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

4
src/charts/datafeed.js
View File

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

122
src/charts/ordershapes.js Normal file
View File

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

2
src/common.js
View File

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

137
src/components/Status.vue
View File

@@ -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,42 +83,16 @@
<!-- </btn>-->
<!-- </template>-->
<template v-slot:expanded-row="{item}">
<tr>
<td>&nbsp;</td>
<td colspan="100">
<v-table>
<!--
<thead>
<tr>
<th></th>
<th>Filled</th>
<th></th>
</tr>
</thead>
-->
<tbody>
<tr v-for="(t, i) in item.order.tranches">
<td class="text-right">Tranche {{ i + 1 }}</td>
<td class="text-center w-33">
<suspense>
<span v-if="item.state > OrderState.Signing">
<pulse :touch="item.trancheStatus[i].filled">
<token-amount :chain-id="item.chainId" :addr="item.amountToken" :amount="item.trancheStatus[i].filled" :raw="true"/>
</pulse>
/
</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 -->
<td class="text-right">
Tranche {{ i + 1 }}
<div class="text-right">
<div class="mx-3">{{ describeTrancheTime(item, i, true) }}</div>
<div class="mx-3">{{ describeTrancheTime(item, i, false) }}</div>
<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 class="mx-3" v-if="t.marketOrder">market order</div>
@@ -131,11 +105,40 @@
: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 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)
ts.filledOut = BigInt(ts.filledOut)
ts.filled = o.amountIsInput ? ts.filledIn : ts.filledOut
let filledIn = 0n
let filledOut = 0n
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) + ' '

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

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

21
src/orderbuild.js
View File

@@ -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) {
const hasAmount = amount!==null && amount!==undefined && amount > 0
if (hasAmount)
amount = Number(amount)
weight = Number(weight)
let text = ''
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)

32
src/socket.js
View File

@@ -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])
for( const i in filled[1] ) {
const [filledIn, filledOut] = filled[1][i]
status.trancheStatus[i].filledIn = BigInt(filledIn)
status.trancheStatus[i].filledOut = BigInt(filledOut)
let orderIn = 0n
let orderOut = 0n
const ts = status.trancheStatus[i]
for (const i in filled) {
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})
}
// s.orders[vault][orderIndex] = status
console.log('applied fills', status)
ts.filledIn = filledIn
ts.filledOut = filledOut
ts.activationTime = activationTime
orderIn += filledIn
orderOut += filledOut
}
status[7] = orderIn.toString()
status[8] = orderOut.toString()
console.log('apply fills completed', status)
})