移动端Chrome中Web3Modal的Web3Button无法连接MetaMask求助

问题现象 #

桌面端Chrome通过MetaMask扩展可正常连接Web3应用，但移动端Chrome点击连接按钮仅打开MetaMask App，无连接授权提示，需实现连接后自动返回浏览器的交互效果（匹配web3modal官网逻辑）。

相关代码 #

App.js 原代码 #

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import {  bscTestnet } from "wagmi/chains";

export default function App() {
  const chains = [bscTestnet];
  const { provider, webSocketProvider } = configureChains(chains, [
    walletConnectProvider({ projectId: "exampletestprojectid" }),
  ]);
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: modalConnectors({
      projectId: "exampletestprojectid",
      version: "2",
      appName: "Singh App",
      chains,
    }),
    provider,
  });
  const ethereumClient = new EthereumClient(wagmiClient, chains);

  return (   
     <WagmiConfig client={wagmiClient}
      <Routes>
         <Route path="/testing" element={<Testing />} />
      </Routes>
     </WagmiConfig>
     <Web3Modal
        projectId="exampletestprojectid"
        ethereumClient={ethereumClient}
        themeZIndex={1350}
      />
    )
}

Testing.js 原代码 #

import {  Web3Button } from "@web3modal/react";

export default function Testing() {
  <div>
    <Web3Button  />
  </div>
}

问题原因与修复方案 #

1. 修复基础语法错误 #

• Testing组件缺少return语句：原代码未返回JSX结构，导致组件渲染异常，移动端交互逻辑无法触发。需添加return关键字包裹JSX。
• App.js标签未正确闭合：<WagmiConfig>标签未闭合，会引发React渲染错误，影响Web3Modal初始化。需补充闭合标签，并将WagmiConfig与Web3Modal用<>或<div>包裹，确保符合React单根节点要求。
• 缺失路由组件导入：App中使用了Routes和Route但未导入，需补充import { Routes, Route } from "react-router-dom";，同时确保Testing组件路径正确导入。

2. 优化WalletConnect配置 #

Web3Modal v2依赖WalletConnect的Deep Link机制实现移动端授权后返回浏览器，需确保：

• 替换exampletestprojectid为真实有效的WalletConnect项目ID（需在WalletConnect控制台申请）
• appName需与WalletConnect控制台配置的应用名称一致，确保Deep Link跳转权限正常

3. 修复后完整代码示例 #

修复后的Testing.js

import { Web3Button } from "@web3modal/react";

export default function Testing() {
  return (
    <div>
      <Web3Button />
    </div>
  )
}

修复后的App.js

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { bscTestnet } from "wagmi/chains";
import { Routes, Route } from "react-router-dom";
import Testing from "./Testing";

export default function App() {
  const chains = [bscTestnet];
  const { provider, webSocketProvider } = configureChains(chains, [
    walletConnectProvider({ projectId: "YOUR_REAL_PROJECT_ID" }),
  ]);
  const wagmiClient = createClient({
    autoConnect: true,
    connectors: modalConnectors({
      projectId: "YOUR_REAL_PROJECT_ID",
      version: "2",
      appName: "Singh App",
      chains,
    }),
    provider,
  });
  const ethereumClient = new EthereumClient(wagmiClient, chains);

  return (   
    <>
      <WagmiConfig client={wagmiClient}>
        <Routes>
          <Route path="/testing" element={<Testing />} />
        </Routes>
      </WagmiConfig>
      <Web3Modal
        projectId="YOUR_REAL_PROJECT_ID"
        ethereumClient={ethereumClient}
        themeZIndex={1350}
      />
    </>
  )
}

4. 额外注意事项 #

• 确保项目已安装所有依赖：@web3modal/ethereum、@web3modal/react、wagmi、react-router-dom
• 移动端测试需在HTTPS环境下进行（localhost可豁免），否则MetaMask可能拒绝连接请求
• 升级Web3Modal至最新版本，可修复已知的移动端兼容性问题

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