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

datatable for orders view

Browse Source
This commit is contained in:
Tim Olson
2023-12-08 21:17:32 -04:00
parent 97aa965cd9
commit aa731d678e
5 changed files with 303 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/Orders.vue
View File

@@ -1,48 +1,40 @@
<template>
<v-table>
<thead>
<tr>
<th class="num d-none d-md-table-cell">Date</th> <!-- todo placement date instead -->
<th class="token d-none d-sm-table-cell">Input</th>
<th class="token d-none d-sm-table-cell">Output</th>
<th class="amount">Remaining</th>
<th class="amount">Filled</th>
<th class="amount d-none d-md-table-cell">Avg&nbsp;Price</th>
<th class="status">Status</th>
<th class="cancel d-none d-lg-table-cell">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr v-for="st of orders">
<td class="">{{st.start}}</td>
<td class="amount"><suspense><token-amount :addr="st.order.tokenIn" :amount="st.order.amountIsInput ? st.order.amount : null"/></suspense></td>
<td class="amount"><suspense><token-amount :addr="st.order.tokenOut" :amount="!st.order.amountIsInput ? st.order.amount : null"/></suspense></td>
<td class="amount"><suspense><token-amount :addr="st.amountToken" :amount="st.order.amount-st.filled"/></suspense></td>
<td class="amount"><suspense><token-amount :addr="st.amountToken" :amount="st.filled"/></suspense></td>
<td class="amount">
{{pairPrice(st.order.tokenIn, st.order.tokenOut, vaultAddr, st.index, st.avg)}}
<btn v-if="pairPrice(st.order.tokenIn, st.order.tokenOut, vaultAddr, st.index, st.avg)!==''" size="small"
variant="plain"
@click="inverted[[vaultAddr,st.index]] = !inverted[[vaultAddr,st.index]]">
{{pair(st.order.tokenIn, st.order.tokenOut, vaultAddr, st.index)}}
</btn>
</td>
<td class="status">
<v-chip v-if="st.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
<v-chip v-if="st.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
<btn v-if="st.state===OrderState.Open" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,st.index)">Cancel</btn>
<btn v-if="st.state===OrderState.Open" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,st.index)"/>
<v-chip v-if="st.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
<v-chip v-if="st.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
<v-chip v-if="st.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
<v-chip v-if="st.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
</td>
<td class="cancel d-none d-lg-table-cell">
<btn v-if="st.state===OrderState.Open" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,st.index)">Cancel</btn>
</td>
</tr>
</tbody>
</v-table>
<v-data-table :headers="datatableHeaders" :items="orders" item-value="index" item-selectable="selectable" :show-select="true" :show-expand="true">
<template v-slot:item.start="{ value }">{{dateString(value)}}</template>
<template v-slot:item.input="{ item }">
<suspense><token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/></suspense>
</template>
<template v-slot:item.output="{ item }">
<suspense><token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/></suspense>
</template>
<template v-slot:item.remaining="{ item }">
<suspense><token-amount :addr="item.amountToken" :amount="item.remaining"/></suspense>
</template>
<template v-slot:item.filled="{ item }">
<suspense><token-amount :addr="item.amountToken" :amount="item.filled"/></suspense>
</template>
<template v-slot:item.avg="{ item }">
{{pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index, item.avg)}}
<btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index, item.avg)!==''" size="small"
variant="plain"
@click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]">
{{pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index)}}
</btn>
</template>
<template v-slot:item.status="{ item }">
<v-chip v-if="item.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
<v-chip v-if="item.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
<btn v-if="isOpen(item.state)" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn>
<btn v-if="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)"/>
<v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
<v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
<v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
<v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
</template>
<template v-slot:item.action="{ item }">
<btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn>
</template>
</v-data-table>
</template>
<script setup>
@@ -53,7 +45,7 @@ import {token} from "@/blockchain/token.js";
import Btn from "@/components/Btn.vue"
import {cancelOrder} from "@/blockchain/wallet.js";
import {intervalString, dateString} from "@/misc.js";
import {OrderState} from "@/blockchain/orderlib.js";
import {OrderState, isOpen} from "@/blockchain/orderlib.js";
const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
const s = useStore()
@@ -90,14 +82,11 @@ function pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, price) {
if( !inToken || !outToken )
return ''
console.log('inout tokens', inToken, outToken)
console.log('price1', price, outToken.decimals, inToken.decimals)
const decimals = outToken.decimals-inToken.decimals
if( decimals > 0 )
price /= 10 ** decimals
else
price *= 10 ** -decimals
console.log('price2', price)
const invertedKey = [vaultAddr,index];
if( !(invertedKey in inverted) ) {
// todo prefer stablecoins as the quote asset
@@ -114,6 +103,31 @@ function pair(inTokenAddr, outTokenAddr, vaultAddr, index) {
outToken.symbol+'\\'+inToken.symbol : inToken.symbol+'\\'+outToken.symbol
}
// <thead>
// <tr>
// <th className="num d-none d-md-table-cell">Date</th>
// <!-- todo placement date instead -->
// <th className="token d-none d-sm-table-cell">Input</th>
// <th className="token d-none d-sm-table-cell">Output</th>
// <th className="amount">Remaining</th>
// <th className="amount">Filled</th>
// <th className="amount d-none d-md-table-cell">Avg&nbsp;Price</th>
// <th className="status">Status</th>
// <th className="cancel d-none d-lg-table-cell">&nbsp;</th>
// </tr>
// </thead>
const datatableHeaders = [
{title: 'Date', align: 'start', key: 'start'},
{title: 'Input', align: 'end', key: 'input'},
{title: 'Output', align: 'end', key: 'output'},
{title: 'Remaining', align: 'end', key: 'remaining'},
{title: 'Filled', align: 'end', key: 'filled'},
{title: 'Avg Price', align: 'end', key: 'avg'},
{title: 'Status', align: 'end', key: 'status'},
{title: '', align: 'end', key: 'action'},
];
const orders = computed(()=>{
// example twap
// status = [
@@ -174,7 +188,6 @@ const orders = computed(()=>{
t.endTime = t.endTimeIsRelative ? intervalString(t.endTime) : dateString(t.endTime)
return t
})
st.start = dateString(st.start)
const fmtX18 = {decimals: 18, width: 256, signed: false};
st.filled = o.amountIsInput ? st.filledIn : st.filledOut
st.avg = BigInt(st.filled) === 0n ? null :
@@ -183,23 +196,11 @@ const orders = computed(()=>{
.toUnsafeFloat().toPrecision(5) // todo precision
st.trancheFilled = o.amountIsInput ? st.trancheFilledIn : st.trancheFilledOut
st.amountToken = o.amountIsInput ? o.tokenIn : o.tokenOut
// // [index, symbolA, symbolB, amount, amountSymbol, filled]
// const inTokenAddr = status[0][0]
// const outTokenAddr = status[0][1]
// const amountIsInput = !!(status[0][4])
// const amountTokenAddr = amountIsInput ? inTokenAddr : outTokenAddr
// // console.log('getamount', status[0][3])
// const amount = BigInt(status[0][3])
// // console.log('amount', amount)
// // console.log('getfilled', amountIsInput ? status[4] : status[5])
// const filled = BigInt(amountIsInput ? status[4] : status[5])
// // console.log('filled', filled)
// const amountIn = BigInt(status[4])
// const amountOut = BigInt(status[5])
// const avg = !amountIn || !amountOut ? null :
// FixedNumber.fromValue(status[5], 0, fmtX18).div(FixedNumber.fromValue(status[4], 0, fmtX18))
// const state = status[1]
// result.push([index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avg, state])
st.input = o.amountIsInput ? o.amount : 0
st.output = !o.amountIsInput ? o.amount : 0
st.remaining = o.amount - st.filled
st.selectable = st.state===OrderState.Open
st.status = st.state
}
}
console.log('orders', result)