From 0084847d82964660adb6c31d0e8be064d562d2c7 Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Fri, 12 Apr 2024 16:46:34 -0400
Subject: [PATCH] symbol switching fix; max amount

---
 src/charts/chart.js                    |  2 +-
 src/components/Vault.vue               |  1 +
 src/components/chart/ChartOrder.vue    | 77 ++++++++++++++++++++------
 src/components/chart/MarketBuilder.vue |  1 -
 src/orderbuild.js                      | 20 +++++--
 src/socket.js                          | 11 +++-
 src/store/store.js                     |  4 +-
 7 files changed, 88 insertions(+), 28 deletions(-)

diff --git a/src/charts/chart.js b/src/charts/chart.js
index acf1390..209d9ed 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -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
 }
 
 
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
index ac62ab0..7593707 100644
--- a/src/components/Vault.vue
+++ b/src/components/Vault.vue
@@ -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]
diff --git a/src/components/chart/ChartOrder.vue b/src/components/chart/ChartOrder.vue
index 8f88d2a..e942d2a 100644
--- a/src/components/chart/ChartOrder.vue
+++ b/src/components/chart/ChartOrder.vue
@@ -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>
diff --git a/src/components/chart/MarketBuilder.vue b/src/components/chart/MarketBuilder.vue
index a6c48f2..a3e4763 100644
--- a/src/components/chart/MarketBuilder.vue
+++ b/src/components/chart/MarketBuilder.vue
@@ -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})]
diff --git a/src/orderbuild.js b/src/orderbuild.js
index ca87ca0..1100b54 100644
--- a/src/orderbuild.js
+++ b/src/orderbuild.js
@@ -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,
     }
 })
 
diff --git a/src/socket.js b/src/socket.js
index 57769af..41f1038 100644
--- a/src/socket.js
+++ b/src/socket.js
@@ -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) => {
diff --git a/src/store/store.js b/src/store/store.js
index 69fe64f..9a5080f 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -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})