orders submitting but breaking due to fee send

src/components/chart/ChartOrder.vue

@@ -18,7 +18,7 @@
                  :color="color" variant="text" @click="order.amountIsTokenA=!order.amountIsTokenA"/>
         </template>
       </v-text-field>
-      <template v-for="b in builders(order)">
+      <template v-for="b in order.builders">
         <builder-factory :order="order" :builder="b"/>
       </template>
       <div class="my-3">
@@ -35,17 +35,12 @@
   </row-bar>
 </template>
 
-<script>
-import {newBuilder} from "@/orderbuild.js";
-const defaultMarketBuilder = newBuilder('MarketBuilder')
-</script>
-
 <script setup>
 
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
 import {newBuilder, useChartOrderStore} from "@/orderbuild.js";
 import {useOrderStore} from "@/store/store.js";
-import {computed} from "vue";
+import {computed, watch} from "vue";
 import {lightenColor, lightenColor2} from "@/misc.js";
 import {useTheme} from "vuetify";
 import RowBar from "@/components/chart/RowBar.vue";
@@ -56,16 +51,21 @@ const props = defineProps(['order'])
 const co = useChartOrderStore()
 const os = useOrderStore()
 
+const marketBuilder = newBuilder('MarketBuilder')
 console.log('order', props.order)
 function build(order, component, options={}) {
   order.builders.push(newBuilder(component, options))
 }
 
-function builders(order) {
-  let result = order.builders
-  return result.length > 0 ? result : [defaultMarketBuilder]
+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)
 }
 
+watch(props.order, marketBuilderWatcher)
+
 const theme = useTheme().current
 const color = computed(()=>new Color(props.order.buy?theme.value.colors.success:theme.value.colors.error).darken(0.2).string())
 const lightColor = computed(() => lightenColor(color.value))

src/components/chart/ChartOrderPane.vue

@@ -2,7 +2,7 @@
   <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" :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">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 +24,7 @@
 </template>
 
 <script setup>
-import {useChartOrderStore} from "@/orderbuild.js";
+import {builderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
 import {computed, onBeforeUnmount, ref} from "vue";
 import {useOrderStore, useStore} from "@/store/store.js";
@@ -33,6 +33,8 @@ import {routeFinder} from "@/blockchain/route.js";
 import ChartOrder from "@/components/chart/ChartOrder.vue";
 import {useTheme} from "vuetify";
 import Toolbar from "@/components/chart/Toolbar.vue";
+import {Exchange, newOrder} from "@/blockchain/orderlib.js";
+import {pendOrder} from "@/blockchain/wallet.js";
 
 const s = useStore()
 const co = useChartOrderStore()
@@ -59,8 +61,48 @@ function cancelOrder() {
   showCancel.value = true
 }
 
-function placeOrder() {
-
+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 ? tokenIn.d : tokenOut.d
+    const amount = 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)
+    built.push(order)
+  }
+  co.built = built
+  console.log('place orders', built)
+  if (built.length !== 1) {
+    console.error('Multiple orders not supported')
+  }
+  else {
+    await pendOrder(built[0])
+  }
 }
 
 </script>

src/components/chart/LimitBuilder.vue

@@ -60,9 +60,9 @@
 </template>
 
 <script setup>
-import {computed, onBeforeUnmount, onMounted, watch} from "vue";
+import {computed, onBeforeUnmount, onMounted, onUnmounted, watch} from "vue";
 import {chart} from "@/charts/chart.js";
-import {useChartOrderStore} from "@/orderbuild.js";
+import {applyLine2, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
 import {HLine} from "@/charts/shape.js";
 import {builderDefaults, lightenColor2, lineColor} from "@/misc.js";
@@ -70,6 +70,7 @@ import {useTheme} from "vuetify";
 import {useOrderStore} from "@/store/store.js";
 import RowBar from "@/components/chart/RowBar.vue";
 import ColorBand from "@/components/chart/ColorBand.vue";
+import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 
 const os = useOrderStore()
 const co = useChartOrderStore()
@@ -96,6 +97,33 @@ builderDefaults(props, emit, {
   color: defaultColor,
 })
 
+
+function buildTranches() {
+  const builder = props.builder
+  const order = props.order
+  const tranches = []
+  if (!builder || !order) return
+  console.log('buildTranches', builder, order, tranches)
+  const ps = prices.value
+  const ws = weights.value
+  for(let i=0; i<ps.length; i++) {
+    const p = ps[i]
+    const w = ws[i]
+    const t = newTranche({
+      fraction: w * MAX_FRACTION,
+    })
+    const symbol = co.selectedSymbol
+    console.log('symbol', symbol)
+    applyLine2(t, !order.buy, p, 0, symbol.decimals, symbol.inverted)
+    tranches.push(t)
+  }
+  return tranches
+}
+
+onMounted(() => builderFuncs[props.builder.id] = buildTranches)
+onUnmounted(() => delete builderFuncs[props.builder.id])
+
+
 const skew100 = computed( {
   get() {return props.builder.skew*100},
   set(v) {props.builder.skew = v/100; adjustShapes()}
@@ -296,7 +324,7 @@ function allocationText(weight) {
 
 function adjustShapes() {
   // this is where all the lines are created or adjusted
-  console.log('adjustShapes()')
+  // console.log('adjustShapes()')
 
   const limits = prices.value
   const colorStrings = colors.value

src/components/chart/MarketBuilder.vue

@@ -16,11 +16,12 @@
 </template>
 
 <script setup>
-import {useChartOrderStore} from "@/orderbuild.js";
+import {builderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {builderDefaults} from "@/misc.js";
 import {useOrderStore} from "@/store/store.js";
-import {computed} from "vue";
+import {computed, onMounted, onUnmounted} from "vue";
 import RowBar from "@/components/chart/RowBar.vue";
+import {newTranche} from "@/blockchain/orderlib.js";
 
 const co = useChartOrderStore()
 const props = defineProps(['order', 'builder'])
@@ -34,6 +35,13 @@ const slippage = computed({
 })
 console.log('builder.slippage', props.builder.slippage)
 
+function buildTranches() {
+  return [newTranche({slippage: slippage.value})]
+}
+
+onMounted(() => builderFuncs[props.builder.id] = buildTranches)
+onUnmounted(() => delete builderFuncs[props.builder.id])
+
 </script>
 
 <style scoped lang="scss">