auto market order fix

src/components/chart/ChartOrder.vue

@@ -1,3 +1,4 @@
+
 <template>
   <row-bar :color="color">
     <color-band :color="color"/>
@@ -18,7 +19,7 @@
                  :color="color" variant="text" @click="order.amountIsTokenA=!order.amountIsTokenA"/>
         </template>
       </v-text-field>
-      <template v-for="b in order.builders">
+      <template v-for="b in builders">
         <builder-factory :order="order" :builder="b"/>
       </template>
       <div class="my-3">
@@ -38,33 +39,68 @@
 <script setup>
 
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
-import {newBuilder, useChartOrderStore} from "@/orderbuild.js";
+import {builderFuncs, newBuilder, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {useOrderStore} from "@/store/store.js";
-import {computed, watch} from "vue";
+import {computed, onMounted, onUnmounted, watch} from "vue";
 import {lightenColor, lightenColor2} from "@/misc.js";
 import {useTheme} from "vuetify";
 import RowBar from "@/components/chart/RowBar.vue";
 import ColorBand from "@/components/chart/ColorBand.vue";
 import Color from "color";
+import {Exchange, newOrder} from "@/blockchain/orderlib.js";
 
 const props = defineProps(['order'])
 const co = useChartOrderStore()
 const os = useOrderStore()
 
 const marketBuilder = newBuilder('MarketBuilder')
+
+const builders = computed(()=>props.order.builders.length > 0 ? props.order.builders : [marketBuilder])
+
+
 console.log('order', props.order)
 function build(order, component, options={}) {
   order.builders.push(newBuilder(component, options))
 }
 
-function marketBuilderWatcher() {
-  if (props.order.builders.length === 0)
-    props.order.builders.push(marketBuilder)
-  else if (props.order.builders.length>=2 && props.order.builders[0] === marketBuilder)
-    props.order.builders = props.order.builders.filter((b)=>b!==marketBuilder)
+
+function buildOrder() {
+  const order = props.order
+  console.log('buildOrder', order)
+  // struct SwapOrder {
+  //     address tokenIn;
+  //     address tokenOut;
+  //     Route route;
+  //     uint256 amount;
+  //     uint256 minFillAmount;  // if a tranche has less than this amount available to fill, it is considered completed
+  //     bool amountIsInput;
+  //     bool outputDirectlyToOwner;
+  //     uint64 chainOrder; // use NO_CHAIN for no chaining. chainOrder index must be < than this order's index for safety (written first) and chainOrder state must be Template
+  //     Tranche[] tranches;
+  // }
+  const symbol = co.selectedSymbol
+  const fee = co.selectedPool[1]
+  const tokenIn = order.buy ^ symbol.inverted ? symbol.quote : symbol.base
+  const tokenOut = order.buy ^ symbol.inverted ? 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)
+
+  let tranches = []
+  for (const builder of builders.value) {
+    console.log('builder', builder)
+    const ts = builderFuncs[builder.id]()
+    console.log('tranches', ts)
+    tranches = [...tranches, ...ts]
+  }
+
+  return newOrder(tokenIn.a, tokenOut.a, Exchange.UniswapV3, fee, amount, amountIsInput, tranches)
 }
 
-watch(props.order, marketBuilderWatcher)
+
+onMounted(()=>orderFuncs[props.order.id] = buildOrder)
+onUnmounted(()=>delete orderFuncs[props.order.id])
+
 
 const theme = useTheme().current
 const color = computed(()=>new Color(props.order.buy?theme.value.colors.success:theme.value.colors.error).darken(0.2).string())

src/components/chart/ChartPlaceOrder.vue

@@ -2,7 +2,10 @@
   <div class="d-flex flex-column h-100">
     <toolbar>
       <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
-      <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
+      <v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
+             :color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing">
+        Place Order
+      </v-btn>
       <v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
     </toolbar>
     <v-dialog v-model="showCancel" max-width="300">
@@ -24,7 +27,7 @@
 </template>
 
 <script setup>
-import {builderFuncs, useChartOrderStore} from "@/orderbuild.js";
+import {builderFuncs, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
 import {computed, onBeforeUnmount, ref} from "vue";
 import {useOrderStore, useStore} from "@/store/store.js";
@@ -61,38 +64,15 @@ function cancelOrder() {
   showCancel.value = true
 }
 
+
 async function placeOrder() {
   const co = useChartOrderStore();
   const chartOrders = co.orders;
   const built = []
   for (const chartOrder of chartOrders) {
     console.log('chartOrder', chartOrder)
-    let tranches = []
-    for (const builder of chartOrder.builders) {
-      console.log('builder', builder)
-      const ts = builderFuncs[builder.id]()
-      console.log('tranches', ts)
-      tranches = [...tranches, ...ts]
-    }
-    // struct SwapOrder {
-    //     address tokenIn;
-    //     address tokenOut;
-    //     Route route;
-    //     uint256 amount;
-    //     uint256 minFillAmount;  // if a tranche has less than this amount available to fill, it is considered completed
-    //     bool amountIsInput;
-    //     bool outputDirectlyToOwner;
-    //     uint64 chainOrder; // use NO_CHAIN for no chaining. chainOrder index must be < than this order's index for safety (written first) and chainOrder state must be Template
-    //     Tranche[] tranches;
-    // }
-    const symbol = co.selectedSymbol
-    const fee = co.selectedPool[1]
-    const tokenIn = chartOrder.buy ^ symbol.inverted ? symbol.quote : symbol.base
-    const tokenOut = chartOrder.buy ^ symbol.inverted ? symbol.base : symbol.quote
-    const amountDec = chartOrder.amountIsTokenA ? symbol.base.d : symbol.quote.d
-    const amount = BigInt(Math.trunc(chartOrder.amount * 10 ** amountDec))
-    const amountIsInput = !!(chartOrder.amountIsTokenA ^ chartOrder.buy)
-    const order = newOrder(tokenIn.a, tokenOut.a, Exchange.UniswapV3, fee, amount, amountIsInput, tranches)
+    const buildOrder = orderFuncs[chartOrder.id]
+    const order = buildOrder()
     built.push(order)
   }
   co.built = built

src/orderbuild.js

@@ -25,6 +25,9 @@ const Order = {
 }
 
 
+// the key is order.id and the value is a function() that returns an order
+export const orderFuncs = {}
+
 // the key is order.builder.id and the value is a function() that returns an array of tranches
 export const builderFuncs = {}
 
@@ -42,8 +45,7 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
     const drawingCallbacks = ref(null)  // only during draw mode
 
     function newOrder() {
-        console.log('cos new order')
-        const order = {id:uuid(), amount:1, amountIsTokenA: true, buy: true, builders:[newBuilder('MarketBuilder', {slippage:0.1})], }
+        const order = {id:uuid(), amount:1, amountIsTokenA: true, buy: true, builders:[] }
         orders.value.push(order)
         built.value.push({})
         selectedOrder.value = order