From 7965eab85bff91488bb40b2bfdda9fb475de279a Mon Sep 17 00:00:00 2001 From: surbhi Date: Wed, 7 Jan 2026 12:17:04 -0400 Subject: [PATCH] check if wallet connection exists, and also wait for wallet to be connected in the modal --- src/blockchain/wallet.js | 104 ++++++++++++++++++++---------------- src/blockchain/web3modal.js | 18 ++++++- src/main.js | 26 +++++++++ 3 files changed, 101 insertions(+), 47 deletions(-) diff --git a/src/blockchain/wallet.js b/src/blockchain/wallet.js index 100e276..27c2fc5 100644 --- a/src/blockchain/wallet.js +++ b/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) { - 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 - // Create ethers provider from Web3Modal provider - const p = new BrowserProvider(walletProvider, chainId) - setProvider(p) + const unsubscribe = web3modal.subscribeProvider(async (newState) => { + console.log('Provider state changed:', newState) - // Get signer and accounts - await p.getSigner() + if (newState.provider && !resolved) { + resolved = true + unsubscribe() - // Update wallet store - const ws = useWalletStore() - ws.chainId = chainId + try { + const walletProvider = newState.provider - await updateAccounts(chainId, p) + // Create ethers provider from Web3Modal provider + const p = new BrowserProvider(walletProvider) + setProvider(p) - // Subscribe to Web3Modal provider events - subscribeToProviderEvents(walletProvider) + // Get network info from the provider + const network = await p.getNetwork() + const connectedChainId = Number(network.chainId) - } catch (e) { - console.log('connectWallet error', e.reason, e) - if (e.reason === 'rejected' || e.message?.includes('rejected')) { - const ws = useWalletStore(); - const tx = ws.transaction - if (tx) { - tx.state = TransactionState.Rejected - ws.transaction = null + console.log('Connected to chain', connectedChainId) + + // Update wallet store + const ws = useWalletStore() + ws.chainId = connectedChainId + + // Get accounts + 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) { diff --git a/src/blockchain/web3modal.js b/src/blockchain/web3modal.js index bf9918e..1ec7a48 100644 --- a/src/blockchain/web3modal.js +++ b/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') + } }) \ No newline at end of file diff --git a/src/main.js b/src/main.js index 958451e..a1c9b3b 100644 --- a/src/main.js +++ b/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) + } + } +})