more UI updates

src/charts/chart.js

@@ -24,6 +24,7 @@ function changeSymbol(symbol) {
 }
 
 
+/*  TradingView event keystrings
 const subscribeEvents = [
     'toggle_sidebar', 'indicators_dialog', 'toggle_header', 'edit_object_dialog', 'chart_load_requested',
     'chart_loaded', 'mouse_down', 'mouse_up', 'drawing', 'study', 'undo', 'redo', 'undo_redo_state_changed',
@@ -33,6 +34,7 @@ const subscribeEvents = [
     'drawing_event', 'study_properties_changed', 'series_properties_changed', 'panes_height_changed',
     'panes_order_changed',
 ]
+*/
 
 
 export function initWidget(el) {
@@ -82,14 +84,14 @@ export const ShapeCallback = {
     onRedraw: () => {},  // the mouse moved while in drawing mode
     onUndraw: () => {},  // drawing was canceled by clicking on a different tool
     onAddPoint: () => {},  // the user clicked a point while drawing (that point is added to the points list)
-    onCreate: (shapeId, points, props) => {}, // the user has finished creating all the control points.  drawing mode is exited and the initial shape is created.
+    onCreate: (shapeId, shape, points, props) => {}, // the user has finished creating all the control points.  drawing mode is exited and the initial shape is created.
-    onPoints: (shapeId, points) => {}, // the control points of an existing shape were changed
+    onPoints: (shapeId, shape, points) => {}, // the control points of an existing shape were changed
-    onProps: (shapeId, props) => {},  // the display properties of an existing shape were changed
+    onProps: (shapeId, shape, props) => {},  // the display properties of an existing shape were changed
-    onMove: (shapeId, points) => {},  // the entire shape was moved without dragging control points
+    onMove: (shapeId, shape, points) => {},  // the entire shape was moved without dragging control points
-    onDrag: (shapeId, points) => {},  // the shape is being dragged: this gets called on every mouse movement update during a drag
+    onDrag: (shapeId, shape, points) => {},  // the shape is being dragged: this gets called on every mouse movement update during a drag
-    onHide: (shapeId, props) => {},
+    onHide: (shapeId, shape, props) => {},
-    onShow: (shapeId, props) => {},
+    onShow: (shapeId, shape, props) => {},
-    onClick: (shapeId) => {},   // the shape was selected
+    onClick: (shapeId, shape) => {},   // the shape was selected
     onDelete: (shapeId) => {},
 }
 
@@ -100,14 +102,14 @@ export const VerboseCallback = prototype(ShapeCallback, {
     // onRedraw: ()=>{console.log('onRedraw')},
     onUndraw: ()=>{console.log('onUndraw')},
     onAddPoint: ()=>{console.log('onAddPoint')},
-    onCreate: (shapeId, points, props)=>{console.log('onCreate')},
+    onCreate: (shapeId, shape, points, props)=>{console.log('onCreate')},
-    onPoints: (shapeId, points)=>{console.log('onPoints')},
+    onPoints: (shapeId, shape, points)=>{console.log('onPoints')},
-    onProps: (shapeId, props)=>{console.log('onProps')},
+    onProps: (shapeId, shape, props)=>{console.log('onProps')},
-    onMove: (shapeId, points)=>{console.log('onMove')},
+    onMove: (shapeId, shape, points)=>{console.log('onMove')},
-    onDrag: (shapeId, points) => {console.log('onDrag')},
+    onDrag: (shapeId, shape, points) => {console.log('onDrag')},
-    onHide: (shapeId, props)=>{console.log('onHide')},
+    onHide: (shapeId, shape, props)=>{console.log('onHide')},
-    onShow: (shapeId, props)=>{console.log('onShow')},
+    onShow: (shapeId, shape, props)=>{console.log('onShow')},
-    onClick: (shapeId)=>{console.log('onClick')},
+    onClick: (shapeId, shape)=>{console.log('onClick')},
     onDelete: (shapeId)=>{console.log('onDelete')},
 })
 
@@ -141,8 +143,10 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
     if( callbacks.length )
         shapeCallbacks[shapeId] = callbacks
     // console.log(`created ${shapeType.name}`, shapeId)
-    const props = chart.getShapeById(shapeId).getProperties()
+    const shape = chart.getShapeById(shapeId)
-    invokeCallbacks(callbacks, 'onCreate', shapeId, points, props)
+    shape.bringToFront()
+    const props = shape.getProperties()
+    invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
     return shapeId
 }
 
@@ -193,9 +197,9 @@ function handleCrosshairMovement(point) {
             const shape = chart.getShapeById(shapeId);
             const points = shape.getPoints();
             // console.log(`dragging ${shapeId}`, shape, points1, points2, points3)
-            // invokeCallbacks(shapeCallbacks[shapeId], 'onDrag', shapeId, points)
+            // invokeCallbacks(shapeCallbacks[shapeId], 'onDrag', shapeId, shape, points)
             // console.log('calling onPoints')
-            invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, points)
+            invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, shape, points)
         }
     }
     else if (draggingShapeIds.length > 0) {
@@ -255,26 +259,26 @@ function doHandleDrawingEvent(id, event) {
             co.drawing = false
             const points = shape.getPoints()
             const props = shape.getProperties()
-            invokeCallbacks(shapeCallbacks[id], 'onCreate', id, points, props)
+            invokeCallbacks(shapeCallbacks[id], 'onCreate', id, shape, points, props)
-            invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
+            invokeCallbacks(shapeCallbacks[id], 'onPoints', id, shape, points)
-            invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
+            invokeCallbacks(shapeCallbacks[id], 'onProps', id, shape, props)
         }
     } else if (event === 'points_changed') {
         if (id in shapeCallbacks) {
             const points = shape.getPoints()
             // console.log('points', points)
-            invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
+            invokeCallbacks(shapeCallbacks[id], 'onPoints', id, shape, points)
         }
     } else if (event === 'properties_changed') {
         const props = shape.getProperties()
         if (id in shapeCallbacks)
-            invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
+            invokeCallbacks(shapeCallbacks[id], 'onProps', id, shape, props)
         else
             // otherwise it's an event on a shape we don't "own"
             console.log('warning: ignoring setProperties on TV shape', id, props)
     } else if (event === 'move') {
         if (id in shapeCallbacks) {
-            invokeCallbacks(shapeCallbacks[id], 'onMove', id)
+            invokeCallbacks(shapeCallbacks[id], 'onMove', id, shape)
         }
     } else if (event === 'remove') {
         if (id in shapeCallbacks) {
@@ -282,15 +286,15 @@ function doHandleDrawingEvent(id, event) {
         }
     } else if (event === 'click') {
         if (id in shapeCallbacks) {
-            invokeCallbacks(shapeCallbacks[id], 'onClick', id)
+            invokeCallbacks(shapeCallbacks[id], 'onClick', id, shape)
         }
     } else if (event === 'hide') {
         if (id in shapeCallbacks) {
-            invokeCallbacks(shapeCallbacks[id], 'onHide', id)
+            invokeCallbacks(shapeCallbacks[id], 'onHide', id, shape)
         }
     } else if (event === 'show') {
         if (id in shapeCallbacks) {
-            invokeCallbacks(shapeCallbacks[id], 'onShow', id)
+            invokeCallbacks(shapeCallbacks[id], 'onShow', id, shape)
         }
     } else
         console.log('unknown drawing event', event)

src/charts/shape.js

@@ -79,9 +79,8 @@ class Shape {
 
     createOrDraw() {
         if(this.id) return
-        const points = this.pointsFromModel()
+        if(this.points && this.points.length)
-        if(points && points.length)
+            this.doCreate(this.points)
-            this.doCreate(points)
         else
             this.draw()
     }
@@ -111,9 +110,11 @@ class Shape {
 
     setPoints(points) {
         this.points = points
-        if (points !== null && points.length) {
+        if (points === null || !points.length)
+            this.delete()
+        else {
             if (this.id === null)
-                this.doCreate(points)
+                this.doCreate()
             else {
                 const s = this.tvShape();
                 if (!dragging) {
@@ -129,7 +130,6 @@ class Shape {
                 }
             }
         }
-        // todo delete if points is null or empty?
     }
 
 
@@ -163,8 +163,6 @@ class Shape {
         try {
             deleteShapeId(this.id)
             this.id = null
-        } catch (e) {
-            throw e
         } finally {
             this.lock--
         }
@@ -261,7 +259,7 @@ class ShapeTVCallbacks {
         this.shape = shape
     }
 
-    onCreate(shapeId, points, props) {
+    onCreate(shapeId, _tvShape, points, props) {
         if( this.shape.id )
             throw Error(`Created a shape ${shapeId} where one already existed ${this.shape.id}`)
         this.shape.id = shapeId
@@ -269,13 +267,13 @@ class ShapeTVCallbacks {
         invokeCallback(this.shape, 'onCreate', points, props)
     }
 
-    onPoints(shapeId, points) {
+    onPoints(shapeId, _tvShape, points) {
         this.shape.points = points
         this.shape.onPoints(points)
         this.shape.onDirtyModel(this.shape.pointsToModel)
     }
 
-    onProps(shapeId, props) {
+    onProps(shapeId, _tvShape, props) {
         this.shape.props = props
         this.shape.onProps(props)
         this.shape.onDirtyModel(this.shape.propsToModel)
@@ -301,35 +299,35 @@ class ShapeTVCallbacks {
         invokeCallback(this.shape, 'onAddPoint')
     }
 
-    onMove(_shapeId, points) {
+    onMove(_shapeId, _tvShape, points) {
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onMove',points)
     }
 
-    onDrag(_shapeId, points) {
+    onDrag(_shapeId, _tvShape, points) {
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onDrag', points)
     }
 
-    onHide(_shapeId, props) {
+    onHide(_shapeId, _tvShape, props) {
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onHide',props)
     }
 
-    onShow(_shapeId, props) {
+    onShow(_shapeId, _tvShape, props) {
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onShow',props)
     }
 
-    onClick(_shapeId) {
+    onClick(_shapeId, _tvShape) {
         if( this.shape.lock ) return
         invokeCallback(this.shape, 'onClick')
     }
 
-    onDelete(_shapeId, props) {
+    onDelete(shapeId) {
         this.shape.id = null
         if( this.shape.lock ) return
-        invokeCallback(this.shape, 'onDelete',props)
+        invokeCallback(this.shape, 'onDelete', shapeId)
     }
 }
 

src/components/chart/ChartOrder.vue

@@ -9,7 +9,9 @@
                     :label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
       >
         <template v-slot:prepend>
-          <v-btn :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s" variant="tonal" :color="color" @click="order.buy=!order.buy"/>
+          <v-btn variant="tonal" :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'"
@@ -29,14 +31,15 @@
         mdi-vector-polyline
         -->
       </div>
-      <div class="d-flex justify-start">
-        <v-btn variant="tonal" :color="color" class="ma-6">Place Order</v-btn>
-        <v-btn variant="text" class="ma-6">Cancel</v-btn>
-      </div>
     </div>
   </row-bar>
 </template>
 
+<script>
+import {newBuilder} from "@/orderbuild.js";
+const defaultMarketBuilder = newBuilder('MarketBuilder')
+</script>
+
 <script setup>
 
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
@@ -59,7 +62,7 @@ function build(order, component, options={}) {
 
 function builders(order) {
   let result = order.builders
-  return result.length > 0 ? result : [newBuilder('MarketBuilder')]
+  return result.length > 0 ? result : [defaultMarketBuilder]
 }
 
 const theme = useTheme().current

src/components/chart/ChartOrderPane.vue

@@ -1,6 +1,28 @@
 <template>
   <div class="d-flex flex-column h-100">
-    <toolbar/>
+  <div class="d-flex mb-1">
+    <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
+    <span class="logo">dexorder</span>
+    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
+    <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
+<!--    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>-->
+    <v-btn variant="tonal" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
+    <v-btn variant="text" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
+
+    <div class="w-100 d-flex justify-end">
+      <v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
+      <v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
+    </div>
+    <v-dialog v-model="showCancel" max-width="300">
+      <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
+          <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
   <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
     <div class="overflow-y-auto">
         <template v-for="o in co.orders">
@@ -12,14 +34,15 @@
 
 <script setup>
 import {useChartOrderStore} from "@/orderbuild.js";
-import Toolbar from "@/components/chart/Toolbar.vue";
 import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
-import {onBeforeUnmount} from "vue";
+import {computed, onBeforeUnmount, ref} from "vue";
-import {useOrderStore} from "@/store/store.js";
+import {useOrderStore, useStore} from "@/store/store.js";
 
 import {routeFinder} from "@/blockchain/route.js";
 import ChartOrder from "@/components/chart/ChartOrder.vue";
+import {useTheme} from "vuetify";
 
+const s = useStore()
 const co = useChartOrderStore()
 const os = useOrderStore()
 
@@ -34,10 +57,27 @@ function changeSymbol(symbol) {
 addSymbolChangedCallback(changeSymbol)
 onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
 
+
+const showCancel = 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)
+
+function cancelOrder() {
+  showCancel.value = true
+}
+
+function placeOrder() {
+
+}
+
 </script>
 
 <style lang="scss">
 body {
   overflow-y: hidden;
 }
+.arrow {
+  font-size: 22px;
+}
 </style>

src/components/chart/LimitBuilder.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
-    <row-bar :color="builder.color" :data-ignore="autoAdjust">
+    <row-bar :color="builder.color">
       <color-band :color="builder.color"/>
       <div style="min-width: 3em; font-size: larger" :style="colorStyle"
            class="align-self-start ml-2 pt-3">{{ rungs === 1 ? 'Limit' : 'Ladder' }}</div>
@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-import {computed, onBeforeUnmount, onMounted} from "vue";
+import {computed, onBeforeUnmount, onMounted, watch} from "vue";
 import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
@@ -75,10 +75,11 @@ const os = useOrderStore()
 const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 
 // Fields must be defined in order to be reactive
-builderDefaults(props.builder, {
+builderDefaults(props, emit, {
   allocation: 1.0,
   start: null, // todo
   end: null, // todo
@@ -344,7 +345,8 @@ function adjustShapes() {
 }
 
 
-const autoAdjust = computed(adjustShapes)
+watch(props.order, adjustShapes)
+// const autoAdjust = computed(adjustShapes)
 
 
 function deleteShapes() {

src/components/chart/MarketBuilder.vue

@@ -3,7 +3,7 @@
       <div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
       <div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
       <div>
-        <v-text-field type="number" v-model="props.builder.slippage"
+        <v-text-field type="number" v-model="builder.slippage"
                       density="compact" hide-details class="mx-1 my-2" variant="outlined"
                       label="Max Slippage" min="0" max="100" step="0.01"
                       style="width: 9em;"
@@ -19,12 +19,19 @@
 import {useChartOrderStore} from "@/orderbuild.js";
 import {builderDefaults} from "@/misc.js";
 import {useOrderStore} from "@/store/store.js";
+import {computed} from "vue";
 
 const co = useChartOrderStore()
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 // Fields must be defined in order to be reactive
-builderDefaults(props.builder, {slippage: 0.10,})
+builderDefaults(props, emit, {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)}
+})
+console.log('builder.slippage', props.builder.slippage)
 
 </script>
 

src/components/chart/Toolbar.vue

@@ -2,13 +2,25 @@
   <div class="d-flex mb-1">
     <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
     <span class="logo">dexorder</span>
-    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start" variant="text"/>
+    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
-    <v-btn variant="flat" prepend-icon="mdi-plus" @click="newOrder">New Order</v-btn>
+    <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
 <!--    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>-->
+    <v-btn variant="tonal" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
+    <v-btn variant="text" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
+
     <div class="w-100 d-flex justify-end">
       <v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
       <v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
     </div>
+    <v-dialog v-model="showCancel" max-width="300">
+      <v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
+        <v-card-actions>
+          <v-spacer/>
+          <v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
+          <v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 
 </template>
@@ -19,33 +31,25 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {chart, drawShape} from "@/charts/chart.js";
 import {timestamp} from "@/misc.js";
 import {ShapeType} from "@/charts/shape.js";
+import {computed, ref} from "vue";
+import {useTheme} from "vuetify";
 
 const s = useStore()
 const co = useChartOrderStore()
 
+const showCancel = ref(false)
 
-let shape = null
+const theme = useTheme().current
+const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)
 
-function newOrder() {
+function cancelOrder() {
-  co.newOrder()
+  showCancel.value = true
 }
 
 
-function confirmDiscard() {
+function placeOrder() {
-  // todo show dialog
-}
-
-
-function test() {
-  const testCb = {
-    onCreate(shapeId) {shape=shapeId},
-  }
-  if( shape === null ) {
-    drawShape(ShapeType.HLine, testCb)
 
 }
-}
-
 
 </script>
 

src/misc.js

@@ -130,10 +130,15 @@ export function pairPrice(baseToken, quoteToken, price, decimals=null) {
 
 export const sleep = ms => new Promise(r => setTimeout(r, ms))
 
-export function builderDefaults(builder, defaults) {
+export function builderDefaults(props, emit, defaults) {
+    let changed = false
     for (const k in defaults)
-        if (builder[k] === undefined)
+        if (props.builder[k] === undefined) {
-            builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
+            props.builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
+            changed = true
+        }
+    if (changed)
+        emit('update:builder', props.builder)
 }
 
 export function uuid() {

src/orderbuild.js

@@ -37,7 +37,7 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
 
     function newOrder() {
         console.log('cos new order')
-        const order = { id:uuid(), amount:1, builders:[], amountIsTokenA: true, buy: true }
+        const order = {id:uuid(), amount:1, amountIsTokenA: true, buy: true, builders:[], }
         orders.value.push(order)
         selectedOrder.value = order
     }

src/router/index.js

@@ -8,16 +8,18 @@ const routes = [
     children: [
       {
         path: '/',
-        name: 'Home',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrderPane.vue'),
+        component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartOrderPane.vue'),
       },
       {
-        path: '/create',
+        path: '/place',
-        name: 'Create',
+        name: 'Place',
-        component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrderPane.vue'),
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "chartorder" */ '@/components/chart/ChartOrderPane.vue'),
       },
       {
         path: '/vault',
@@ -35,29 +37,36 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "ordersview" */ '@/views/OrdersView.vue'),
       },
+/*
+      {
+        path: '/create',
+        name: 'Create',
+        component: () => import(/!* webpackChunkName: "chartorder" *!/ '@/components/chart/ChartOrderPane.vue'),
+      },
       {
         path: '/twap',
         name: 'TWAP',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
-        component: () => import(/* webpackChunkName: "twap" */ '@/components/TimedOrder.vue'),
+        component: () => import(/!* webpackChunkName: "twap" *!/ '@/components/TimedOrder.vue'),
       },
       {
         path: '/ladder',
         name: 'Ladder',
-        component: () => import(/* webpackChunkName: "ladder" */ '@/components/LadderOrder.vue'),
+        component: () => import(/!* webpackChunkName: "ladder" *!/ '@/components/LadderOrder.vue'),
       },
       {
         path: '/diagonal',
         name: 'Diagonal',
-        component: () => import(/* webpackChunkName: "diagonal" */ '@/components/DiagonalOrder.vue'),
+        component: () => import(/!* webpackChunkName: "diagonal" *!/ '@/components/DiagonalOrder.vue'),
       },
       {
         path: '/custom',
         name: 'Custom',
-        component: () => import(/* webpackChunkName: "custom" */ '@/components/CustomOrder.vue'),
+        component: () => import(/!* webpackChunkName: "custom" *!/ '@/components/CustomOrder.vue'),
       },
+*/
     ],
   },
 ]