intermediate checkin during chart order form work

src/charts/datafeed.js

@@ -54,7 +54,7 @@ function addSymbol(p, base, quote, inverted) {
 	const exchange = ['UNIv2', 'UNIv3'][p.e]
 	const full_name = exchange + ':' + symbol // + '%' + formatFee(fee)
 	if (full_name in symbolsSeen) {
-		// add this pool's address to the index but don't create a new symbol
+		// add this pool's address to the existing index but don't create a new symbol
 		indexes[full_name].as.push(p.a)
 		return
 	}
@@ -62,7 +62,7 @@ function addSymbol(p, base, quote, inverted) {
 	const longExchange = ['Uniswap v2', 'Uniswap v3',][p.e]
 	const description = `${base.n} / ${quote.n}`
 	const type = 'swap'
-	_symbols[full_name] = {symbol, full_name, description, exchange, type, inverted, base, quote}
+	_symbols[full_name] = {symbol, full_name, description, exchange, type, inverted, base, quote, x:p.x}
 	indexes[full_name] = {
 		// key
 		id: full_name,

src/components/BuySellToggle.vue

@@ -1,6 +1,5 @@
 <template>
-  <v-btn :text="modelValue ? 'Buy' : 'Sell'" :color="modelValue ? 'green' : 'red'"
+  <v-btn :text="modelValue ? 'Buy' : 'Sell'" :color="modelValue ? 'green' : 'red'" variant="outlined" size="x-large" @click="toggle"/>
-         variant="outlined" size="x-large" @click="toggle"/>
 </template>
 
 <script setup>

src/components/SplitPane.vue

@@ -5,7 +5,7 @@
     <div class="top">
       <slot name="top"/>
     </div>
-    <div class="resizer bg-green-lighten-4" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
+    <div class="resizer bg-grey-lighten-2" :data-direction="horizontal?'horizontal':'vertical'" ref="resizerElement"></div>
     <div class="scrollpane">
       <slot name="bottom"/>
     </div>

src/components/chart/BuilderFactory.vue

@@ -6,19 +6,19 @@
 import {computed} from "vue";
 import DCABuilder from "@/components/chart/DCABuilder.vue";
 import LimitBuilder from "@/components/chart/LimitBuilder.vue";
-import Test from "@/components/chart/Test.vue";
+import MarketBuilder from "@/components/chart/MarketBuilder.vue";
 
 const props = defineProps(['builder'])
 
 const component = computed(()=>{
   console.log('builder component', props.builder)
   switch (props.builder.component) {
+    case 'MarketBuilder':
+      return MarketBuilder
     case 'DCABuilder':
       return DCABuilder
     case 'LimitBuilder':
       return LimitBuilder
-    case 'Test':
-      return Test
     default:
       console.error('Unknown builder component '+props.builder.component)
       return null

src/components/chart/ChartOrder.vue

@@ -1,43 +1,77 @@
 <template>
-  <div class="d-flex flex-column h-100">
+  <v-sheet dense class="d-flex align-content-stretch" style="overflow-y: hidden">
-    <toolbar/>
+    <div :style="lightColorStyle" style="width:0.5em">&nbsp;</div>
-  <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
+    <div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
-    <div class="overflow-y-auto">
+      <v-text-field type="number" v-model="os.amount" min="0" step="1" variant="outlined" density="compact" hide-details
-        <template v-for="b in co.builderList">
+                    style="max-width:24em; display: inline-grid"
-          <builder-factory :builder="b"/>
+                    class="pb-2"
+                    :color="color"
+      >
+        <template v-slot:prepend>
+          <v-btn :text="(os.buy ? 'Buy ' : 'Sell ') + os.base.s" variant="text" :color="color" @click="os.buy=!os.buy"/>
         </template>
+        <template v-slot:append>
+          <v-btn :text="os.amountToken.s+(os.amountIsTokenA?'':' worth')" :color="color" variant="text" @click="os.amountIsTokenA=!os.amountIsTokenA"/>
+        </template>
+      </v-text-field>
+      <template v-for="b in builders(order)">
+        <builder-factory :builder="b" :color="faintColor"/>
+        <div>
+          <span class="ma-3">Add condition:</span>
+          <!--    <v-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('DCABuilder')">DCA</v-btn>-->
+          <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
+      <!--    <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
+          <!--
+          mdi-ray-start-end
+          mdi-vector-polyline
+          -->
+        </div>
+      </template>
     </div>
-  </div>
+  </v-sheet>
 </template>
 
 <script setup>
-import {useChartOrderStore} from "@/orderbuild.js";
+
-import Toolbar from "@/components/chart/Toolbar.vue";
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
-import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
+import {newBuilder, useChartOrderStore} from "@/orderbuild.js";
-import {onBeforeUnmount} from "vue";
 import {useOrderStore} from "@/store/store.js";
+import {computed} from "vue";
+import Color from "color";
 
-import {routeFinder} from "@/blockchain/route.js";
+const props = defineProps(['order'])
-
 const co = useChartOrderStore()
 const os = useOrderStore()
 
-function changeSymbol(symbol) {
+function build(order, component, options={}) {
-  console.log('changeSymbol', symbol)
+  order.builders.push(newBuilder(component, options))
-  os.tokenA = symbol.base
-  os.tokenB = symbol.quote
-  routeFinder.invoke()
 }
 
+function builders(order) {
+  let result = order.builders
+  console.log('builders', result)
+  return result.length > 0 ? result : [newBuilder('MarketBuilder')]
+}
+
+const color = computed(()=>os.buy?'green':'red')
+const lightColor = computed(() => new Color(color.value).hsl().lightness(85).string())
+const faintColor = computed(() => new Color(color.value).hsl().lightness(97).string())
+const colorStyle = 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( ()=>os.buy ? os.tokenB : os.tokenA )
+const maxAmount = computed(()=>{
+  const balance = s.balances[inToken]
+  if( !balance )
+    return 0
+  const divisor = os.amountIsTotal ? 1 : os.tranches
+  return balance / 10**inToken.value.d / divisor
+})
 
-const oldSymbolChanged = addSymbolChangedCallback(changeSymbol)
-onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
 
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
-body {
+
-  overflow-y: hidden;
-}
 </style>

src/components/chart/ChartOrderPane.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="d-flex flex-column h-100">
+    <toolbar/>
+  <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
+    <div class="overflow-y-auto">
+        <template v-for="o in co.orders">
+          <chart-order :order="o"/>
+        </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useChartOrderStore} from "@/orderbuild.js";
+import Toolbar from "@/components/chart/Toolbar.vue";
+import BuilderFactory from "@/components/chart/BuilderFactory.vue";
+import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
+import {onBeforeUnmount} from "vue";
+import {useOrderStore} from "@/store/store.js";
+
+import {routeFinder} from "@/blockchain/route.js";
+import ChartOrder from "@/components/chart/ChartOrder.vue";
+
+const co = useChartOrderStore()
+const os = useOrderStore()
+
+function changeSymbol(symbol) {
+  console.log('changeSymbol', symbol)
+  os.tokenA = symbol.base
+  os.tokenB = symbol.quote
+  routeFinder.invoke()
+}
+
+
+addSymbolChangedCallback(changeSymbol)
+onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
+
+</script>
+
+<style lang="scss">
+body {
+  overflow-y: hidden;
+}
+</style>

src/components/chart/LimitBuilder.vue

@@ -260,9 +260,6 @@ const colors = computed( ()=> {
 })
 
 
-let priceRangeId = null
-
-
 function adjustShapes() {
   const limits = prices.value
   // console.log('limits', limits)
@@ -334,7 +331,7 @@ function deleteBuilder() {
 
 
 if (!props.builder.priceA)
-  lineA.createOrDraw();
+  lineA.createOrDraw(); // initiate drawing mode
 
 
 </script>

src/components/chart/MarketBuilder.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-sheet dense class="d-flex align-content-stretch" style="overflow-y: hidden">
+      <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="os.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;"
+                      clearable
+        >
+          <template v-slot:append-inner>%</template>
+        </v-text-field>
+      </div>
+    </v-sheet>
+</template>
+
+<script setup>
+import {useChartOrderStore} from "@/orderbuild.js";
+import {builderDefaults} from "@/misc.js";
+import {useOrderStore} from "@/store/store.js";
+
+const os = useOrderStore()
+const co = useChartOrderStore()
+const props = defineProps(['builder'])
+
+// Fields must be defined in order to be reactive
+builderDefaults(props.builder, {slippage: 0.10,})
+
+</script>
+
+<style scoped lang="scss">
+:deep(.v-slider.v-input--vertical > .v-input__control) {
+  min-height: 5em !important;
+}
+:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
+  background-color: inherit !important;
+}
+</style>
+

src/components/chart/Test.vue

@@ -1,21 +0,0 @@
-<template>
-    <v-card flat rounded="0" title="Test">
-      <v-card-text>
-        <v-code>
-          {{JSON.stringify(builder, undefined, 2)}}
-        </v-code>
-      </v-card-text>
-    </v-card>
-</template>
-
-<script setup>
-import {createShape} from "@/charts/chart.js";
-import {ShapeType} from "@/charts/shape.js";
-
-const props = defineProps(['builder'])
-createShape(ShapeType.HLine, [{time:0, price:165}])
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/components/chart/Toolbar.vue

@@ -3,14 +3,12 @@
     <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-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('DCABuilder')">DCA</v-btn>-->
+    <v-btn variant="flat" prepend-icon="mdi-plus" @click="newOrder">New Order</v-btn>
-    <v-btn variant="flat" prepend-icon="mdi-ray-vertex" @click="build('LimitBuilder')">Limit</v-btn>
+<!--    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>-->
-<!--    <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
+    <div class="w-100 d-flex justify-end">
-    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>
+      <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>
-    mdi-ray-start-end
+    </div>
-    mdi-vector-polyline
-    -->
   </div>
 
 </template>
@@ -28,6 +26,16 @@ const co = useChartOrderStore()
 
 let shape = null
 
+function newOrder() {
+  console.log('new order 1')
+  co.newOrder()
+}
+
+
+function confirmDiscard() {
+  // todo show dialog
+}
+
 
 function test() {
   const testCb = {
@@ -40,10 +48,6 @@ function test() {
 }
 
 
-function build(component, options={}) {
-  co.addBuilder(component, options)
-}
-
 </script>
 
 <style scoped lang="scss">

src/misc.js

@@ -134,3 +134,7 @@ export function builderDefaults(builder, defaults) {
         if (builder[k] === undefined)
             builder[k] = defaults[k] instanceof Function ? defaults[k]() : defaults[k]
 }
+
+export function uuid() {
+    return crypto.randomUUID();
+}

src/orderbuild.js

@@ -1,45 +1,58 @@
-import {routeInverted, timestamp} from "@/misc.js";
+import {routeInverted, timestamp, uuid} from "@/misc.js";
 import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import {useOrderStore} from "@/store/store.js";
 import {encodeIEE754} from "@/common.js";
 import {defineStore} from "pinia";
-import {computed, ref} from "vue";
+import {ref} from "vue";
 
 
 function unimplemented() { throw Error('Unimplemented') }
 
 // Builders are data objects which store a configuration state
-function TrancheBuilder( component, options = {}) {
+// the component name must match a corresponding Vue component in the BuilderFactory.vue component, which is responsible
-    const id = crypto.randomUUID()
+// for instantiating the UI component for a given builder dictionary, based on its builder.component field.
+export function newBuilder( component, options = {}) {
+    const id = uuid()
     return {id, component, options, points: {}, shapes: {}, props: {}, build: unimplemented}
 }
 
+// Orders hold an amount and builders
+const Order = {
+    id: uuid(),
+    amount: 0,
+    builders: [],
+}
+
 
 export const useChartOrderStore = defineStore('chart_orders', () => {
     const chartReady = ref(false)
 
-    const builderIdList = ref([]) // this is where we keep the UI ordering
+    const orders = ref([])
-    const builderList = computed(()=>{
+    const selectedOrder = ref(null)
-        console.log('builder list', builderIdList.value.map((id)=>builderDict.value[id]))
-        return builderIdList.value.map((id)=>builderDict.value[id])
-    }) // convenience
-    const builderDict = ref({}) // builders stored by id
 
     const drawing = ref(false)
     const drawingCallbacks = ref(null)  // only during draw mode
 
-    function addBuilder(component, options={}) {
+    function newOrder() {
-        const b = TrancheBuilder(component,options)
+        console.log('cos new order')
-        builderIdList.value.push(b.id)
+        const order = { id:uuid(), amount:1, builders:[] }
-        builderDict.value[b.id] = b
+        orders.value.push(order)
+        selectedOrder.value = order
     }
 
-    function removeBuilder(builder) {
+    function removeOrder(order) {
-        builderIdList.value = builderIdList.value.filter((v)=>v!==builder.id)
+        let index = orders.value.findIndex((o)=>o.id===order.id)
-        delete builderDict.value[builder.id]
+        if (index === -1) return
+        orders.value = orders.value.filter((o)=>o.id!==order.id)
+        if (orders.value.length === 0)
+            selectedOrder.value = null
+        else
+            selectedOrder.value = orders.value[Math.max(0,index-1)] // select the order above the removed one
     }
 
-    return { chartReady, builderList, builderDict, drawing, drawingCallbacks, addBuilder, removeBuilder, }
+    return {
+        chartReady, orders, drawing, drawingCallbacks, newOrder, removeOrder,
+    }
 })
 
 

src/router/index.js

@@ -12,12 +12,12 @@ const routes = [
         // 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/ChartOrder.vue'),
+        component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrderPane.vue'),
       },
       {
         path: '/create',
         name: 'Create',
-        component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrder.vue'),
+        component: () => import(/* webpackChunkName: "create" */ '@/components/chart/ChartOrderPane.vue'),
       },
       {
         path: '/vault',

src/store/store.js

@@ -135,6 +135,7 @@ export const useOrderStore = defineStore('order', ()=> {
   const amount = ref(100) // todo adjust default
   const amountIsTokenA = ref(false) // todo adjust default
   const amountIsTotal = ref(true)
+  const slippage = ref(0.10) // in percent units.  1 = 1%.  may be null.
   const limitPrice = ref(null)
   const limitPrice2 = ref(null)
   const tranches = ref(3)
@@ -155,7 +156,7 @@ export const useOrderStore = defineStore('order', ()=> {
     const token = inverted.value ? tokenA.value : tokenB.value
     return !token ? {} : token
   })
-  const pairSymbol = computed(() => base.value?.symbol + '\\' + quote.value?.symbol)
+  const pairSymbol = computed(() => base.value?.s + '/' + quote.value?.s)
   const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
   const amountToken = computed(() => amountIsTokenA.value ? tokenA.value : tokenB.value)
   const amountIsInput = computed(() => amountIsTokenA.value !== buy.value)
@@ -170,7 +171,7 @@ export const useOrderStore = defineStore('order', ()=> {
   }
 
   return {
-    tokenA, tokenB, buy, inverted, amount, amountIsTokenA, amountIsTotal, limitPrice, limitPrice2, tranches,
+    tokenA, tokenB, buy, inverted, amount, amountIsTokenA, amountIsTotal, slippage, limitPrice, limitPrice2, tranches,
     interval, intervalIsTotal, timeUnitIndex, routes, routesPending, validOrder, route, base, quote, pairSymbol,
     limitIsMinimum, amountToken, amountIsInput, setDefaultTokens, totalAmount, trancheAmount, utc,
   }