mobile fixes

src/components/ApproveRegion.vue

@@ -8,8 +8,8 @@
 
 <script setup>
 import {useStore} from "@/store/store";
-import {socket} from "@/socket.js";
 import {useRoute} from "vue-router";
+import {socket} from "@/socket.js";
 
 const s = useStore()
 

src/components/DebugConsole.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="debug-console">
+    <div v-for="(entry, idx) in logs" :key="idx" :class="['log-entry', entry.type]">
+      [{{ entry.type }}] {{ entry.message }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const logs = ref([]);
+
+function stringify(args) {
+  return args.map(arg => {
+    if (typeof arg === 'object') {
+      try { return JSON.stringify(arg); } catch { return String(arg); }
+    }
+    return String(arg);
+  }).join(' ');
+}
+
+let original = {};
+
+onMounted(() => {
+  ['log', 'warn', 'error', 'info'].forEach(type => {
+    // Save the original method
+    original[type] = console[type];
+    console[type] = function(...args) {
+      logs.value.push({
+        type,
+        message: stringify(args)
+      });
+      // Optionally limit log length:
+      if (logs.value.length > 200) logs.value.shift();
+      original[type].apply(console, args);
+    };
+  });
+});
+
+onBeforeUnmount(() => {
+  // Restore the original methods
+  Object.keys(original).forEach(type => {
+    if (original[type]) console[type] = original[type];
+  });
+});
+</script>
+
+<style scoped>
+.debug-console {
+  background: #1a1a1a;
+  color: #0f0;
+  font-family: monospace;
+  font-size: 14px;
+  padding: 10px;
+  max-height: 260px;
+  overflow-y: auto;
+  border-radius: 5px;
+  margin: 8px 0;
+}
+.log-entry { margin-bottom: 2px; }
+.log-entry.warn { color: #ff0; }
+.log-entry.error { color: #f55; }
+.log-entry.info { color: #0cf; }
+</style>

src/components/Faucet.vue

@@ -36,8 +36,8 @@
 import {useStore} from "@/store/store";
 import {computed, ref} from "vue";
 import Btn from "@/components/Btn.vue";
-import {socket} from "@/socket.js";
 import {metadata} from "@/version.js";
+import {socket} from "@/socket.js";
 
 const DISABLED_DURATION = 60_000;
 

src/components/NavDrawer.vue

@@ -15,7 +15,7 @@
 
 <script setup>
 import {useStore} from "@/store/store";
-import router from "@/router/index.js";
+import {router} from "@/router/router.js";
 const s = useStore()
 
 function nav(path) {

src/components/Order.vue

@@ -11,7 +11,8 @@
         </div>
       </v-card-item>
       <v-card-actions class="d-flex justify-space-evenly mb-4">
-        <v-btn variant="outlined" color="red" @click="nav('Assets')">Cancel</v-btn>
+        <v-btn variant="outlined" color="red" @click="// noinspection JSIgnoredPromiseFromCall
+    router.push({name: 'Assets'})">Cancel</v-btn>
         <v-btn variant="flat" color="green" :disabled="!valid()" @click="placeOrder">Place Dexorder</v-btn>
       </v-card-actions>
     </phone-card>
@@ -23,12 +24,13 @@ import {useOrderStore, useStore} from "@/store/store";
 import PhoneCard from "@/components/PhoneCard.vue";
 import Amount from "@/components/Amount.vue"
 // noinspection ES6UnusedImports
-import {nav, SingletonCoroutine, vAutoSelect} from "@/misc.js";
+import {SingletonCoroutine, vAutoSelect} from "@/misc.js";
 import {newOrder} from "@/blockchain/orderlib.js";
 import {FixedNumber} from "ethers";
 import PairChoice from "@/components/PairChoice.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
 import {useChartOrderStore} from "@/orderbuild.js";
+import {router} from "@/router/router.js";
 
 const s = useStore()
 const os = useOrderStore()

src/components/TermsOfService.vue

@@ -22,8 +22,8 @@
 import {usePrefStore} from "@/store/store.js";
 import {computed, ref, watch} from "vue";
 
-import {socket} from "@/socket.js";
 import TosCard from "@/components/TosCard.vue";
+import {socket} from "@/socket.js";
 
 // UPDATE THIS WHEN CHANGING THE TOS
 const CURRENT_VERSION='2024-11-18'  // this must be a parseable date

src/components/Vault.vue

@@ -60,12 +60,13 @@
 import {useStore} from "@/store/store.js";
 import {computed, defineAsyncComponent, onUnmounted, ref, watchEffect} from "vue";
 import {vaultAddress} from "@/blockchain/contract.js";
-import {ensureVault, provider} from "@/blockchain/wallet.js";
+import {ensureVault} from "@/blockchain/wallet.js";
 import CopyButton from "@/components/CopyButton.vue";
 import Withdraw from "@/components/Withdraw.vue";
 import NativeRow from "@/components/NativeRow.vue";
 import NativeWrap from "@/components/NativeWrap.vue";
 import WithdrawNative from "@/components/WithdrawNative.vue";
+import {provider} from "@/blockchain/provider.js";
 
 const TokenRow = defineAsyncComponent(()=>import('./TokenRow.vue'))
 const s = useStore()

src/components/chart/ChartStatus.vue

@@ -2,7 +2,9 @@
   <toolbar-pane title="Status" icon="mdi-format-list-bulleted-square">
     <template #toolbar>
       <v-btn variant="text" v-if="s.vault" prepend-icon="mdi-delete-alert" color="red"
-             @click="cancelAll(s.vault)" :disabled="!anyOrdersOpen"
+             @click="(async function (vault){
+  new CancelAllTransaction(useStore().chainId, vault).submit()
+})(s.vault)" :disabled="!anyOrdersOpen"
              text="Cancel All"/>
     </template>
     <needs-signer>
@@ -16,10 +18,10 @@
 import ToolbarPane from "@/components/chart/ToolbarPane.vue";
 import Orders from "@/components/Status.vue";
 import NeedsSigner from "@/components/NeedsSigner.vue";
-import {cancelAll} from "@/blockchain/wallet.js";
 import {useStore} from "@/store/store.js";
 import {computed} from "vue";
 import {isOpen} from "@/blockchain/orderlib.js";
+import {CancelAllTransaction} from "@/blockchain/transaction.js";
 
 const s = useStore()
 

src/components/chart/DCABuilder.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup>
-import {builderDefaults, DEFAULT_SLIPPAGE, useChartOrderStore} from "@/orderbuild.js";
+import {builderDefaults, useChartOrderStore} from "@/orderbuild.js";
 import {allocationText, ShapeType} from "@/charts/shape.js";
 import {sideColor, SingletonCoroutine, toPrecision, vAutoSelect} from "@/misc.js";
 import {useStore} from "@/store/store.js";
@@ -57,7 +57,7 @@ import BuilderPanel from "@/components/chart/BuilderPanel.vue";
 import {ohlcStart} from "@/charts/chart-misc.js";
 import Color from "color";
 import OrderAmount from "@/components/chart/OrderAmount.vue";
-import {MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
+import {DEFAULT_SLIPPAGE, MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
 import {getFeeSchedule} from "@/fees.js";
 import {NATIVE_TOKEN} from "@/common.js";
 

src/components/chart/DateBuilder.vue

@@ -39,11 +39,11 @@
 </template>
 
 <script setup>
-import {builderDefaults, DEFAULT_SLIPPAGE, MIN_EXECUTION_TIME, useChartOrderStore} from "@/orderbuild.js";
+import {builderDefaults, useChartOrderStore} from "@/orderbuild.js";
 import {allocationText, VLine} from "@/charts/shape.js";
 import {sideColor} from "@/misc.js";
 import {useOrderStore, usePrefStore, useStore} from "@/store/store.js";
-import {DISTANT_FUTURE, MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js";
+import {DEFAULT_SLIPPAGE, DISTANT_FUTURE, MAX_FRACTION, MIN_EXECUTION_TIME, newTranche} from "@/blockchain/orderlib.js";
 import RungBuilder from "@/components/chart/RungBuilder.vue";
 import {computed, ref, watchEffect} from "vue";
 import {chart, dragging} from "@/charts/chart.js";

src/components/chart/MarketBuilder.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script setup>
-import {builderDefaults, builderFuncs, DEFAULT_SLIPPAGE, useChartOrderStore} from "@/orderbuild.js";
+import {builderDefaults, builderFuncs, useChartOrderStore} from "@/orderbuild.js";
 import {computed, onMounted, onUnmounted} from "vue";
-import {newTranche} from "@/blockchain/orderlib.js";
+import {DEFAULT_SLIPPAGE, newTranche} from "@/blockchain/orderlib.js";
 
 const co = useChartOrderStore()
 const props = defineProps(['order', 'builder'])

src/components/chart/Shared.vue

@@ -5,9 +5,9 @@
 
 <script setup>
 import {loadShareUrl} from "@/share.js";
-import router from "@/router/index.js";
-import {socket} from "@/socket.js";
+import {router} from "@/router/router.js";
 import {useRoute} from "vue-router";
+import {socket} from "@/socket.js";
 
 const route = useRoute()
 const code = route.params.code

src/components/chart/Toolbar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="d-flex mb-1 align-center w-100">
-    <logo class="d-flex align-end clickable logo-large ml-1" @click="nav('Order')" :show-tag="true" max-height="32"/>
+    <logo class="d-flex align-end clickable logo-large ml-1" @click="// noinspection JSIgnoredPromiseFromCall
+    router.push({name: 'Order'})" :show-tag="true" max-height="32"/>
     <slot/>
     <div class="ml-auto d-flex align-center">
       <span class="title mr-4">{{title}}</span>
@@ -17,7 +18,7 @@
 <script setup>
 import ToolbarButton from "@/components/chart/ToolbarButton.vue";
 import Logo from "@/components/Logo.vue";
-import {nav} from "@/misc.js";
+import {router} from "@/router/router.js";
 
 const props = defineProps(['title', 'icon'])
 

src/components/chart/ToolbarButton.vue

@@ -10,7 +10,6 @@
 <script setup>
 import {computed} from "vue";
 import {useRoute} from "vue-router";
-import {nav} from "/src/misc.js"
 
 const props = defineProps(['icon', 'route', 'tooltip', 'href', 'target'])
 const router = useRoute();
@@ -29,7 +28,8 @@ function click() {
 
   }
   else
-    nav(props.route)
+      // noinspection JSIgnoredPromiseFromCall
+    router1.push({name: props.route})
 }
 </script>