order validity checks

src/components/Vault.vue

@@ -45,7 +45,7 @@
             <v-card-actions><btn icon="mdi-safe-square" color="grey-darken-1" text="Create Vault" @click="ensureVault"/></v-card-actions>
       -->
       <v-card-text v-if="num===0">
-        Please wait while your vault is being created. This should only take a few seconds.
+        Please wait while your vault is being created. This should only take a few seconds...
       </v-card-text>
     </div>
     <div v-if="s.vaults.length>num" :class="empty?'maxw':''">

src/components/chart/ChartOrder.vue

@@ -43,7 +43,7 @@
 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} from "vue";
+import {computed, onMounted, onUnmounted, onUpdated, watch, watchEffect} from "vue";
 import {lightenColor, lightenColor2} from "@/misc.js";
 import {useTheme} from "vuetify";
 import RowBar from "@/components/chart/RowBar.vue";
@@ -66,9 +66,27 @@ function build(order, component, options={}) {
 }
 
 
+// check order validity
+watchEffect(()=>{
+  let valid = props.order.amount
+  if (valid) {
+    for (const builder of builders.value) {
+      if (!builder.valid) {
+          valid = false
+          break
+      }
+    }
+  }
+  props.order.valid = valid
+})
+
+
 function buildOrder() {
   const order = props.order
   console.log('buildOrder', order)
+
+  if (!order.amount) return null
+
   // struct SwapOrder {
   //     address tokenIn;
   //     address tokenOut;

src/components/chart/ChartPlaceOrder.vue

@@ -3,7 +3,7 @@
       <template v-slot: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" :disabled="co.drawing">
+               :color="orderColor" v-if="co.orders.length>0" :disabled="!valid">
           Place Dexorder
         </v-btn>
         <v-btn variant="flat" prepend-icon="mdi-delete" v-if="co.orders.length>0" @click="cancelOrder">Reset</v-btn>
@@ -60,13 +60,21 @@ const showResetDialog = ref(false)
 const theme = useTheme().current
 const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)
 
+const valid = computed(()=>{
+  if (co.drawing)
+    return false
+  for ( const order of co.orders )
+    if (!order.valid)
+      return false
+  return true
+})
+
 function cancelOrder() {
   showResetDialog.value = true
 }
 
 
 async function placeOrder() {
-  const co = useChartOrderStore();
   const chartOrders = co.orders;
   const built = []
   for (const chartOrder of chartOrders) {
@@ -75,7 +83,6 @@ async function placeOrder() {
     const order = buildOrder()
     built.push(order)
   }
-  co.built = built
   console.log('place orders', built)
   if (built.length !== 1) {
     console.error('Multiple orders not supported')

src/components/chart/LimitBuilder.vue

@@ -33,7 +33,7 @@
       <div v-if="rungs>1" class="mx-2 d-flex align-center">
         <v-slider v-if="rungs>1" direction="vertical" min="-100" max="100" v-model="skew100" class="no-slider-bg ml-2 mr-4" hide-details/>
         <v-text-field type="number" v-model="skew100" min="-100" max="100"
-                      density="compact" hide-details variant="outlined" label="Skew" step="10"
+                      density="compact" hide-details variant="outlined" label="Skew" step="5"
                       :color="color" :base-color="color">
           <template v-slot:prepend>
             <v-btn icon="mdi-scale-balance" variant="plain" @click="builder.skew=0; adjustShapes()" :color="color"/>
@@ -61,7 +61,7 @@
 </template>
 
 <script setup>
-import {computed, onBeforeUnmount, onMounted, onUnmounted, onUpdated, watch} from "vue";
+import {computed, onBeforeUnmount, onMounted, onUnmounted, onUpdated, watch, watchEffect} from "vue";
 import {chart} from "@/charts/chart.js";
 import {applyLine2, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
@@ -88,6 +88,7 @@ const defaultColor = computeDefaultColor()
 
 // Fields must be defined in order to be reactive
 builderDefaults(props, emit, {
+  valid: false,
   allocation: 1.0,
   start: null, // todo
   end: null, // todo
@@ -99,11 +100,22 @@ builderDefaults(props, emit, {
 })
 
 
-function buildTranches() {
-  const builder = props.builder
+// validity checks
+watchEffect(()=>{
   const order = props.order
+  const builder = props.builder
+  props.builder.valid =
+      order && builder &&
+      builder.rungs >= 1 && builder.priceA &&
+      (builder.rungs < 2 || builder.priceB)
+})
+
+
+function buildTranches() {
+  const order = props.order
+  const builder = props.builder
   const tranches = []
-  if (!builder || !order) return
+
   console.log('buildTranches', builder, order, tranches)
   const ps = prices.value
   const ws = weights.value
@@ -122,7 +134,7 @@ function buildTranches() {
 }
 
 
-// todo move this into a supercomponent
+// todo move this code and the validity check into a supercomponent
 let lastId = props.builder.id
 builderFuncs[props.builder.id] = buildTranches
 onUpdated(()=>{
@@ -228,7 +240,7 @@ function computeRange() {
   let range = 0
   const series = chart.getSeries()
   const bars = series.data().bars();
-  const final = Math.max(bars.size() - 10, 0)
+  const final = Math.max(bars.size() - 50, 0)
   let count = 0
   for (let barIndex = bars.size() - 1; barIndex >= final; barIndex--) {
     count++
@@ -247,11 +259,15 @@ const rungs = computed({
     return props.builder.rungs
   },
   set(r) {
+    if (!r) {
+      props.builder.rungs = 1
+      return
+    }
     r = Number(r)
     props.builder.rungs = r
     if ( r > 0 && props.builder.priceB === null ) {
       // convert single line to a range
-      const range = computeRange()
+      const range = 2 * computeRange()
       const mid = props.builder.priceA
       props.builder.priceA = mid - range/2
       props.builder.priceB = mid + range/2

src/components/chart/MarketBuilder.vue

@@ -30,7 +30,7 @@ const props = defineProps(['order', 'builder'])
 const emit = defineEmits(['update:builder'])
 
 // Fields must be defined in order to be reactive
-builderDefaults(props, emit, {slippage: 0.10,})
+builderDefaults(props, emit, {valid: true, slippage: 0.10,})
 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)}

src/orderbuild.js

@@ -29,17 +29,18 @@ const Order = {
 export const orderFuncs = {}
 
 // the key is order.builder.id and the value is a function() that returns an array of tranches
+// if null is returned, the builder inputs are not valid and the place order button will be disabled
 export const builderFuncs = {}
 
 function newDefaultOrder() {
-    return { id:uuid(), amount:1, amountIsTokenA: true, buy: true, builders:[] }
+    return { id:uuid(), valid: false, amount:null, amountIsTokenA: true, buy: true, builders:[] }
 }
 
 export const useChartOrderStore = defineStore('chart_orders', () => {
     const chartReady = ref(false)
 
-    const orders = ref([newDefaultOrder()])  // order models in UI format
-    const built = ref([{}])  // orders in blockchain format, ready to send
+    const defaultOrder = newDefaultOrder()
+    const orders = ref([defaultOrder])  // order models in UI format
     const selectedOrder = ref(null)
     const selectedSymbol = ref(null)
     const selectedPool = ref(null)