nav drawer

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>

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>
 

src/components/Orders.vue

@@ -1,46 +1,64 @@
 <template>
+  <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.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>
+        <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>
+        <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>
+        <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>
+        <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)}}
+        {{ 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)}}
+          {{ 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.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.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>
+        <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>
@@ -48,7 +66,7 @@
                             <th></th>
                           </tr>
                           </thead>
--->
+              -->
               <tbody>
               <tr v-for="(t, i) in item.order.tranches">
                 <td class="text-right">Tranche {{ i + 1 }}</td>
@@ -74,6 +92,9 @@
         </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()

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>

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>
 
 

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>

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,
   }
 })
 

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,
 );

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">