check if wallet connection exists, and also wait for wallet to be connected in the modal

src/blockchain/wallet.js

@@ -169,32 +169,52 @@ const errorHandlingProxy = {
 
 export async function connectWallet(chainId) {
   console.log('connectWallet via Web3Modal', chainId)
-  try {
-    // Open Web3Modal
-    const walletProvider = await web3modal.open()
 
-    if (!walletProvider) {
-      throw new Error('No provider returned from Web3Modal')
-    }
+  // Return a promise that resolves when connection is complete
+  return new Promise((resolve, reject) => {
+    let resolved = false
+
+    const unsubscribe = web3modal.subscribeProvider(async (newState) => {
+      console.log('Provider state changed:', newState)
+
+      if (newState.provider && !resolved) {
+        resolved = true
+        unsubscribe()
+
+        try {
+          const walletProvider = newState.provider
 
           // Create ethers provider from Web3Modal provider
-    const p = new BrowserProvider(walletProvider, chainId)
+          const p = new BrowserProvider(walletProvider)
           setProvider(p)
 
-    // Get signer and accounts
-    await p.getSigner()
+          // Get network info from the provider
+          const network = await p.getNetwork()
+          const connectedChainId = Number(network.chainId)
+
+          console.log('Connected to chain', connectedChainId)
 
           // Update wallet store
           const ws = useWalletStore()
-    ws.chainId = chainId
+          ws.chainId = connectedChainId
 
-    await updateAccounts(chainId, p)
+          // Get accounts
+          await updateAccounts(connectedChainId, p)
 
           // Subscribe to Web3Modal provider events
           subscribeToProviderEvents(walletProvider)
 
+          resolve()
         } catch (e) {
-    console.log('connectWallet error', e.reason, e)
+          console.error('Error after connection', e)
+          reject(e)
+        }
+      }
+    })
+
+    // Open the modal
+    web3modal.open().catch((e) => {
+      unsubscribe()
       if (e.reason === 'rejected' || e.message?.includes('rejected')) {
         const ws = useWalletStore();
         const tx = ws.transaction
@@ -202,11 +222,20 @@ export async function connectWallet(chainId) {
           tx.state = TransactionState.Rejected
           ws.transaction = null
         }
+        resolve() // Don't reject on user cancellation
       } else {
-      console.error(e, e.reason)
-      throw e
+        reject(e)
       }
+    })
+
+    // Timeout after 60 seconds
+    setTimeout(() => {
+      if (!resolved) {
+        unsubscribe()
+        reject(new Error('Connection timeout'))
       }
+    }, 60000)
+  })
 }
 
 // Subscribe to provider events from Web3Modal
@@ -680,21 +709,6 @@ export async function addNetwork(chainId) {
 }
 
 export async function addNetworkAndConnectWallet(chainId) {
-    try {
-        await switchChain(chainId)
-    } catch (e) {
-        if (e.code === 4001) {
-            // explicit user rejection
-            return
-        } else if (e.code === 4902) {
-            try {
-                await addNetwork(chainId)
-            } catch (e) {
-                console.log(`Could not add network ${chainId}`)
-            }
-        } else
-            console.log('switchChain() failure', e)
-    }
     try {
         await connectWallet(chainId)
     } catch (e) {

src/blockchain/web3modal.js

@@ -35,7 +35,7 @@ const ethersConfig = defaultConfig({
         icons: ['https://your-icon-url.com']
     },
     defaultChainId: 42161,
-    enableEIP6963: true,
+    enableEIP6963: true, // Disable to prevent wallets from auto-announcing
     enableInjected: true,
     enableCoinbase: true,
     rpcUrl: 'https://arbitrum-mainnet.infura.io'
@@ -46,5 +46,19 @@ export const web3modal = createWeb3Modal({
     chains,
     projectId,
     enableAnalytics: false,
-    themeMode: 'dark'
+    themeMode: 'dark',
+    featuredWalletIds: [
+        'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96' // MetaMask
+    ],
+    enableWalletGuide: false,
+    termsConditionsUrl: undefined,
+    privacyPolicyUrl: undefined
+})
+
+// Subscribe to modal state changes
+web3modal.subscribeState((state) => {
+    console.log('Web3Modal state:', state)
+    if (state.open === false && state.selectedNetworkId) {
+        console.log('Modal closed after connection')
+    }
 })

src/main.js

@@ -15,6 +15,11 @@ import { registerPlugins } from '@/plugins'
 import '@/styles/style.scss'
 import "./socketInit.js"
 import "./version.js"
+import { web3modal } from '@/blockchain/web3modal.js'
+import { BrowserProvider } from 'ethers'
+import { setProvider } from '@/blockchain/provider.js'
+import { updateAccounts } from '@/blockchain/wallet.js'
+import { useWalletStore } from '@/blockchain/wallet.js'
 
 BigInt.prototype.toJSON = function() { return this.toString() }
 
@@ -22,3 +27,24 @@ const app = createApp(App)
 registerPlugins(app)
 app.mount('#app')
 window.$vuetify = app
+
+// Check if Web3Modal has an existing connection on app start
+web3modal.subscribeProvider(async (state) => {
+    if (state.isConnected && state.provider) {
+        try {
+            console.log('Restoring existing Web3Modal connection')
+            const p = new BrowserProvider(state.provider)
+            setProvider(p)
+
+            const network = await p.getNetwork()
+            const chainId = Number(network.chainId)
+
+            const ws = useWalletStore()
+            ws.chainId = chainId
+
+            await updateAccounts(chainId, p)
+        } catch (e) {
+            console.log('Error restoring connection', e)
+        }
+    }
+})