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

orders view fixes

Browse Source
This commit is contained in:
Tim
2024-03-29 15:16:17 -04:00
parent c084bbfdc8
commit 57edbcc38b
4 changed files with 110 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/LinePrice.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<span v-if="b||m">
{{description}}
<suspense>
<pair-price :base="base" :quote="quote" :value="price" :show-btn="showBtn"/>
</suspense>
</span>
</template>
<script setup>
import PairPrice from "@/components/PairPrice.vue";
import {computed} from "vue";
import {useStore} from "@/store/store.js";
const props = defineProps(['base', 'quote', 'm', 'b', 'isMin', 'showBtn', 'buy'])
const s = useStore()
const price = computed(()=>props.m === 0 ? props.b : props.b + props.m * s.clock)
const description = computed(()=>{
// console.log('tranche line', isMin, b, m)
if( props.m !== 0 )
return 'diagonal'
return props.isMin === props.buy ? 'dont-chase' : 'limit'
})
</script>
<style scoped lang="scss">
</style>

42
src/components/Orders.vue
View File

@@ -40,7 +40,9 @@
</template>
-->
<template v-slot:item.avg="{ item }">
<pair-price :base-addr="item.order.tokenIn" :quote-addr="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
<suspense>
<pair-price :base="item.order.tokenIn" :quote="item.order.tokenOut" :value="item.avg" :show-btn="true"/>
</suspense>
</template>
<template v-slot:item.state="{ item }">
<v-chip v-if="item.state===PendingOrderState.Submitted || item.state===PendingOrderState.Signing"
@@ -100,8 +102,12 @@
<td class="text-left">
<span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span>
<span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span>
<span class="mx-3">{{ describeTrancheLine(item, true, t.minIntercept, t.minSlope) }}</span>
<span class="mx-3">{{ describeTrancheLine(item, false, t.maxIntercept, t.maxSlope) }}</span>
<line-price class="mx-3" :base="item.token0" :quote="item.token1"
:b="t.minIntercept" :m="t.minSlope" :is-min="true"
:buy="item.order.tokenIn===item.token1" :show-btn="true"/>
<line-price class="mx-3" :base="item.token0" :quote="item.token1"
:b="t.maxIntercept" :m="t.maxSlope" :is-min="false"
:buy="item.order.tokenIn===item.token1" :show-btn="true"/>
</td>
</tr>
</tbody>
@@ -115,6 +121,11 @@
</template>
<script setup>
import LinePrice from "@/components/LinePrice.vue";
const PairPrice = defineAsyncComponent(()=>import("@/components/PairPrice.vue"))
const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
import {FixedNumber} from "ethers";
import {useStore} from "@/store/store";
import {computed, defineAsyncComponent, ref} from "vue";
@@ -122,11 +133,6 @@ import Btn from "@/components/Btn.vue"
import {cancelAll, cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
import {dateString, pairPriceAddr} from "@/misc.js";
import {isOpen, OrderState} from "@/blockchain/orderlib.js";
import NewOrder from "@/components/NewOrder.vue";
import PairPrice from "@/components/PairPrice.vue";
const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
const TokenSymbol = defineAsyncComponent(()=>import('./TokenSymbol.vue'))
const s = useStore()
const ws = useWalletStore()
@@ -226,8 +232,6 @@ const orders = computed(()=>{
else {
st.avg = FixedNumber.fromValue(status.filledOut, 0, fmtX18)
.div(FixedNumber.fromValue(status.filledIn, 0, fmtX18)).toUnsafeFloat();
if( o.tokenIn > o.tokenOut )
st.avg = 1/st.avg
}
st.trancheFilled = o.amountIsInput ? st.trancheFilledIn : st.trancheFilledOut
st.amountToken = o.amountIsInput ? o.tokenIn : o.tokenOut
@@ -235,6 +239,8 @@ const orders = computed(()=>{
st.output = !o.amountIsInput ? o.amount : 0
st.remaining = o.amount - st.filled
st.selectable = st.state===OrderState.Open
st.token0 = o.tokenIn < o.tokenOut ? o.tokenIn : o.tokenOut
st.token1 = o.tokenIn < o.tokenOut ? o.tokenOut : o.tokenIn
}
}
console.log('orders', result)
@@ -258,22 +264,6 @@ function describeTrancheTime(st, isStart, t) {
return result
}
function describeTrancheLine(st, isMin, b, m) {
// todo make this a PairPrice
if( b===0 && m===0 ) return ''
const chainId = useStore().chainId
// console.log('tranche line', isMin, b, m)
const inverted = st.order.tokenIn > st.order.tokenOut
const t0 = inverted ? st.order.tokenIn : st.order.tokenOut
const t1 = !inverted ? st.order.tokenIn : st.order.tokenOut
if( m !== 0 ) {
const limit = b + m * s.clock
const price = pairPriceAddr(chainId, t0, t1, limit);
return 'diagonal ' + (price === null ? null : price.toPrecision(5))
}
const price = pairPriceAddr(chainId, t0, t1, b)
return (isMin === st.order.amountIsInput ? 'dont-chase ' : 'limit ') + (price === null ? null : price.toPrecision(5))
}
</script>

32
src/components/PairPrice.vue
View File

@@ -1,7 +1,10 @@
<template>
<span>
{{adjValue}}
<btn v-if="showBtn && adjValue!==null" size="small" variant="plain" @click="invert()">{{pair.value?pair.value.toPrecision(5):''}}</btn>
{{adjValue === null ? '' : adjValue.toPrecision(5)}}
<v-btn v-if="showBtn && adjValue!==null" size="small" variant="text" class="ml-0 px-0"
@click="flipInversionPreference(s.chainId, base, quote)">
{{pair}}
</v-btn>
</span>
<!-- todo optional pair label and inversion button -->
</template>
@@ -9,30 +12,25 @@
<script setup>
import {usePrefStore, useStore} from "@/store/store";
import {computed} from "vue";
import {token} from "@/blockchain/token.js";
import {pairKey, pairPrice} from "@/misc.js";
import Btn from "@/components/Btn.vue";
import {getToken} from "@/blockchain/token.js";
import {flipInversionPreference, inversionPreference, pairPrice} from "@/misc.js";
const props = defineProps(['value', 'baseToken', 'quoteToken', 'baseAddr', 'quoteAddr', 'showBtn', 'decimals'])
const props = defineProps(['value', 'base', 'quote', 'showBtn'])
const s = useStore()
const prefs = usePrefStore()
const base = computed(() => props.baseToken ? props.baseToken : token(s.chainId, props.baseAddr))
const quote = computed(() => props.quoteToken ? props.quoteToken : token(s.chainId, props.quoteAddr))
function invert() {
const k = pairKey(base.value,quote.value)
prefs.inverted[k] = !prefs.inverted[k]
async function token(obj) {
return obj.a ? obj : await getToken(s.chainId, obj)
}
const adjValue = computed(() => props.value === null || props.value === undefined || !base.value || !quote.value ? null : pairPrice(s.chainId, base.value, quote.value, props.value, props.decimals))
const base = await token(props.base)
const quote = await token(props.quote)
const adjValue = computed(() => props.value === null || props.value === undefined ? null : pairPrice(s.chainId, base, quote, props.value))
const pair = computed(() => {
const inToken = props.baseToken ? props.baseToken : token(s.chainId, props.baseAddr)
const outToken = props.quoteToken ? props.quoteToken : token(s.chainId, props.quoteAddr)
return !inToken || !outToken ? '___\\___' : prefs.inverted[pairKey(s.chainId, inToken, outToken)] ?
outToken.symbol + '\\' + inToken.symbol : inToken.symbol + '\\' + outToken.symbol
return inversionPreference(s.chainId, base, quote) ? quote.s + '/' + base.s : base.s + '/' + quote.s
})

57
src/misc.js
View File

@@ -3,6 +3,19 @@ import {usePrefStore, useStore} from "@/store/store.js";
import {token} from "@/blockchain/token.js";
import Color from "color";
const QUOTE_SYMBOLS = [
// in order of preference
// todo put this in metadata.json using addrs
'USDT',
'USDC',
'USDC.e',
'BTC',
'WBTC',
'ETH',
'WETH',
'ARB',
]
export class SingletonCoroutine {
constructor(f, delay = 10) {
this.f = f
@@ -106,24 +119,44 @@ export function pairPriceAddr(chainId, baseTokenAddr, quoteTokenAddr, price) {
}
export function pairPrice(chainId, baseToken, quoteToken, price, decimals = null) {
export function flipInversionPreference(chainId, base, quote) {
const k = pairKey(chainId, base, quote)
const prefs = usePrefStore()
prefs.inverted[k] = !prefs.inverted[k]
}
export function inversionPreference(chainId, base, quote) {
// returns the user preference for whether to invert this pair or not
const invertedKey = pairKey(chainId, base, quote);
const prefs = usePrefStore()
if (!(invertedKey in prefs.inverted)) {
// todo prefer stablecoins as the quote asset
let inverted = false;
for (const q of QUOTE_SYMBOLS) {
if (quote.s === q)
break // definitely not inverted
if (base.s === q) {
inverted = true
break // definitely inverted
}
}
prefs.inverted[invertedKey] = inverted
}
return prefs.inverted[invertedKey]
}
export function pairPrice(chainId, baseToken, quoteToken, price) {
// console.warn('pairPrice', chainId, baseToken, quoteToken, price, decimals)
if (!price) return null
if (price === null || price === undefined)
return price
if (decimals === null)
decimals = baseToken.d - quoteToken.d
return null
const decimals = quoteToken.d - baseToken.d
if (decimals >= 0)
price /= 10 ** decimals
else
price *= 10 ** -decimals
const invertedKey = pairKey(chainId, baseToken, quoteToken);
const prefs = usePrefStore()
if (!(invertedKey in prefs.inverted)) {
// todo prefer stablecoins as the quote asset
prefs.inverted[invertedKey] = false
}
if (prefs.inverted[invertedKey])
if (inversionPreference(chainId, baseToken, quoteToken))
price = 1 / price
return price
}