major refactor of web store into vue setup style declaration; reactivity debugging; order view has known refresh issues

src/blockchain/contract.js

@@ -4,9 +4,10 @@ import {useStore} from "@/store/store.js";
 
 
 export function vaultAddress( owner, num=0) {
+    const s = useStore()
+    // console.log('vaultAddress', owner, s.factory, s.vaultInitCodeHash)
     if( !owner )
         return null
-    const s = useStore()
     const salt = ethers.solidityPackedKeccak256(['address','uint8'],[owner,num])
     return ethers.getCreate2Address(s.factory, salt, s.vaultInitCodeHash)
 }

src/blockchain/prices.js

@@ -16,25 +16,28 @@ export function subPrices( routes ) {
     let chainId = null
     for( const route of routes ) {
         // console.log('sub route', route, subscriptionCounts)
-        if( !(route in subscriptionCounts) || subscriptionCounts[route] === 0 ) {
-            subscriptionCounts[route] = 1
-            // console.log('subscribing to pool', route.pool)
+        const routeKey = [route.chainId, route.pool]
+        if( !(routeKey in subscriptionCounts) || subscriptionCounts[routeKey] === 0 ) {
+            subscriptionCounts[routeKey] = 1
             subRoutes.push(route)
         }
         else {
-            subscriptionCounts[route]++
+            subscriptionCounts[routeKey]++
         }
         if( chainId !== null && route.chainId !== chainId )
             throw Error('cannot mix chainIds in a subscription list')
         chainId = route.chainId
     }
     if( subRoutes.length ) {
-        socket.emit('subPools', chainId, routes.map((r)=>r.pool) )
+        const pools = routes.map((r)=>r.pool);
+        // console.log('subscribing to pools', pools)
+        socket.emit('subPools', chainId, pools )
         // perform a local query if necessary
+        const s = useStore()
         for( const route of subRoutes ) {
-            const s = useStore()
-            if( !(route.pool in s.poolPrices) ) {
-                getPriceForRoute(route).then((price)=>s.poolPrices[route.pool]=price)
+            const routeKey = [route.chainId, route.pool]
+            if( !(routeKey in s.poolPrices) ) {
+                getPriceForRoute(route).then((price)=>s.poolPrices[routeKey]=price)
             }
         }
     }
@@ -45,26 +48,27 @@ export function unsubPrices( routes ) {
     const unsubAddrs = []
     for( const route of routes ) {
         // console.log('unsub route', route, subscriptionCounts)
-        if( !(route in subscriptionCounts) ) {
+        const routeKey = [route.chainId, route.pool]
+        if( !(routeKey in subscriptionCounts) ) {
             console.error('unsubscribed to a nonexistent route', route)
         }
         else {
-            subscriptionCounts[route]--
-            if( subscriptionCounts[route] === 0 ) {
+            subscriptionCounts[routeKey]--
+            if( subscriptionCounts[routeKey] === 0 ) {
                 unsubAddrs.push(route.pool)
                 if( chainId !== null && route.chainId !== chainId )
                     throw Error('cannot mix chainIds in a subscription list')
                 // console.log('unsubscribing from pool', route.pool)
                 chainId = route.chainId
             }
-            else if( subscriptionCounts[route] < 0 ) {
+            else if( subscriptionCounts[routeKey] < 0 ) {
                 console.error('unsubscribed to an already unsubbed route', route)
-                subscriptionCounts[route] = 0 // fix
+                subscriptionCounts[routeKey] = 0 // fix
             }
         }
     }
     if( unsubAddrs.length )
-        socket.emit('unsubPool', chainId, unsubAddrs )
+        socket.emit('unsubPools', chainId, unsubAddrs )
 }
 
 
@@ -86,7 +90,7 @@ async function getPriceForRoute(route) {
         price = price.div(FixedNumber.fromValue(2n**(96n*2n),0,WIDE_PRICE_FORMAT))
         price = price.round(18).toString()
         // console.log(`price for ${route.token0.symbol}/${route.token1.symbol}`,price)
-        store.poolPrices[addr] = price
+        store.poolPrices[[route.chainId,addr]] = price
         return price
     }
     else

src/blockchain/route.js

@@ -3,14 +3,13 @@ import {Exchange} from "@/blockchain/orderlib.js";
 import {useStore} from "@/store/store.js";
 
 
-export async function findRoute(tokenA, tokenB) {
+export async function findRoute(chainId, tokenA, tokenB) {
     const helper = await queryHelperContract()
     if (!helper)
         throw Error('no helper')
-    const chainId = useStore().chainId
     const rawRoutes = await helper.getRoutes(tokenA.address, tokenB.address)
     // todo expose all available pools
-    // console.log('raw routes', rawRoutes)
+    console.log('raw routes', rawRoutes)
     let result = null // we actually only find a single pool for now
     for (let [exchange, fee, pool] of rawRoutes) {
         exchange = Number(exchange)

src/blockchain/wallet.js

@@ -10,36 +10,37 @@ export function onChainChanged(chainId) {
   const store = useStore()
   if( chainId !== store.chainId ) {
     console.log('chain changed', chainId)
-    store.chainId = chainId // touch the chainId last. will cause any clients of  the store's provider getter to refresh
+    store.chainId = chainId
     store.account = null
     const provider = new ethers.BrowserProvider(window.ethereum, chainId);
     store.provider = provider
-    provider.listAccounts().then((accounts)=>changeAccounts(accounts.map((a)=>a.address)))
+    provider.listAccounts().then((accounts)=>changeAccounts(chainId, accounts.map((a)=>a.address)))
   }
 }
 
-function changeAccounts(accounts) {
-  console.log('change accounts', accounts)
+function changeAccounts(chainId, accounts) {
+  // console.log('changeAccounts', chainId, accounts)
   const store = useStore()
   if( accounts.length === 0 ) {
+    console.log('account logged out')
     store.account = null
     store.vaults = []
     store.vaultBalances = {}
   }
   else {
     const addr = accounts[0]
-    const store = useStore()
+    console.log('account logged in', addr)
     store.account = addr
-    discoverVaults()
+    discoverVaults(addr)
     flushTransactions()
-    socket.emit('address', store.chainId, addr)
+    socket.emit('address', chainId, addr)
   }
 }
 
 function onAccountsChanged(accounts) {
   const store = useStore()
   if (accounts.length === 0 || accounts[0] !== store.account)
-    changeAccounts(accounts);
+    changeAccounts(store.chainId.value, accounts);
 }
 
 export function detectChain() {
@@ -93,15 +94,14 @@ export async function connectWallet() {
 let pendingOrders = []
 
 
-function discoverVaults() {
+function discoverVaults(owner) {
   const s = useStore()
-  const owner = s.account.value
   if( owner === null )
-    s.vaults.value = []
+    s.vaults = []
   else
     _discoverVaults(owner).then((result)=>{
-      if( s.account.value === owner ) { // double-check the account since it could have changed during our await
-        s.vaults.value = result
+      if( s.account === owner ) { // double-check the account since it could have changed during our await
+        s.vaults = result
         if( pendingOrders.length )
           if( result.length )
             flushOrders(result[0])
@@ -114,18 +114,22 @@ function discoverVaults() {
 async function _discoverVaults(owner) {
   const result = []
   // todo multi-vault scan
-  const addr = vaultAddress(owner, 0)
+  const num = 0
+  const addr = vaultAddress(owner, num)
   const s = useStore()
   const vault = new ethers.Contract(addr, vaultAbi, s.provider)
   let version = -1
   try {
     version = await vault.version();
-    if( version === 1 )
+    if( version === 1 ) {
+      console.log(`found vault ${num} at ${addr}`)
       result.push(addr)
+    }
     else
       console.error(`bad vault version ${version}`)
   }
   catch (e) {
+    console.log(`no vault ${num}`)
   }
   return result
 }
@@ -133,11 +137,16 @@ async function _discoverVaults(owner) {
 
 export function ensureVault() {
   const s = useStore()
-  ensureVault2(s.chainId.value, s.account.value, 0)
+  const owner = s.account;
+  console.log('ensureVault', s.chainId.value, owner)
+  if( !owner )
+    return
+  ensureVault2(s.chainId.value, owner, 0)
 }
 
 
 export function ensureVault2(chainId, owner, num) {
+  console.log('ensureVault2', chainId, owner, num)
   if( !chainId ) {
     console.log('cannot create vault: no chain selected')
     return
@@ -153,12 +162,12 @@ export function ensureVault2(chainId, owner, num) {
 export async function pendOrder(order) {
   console.log('order', JSON.stringify(order))
   const s = useStore()
-  if (!s.vaults.value.length) {
+  if (!s.vaults.length) {
     pendingOrders.push(order)
     ensureVault()
   }
   else {
-    const vault = s.vaults.value[0];
+    const vault = s.vaults[0];
     pendOrderAsTransaction(vault, order)
   }
 }
@@ -224,11 +233,11 @@ export async function asyncFlushTransactions() {
 export async function asyncFlushTransactions2() {
   // todo rework into flushTransactions()
   const s = useStore()
-  if( s.provider.value === null ) {
+  if( s.provider === null ) {
     console.log('warning: asyncFlushOrders() cancelled due to null provider')
     return
   }
-  const senders = s.transactionSenders.value
+  const senders = s.transactionSenders
   if (!senders.length)
     return
   console.log(`flushing ${senders.length} transactions`)