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

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`)