From 7f5bbf2171ef02a81cc3edd37e77b9255aa587c3 Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Wed, 13 Dec 2023 21:48:13 -0400
Subject: [PATCH] diagonal order stub

---
 src/components/DiagonalOrder.vue | 99 ++++++++++++++++++++++++++++++++
 src/components/NavDrawer.vue     |  1 +
 src/components/Order.vue         |  2 +-
 src/router/index.js              | 17 ++++--
 4 files changed, 112 insertions(+), 7 deletions(-)
 create mode 100644 src/components/DiagonalOrder.vue

diff --git a/src/components/DiagonalOrder.vue b/src/components/DiagonalOrder.vue
new file mode 100644
index 0000000..b71c3b3
--- /dev/null
+++ b/src/components/DiagonalOrder.vue
@@ -0,0 +1,99 @@
+<template>
+  <order title="Diagonal" subtitle="Trade trends and channels" :tranches="buildTranches" :valid="validOrder">
+    <!-- todo times -->
+    <span><i>Coming soon after Tim's wrist heals!</i></span>
+<!--
+    <limit-price :required="true" label="start price" :show-price="false"/>
+    <limit-price store-var="limitPrice2" :required="true" label="end price"/>
+    <v-table>
+      <thead>
+        <tr><td>Fraction</td><td>Amount</td><td>Price</td></tr>
+      </thead>
+      <tbody>
+        <tr v-for="(r,i) in rungsFmt">
+          <td>{{(100*fractions[i]).toFixed(1)}}%</td>
+          <td>{{(amounts[i]).toPrecision(5)}} {{os.amountToken.symbol}}</td>
+          <td>{{r}}</td>
+        </tr>
+      </tbody>
+    </v-table>
+-->
+  </order>
+</template>
+
+<script setup>
+import {useOrderStore} from "@/store/store";
+import LimitPrice from "@/components/LimitPrice.vue";
+import Order from "@/components/Order.vue";
+import {computed, ref} from "vue";
+import {applyLimit} from "@/orderbuild.js";
+import {validateRequired, validateTranches} from "@/validate.js";
+import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
+
+const os = useOrderStore()
+
+const skew = ref(0)
+const rungs = computed(()=>{
+  if( !os.limitPrice || !os.limitPrice2 )
+    return []
+  const n = os.tranches;
+  const a = parseFloat(os.limitPrice);
+  const b = parseFloat(os.limitPrice2);
+  if( n < 1 || !a || !b ) return []
+  if( n === 1 ) return [(a+b)/2]
+  // num >= 2
+  const result = []
+  const delta = (b-a)/(n-1)
+  for( let i=0; i<n; i++ )
+    result.push(a+i*delta)
+  return result
+})
+const rungsFmt = computed(()=>{
+  return rungs.value.map((r)=>r.toPrecision(5)) // todo precisions
+})
+const fractions = computed(()=>{
+  const n = os.tranches
+  const s = skew.value / 100
+  const result = []
+  if( s === 1 ) {
+    result.push(1)
+    for( let i=1; i<n; i++ )
+      result.push(0)
+  }
+  else if( s === -1 ) {
+    for( let i=1; i<n; i++ )
+      result.push(0)
+    result.push(1)
+  }
+  else {
+    const mean = 1/n
+    for( let i=0; i<n; i++ )
+      result.push( mean * ( 1 - s * (2*i/(n-1)-1) ) )
+  }
+  return result
+})
+const amounts = computed( ()=>fractions.value.map((f)=>f*os.totalAmount) )
+
+function buildTranches() {
+  const ts = []
+  const n = os.tranches
+  for( let i=0; i<n; i++ ) {
+    // todo optional deadline
+    const fraction = Math.min(MAX_FRACTION, Math.ceil(MAX_FRACTION * fractions.value[i]) )
+    const tranche = newTranche({fraction})
+    applyLimit(tranche, rungs.value[i])
+    ts.push(tranche)
+  }
+  return ts
+}
+
+function validOrder() {
+  return false
+}
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>
diff --git a/src/components/NavDrawer.vue b/src/components/NavDrawer.vue
index 28a5308..23ac619 100644
--- a/src/components/NavDrawer.vue
+++ b/src/components/NavDrawer.vue
@@ -7,6 +7,7 @@
       <v-list-subheader title="Dexorders"/>
       <v-list-item prepend-icon="mdi-clock-outline" title="DCA" subtitle="Spread order across time" @click="nav('twap')"></v-list-item>
       <v-list-item prepend-icon="mdi-menu" title="Ladder" subtitle="Multiple price levels" @click="nav('ladder')"></v-list-item>
+      <v-list-item prepend-icon="mdi-vector-line" title="Diagonal" subtitle="Trade trends and channels" @click="nav('diagonal')"></v-list-item>
     </v-list>
   </v-navigation-drawer>
 </template>
diff --git a/src/components/Order.vue b/src/components/Order.vue
index cc4e4da..e7a02eb 100644
--- a/src/components/Order.vue
+++ b/src/components/Order.vue
@@ -12,7 +12,7 @@
       </v-card-item>
       <v-card-actions class="d-flex justify-space-evenly mb-4">
         <v-btn variant="outlined" color="red">Cancel</v-btn>
-        <v-btn variant="flat" color="green" :disabled="!valid" @click="placeOrder">Place Dexorder</v-btn>
+        <v-btn variant="flat" color="green" :disabled="!valid()" @click="placeOrder">Place Dexorder</v-btn>
       </v-card-actions>
     </phone-card>
   </needs-provider>
diff --git a/src/router/index.js b/src/router/index.js
index ed286fb..9bae41b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,6 +14,14 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
       },
+      {
+        path: '/vault',
+        name: 'Vault',
+        // 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: "vaultview" */ '@/views/VaultView.vue'),
+      },
       {
         path: '/orders',
         name: 'Orders',
@@ -36,12 +44,9 @@ const routes = [
         component: () => import(/* webpackChunkName: "ladder" */ '@/components/LadderOrder.vue'),
       },
       {
-        path: '/vault',
-        name: 'Vault',
-        // 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: "vaultview" */ '@/views/VaultView.vue'),
+        path: '/diagonal',
+        name: 'Diagonal',
+        component: () => import(/* webpackChunkName: "diagonal" */ '@/components/DiagonalOrder.vue'),
       },
     ],
   },