Migrate MetaMask Connector to use new SDK (MMConnect)#2326
Migrate MetaMask Connector to use new SDK (MMConnect)#2326adonesky1 wants to merge 27 commits intoWeb3Auth:masterfrom
Conversation
|
@adonesky1 is attempting to deploy a commit to the Consensys Team on Vercel. A member of the Team first needs to authorize it. |
| this.metamaskInstance = await this.metamaskPromise; | ||
| // TODO: Remove this hack | ||
| // Hack to ensure the ConnectEvm instance has fully resumed the connection | ||
| await new Promise((resolve) => setTimeout(resolve, 2000)); |
There was a problem hiding this comment.
Note this awful delay to ensure that this async call in the ConnectEvm constructor has fully resolved. We need to fix this on the connect-monorepo side
There was a problem hiding this comment.
What is your understanding of how we resolve this on the connect-evm side of things?
There was a problem hiding this comment.
There was a problem hiding this comment.
we need to release connect-evm again, bump the version in web3auth, and then remove this setTimeout
| // if (options.autoConnect) { | ||
| // this.rehydrated = false; | ||
| // this.emit(CONNECTOR_EVENTS.REHYDRATION_ERROR, new Error("Failed to resume existing MetaMask Connect session.") as Web3AuthError); | ||
| // } else { |
There was a problem hiding this comment.
i think this commented code can be dropped?.. Not sure if it's more appropriate to throw an error if we fail to resume a previous session OR if we just say the connector is ready for new connections
There was a problem hiding this comment.
I would think it makes more sense to just say the connector is ready for new connections. But perhaps we should speak with @chaitanyapotti to see what patterns they recommend for their connectors
packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts
Outdated
Show resolved
Hide resolved
adonesky1
changed the title
| /** | ||
| * Configuration options for the MetaMask connector using @metamask/connect-evm | ||
| */ | ||
| export interface MetaMaskConnectorSettings { | ||
| /** Dapp identification and branding settings */ | ||
| dapp?: { | ||
| name?: string; | ||
| url?: string; | ||
| }; | ||
| /** Enable debug logging for the MetaMask SDK */ | ||
| debug?: boolean; | ||
| } | ||
|
|
||
| export interface MetaMaskConnectorOptions extends BaseConnectorSettings { | ||
| connectorSettings?: Partial<MetaMaskSDKOptions>; | ||
| connectorSettings?: MetaMaskConnectorSettings; |
There was a problem hiding this comment.
reminder to document this breaking change and include migration instructions where appropriate
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts
Outdated
Show resolved
Hide resolved
| for (const chain of this.coreOptions.chains) { | ||
| // Convert hex chainId (0x1) to number for CAIP-2 format (eip155:1) | ||
| const numericChainId = parseInt(chain.chainId, 16); | ||
| const caipChainId = `eip155:${numericChainId}`; |
There was a problem hiding this comment.
we can use this ready made getCaipChainId util for getting caipChainId similar to
packages/no-modal/src/noModal.ts
Outdated
| // only set headless to true if modal SDK is used, otherwise just use the modal from native Metamask SDK | ||
| connectorFns.push(metaMaskConnector(modalMode ? { headless: true } : undefined)); | ||
| // Note: The new @metamask/connect-evm SDK handles its own UI internally | ||
| connectorFns.push(metaMaskConnector()); |
There was a problem hiding this comment.
we ideally can't use the metamask sdk ui since the ux would be very different. is there no option for headless mode?
There was a problem hiding this comment.
good point. thank you for the call out efd18ff
| const appUrl = this.connectorSettings?.dapp?.url || window.location.origin || "https://web3auth.io"; | ||
|
|
||
| // Initialize the MetaMask Connect EVM SDK | ||
| this.metamaskPromise = createEVMClient({ |
There was a problem hiding this comment.
how do we support solana?
There was a problem hiding this comment.
we should switch the client based on active chain / use multi-chain client and switch chain in this connector based on active chain in sdk
packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts
Show resolved
Hide resolved
| const supportedNetworks: Record<string, string> = {}; | ||
| for (const chain of this.coreOptions.chains) { | ||
| supportedNetworks[chain.chainId] = chain.rpcTarget; | ||
| } |
There was a problem hiding this comment.
Supported networks use hex IDs instead of CAIP-2 format
Medium Severity
The comment states the supportedNetworks map uses CAIP-2 format keys (eip155:chainId), but the code uses chain.chainId directly (hex format like 0x1). The imported getCaipChainId utility — used correctly elsewhere in this file for analytics — is not applied here. If @metamask/connect-evm expects CAIP-2 keys, the SDK won't recognize any of the configured networks.
| return rpcUrl.replace("https://", "wss://"); | ||
| // if (!rpcUrl) throw new Error("Please configure https endpoint for solana rpc"); | ||
| // return rpcUrl.replace("https://", "wss://"); | ||
| return rpcUrl; |
There was a problem hiding this comment.
WebSocket URL conversion commented out, wsTarget gets wrong protocol
Medium Severity
The rpcUrlToWsUrl function has had its validation and URL conversion logic commented out and now just returns the input URL unchanged. This means the wsTarget fields in all three Solana network configurations (mainnet, testnet, devnet) will contain https:// URLs instead of wss:// WebSocket URLs. The function name still implies a protocol conversion that no longer happens. This looks like a temporary debugging change that was accidentally included in the commit.
There was a problem hiding this comment.
this needs to be undone before merge again
There was a problem hiding this comment.
this needs to be undone before merge again
4 participants
Summary
@metamask/sdkto@metamask/connect-evmfor improved connection handlingMetaMaskConnectorto use the new SDK'screateEVMClient()API with built-in event handlers and automatic chain managementswitchChain()Videos
Extension:
https://drive.google.com/file/d/1r_lDBvwHWQhP-J4yFfqVHsqRR7bIS6Z1/view?usp=sharing
Mobile (native browser):
https://drive.google.com/file/d/1XECLgCOqa9VEeIK4gp1nUf0cs6RRg2V1/view?usp=sharing
Note
High Risk
High risk because it replaces the core MetaMask connection/session and chain-switching logic (including event handling) with a new SDK, which can impact wallet connectivity across extension and mobile flows.
Overview
Updates the Web3Auth no-modal MetaMask integration to use
@metamask/connect-evm(createEVMClient) instead of the previous MetaMask SDK, including new initialization/config options, provider event handling (accounts/disconnect/display URI), and chain switching via the SDK’sswitchChainwith automatic chain management.Bumps
@web3auth/no-modalto10.13.2and refreshes related deps in demo lockfiles (WalletConnect, ethers, wagmi/viem/react, etc.), updates the Vue modal demo to depend on@web3auth/no-modal@10.13.2, adjusts Solana WS target generation to return the RPC URL as-is, and enables Vite dev serverhost: truein the Vue demo.Written by Cursor Bugbot for commit 42f1f7f. This will update automatically on new commits. Configure here.