wallet flow; new faucet; placing chart orders works!

src/store/store.js

@@ -3,6 +3,8 @@ import {defineStore} from 'pinia'
 import {knownTokens} from "@/knownTokens.js";
 import {computed, ref} from "vue";
 import {version} from "@/version.js";
+import {ethers} from "ethers";
+import {updateAccounts} from "@/blockchain/wallet.js";
 
 // USING THE STORE:
 //
@@ -31,11 +33,15 @@ function timestamp() {
   return Math.round(new Date().getTime() / 1000)
 }
 
+
+const UNKNOWN_PROVIDER = {}
+
+
 export const useStore = defineStore('app', ()=> {
   const clock = ref(timestamp())
   const nav = ref(false) // controls opening navigation drawer
 
-  const _chainId = ref(Object.keys(version.chainInfo)[0])
+  const _chainId = ref(Number(Object.keys(version.chainInfo)[0]))
   const _chainInfo = ref(version.chainInfo)
 
   function getTokenList() {
@@ -54,25 +60,42 @@ export const useStore = defineStore('app', ()=> {
       result[token.address] = token
     return result
   }
-  function refreshChain() {
-    useOrderStore().setDefaultTokens(getTokenList())
-  }
   const chainId = computed({
-    get() {return _chainId},
-    set(v) {_chainId.value=v; refreshChain()}
+    get() {return _chainId.value},
+    set(v) {
+      console.log('setting chainid',_chainId.value, v)
+      if (_chainId.value!==v) {
+        console.log('do set')
+        _chainId.value = v
+        account.value = null
+      }
+      if (_chainId.value!==v || _provider.value === null) {
+        console.log('update provider')
+        _provider.value = UNKNOWN_PROVIDER
+      }
+    }
   })
   const chainInfo = computed({
-    get() {return _chainInfo},
-    set(v) {_chainInfo.value=v; refreshChain()}
+    get() {return _chainInfo.value},
+    set(v) {_chainInfo.value=v}
   })
   const chain = computed(() => !_chainId.value ? null : (_chainInfo.value[_chainId.value] || null))
-  // making the provider directly reactive causes exceptions (calling private method...) when calling provider
-  // functions, so we use a separate ref to signal changes
-  let _provider = null
-  const _providerTouch = ref(false)
-  const provider = computed({
-    get() {_providerTouch.value; return _provider},
-    set(v) {_provider=v; _providerTouch.value = !_providerTouch.value}
+  // this provider is for the app's chainId not the wallet's chainId.
+  let _provider = UNKNOWN_PROVIDER  // null indicates a known-unavailable provider whereas undefined means provider status is unknown
+  const provider = computed(()=>{
+    if (_provider===UNKNOWN_PROVIDER) {
+      // unknown provider status
+      try {
+        _provider = new ethers.BrowserProvider(window.ethereum, _chainId.value);
+        updateAccounts(_chainId.value, _provider)
+      }
+      catch (e) {
+        console.error('could not get provider', _chainId.value, e)
+        _provider = null
+      }
+  }
+    // if _provider is null then it is known to be an unavailable chain
+    return _provider
   })
   const vaultInitCodeHash = computed(() => !chain.value ? null : chain.value.vaultInitCodeHash)
   const account = ref(null)