symbol switching fix; max amount

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>

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