在React Native去中心化应用中集成Coinbase钱包遇到问题

问题分析 #

从代码和错误信息来看，核心问题有两个：

1. 未定义的coin变量：代码中providerOptions的coinbasewallet配置里使用了coin，但既没有导入也没有定义该变量，直接导致ReferenceError。
2. Web3Modal兼容性问题：Web3Modal官方主要面向Web环境开发，直接在React Native中使用会触发DOM相关的环境不兼容错误（对应截图中的报错）。

修复方案 #

React Native集成Coinbase钱包建议使用官方专门的移动端SDK @coinbase/wallet-mobile-sdk，而非Web3Modal，以下是完整的实现步骤：

1. 安装依赖 #

npm install @coinbase/wallet-mobile-sdk ethers
# 或使用yarn
yarn add @coinbase/wallet-mobile-sdk ethers

2. 完整实现代码 #

import { StyleSheet, Text, View, TouchableOpacity, Alert } from 'react-native'
import React from 'react'
import { CoinbaseWalletSDK } from '@coinbase/wallet-mobile-sdk'
import { ethers } from 'ethers'

const App = () => {
  const connectCoinbaseWallet = async () => {
    try {
      // 初始化Coinbase Wallet移动端SDK
      const coinbaseWallet = new CoinbaseWalletSDK({
        appName: "MWallet",
        appLogoUrl: "https://your-app-logo-url.com", // 可选，替换为你的应用Logo地址
        rpcUrl: "https://mainnet.infura.io/v3/46879459b36b474a830b7e310b475f98" // 替换为你的RPC节点地址
      })

      // 发起钱包连接请求
      const provider = await coinbaseWallet.getProvider()
      await provider.enable()

      // 用ethers封装provider，便于后续交互
      const library = new ethers.providers.Web3Provider(provider)
      const signer = library.getSigner()

      // 获取并展示钱包地址
      const address = await signer.getAddress()
      Alert.alert("连接成功", `钱包地址：${address}`)
    } catch (error) {
      console.error("连接失败：", error)
      Alert.alert("连接失败", error.message)
    }
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        onPress={connectCoinbaseWallet}
        style={styles.connectButton}
      >
        <Text style={styles.buttonText}>连接Coinbase钱包</Text>
      </TouchableOpacity>
    </View>
  )
}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  connectButton: {
    paddingHorizontal: 24,
    paddingVertical: 12,
    backgroundColor: '#055ff4',
    borderRadius: 8
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600'
  }
})

3. 原代码错误点说明 #

• coin变量未定义：原代码中package: coin属于错误写法，Web3Modal在Web环境下需导入@coinbase/wallet-sdk，但该包不兼容React Native，因此必须替换为移动端专用SDK。
• Web3Modal不支持React Native：Web3Modal依赖浏览器DOM API，React Native无对应环境，因此会触发截图中的报错，必须更换为React Native兼容的集成方案。

额外注意事项 #

• 确保React Native项目版本在0.60以上，支持自动链接依赖。
• 测试需在真实设备上进行，模拟器可能无法正常唤起Coinbase钱包App。
• 如需支持多条链，修改rpcUrl为对应链的官方/第三方RPC地址即可。

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