reworked to optionally use Hardhat in mock; chain id 31337; refactored TransactionJob management; execute() mostly commented out for minimalism

src/components/TokenChoice.vue

@@ -87,17 +87,11 @@ const s = useStore()
 
 async function addExtraToken(addr) {
   const prom = new Promise((resolve)=>{
-    socket.emit('lookupToken', s.chainId, addr, (info) => {
+    const chainId = s.chainId
+    socket.emit('lookupToken', chainId, addr, (info) => {
       if( info === null )
         return resolve(null)
-      s.$patch((state)=>{
-        let extras = state.extraTokens[state.chainId]
-        if( extras === undefined ) {
-          extras = {}
-          state.extraTokens[state.chainId] = extras
-        }
-        extras[info.address] = info
-      })
+      s.addToken(chainId, info)
       resolve(info)
     })
   })

src/store/store.js

@@ -20,11 +20,12 @@ export const useStore = defineStore('app', {
   getters: {
     chain: (s)=> !s.chainInfo ? null : (s.chainInfo[s.chainId] || null),
     tokens: (s)=>{
+      const chains = s.chainInfo[s.chainId].tokens || []
       let known = knownTokens[s.chainId]
       known = known ? Object.values(known) : []
       let extras = s.extraTokens[s.chainId]
       extras = extras ? Object.values(extras) : []
-      return [...known, ...extras]
+      return [...chains, ...known, ...extras] // put chains first so the Mockcoin pool is automatically selected
     },
     factory: (s)=>!s.chain?null:s.chain.factory,
     helper: (s)=>!s.chain?null:s.chain.helper,
@@ -41,6 +42,16 @@ export const useStore = defineStore('app', {
       this.errors.forEach((i)=>{if(i.title!==title && i.text!==text) result.push(i)})
       this.errors = result
     },
-  },
+    addToken(chainId, info) {
+      this.$patch((s) => {
+        let extras = s.extraTokens[chainId]
+        if (extras === undefined) {
+          extras = {}
+          s.extraTokens[chainId] = extras
+        }
+        extras[info.address] = info
+      })
+    },
+},
 
 })

src/tokens.js

@@ -16,6 +16,13 @@ const arbitrumTokens = [
         icon: null,
         address: '0x82aF49447D8a07e3bd95BD0d56f35241523fBab1',
     },
+    {
+        name: 'USD Coin (Bridged)',
+        symbol: 'USDC.e',
+        decimals: 6,
+        icon: null,
+        address: '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
+    },
     {
         name: 'Tether USD',
         symbol: 'USDT',
@@ -23,13 +30,6 @@ const arbitrumTokens = [
         icon: null,
         address: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9',
     },
-    {
-        name: 'USD Coin',
-        symbol: 'USDC',
-        decimals: 6,
-        icon: null,
-        address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
-    },
     {
         name: 'Wrapped Bitcoin',
         symbol: 'WBTC',
@@ -58,6 +58,13 @@ const arbitrumTokens = [
         icon: null,
         address: '0xf97f4df75117a78c1A5a0DBb814Af92458539FB4',
     },
+    {
+        name: 'USD Coin (Native)',
+        symbol: 'USDC',
+        decimals: 6,
+        icon: null,
+        address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831',
+    },
     {
         name: 'TrueUSD',
         symbol: 'TUSD',
@@ -83,7 +90,7 @@ const arbitrumTokens = [
 
 const _knownTokens = {
     42161: arbitrumTokens,
-    1338: arbitrumTokens,
+    31337: arbitrumTokens,
 };
 
 for( const chainId in _knownTokens ) {