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

src/blockchain/wallet.js

@@ -169,44 +169,73 @@ const errorHandlingProxy = {
 
 export async function connectWallet(chainId) {
   console.log('connectWallet via Web3Modal', chainId)
-  try {
-    // Open Web3Modal
-    const walletProvider = await web3modal.open()
 
-    if (!walletProvider) {
+  // Return a promise that resolves when connection is complete
-      throw new Error('No provider returned from Web3Modal')
+  return new Promise((resolve, reject) => {
-    }
+    let resolved = false
 
-    // Create ethers provider from Web3Modal provider
+    const unsubscribe = web3modal.subscribeProvider(async (newState) => {
-    const p = new BrowserProvider(walletProvider, chainId)
+      console.log('Provider state changed:', newState)
-    setProvider(p)
 
-    // Get signer and accounts
+      if (newState.provider && !resolved) {
-    await p.getSigner()
+        resolved = true
+        unsubscribe()
 
-    // Update wallet store
+        try {
-    const ws = useWalletStore()
+          const walletProvider = newState.provider
-    ws.chainId = chainId
 
-    await updateAccounts(chainId, p)
+          // Create ethers provider from Web3Modal provider
+          const p = new BrowserProvider(walletProvider)
+          setProvider(p)
 
-    // Subscribe to Web3Modal provider events
+          // Get network info from the provider
-    subscribeToProviderEvents(walletProvider)
+          const network = await p.getNetwork()
+          const connectedChainId = Number(network.chainId)
 
-  } catch (e) {
+          console.log('Connected to chain', connectedChainId)
-    console.log('connectWallet error', e.reason, e)
+
-    if (e.reason === 'rejected' || e.message?.includes('rejected')) {
+          // Update wallet store
-      const ws = useWalletStore();
+          const ws = useWalletStore()
-      const tx = ws.transaction
+          ws.chainId = connectedChainId
-      if (tx) {
+
-        tx.state = TransactionState.Rejected
+          // Get accounts
-        ws.transaction = null
+          await updateAccounts(connectedChainId, p)
+
+          // Subscribe to Web3Modal provider events
+          subscribeToProviderEvents(walletProvider)
+
+          resolve()
+        } catch (e) {
+          console.error('Error after connection', e)
+          reject(e)
+        }
       }
-    } else {
+    })
-      console.error(e, e.reason)
+
-      throw e
+    // Open the modal
-    }
+    web3modal.open().catch((e) => {
-  }
+      unsubscribe()
+      if (e.reason === 'rejected' || e.message?.includes('rejected')) {
+        const ws = useWalletStore();
+        const tx = ws.transaction
+        if (tx) {
+          tx.state = TransactionState.Rejected
+          ws.transaction = null
+        }
+        resolve() // Don't reject on user cancellation
+      } else {
+        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)
+        }
+    }
+})