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'])