From 3bf6cab98e1314ac9cfb6ec854ff370cae262376 Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Sun, 29 Oct 2023 16:53:07 -0400
Subject: [PATCH] TRANCHE EXECUTION WORKS

---
 package.json                       |  2 +-
 src/blockchain/wallet.js           |  4 ++++
 src/components/TimedOrderEntry.vue | 26 +++++++++++++++-----------
 src/layouts/default/AppBar.vue     | 11 +++++++++--
 src/misc.js                        |  4 +++-
 src/router/index.js                | 16 ++++++++++++++++
 src/socket.js                      | 27 +++++++++++++++++++++------
 src/store/store.js                 |  9 +++++----
 src/styles/style.scss              |  6 ++++++
 src/styles/vars.scss               |  2 +-
 src/views/OrdersView.vue           | 11 +++++++++++
 src/views/VaultView.vue            | 16 ++++++++++++++++
 yarn.lock                          |  2 +-
 13 files changed, 109 insertions(+), 27 deletions(-)
 create mode 100644 src/views/OrdersView.vue
 create mode 100644 src/views/VaultView.vue

diff --git a/package.json b/package.json
index 026a1a3..b4a84bb 100644
--- a/package.json
+++ b/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",
diff --git a/src/blockchain/wallet.js b/src/blockchain/wallet.js
index 0057b4f..593f72d 100644
--- a/src/blockchain/wallet.js
+++ b/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
   }
diff --git a/src/components/TimedOrderEntry.vue b/src/components/TimedOrderEntry.vue
index 5e44129..b0c132c 100644
--- a/src/components/TimedOrderEntry.vue
+++ b/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
 
diff --git a/src/layouts/default/AppBar.vue b/src/layouts/default/AppBar.vue
index b8787d7..f41eff2 100644
--- a/src/layouts/default/AppBar.vue
+++ b/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>
 
diff --git a/src/misc.js b/src/misc.js
index 6115c3b..7269867 100644
--- a/src/misc.js
+++ b/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
+        }
     }
 
 }
diff --git a/src/router/index.js b/src/router/index.js
index 65353da..6e4dbc8 100644
--- a/src/router/index.js
+++ b/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'),
+      },
     ],
   },
 ]
diff --git a/src/socket.js b/src/socket.js
index cec92a7..555942f 100644
--- a/src/socket.js
+++ b/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})
+})
+
diff --git a/src/store/store.js b/src/store/store.js
index 743efce..962ee52 100644
--- a/src/store/store.js
+++ b/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
       })
     },
-},
-
+  },
 })
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 46dc307..1401e73 100644
--- a/src/styles/style.scss
+++ b/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;
diff --git a/src/styles/vars.scss b/src/styles/vars.scss
index 71eced0..290ee2b 100644
--- a/src/styles/vars.scss
+++ b/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;
diff --git a/src/views/OrdersView.vue b/src/views/OrdersView.vue
new file mode 100644
index 0000000..253c6aa
--- /dev/null
+++ b/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>
diff --git a/src/views/VaultView.vue b/src/views/VaultView.vue
new file mode 100644
index 0000000..97feebb
--- /dev/null
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 0e82714..ec3d894 100644
--- a/yarn.lock
+++ b/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==