使用Web3Modal和CoinbaseWalletSdk初始化时直接连接Polygon链的问题

问题 #

使用Web3Modal结合CoinbaseWalletSdk初始化Provider时，已指定Polygon链ID（137）和节点URL，但连接钱包后仍会弹出切换至以太坊链的提示，必须手动调用wallet_switchEthereumChain才能切换到Polygon链。希望实现一步到位直接连接Polygon链。

原初始化代码：

const providerOptions = {
    'custom-coinbase': {
        display: {
          name: 'Coinbase',
          description: 'Scan with Coinbase to connect',
          logo: "assets/coinbase_logo.jpg"
        },
        options: {
          appName: 'My app', // Your app name
          networkUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}`,
          chainId: 137,
        },
        package: CoinbaseWalletSDK,
        connector: async (_, options) => {
            const { appName, networkUrl, chainId } = options
            const coinbaseLink = new CoinbaseWalletSDK({
                appName
            });
            const provider = coinbaseLink.makeWeb3Provider(networkUrl, chainId);
            await provider.enable();
            return provider;
        }
    }
}
this.web3Modal = new Web3Modal.default({
    cacheProvider: false,
    providerOptions
});
let provider = await this.web3Modal.connectTo("custom-coinbase");
this.web3 = new Web3(provider);

手动切换链的代码：

const chainId = 137;
await this.web3.currentProvider.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: Web3.utils.toHex(chainId) }],
});

解决方案 #

问题核心在于CoinbaseWalletSdk的makeWeb3Provider方法仅初始化连接参数，不会自动触发链切换或链添加逻辑。要实现一步到位连接Polygon链，需在connector函数中主动检查当前链ID，不匹配时自动执行链切换/添加操作。

优化后的完整代码：

const providerOptions = {
    'custom-coinbase': {
        display: {
          name: 'Coinbase',
          description: 'Scan with Coinbase to connect',
          logo: "assets/coinbase_logo.jpg"
        },
        options: {
          appName: 'My app',
          // 替换为Polygon主网的节点URL，原代码误用了以太坊主网地址
          networkUrl: `https://polygon-mainnet.infura.io/v3/${INFURA_KEY}`,
          chainId: 137,
          // 预定义Polygon链的完整配置，用于钱包添加链时调用
          chainConfig: {
            chainId: Web3.utils.toHex(137),
            chainName: 'Polygon Mainnet',
            nativeCurrency: {
              name: 'MATIC',
              symbol: 'MATIC',
              decimals: 18
            },
            rpcUrls: [`https://polygon-mainnet.infura.io/v3/${INFURA_KEY}`],
            blockExplorerUrls: ['https://polygonscan.com/']
          }
        },
        package: CoinbaseWalletSDK,
        connector: async (_, options) => {
            const { appName, networkUrl, chainId, chainConfig } = options
            const coinbaseLink = new CoinbaseWalletSDK({
                appName
            });
            const provider = coinbaseLink.makeWeb3Provider(networkUrl, chainId);
            
            // 检查当前链ID是否匹配目标链
            const currentChainId = await provider.request({ method: 'eth_chainId' });
            if (currentChainId !== Web3.utils.toHex(chainId)) {
                try {
                    // 优先尝试切换链
                    await provider.request({
                        method: 'wallet_switchEthereumChain',
                        params: [{ chainId: Web3.utils.toHex(chainId) }],
                    });
                } catch (switchError) {
                    // 错误码4902表示钱包未添加该链，执行添加链操作
                    if (switchError.code === 4902) {
                        await provider.request({
                            method: 'wallet_addEthereumChain',
                            params: [chainConfig],
                        });
                    }
                    throw switchError;
                }
            }
            
            await provider.enable();
            return provider;
        }
    }
}
this.web3Modal = new Web3Modal.default({
    cacheProvider: false,
    providerOptions
});
let provider = await this.web3Modal.connectTo("custom-coinbase");
this.web3 = new Web3(provider);

关键修改点 #

• 修正节点URL：原代码使用以太坊主网的Infura地址，需替换为Polygon主网节点URL，否则链ID正确但网络指向错误。
• 添加链检查逻辑：初始化provider后先获取当前链ID，与目标链ID不匹配时自动触发切换/添加操作。
• 补充链配置：预定义Polygon链的完整信息，确保钱包添加链时能正确显示链名称、代币符号等参数。

修改后用户扫码连接钱包时，会直接触发链切换或链添加提示，无需手动执行额外操作，实现一步到位连接Polygon链。

内容的提问来源于stack exchange，提问作者Ron