请求指导：基于WalletConnect实现React Native与MetaMask移动端对接及转账方案

1. 无二维码连接MetaMask（显示可用钱包列表） #

依赖安装 #

先安装核心依赖：

# WalletConnect React Native 核心库
npm install @walletconnect/react-native-dapp
# 网络状态检测依赖（Expo 用 expo-netinfo，原生RN 用 @react-native-community/netinfo）
# Expo 环境
npx expo install expo-netinfo
# 原生RN 环境
npm install @react-native-community/netinfo

初始化WalletConnect客户端 #

创建客户端实例并配置应用元信息：

import WalletConnect from '@walletconnect/react-native-dapp';

const wcClient = new WalletConnect({
  bridge: 'https://bridge.walletconnect.org',
  clientMeta: {
    name: '你的RN应用名称',
    description: '应用功能描述',
    url: 'https://your-app-domain.com',
    icons: ['https://your-app-domain.com/icon.png']
  }
});

获取并展示可用钱包列表 #

调用API获取支持WalletConnect的钱包列表，筛选后渲染给用户选择：

import { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, Image } from 'react-native';

const WalletList = () => {
  const [availableWallets, setAvailableWallets] = useState([]);

  useEffect(() => {
    fetchSupportedWallets();
  }, []);

  const fetchSupportedWallets = async () => {
    const allWallets = await wcClient.getWallets();
    // 筛选出MetaMask，也可保留所有支持的钱包
    const filtered = allWallets.filter(wallet => wallet.name === 'MetaMask');
    setAvailableWallets(filtered);
  };

  return (
    <View>
      {availableWallets.map(wallet => (
        <TouchableOpacity
          key={wallet.id}
          onPress={() => connectToMetaMask(wallet)}
          style={{ padding: 12, flexDirection: 'row', alignItems: 'center', gap: 8 }}
        >
          <Image source={{ uri: wallet.icon }} style={{ width: 40, height: 40, borderRadius: 20 }} />
          <Text>{wallet.name}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

无二维码唤起MetaMask连接 #

用户选择MetaMask后，通过Deep Link直接唤起应用完成连接，无需展示二维码：

import { Linking } from 'react-native';

const connectToMetaMask = async (wallet) => {
  // 创建连接会话
  const { uri } = await wcClient.createSession();
  // 构造MetaMask的Deep Link
  const deepLink = `${wallet.mobile.universal}?uri=${encodeURIComponent(uri)}`;
  // 唤起MetaMask应用
  await Linking.openURL(deepLink);

  // 监听连接成功事件
  wcClient.on('connect', (error, payload) => {
    if (error) throw error;
    const { accounts, chainId } = payload.params[0];
    console.log('连接成功 | 账户:', accounts[0], '链ID:', chainId);
  });
};

Deep Link配置 #

• Expo环境：在app.json中添加应用Scheme：

{
  "expo": {
    "scheme": "your-app-scheme",
    // 其他配置项...
  }
}

• 原生RN（Xcode）：在Info.plist中添加URL Types：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your-app-scheme</string>
    </array>
  </dict>
</array>

2. 向MetaMask发送以太坊交易 #

连接成功后，通过WalletConnect客户端发送交易：

const sendEthTransaction = async (accounts) => {
  if (!wcClient.connected) {
    console.error('未连接钱包，请先完成连接');
    return;
  }

  // 构建交易对象（数值需转为十六进制）
  const transaction = {
    from: accounts[0],
    to: '0x目标以太坊地址',
    value: '0x' + (parseInt('1000000000000000000', 10)).toString(16), // 1 ETH
    gasLimit: '0x5208', // 21000 Gas
    gasPrice: '0x3B9ACA00' // 1 Gwei
  };

  try {
    const txHash = await wcClient.sendTransaction(transaction);
    console.log('交易已提交 | 哈希:', txHash);
  } catch (error) {
    console.error('交易失败:', error.message);
  }
};

关键注意事项 #

• 确保用户的MetaMask应用版本支持WalletConnect
• 交易中的数值必须转换为十六进制格式
• 可通过wcClient.on('disconnect')监听钱包断开事件，处理后续逻辑

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