separate how it works

src/components/NavDrawer.vue

@@ -19,7 +19,7 @@ import router from "@/router/index.js";
 const s = useStore()
 
 function nav(path) {
-  router.push('/'+path)
+  router.push('/'+path) // todo use nav()
   s.nav = false
 }
 

src/components/Order.vue

@@ -11,7 +11,7 @@
         </div>
       </v-card-item>
       <v-card-actions class="d-flex justify-space-evenly mb-4">
-        <v-btn variant="outlined" color="red" @click="$router.push('/assets')">Cancel</v-btn>
+        <v-btn variant="outlined" color="red" @click="nav('Assets')">Cancel</v-btn>
         <v-btn variant="flat" color="green" :disabled="!valid()" @click="placeOrder">Place Dexorder</v-btn>
       </v-card-actions>
     </phone-card>
@@ -23,7 +23,7 @@ import {useOrderStore, useStore} from "@/store/store";
 import PhoneCard from "@/components/PhoneCard.vue";
 import Amount from "@/components/Amount.vue"
 // noinspection ES6UnusedImports
-import {routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import {nav, routeInverted, SingletonCoroutine, vAutoSelect} from "@/misc.js";
 import {newOrder} from "@/blockchain/orderlib.js";
 import {FixedNumber} from "ethers";
 import {pendOrder} from "@/blockchain/wallet.js";
@@ -45,7 +45,7 @@ function placeOrder() {
   const ts = props.tranches()
   const order = newOrder(tokenIn, tokenOut, route.exchange, route.fee, amt, os.amountIsInput, ts) // todo: minAmount, outputToOwner, chainOrder
   pendOrder(order)
-  router.push('/status')
+  route('Status')
 }
 
 </script>

src/components/Social.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
-    <!--      <v-btn variant="plain" icon="mdi-facebook" @click="window.open('https://facebook.com','facebook')"/>-->
-    <v-btn :v-bind="props" variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','twitter')" :size="size"/>
-    <!--      <v-btn variant="plain" icon="mdi-reddit" @click="window.open('https://reddit.com','reddit')"/>-->
-    <v-btn :v-bind="props" variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','discord')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-github" @click="open('https://github.com/dexorder-trade/contract','dexorder_github')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-discord" @click="open('https://discord.gg/fqp9JXXQyt','dexorder_discord')" :size="size"/>
+    <v-btn variant="plain" icon="mdi-twitter" @click="open('https://twitter.com/Dexorder_trade','dexorder_twitter')" :size="size"/>
+    <!--      <v-btn variant="plain" icon="mdi-facebook" @click="open('https://facebook.com','dexorder_facebook')" :size="size"/>-->
+    <!--      <v-btn variant="plain" icon="mdi-reddit" @click="open('https://reddit.com','dexorder_reddit')" :size="size"/>-->
   </div>
 </template>
 
 <script setup>
 const props = defineProps(['size'])
 function open(url, target) {window.open(url,target)}
-</script>
+</script>

src/components/chart/ChartFooter.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="w-100 d-flex flex-row justify-center align-center footer">
-      <div class="text-grey" style="font-size: small">&copy;{{ new Date().getFullYear() }}</div>
-      <div class="text-grey logo mr-3" style="font-size: small; margin-bottom: 0;">&nbsp;dexorder</div>
-      <social size="x-small"/>
-      <div class="text-grey tv">
-        <span>Charts by <a href="https://tradingview.com/" target="TradingView">TradingView</a></span>
-      </div>
-    </div>
-</template>
-
-<script setup>
-
-import Social from "@/components/Social.vue";
-</script>
-
-<style scoped lang="scss">
-div.footer {
-    margin-left: 1em;
-    margin-right: 1em;
-}
-.tv {
-  margin-left: 1em;
-  font-size: 0.7em;
-  a {
-    text-decoration: none;
-    &:visited {
-      color: grey;
-    }
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-</style>

src/components/chart/ChartPlaceOrder.vue

@@ -94,7 +94,7 @@ async function placeOrder() {
   else {
     await pendOrder(built[0])
     co.resetOrders()
-    router.push('/status')
+    nav('Status')
   }
 }
 

src/components/chart/Toolbar.vue

@@ -1,26 +1,14 @@
 <template>
   <div class="d-flex mb-1 align-center w-100">
-    <logo class="d-flex align-end clickable logo-large" @click="$router.push('/order')" :alpha="true"/>
-<!--
-    <div class="d-flex align-end clickable" @click="$router.push('/order')">
-      <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" :color="theme.colors.success"/></span>
-      <span class="logo">dexorder</span>
-      <alpha class="pr-6"/>
-    </div>
--->
-<!--
-    <div class="d-flex align-center">
-    </div>
--->
+    <logo class="d-flex align-end clickable logo-large" @click="nav('Order')" :alpha="true"/>
     <slot/>
     <div class="ml-auto d-flex align-center">
-<!--      <v-icon :icon="icon" size="small"/>&nbsp;-->
       <span class="title mr-4">{{title}}</span>
-      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" path="/order"/>
+      <toolbar-button tooltip="Order" icon="mdi-chart-timeline-variant" route="Order"/>
       <!-- mdi-currency-btc mdi-currency-eth mdi-bank-outline mdi-safe-square-outline -->
-      <toolbar-button tooltip="Assets" icon="mdi-currency-btc" path="/assets"/>
+      <toolbar-button tooltip="Assets" icon="mdi-currency-btc" route="Assets"/>
       <!-- mdi-format-list-checks mdi-format-list-bulleted-square -->
-      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" path="/status"/>
+      <toolbar-button tooltip="Status" icon="mdi-format-list-checks" route="Status"/>
       <v-btn variant="text" icon="mdi-help-circle-outline" text="Info" @click="showCorp"></v-btn>
     </div>
   </div>
@@ -33,6 +21,7 @@ import {useTheme} from "vuetify";
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
 import Alpha from "@/components/Alpha.vue";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
 
 const props = defineProps(['title', 'icon'])
 

src/components/chart/ToolbarButton.vue

@@ -2,7 +2,7 @@
 <v-tooltip :text="tooltip" location="top">
   <template v-slot:activator="{ props }">
     <v-btn v-bind="props" :color="isCurrent?'primary':undefined" variant="text"
-           :icon="icon" @click="$router.push(path)"/>
+           :icon="icon" @click="()=>nav(route)"/>
   </template>
 </v-tooltip>
 </template>
@@ -10,10 +10,12 @@
 <script setup>
 import {computed} from "vue";
 import {useRoute} from "vue-router";
+import {nav} from "/src/misc.js"
 
-const props = defineProps(['icon', 'path', 'tooltip'])
-const route = useRoute();
-const isCurrent = computed(() => route.path === props.path)
+const props = defineProps(['icon', 'route', 'tooltip'])
+console.log('toolbar button props', props.route)
+const router = useRoute();
+const isCurrent = computed(() => router.name === props.route)
 </script>
 
 <style scoped lang="scss">

src/components/chart/ToolbarPane.vue

@@ -6,14 +6,12 @@
     <div class="overflow-y-auto">
       <slot/>
     </div>
-    <chart-footer/>
   </div>
 </template>
 
 <script setup>
 
 import Toolbar from "@/components/chart/Toolbar.vue";
-import ChartFooter from "@/components/chart/ChartFooter.vue";
 
 const props = defineProps(['title', 'icon'])
 

src/corp/AppBtn.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+</template>
+
+<script setup>
+function openApp() {
+  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/corp/Home.vue

@@ -1,36 +1,34 @@
 <template>
-  <div>
-    <v-card rounded="0" border="0" elevation="0" class="maxw">
-      <v-card-item>
-        <logo class="logo-xl"/>
-      </v-card-item>
-      <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
-  <!--    <social class="ml-12"/>-->
-      <v-card-text>
-        Dexorder powers up your favorite DeFi exchange with advanced order types!
-      </v-card-text>
-      <v-card-text>
-        <v-list>
-          <v-list-item>
-            <uniswap-logo class="mr-2"/>
-            Supports Uniswap v3 <alpha/>
-          </v-list-item>
-          <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
-          <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
-          <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
-        </v-list>
-      </v-card-text>
-      <home-actions/>
-    </v-card>
-    <div style="height: 3rem; font-size: 0; line-height: 0;"/>
-    <how-it-works/>
-    <home-actions/>
-  </div>
+  <v-card rounded="0" border="0" elevation="0" class="maxw">
+    <v-card-item>
+      <logo class="logo-xl"/>
+    </v-card-item>
+    <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
+<!--    <social class="ml-12"/>-->
+    <v-card-text>
+      Dexorder powers up your favorite DeFi exchange with advanced order types!
+    </v-card-text>
+    <v-card-text>
+      <v-list>
+        <v-list-item>
+          <uniswap-logo class="mr-2"/>
+          Supports Uniswap v3 <alpha/>
+        </v-list-item>
+        <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
+        <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
+        <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
+      </v-list>
+    </v-card-text>
+    <div class="w-100 d-flex justify-center my-6 actions">
+      <app-btn/>
+      <v-btn prepend-icon="mdi-information-outline" variant="flat" text="How It Works" @click="nav('HowItWorks')"/>
+    </div>
+  </v-card>
 </template>
 
 <script setup>
@@ -41,6 +39,8 @@ import HowItWorks from "@/corp/HowItWorks.vue";
 import HomeActions from "@/corp/HomeActions.vue";
 import UniswapLogo from "@/corp/UniswapLogo.vue";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
+import AppBtn from "@/corp/AppBtn.vue";
 
 const theme = useTheme().current
 

src/corp/HomeActions.vue

@@ -1,15 +1,13 @@
 <template>
   <v-card-actions>
-    <v-btn prepend-icon="mdi-arrow-up-bold" color="primary" variant="tonal" text="Try the App" @click="openApp"/>
+    <app-btn/>
     <v-btn prepend-icon="mdi-discord" variant="flat" text="Join Discord" @click="discord"/>
     <v-btn prepend-icon="mdi-twitter" variant="flat" text="Follow Twitter" @click="twitter"/>
   </v-card-actions>
 </template>
 
 <script setup>
-function openApp() {
-  window.open('https://alpha.dexorder.trade/', 'dexorderapp')
-}
+import AppBtn from "@/corp/AppBtn.vue";
 
 function discord() {
   window.open('https://discord.gg/fqp9JXXQyt','discord')

src/corp/HowItWorks.vue

@@ -20,6 +20,9 @@
         Only you the vault's owner may withdraw funds or manage orders in your vault.
         The orders in the vault may only trade the tokens in the vault, and your regular wallet is never touched.
       </p>
+      <p>
+        See our open source smart contracts on <a href="https://github.com/dexorder-trade/contract">GitHub</a>.
+      </p>
     </v-card-text>
     <v-card-text>
       <h4>Funds are Never Locked</h4>
@@ -47,12 +50,22 @@
         provide gas at the correct times.
       </p>
     </v-card-text>
+    <v-card-text>
+      <h4 id="Charts">Charts</h4>
+        Creating dexorders couldn't be easier using the charts you know and love by
+        <a href="https://tradingview.com/" target="TradingView">TradingView</a>. What you see on the chart is the order
+        you get on-chain.
+    </v-card-text>
     <v-card-text>
       <h4>Power Up</h4>
       <p>
         Use Dexorder trading vaults for sophisticated order management when trading with your favorite <uniswap-logo/> DeFi pool!
       </p>
     </v-card-text>
+    <v-card-actions class="justify-center my-6 actions">
+      <app-btn/>
+      <v-btn prepend-icon="mdi-home-outline" variant="flat" text="Home" @click="nav('Home')"/>
+    </v-card-actions>
   </v-card>
 </template>
 
@@ -62,6 +75,9 @@ import Alpha from "@/components/Alpha.vue";
 import Soon from "@/components/Soon.vue";
 import UniswapLogo from "@/corp/UniswapLogo.vue";
 import Logo from "@/components/Logo.vue";
+import HomeActions from "@/corp/HomeActions.vue";
+import {nav} from "@/misc.js";
+import AppBtn from "@/corp/AppBtn.vue";
 </script>
 
 <style scoped lang="scss">

src/corp/MenuBar.vue

@@ -3,10 +3,11 @@
 <!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
 
     <v-app-bar-title>
-      <logo/>
+      <logo @click="nav('Home')" class="clickable"/>
     </v-app-bar-title>
 
-    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp">Launch App</v-btn>
+    <v-btn @click="nav('HowItWorks')" prepend-icon="mdi-information-outline" text="How It Works"/>
+    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp" text="Launch App"/>
 
   </v-app-bar>
 </template>
@@ -14,6 +15,7 @@
 <script setup>
 import {useTheme} from "vuetify";
 import Logo from "@/components/Logo.vue";
+import {nav} from "@/misc.js";
 
 const theme = useTheme().current
 

src/layouts/default/AppBar.vue

@@ -9,8 +9,8 @@
       <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
     </v-app-bar-title>
 
-    <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/assets')"></v-btn>
-    <v-btn icon="mdi-information-outline" text="Order Status" @click="$router.push('/status')"></v-btn>
+    <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="route('Assets')"></v-btn>
+    <v-btn icon="mdi-information-outline" text="Order Status" @click="route('Status')"></v-btn>
 
   </v-app-bar>
 </template>

src/main.js

@@ -21,7 +21,6 @@ BigInt.prototype.toJSON = function() { return this.toString() }
 
 const app = createApp(App)
 registerPlugins(app)
-
 app.mount('#app')
 detectChain()
 window.$vuetify = app

src/misc.js

@@ -3,6 +3,12 @@ import {usePrefStore, useStore} from "@/store/store.js";
 import {token} from "@/blockchain/token.js";
 import Color from "color";
 import {DateTime} from "luxon";
+import router from "@/router/index.js";
+
+export function nav(name) {
+    // noinspection JSIgnoredPromiseFromCall
+    router.push({name})
+}
 
 const QUOTE_SYMBOLS = [
     // in order of preference

src/router/index.js

@@ -3,13 +3,19 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
   {
-    path: '/home',
     component: () => import('@/corp/CorpLayout.vue'),
+    path:'/home',
     children: [
       {
-        path: '',
-        component: () => import(/* webpackChunkName: "vaultview" */ '@/corp/Home.vue'),
-      }
+        name: 'Home',
+        path: '/home',
+        component: () => import(/* webpackChunkName: "home" */ '@/corp/Home.vue'),
+      },
+      {
+        name: 'HowItWorks',
+        path: '/home/how-it-works',
+        component: () => import(/* webpackChunkName: "howitworks" */ '@/corp/HowItWorks.vue'),
+      },
     ]
   },
   {
@@ -17,6 +23,7 @@ const routes = [
     component: () => import('@/layouts/chart/ChartLayout.vue'),
     children: [
       {
+        name: 'App',
         path: '/',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
@@ -25,24 +32,24 @@ const routes = [
         component: () => import(/* webpackChunkName: "vaultview" */ '@/components/chart/ChartVault.vue'),
       },
       {
+        name: 'Order',
         path: '/order',
-        name: 'Edit',
         // 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/ChartPlaceOrder.vue'),
       },
       {
-        path: '/assets',
         name: 'Assets',
+        path: '/assets',
         // 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" */ '@/components/chart/ChartVault.vue'),
       },
       {
+        name: 'Status',
         path: '/status',
-        name: 'Orders',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
@@ -50,31 +57,31 @@ const routes = [
       },
 /*
       {
-        path: '/order',
         name: 'Create',
+        path: '/order',
         component: () => import(/!* webpackChunkName: "chartorder" *!/ '@/components/chart/ChartPlaceOrder.vue'),
       },
       {
-        path: '/twap',
         name: 'TWAP',
+        path: '/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'),
       },
       {
-        path: '/ladder',
         name: 'Ladder',
+        path: '/ladder',
         component: () => import(/!* webpackChunkName: "ladder" *!/ '@/components/LadderOrder.vue'),
       },
       {
-        path: '/diagonal',
         name: 'Diagonal',
+        path: '/diagonal',
         component: () => import(/!* webpackChunkName: "diagonal" *!/ '@/components/DiagonalOrder.vue'),
       },
       {
-        path: '/custom',
         name: 'Custom',
+        path: '/custom',
         component: () => import(/!* webpackChunkName: "custom" *!/ '@/components/CustomOrder.vue'),
       },
 */

src/styles/style.scss

@@ -1,6 +1,19 @@
-@use "/src/styles/vars" as v;
+@use "vars" as v;
 
 #app {
+
+  a {
+    $link_color: darken(v.$green, 10);
+    text-decoration: none;
+    color: $link_color;
+    &:visited {
+      color: $link_color;
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .logo {
     font-family: v.$heading-font-family;
     font-weight: 500;
@@ -39,6 +52,16 @@
     text-transform: none;
   }
 
+  .actions {
+    margin-top: 1em;
+    margin-bottom: 1em;
+
+    .v-btn {
+      margin-left: 1em;
+      margin-right: 1em;
+    }
+  }
+
   .v-card-title {
     font-family: v.$heading-font-family;
     //color: v.$blue;