From c129a9c481f09321bee14a50b43488f6c8f2ba9c Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Wed, 13 Dec 2023 21:37:50 -0400
Subject: [PATCH] nav drawer

---
 src/components/NavDrawer.vue    |  34 +++++++
 src/components/NewOrder.vue     |  12 +--
 src/components/Orders.vue       | 169 ++++++++++++++++++--------------
 src/components/Vault.vue        |   2 +-
 src/layouts/default/AppBar.vue  |   7 +-
 src/layouts/default/Default.vue |   7 +-
 src/store/store.js              |   8 +-
 src/styles/settings.scss        |   2 +-
 src/views/OrdersView.vue        |   4 +-
 9 files changed, 154 insertions(+), 91 deletions(-)
 create mode 100644 src/components/NavDrawer.vue

diff --git a/src/components/NavDrawer.vue b/src/components/NavDrawer.vue
new file mode 100644
index 0000000..28a5308
--- /dev/null
+++ b/src/components/NavDrawer.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-navigation-drawer v-model="s.nav">
+    <v-list>
+      <v-list-subheader title="Vault"/>
+      <v-list-item prepend-icon="mdi-safe-square" title="Assets" @click="nav('vault')"/>
+      <v-list-item prepend-icon="mdi-information-outline" title="Orders" @click="nav('orders')"/>
+      <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>
+  </v-navigation-drawer>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store";
+import router from "@/router/index.js";
+const s = useStore()
+
+function nav(path) {
+  router.push('/'+path)
+  s.nav = false
+}
+
+function close() {
+  console.log('closeoae')
+  if(s.nav)
+    s.nav=false
+}
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>
diff --git a/src/components/NewOrder.vue b/src/components/NewOrder.vue
index e39f8e8..0592a54 100644
--- a/src/components/NewOrder.vue
+++ b/src/components/NewOrder.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="d-inline-flex">
-    <btn icon="mdi-plus" color="green" @click="show=true">New Order</btn>
-    <btn icon="mdi-delete-alert" color="red" class="mb-6" @click="cancelAll(vaultAddr)">Cancel All Orders</btn>
+  <btn icon="mdi-plus" color="green" @click="s.nav=true">New Order</btn>
+<!--
+<div class="d-inline-flex">
+  <btn icon="mdi-plus" color="green" @click="s.nav=true">New Order</btn>
     <v-dialog v-model="show" width="auto">
       <v-card>
         <v-card-item class="d-flex">
@@ -28,7 +29,7 @@
         <v-card-item class="mb-3"><v-btn variant="outlined" prepend-icon="mdi-cancel" color="red" @click="show=false">Cancel</v-btn></v-card-item>
       </v-card>
     </v-dialog>
-  </div>
+  </div>-->
 </template>
 
 <script setup>
@@ -39,10 +40,7 @@ import Btn from "@/components/Btn.vue";
 const s = useStore()
 const show = ref(false)
 
-import {cancelAll} from "@/blockchain/wallet.js";
-import {computed} from "vue";
 const props = defineProps(['vault'])
-const vaultAddr = computed(()=>props.vault?props.vault:s.vault)
 
 </script>
 
diff --git a/src/components/Orders.vue b/src/components/Orders.vue
index 25f9d87..9d1930b 100644
--- a/src/components/Orders.vue
+++ b/src/components/Orders.vue
@@ -1,79 +1,100 @@
 <template>
-  <v-data-table :headers="datatableHeaders" :items="orders" item-value="index"
-                item-selectable="selectable" :show-select="false" :show-expand="true">
-    <template v-slot:item.start="{ value }">{{dateString(value)}}</template>
-    <template v-slot:item.input="{ item }">
-        <suspense><token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/></suspense>
-    </template>
-    <template v-slot:item.output="{ item }">
-        <suspense><token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/></suspense>
-    </template>
-    <template v-slot:item.remaining="{ item }">
-        <suspense><token-amount :addr="item.amountToken" :amount="item.remaining"/></suspense>
-    </template>
-    <template v-slot:item.filled="{ item }">
-        <suspense><token-amount :addr="item.amountToken" :amount="item.filled"/></suspense>
-    </template>
-    <template v-slot:item.avg="{ item }">
-      {{pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)}}
-      <btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)!==''" size="small"
-           variant="plain"
-           @click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]">
-        {{pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index)}}
-      </btn>
-    </template>
-    <template v-slot:item.status="{ item }">
-      <v-chip v-if="item.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
-      <v-chip v-if="item.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
-      <btn v-if="isOpen(item.state)" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn>
-      <btn v-if="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)"/>
-      <v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
-      <v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
-      <v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
-      <v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
-    </template>
-    <template v-slot:item.action="{item}">
-      <btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,item.index)">Cancel</btn>
-    </template>
-    <template v-slot:expanded-row="{item}">
-      <tr>
-        <td>&nbsp;</td>
-        <td colspan="100">
-          <v-table>
-<!--
-            <thead>
-            <tr>
-              <th></th>
-              <th>Filled</th>
-              <th></th>
-            </tr>
-            </thead>
--->
-            <tbody>
-            <tr v-for="(t, i) in item.order.tranches">
-              <td class="text-right">Tranche {{ i + 1 }}</td>
-              <td class="text-center w-33">
-                <suspense>
+  <div>
+    <v-data-table :headers="datatableHeaders" :items="orders" item-value="index"
+                  item-selectable="selectable" :show-select="false" :show-expand="true">
+      <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
+      <template v-slot:item.input="{ item }">
+        <suspense>
+          <token-amount :addr="item.order.tokenIn" :amount="item.order.amountIsInput ? item.order.amount : null"/>
+        </suspense>
+      </template>
+      <template v-slot:item.output="{ item }">
+        <suspense>
+          <token-amount :addr="item.order.tokenOut" :amount="!item.order.amountIsInput ? item.order.amount : null"/>
+        </suspense>
+      </template>
+      <template v-slot:item.remaining="{ item }">
+        <suspense>
+          <token-amount :addr="item.amountToken" :amount="item.remaining"/>
+        </suspense>
+      </template>
+      <template v-slot:item.filled="{ item }">
+        <suspense>
+          <token-amount :addr="item.amountToken" :amount="item.filled"/>
+        </suspense>
+      </template>
+      <template v-slot:item.avg="{ item }">
+        {{ pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg) }}
+        <btn v-if="pairPrice(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.avg)!==''" size="small"
+             variant="plain"
+             @click="inverted[[vaultAddr,item.index]] = !inverted[[vaultAddr,item.index]]">
+          {{ pair(item.order.tokenIn, item.order.tokenOut, vaultAddr, item.index) }}
+        </btn>
+      </template>
+      <template v-slot:item.status="{ item }">
+        <v-chip v-if="item.state===OrderState.Signing" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
+        <v-chip v-if="item.state===OrderState.Open" class="d-none d-lg-inline-flex" prepend-icon="mdi-dots-horizontal"
+                color="green">Open
+        </v-chip>
+        <btn v-if="isOpen(item.state)" class="d-none d-sm-inline-flex d-lg-none" icon="mdi-cancel" color="red"
+             @click="cancelOrder(vaultAddr,item.index)">Cancel
+        </btn>
+        <btn v-if="isOpen(item.state)" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red"
+             @click="cancelOrder(vaultAddr,item.index)"/>
+        <v-chip v-if="item.state===OrderState.Canceled" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
+        <v-chip v-if="item.state===OrderState.Filled" prepend-icon="mdi-check-circle-outline" color="green">Completed
+        </v-chip>
+        <v-chip v-if="item.state===OrderState.Expired" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired
+        </v-chip>
+        <v-chip v-if="item.state===OrderState.Underfunded" prepend-icon="mdi-alert" color="warning">Underfunded</v-chip>
+      </template>
+      <template v-slot:item.action="{item}">
+        <btn v-if="item.state===OrderState.Open" icon="mdi-cancel" color="red"
+             @click="cancelOrder(vaultAddr,item.index)">Cancel
+        </btn>
+      </template>
+      <template v-slot:expanded-row="{item}">
+        <tr>
+          <td>&nbsp;</td>
+          <td colspan="100">
+            <v-table>
+              <!--
+                          <thead>
+                          <tr>
+                            <th></th>
+                            <th>Filled</th>
+                            <th></th>
+                          </tr>
+                          </thead>
+              -->
+              <tbody>
+              <tr v-for="(t, i) in item.order.tranches">
+                <td class="text-right">Tranche {{ i + 1 }}</td>
+                <td class="text-center w-33">
+                  <suspense>
                 <span>
                   <token-amount :addr="item.amountToken" :amount="item.trancheFilled[i]" :raw="true"/>
                   /
                   <token-amount :addr="item.amountToken" :amount="item.order.amount*BigInt(t.fraction)/65535n"/>
                 </span>
-                </suspense>
-              </td>
-              <td class="text-left">
-                <span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span>
-                <span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span>
-                <span class="mx-3">{{ describeTrancheLine(item, true, t.minIntercept, t.minSlope) }}</span>
-                <span class="mx-3">{{ describeTrancheLine(item, false, t.maxIntercept, t.maxSlope) }}</span>
-              </td>
-            </tr>
-            </tbody>
-          </v-table>
-        </td>
-      </tr>
-    </template>
-  </v-data-table>
+                  </suspense>
+                </td>
+                <td class="text-left">
+                  <span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span>
+                  <span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span>
+                  <span class="mx-3">{{ describeTrancheLine(item, true, t.minIntercept, t.minSlope) }}</span>
+                  <span class="mx-3">{{ describeTrancheLine(item, false, t.maxIntercept, t.maxSlope) }}</span>
+                </td>
+              </tr>
+              </tbody>
+            </v-table>
+          </td>
+        </tr>
+      </template>
+    </v-data-table>
+    <new-order class="mx-3 mb-3"/>
+    <btn icon="mdi-delete-alert" color="red" class="mx-3 mb-3" @click="cancelAll(vaultAddr)">Cancel All Orders</btn>
+  </div>
 </template>
 
 <script setup>
@@ -82,9 +103,11 @@ import {useStore} from "@/store/store";
 import {computed, defineAsyncComponent, reactive} from "vue";
 import {token} from "@/blockchain/token.js";
 import Btn from "@/components/Btn.vue"
-import {cancelOrder} from "@/blockchain/wallet.js";
-import {intervalString, dateString} from "@/misc.js";
-import {OrderState, isOpen} from "@/blockchain/orderlib.js";
+import {cancelAll, cancelOrder} from "@/blockchain/wallet.js";
+import {dateString} from "@/misc.js";
+import {isOpen, OrderState} from "@/blockchain/orderlib.js";
+import NewOrder from "@/components/NewOrder.vue";
+
 const TokenAmount = defineAsyncComponent(()=>import('./TokenAmount.vue'))
 
 const s = useStore()
diff --git a/src/components/Vault.vue b/src/components/Vault.vue
index 1bf0714..936aad3 100644
--- a/src/components/Vault.vue
+++ b/src/components/Vault.vue
@@ -45,7 +45,7 @@
       </v-card-text>
     </phone-card>
     <v-card v-if="s.vaults.length>num" :class="empty?'maxw':''">
-      <v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" size="small"/> My Vault {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
+      <v-card-title><v-icon icon="mdi-safe-square" color="grey-darken-2" size="small"/> Vault Assets {{s.vaults.length>1?'#'+(num+1):''}}</v-card-title> <!-- todo vault nicknames -->
       <v-card-subtitle v-if="exists" class="overflow-x-hidden"><copy-button :text="addr"/>{{addr}}</v-card-subtitle>
       <v-card-text v-if="empty">
         <p>
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index daf0ddf..2daf1ba 100644
--- a/src/layouts/default/AppBar.vue
+++ b/src/layouts/default/AppBar.vue
@@ -1,7 +1,8 @@
 <template>
-  <v-app-bar flat>
+  <v-app-bar scroll-behavior="hide" scroll-threshold="1">
+<!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
     <v-app-bar-title>
-      <span class="logo clickable" @click="$router.push('/')">
+      <span class="logo clickable" @click="s.nav=!s.nav">
         <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
         <span class="clickable">dexorder</span>
       </span>
@@ -15,6 +16,8 @@
 </template>
 
 <script setup>
+import {useStore} from "@/store/store";
+const s = useStore()
 </script>
 
 
diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index 22f6ea6..a12712b 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -1,6 +1,7 @@
 <template>
   <v-app>
-    <default-bar />
+    <default-bar/>
+    <nav-drawer/>
     <default-view/>
   </v-app>
 </template>
@@ -8,4 +9,8 @@
 <script setup>
   import DefaultBar from './AppBar.vue'
   import DefaultView from './View.vue'
+  import {useStore} from "@/store/store.js";
+  import NavDrawer from "@/components/NavDrawer.vue";
+
+  const s = useStore()
 </script>
diff --git a/src/store/store.js b/src/store/store.js
index 5367689..2cfe4fb 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -29,6 +29,8 @@ import {computed, ref} from "vue";
 
 
 export const useStore = defineStore('app', ()=> {
+  const nav = ref(false)
+
   const _chainId = ref(null)
   const _chainInfo = ref({})
 
@@ -107,9 +109,9 @@ export const useStore = defineStore('app', ()=> {
   }
 
   return {
-    chainId, chainInfo, chain, provider, vaultInitCodeHash, account, vaults, transactionSenders, errors, extraTokens,
-    poolPrices, vaultBalances, orders, vault, tokens, factory, helper, mockenv, mockCoins, removeTransactionSender,
-    error, closeError, addToken,
+    nav, chainId, chainInfo, chain, provider, vaultInitCodeHash, account, vaults, transactionSenders, errors,
+    extraTokens, poolPrices, vaultBalances, orders, vault, tokens, factory, helper, mockenv, mockCoins,
+    removeTransactionSender, error, closeError, addToken,
   }
 })
 
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 418b42a..8968eda 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -12,5 +12,5 @@
   $body-font-family: v.$body-font-family,
   $heading-font-family: v.$heading-font-family,
   //$card-title-font-size: 24px,
-  $app-bar-title-font-size: 32px,
+  //$app-bar-title-font-size: 32px,
 );
diff --git a/src/views/OrdersView.vue b/src/views/OrdersView.vue
index 6a5a58c..9fb0cb7 100644
--- a/src/views/OrdersView.vue
+++ b/src/views/OrdersView.vue
@@ -1,10 +1,9 @@
 <template>
   <needs-provider>
     <needs-signer>
-      <phone-card title="Orders">
+      <phone-card title="Vault Orders">
         <v-card-item>
           <orders/>
-          <new-order class="ma-3"/>
         </v-card-item>
       </phone-card>
     </needs-signer>
@@ -16,7 +15,6 @@ import Orders from "@/components/Orders.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import NeedsProvider from "@/components/NeedsProvider.vue";
 import PhoneCard from "@/components/PhoneCard.vue";
-import NewOrder from "@/components/NewOrder.vue";
 </script>
 
 <style scoped lang="scss">