TRANCHE EXECUTION WORKS

package.json

@@ -12,7 +12,7 @@
     "@mdi/font": "7.0.96",
     "core-js": "^3.29.0",
     "ethers": "^6.7.1",
-    "pinia": "^2.0.0",
+    "pinia": "2.1.6",
     "roboto-fontface": "*",
     "socket.io-client": "^4.7.2",
     "vue": "^3.2.0",

src/blockchain/wallet.js

@@ -100,6 +100,10 @@ export async function asyncFlushOrders() {
   try {
     signer = await provider.getSigner();
   } catch (e) {
+    // {
+    //     "code": -32002,
+    //     "message": "Already processing eth_requestAccounts. Please wait."
+    // }
     console.log('signer denied')
     return
   }

src/components/TimedOrderEntry.vue

@@ -24,7 +24,7 @@
           {{pairSymbol}} {{r.fee/10000}}%
         </v-chip>
 
-        <div v-if="routeFinder.pending()">
+        <div v-if="routesPending">
           <v-progress-circular indeterminate/> Searching for {{pairSymbol}} pools...
         </div>
 
@@ -97,8 +97,8 @@ import {pendOrder} from "@/blockchain/wallet.js";
 
 const s = useStore()
 const buy = ref(false)
-let _tokenA = ref(s.tokens && s.tokens.length >= 1 ? s.tokens[0] : null)
-let _tokenB = ref(s.tokens && s.tokens.length >= 2 ? s.tokens[1] : null)
+let _tokenA = ref(s.tokens !== undefined && s.tokens.length >= 1 ? s.tokens[0] : null)
+let _tokenB = ref(s.tokens !== undefined && s.tokens.length >= 2 ? s.tokens[1] : null)
 const tokenA = computed({
   get() {
     return _tokenA.value
@@ -132,6 +132,7 @@ const quote = computed(()=>{
   return !token?{}:token
 })
 const routes = ref([])
+const routesPending = ref(false)
 const amount = ref(100) // todo 0
 const amountIsTokenA = ref(false)
 const amountIsTotal = ref(true)
@@ -140,26 +141,28 @@ const inverted = ref(false)
 const minPrice = ref(null)
 const maxPrice = ref(null)
 const limitPrice = ref(null)
-const interval = ref(1)
+const interval = ref(10)
 const intervalIsTotal = ref(true)
 const timeUnits = ['minutes', 'hours', 'days']
-const timeUnitIndex = ref(0)
+const timeUnitIndex = ref(1)
 const limitIsMinimum = computed(() => !(buy.value ^ inverted.value))
 const validOrder = computed(()=>amount.value > 0 && routes.value.length > 0 )
 
 async function findRoute() {
-  if( !_tokenA.value || !_tokenB.value ) {
-    routes.value = []
+  routes.value = []
+  if( !_tokenA.value || !_tokenB.value )
     return
-  }
   const helper = await queryHelperContract()
+  if( !helper )
+    return
+  routesPending.value = true
   let rawRoutes
   try {
     rawRoutes = await helper.getRoutes(tokenA.value.address, tokenB.value.address)
   }
   catch (e) {
-    routes.value = []
-    console.log('routes exception', e)
+    // console.log('routes exception', e)
+    routesPending.value = false
     return
   }
   // todo expose all available pools
@@ -178,6 +181,7 @@ async function findRoute() {
     }
   }
   routes.value = [result]
+  routesPending.value = false
   console.log('found route', result)
 }
 
@@ -244,7 +248,7 @@ async function placeOrder() {
   const tokenIn = buy.value ? tb.address : ta.address
   const tokenOut = buy.value ? ta.address : tb.address
   const route = routes.value[0];
-  const amountToken = amountIsTokenA ? ta : tb
+  const amountToken = amountIsTokenA.value ? ta : tb
   const amt = FixedNumber.fromString(amount.value.toString(), {decimals: amountToken.decimals}).value
   const amountIsInput = amountIsTokenA.value !== buy.value
 

src/layouts/default/AppBar.vue

@@ -1,9 +1,16 @@
 <template>
   <v-app-bar flat>
-    <v-app-bar-title class="">
-      <span class="logo"><v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>dexorder</span>
+    <v-app-bar-title>
+      <span class="logo clickable" @click="$router.push('/')">
+        <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
+        <span class="clickable">dexorder</span>
+      </span>
       <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
     </v-app-bar-title>
+
+    <v-btn icon="mdi-safe-square" text="Vault" @click="$router.push('/vault')"></v-btn>
+    <v-btn icon="mdi-swap-horizontal-circle-outline" text="Orders" @click="$router.push('/orders')"></v-btn>
+
   </v-app-bar>
 </template>
 

src/misc.js

@@ -19,7 +19,6 @@ export class SingletonCoroutine {
     }
 
     async onTimeout(self) {
-        self.timeout = null
         try {
             await self.f(...self.args)
         }
@@ -29,6 +28,9 @@ export class SingletonCoroutine {
             else
                 console.error(e)
         }
+        finally {
+            self.timeout = null
+        }
     }
 
 }

src/router/index.js

@@ -14,6 +14,22 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
       },
+      {
+        path: '/orders',
+        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.
+        component: () => import(/* webpackChunkName: "ordersview" */ '@/views/OrdersView.vue'),
+      },
+      {
+        path: '/vault',
+        name: 'Vault',
+        // 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" */ '@/views/VaultView.vue'),
+      },
     ],
   },
 ]

src/socket.js

@@ -3,24 +3,39 @@ import {useStore} from "@/store/store.js";
 import {onChainChanged} from "@/blockchain/wallet.js";
 import {ethers} from "ethers";
 
-export const socket = io(import.meta.env.VITE_WS_URL || undefined, { transports: ["websocket"] })
+export const socket = io(import.meta.env.VITE_WS_URL || undefined, {transports: ["websocket"]})
 
-socket.on('connect', ()=>{
+socket.on('connect', () => {
     console.log('ws connected')
 })
 
-socket.on('disconnect', ()=>{
+socket.on('disconnect', () => {
     console.log('ws disconnected')
 })
 
-socket.on('welcome', async (data)=>{
-    console.log('welcome',data)
+socket.on('welcome', async (data) => {
+    console.log('welcome', data)
     const s = useStore()
     s.chainInfo = data.chainInfo
     s.vaultInitCodeHash = data.vaultInitCodeHash
     const p = new ethers.BrowserProvider(window.ethereum)
     const network = await p.getNetwork()
-    if( network !== null )
+    if (network !== null)
         onChainChanged(network.chainId)
 })
 
+socket.on('p', async (pool, price) => {
+    const s = useStore()
+    const prices = {}
+    prices[pool] = price
+    s.$patch({poolPrices: prices})
+})
+
+socket.on('vb', async (vault, token, balance) => {
+    const s = useStore()
+    const balances = {}
+    balances[vault] = {}
+    balances[vault][token] = balance
+    s.$patch({vaultBalances: balances})
+})
+

src/store/store.js

@@ -5,7 +5,7 @@ import {knownTokens} from "@/tokens.js";
 export const useStore = defineStore('app', {
   state: () => ({
     chainId: null,
-    chainInfo: null,
+    chainInfo: {},
     vaultInitCodeHash: null,
     account: null,
     vaults: [],
@@ -16,11 +16,13 @@ export const useStore = defineStore('app', {
       closeable: false
     }],
     extraTokens: {},
+    poolPrices: {},
+    vaultBalances: {}, // indexed by vault addr then by token addr. value is an int
   }),
   getters: {
     chain: (s)=> !s.chainInfo ? null : (s.chainInfo[s.chainId] || null),
     tokens: (s)=>{
-      const chains = s.chainInfo[s.chainId].tokens || []
+      const chains = s.chainId in s.chainInfo && s.chainInfo[s.chainId].tokens !== undefined ? s.chainInfo[s.chainId].tokens : []
       let known = knownTokens[s.chainId]
       known = known ? Object.values(known) : []
       let extras = s.extraTokens[s.chainId]
@@ -52,6 +54,5 @@ export const useStore = defineStore('app', {
         extras[info.address] = info
       })
     },
-},
-
+  },
 })

src/styles/style.scss

@@ -1,6 +1,12 @@
 @use "/src/styles/vars" as v;
 
 .app {
+  .clickable {
+    :hover {
+      cursor: pointer;
+    }
+  }
+
   .v-btn {
     //font-family: v.$heading-font-family;
     text-transform: none;

src/styles/vars.scss

@@ -54,4 +54,4 @@ $heading-font-family: 'Orbitron', sans-serif;
 //$heading-font-family: 'Chakra Petch', sans-serif;
 
 $sm-breakpoint: 600px;
-$card-maxw: 40em;
+$card-maxw: 25em;

src/views/OrdersView.vue

@@ -0,0 +1,11 @@
+<template>
+  <TimedOrder/>
+</template>
+
+<script setup>
+import TimedOrder from "@/components/TimedOrderEntry.vue";
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+</style>

src/views/VaultView.vue

@@ -0,0 +1,16 @@
+<template>
+  <Vault/>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store";
+import Vault from "@/components/Vault.vue";
+
+const s = useStore()
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>

yarn.lock

@@ -1064,7 +1064,7 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-pinia@^2.0.0:
+pinia@2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.6.tgz#e88959f14b61c4debd9c42d0c9944e2875cbe0fa"
   integrity sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==