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

symbol switching fix; max amount

Browse Source
This commit is contained in:
Tim
2024-04-12 16:46:34 -04:00
parent fe1b633c4a
commit 0084847d82
7 changed files with 88 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/charts/chart.js
View File

@@ -17,10 +17,10 @@ export function removeSymbolChangedCallback(cb) {
}
function changeSymbol(symbol) {
console.log('tv changeSymbol', symbol)
const info = lookupSymbol(symbol.full_name)
lastSymbolChangedArgs = info
symbolChangedCbs.forEach((cb)=>cb(info))
useChartOrderStore().selectedSymbol = info
}

1
src/components/Vault.vue
View File

@@ -103,6 +103,7 @@ const TokenRow = defineAsyncComponent(()=>import('./TokenRow.vue'))
const s = useStore()
const props = defineProps(['owner', 'num'])
// todo use store.vault
const addr = computed(()=>vaultAddress(s.factory, s.vaultInitCodeHash, props.owner, props.num))
const balances = computed(()=>{
const bs = s.vaultBalances[addr.value]

77
src/components/chart/ChartOrder.vue
View File

@@ -3,20 +3,25 @@
<row-bar :color="color">
<color-band :color="color"/>
<div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
<v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="order.amount" variant="outlined" density="compact" hide-details
min="0" :step="order.amount?Math.floor(order.amount/1000):1"
style="max-width:24em; display: inline-grid"
class="py-2" :color="color"
<v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="order.amount" variant="outlined"
density="compact"
:hint="available" :persistent-hint="true"
min="0"
class="amount py-2" :color="color"
:label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
>
<template v-slot:prepend>
<template #prepend>
<v-btn variant="outlined" :color="color" class="ml-3"
:text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s"
@click="order.buy=!order.buy"/>
</template>
<template v-slot:append-inner>
<v-btn :text="order.amountIsTokenA?co.selectedSymbol.base.s:co.selectedSymbol.quote.s+' worth'"
:color="color" variant="text" @click="order.amountIsTokenA=!order.amountIsTokenA"/>
<template #prepend-inner>
<v-btn variant="text" text="max" class="px-0" size="small"
:disabled="!maxAmount" @click="setMax"/>
</template>
<template #append-inner>
<v-btn :text="order.amountIsTokenA?co.baseToken.s:co.quoteToken.s+' worth'"
:color="color" variant="text" @click="toggleAmountToken"/>
</template>
</v-text-field>
<template v-for="b in builders">
@@ -42,8 +47,8 @@
import BuilderFactory from "@/components/chart/BuilderFactory.vue";
import {builderFuncs, newBuilder, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
import {useOrderStore} from "@/store/store.js";
import {computed, onMounted, onUnmounted, onUpdated, watch, watchEffect} from "vue";
import {useOrderStore, useStore} from "@/store/store.js";
import {computed, onUnmounted, onUpdated, ref, watchEffect} from "vue";
import {lightenColor, lightenColor2} from "@/misc.js";
import {useTheme} from "vuetify";
import RowBar from "@/components/chart/RowBar.vue";
@@ -52,12 +57,15 @@ import Color from "color";
import {Exchange, newOrder} from "@/blockchain/orderlib.js";
const props = defineProps(['order'])
const s = useStore()
const co = useChartOrderStore()
const os = useOrderStore()
const marketBuilder = newBuilder('MarketBuilder')
const builders = computed(()=>props.order.builders.length > 0 ? props.order.builders : [marketBuilder])
const tokenIn = computed(()=>props.order.buy ? co.quoteToken : co.baseToken)
const tokenOut = computed(()=>props.order.buy ? co.baseToken : co.quoteToken)
console.log('order', props.order)
@@ -100,8 +108,6 @@ function buildOrder() {
// }
const symbol = co.selectedSymbol
const fee = co.selectedPool[1]
const tokenIn = order.buy ? symbol.quote : symbol.base
const tokenOut = order.buy ? symbol.base : symbol.quote
const amountDec = order.amountIsTokenA ? symbol.base.d : symbol.quote.d
const amount = BigInt(Math.trunc(order.amount * 10 ** amountDec))
const amountIsInput = !!(order.amountIsTokenA ^ order.buy)
@@ -114,7 +120,7 @@ function buildOrder() {
tranches = [...tranches, ...ts]
}
return newOrder(tokenIn.a, tokenOut.a, Exchange.UniswapV3, fee, amount, amountIsInput, tranches)
return newOrder(tokenIn.value.a, tokenOut.value.a, Exchange.UniswapV3, fee, amount, amountIsInput, tranches)
}
@@ -138,18 +144,55 @@ const bgColorStyle = computed(() => { return {'background-color': color.value} }
const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
const inToken = computed( ()=>props.order.buy ? co.selectedSymbol.quote : co.selectedSymbol.base )
const inToken = computed( ()=>props.order.buy ? co.quoteToken : co.baseToken )
const maxAmount = computed(()=>{
const balance = s.balances[inToken.value]
const token = inToken.value;
if (!token)
return null
const balance = s.balances[token.a]
if( !balance )
return 0
const divisor = os.amountIsTotal ? 1 : os.tranches
return balance / 10**inToken.value.d / divisor
return balance / 10**token.d / divisor
})
const available = computed(()=>{
const max = maxAmount.value
return max === null ? '' : `Available: ${maxAmount.value} ${tokenIn.value.s}`
})
const lastMaxValue = ref(null)
function setMax() {
let amount = maxAmount.value
if (amount) {
const order = props.order
const price = co.price
if (order.amountIsTokenA===order.buy) {
if (order.buy)
amount /= price
else
amount *= price
}
amount = Number(amount.toPrecision(7))
lastMaxValue.value = amount
order.amount = amount
}
}
function toggleAmountToken() {
const order = props.order
order.amountIsTokenA=!order.amountIsTokenA
if (order.amount === lastMaxValue.value)
setMax()
}
</script>
<style scoped lang="scss">
.amount {
max-width: 30em;
div.v-field {
padding-left: 0;
}
}
</style>

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

@@ -35,7 +35,6 @@ const slippage = computed({
get() {console.log('slip',props.builder,props.builder.slippage); return props.builder.slippage},
set(v) {props.builder.slippage=v; emit('update:builder', props.builder)}
})
console.log('builder.slippage', props.builder.slippage)
function buildTranches() {
return [newTranche({slippage: slippage.value})]

20
src/orderbuild.js
View File

@@ -1,9 +1,9 @@
import {routeInverted, timestamp, uuid} from "@/misc.js";
import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
import {useOrderStore} from "@/store/store.js";
import {useOrderStore, useStore} from "@/store/store.js";
import {encodeIEE754} from "@/common.js";
import {defineStore} from "pinia";
import {ref} from "vue";
import {computed, ref} from "vue";
function unimplemented() { throw Error('Unimplemented') }
@@ -44,6 +44,18 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
const selectedOrder = ref(null)
const selectedSymbol = ref(null)
const selectedPool = ref(null)
const baseToken = computed(()=>selectedSymbol.value === null ? null : selectedSymbol.value.base)
const quoteToken = computed(()=>selectedSymbol.value === null ? null : selectedSymbol.value.quote)
const price = computed(() => {
if (!selectedPool.value || !selectedSymbol.value)
return null
const s = useStore()
let result = s.poolPrices[[s.chainId, selectedPool.value[0]]]
if (selectedSymbol.value.inverted)
result = 1 / result
return result
})
const drawing = ref(false)
const drawingCallbacks = ref(null) // only during draw mode
@@ -51,7 +63,6 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
function newOrder() {
const order = newDefaultOrder()
orders.value.push(order)
built.value.push({})
selectedOrder.value = order
}
@@ -76,7 +87,8 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
}
return {
chartReady, selectedSymbol, selectedPool, orders, drawing, drawingCallbacks, newOrder, removeOrder, resetOrders,
chartReady, selectedSymbol, selectedPool, baseToken, quoteToken, price,
orders, drawing, drawingCallbacks, newOrder, removeOrder, resetOrders,
}
})

11
src/socket.js
View File

@@ -22,9 +22,14 @@ socket.on('p', async (chainId, pool, price) => {
s.poolPrices[[chainId,pool]] = price
})
socket.on('ohlc', async (chainId, pool, ohlcs) => {
// console.log('pool bars', pool, ohlcs)
DataFeed.poolCallback(chainId, pool, ohlcs)
socket.on('ohlc', async (chainId, poolPeriod, ohlcs) => {
// console.log('pool bars', poolPeriod, ohlcs)
if (ohlcs && ohlcs.length) {
const split = poolPeriod.indexOf('|')
const pool = poolPeriod.slice(0,split)
useStore().poolPrices[[chainId, pool]] = ohlcs[ohlcs.length - 1][4] // closing price
}
DataFeed.poolCallback(chainId, poolPeriod, ohlcs)
})
socket.on('vb', async (chainId, vault, balances) => {

4
src/store/store.js
View File

@@ -92,8 +92,8 @@ export const useStore = defineStore('app', ()=> {
const vaultBalances = ref({}) // indexed by vault addr then by token addr. value is an int
const orders = ref({}) // indexed by vault value is another dictionary with orderIndex as key and order status values
const vault = computed(() => vaults.value.length === 0 ? null : vaults.value[0])
const balances = computed( () => vault.value === null ? {} : vaultBalances.value[vault] || {} )
const vault = computed(() => vaults.value.length === 0 ? null : vaults.value[0] )
const balances = computed( () => vault.value === null ? {} : vaultBalances.value[vault.value] || {} )
const tokens = computed(getTokens)
const factory = computed(() => !chain.value ? null : chain.value.factory)
const helper = computed(() => {console.log('chain helper', chain.value); return !chain.value ? null : chain.value.helper})