Dapp连接钱包踩坑总结

问题1：

使用rainbowKit创建钱包组件连接钱包的按钮总是显示中文的连接钱包

目标：显示英文的Connect Wallet而不是中文的

解决方法：在Connect wallet这个文本后面加上一个空格

问题2：

Error: WebSocket connection closed abnormally with code: 3000 (Authorization error: Unauthorized: origin not allowed) · WalletConnect · Discussion #2834 (github.com)

解决方法：配置了cloud的域名就好 生产和开发环境的域名都要配置

问题3：

在手机端chrome跑本地项目，点击一次就有弹到metamask要连接 但是metamask没有自动跳回到dapp 也没有实际连接上 返回到dapp报错No matching key. pairing

debug流程：测了uniswap的连接钱包效果,发现它用了walletconnect 很smooth 在看uniswp源码，用了web3react这个库，一些相关教材： dev.to/yakult/how-… provider也是从hook来的

很好的教材：consensys.io/blog/how-to…

这个有说怎么拿到signer Untitled - HackMD

注意注意：web3react有v6版本和v8版本，uniswap的源码用的是v8(我用的时候是 具体要看源码有没有更新)

用6版本可以连接钱包 （pc本地) 手机端没有injectedConnector也就是没有浏览器插件小狐狸， 所以得尝试walletconnect的方法，让手机端也能连接钱包。

no matching key的错误是因为provider被多次初始化，确保provider只初始化一次就好了

问题4：

中途切换链检测不到 要检测到切换链并自动弹出弹窗让用户切换到指定的链上

export const switchNetwork = async (provider, NetworkState) => {
  const targetChainId =  80001;

  try {
    if (provider) {
      await provider
        .send("wallet_switchEthereumChain", [
          { chainId: `0x${targetChainId.toString(16)}` },
        ])
        .then((res) => {});
    }
  } catch (switchError) {
    const networkInfo = getNetworkConfig(targetChainId);

    if (switchError.code === 4902) {
      try {
        await provider.send("wallet_addEthereumChain", [
          {
            chainId: `0x${targetChainId.toString(16)}`,
            chainName: networkInfo.name,
            nativeCurrency: {
              symbol: networkInfo.baseAssetSymbol,
              decimals: networkInfo.baseAssetDecimals,
            },
            rpcUrls: [
              ...networkInfo.publicJsonRPCUrl,
              networkInfo.publicJsonRPCWSUrl,
            ],
            blockExplorerUrls: [networkInfo.explorerLink],
          },
        ]);
     
      } catch (error) {
        if (error.code !== 4001) {
          throw error;
        }
      }
    } 
  }
};

其中网络配置getNetworkConfig函数如下

export function getNetworkConfig(chainId: ChainId): NetworkConfig {
  const config = networkConfigs[chainId];
  if (!config) {
    // this case can only ever occure when a wallet is connected with a unknown chainId which will not allow interaction
    const name = ChainIdToNetwork[chainId];
    return {
      name: name || `unknown chainId: ${chainId}`,
    } as unknown as NetworkConfig;
  }
  return {
    ...config,
    explorerLinkBuilder: linkBuilder({ baseUrl: config.explorerLink }),
  };
}

这个函数又同时依赖了networkConfigs ChainIdToNetwork这两个变量

//以sepolia和goerli为例 
export const networkConfigs: Record<string, BaseNetworkConfig> = {
  [ChainId.sepolia]: {
    name: 'Ethereum Sepolia',
    publicJsonRPCUrl: [
      'https://eth-sepolia.public.blastapi.io',
      'https://rpc.sepolia.org',
      'https://rpc2.sepolia.org',
      'https://rpc.sepolia.online',
      'https://www.sepoliarpc.space',
    ],
    baseUniswapAdapter: '0x0',
    baseAssetSymbol: 'ETH',
    wrappedBaseAssetSymbol: 'WETH',
    baseAssetDecimals: 18,
    explorerLink: 'https://sepolia.etherscan.io',
    // usdMarket: true,
    isTestnet: true,
    networkLogoPath: '/icons/networks/ethereum.svg',
  },
  [ChainId.goerli]: {
    name: 'Ethereum Görli',
    publicJsonRPCUrl: [
      'https://eth-goerli.public.blastapi.io',
      'https://rpc.ankr.com/eth_goerli',
      'https://goerli.prylabs.net',
    ],
    publicJsonRPCWSUrl: 'wss://eth-goerli.public.blastapi.io',
    // protocolDataUrl: '',
    baseUniswapAdapter: '0x0',
    baseAssetSymbol: 'ETH',
    wrappedBaseAssetSymbol: 'WETH',
    baseAssetDecimals: 18,
    explorerLink: 'https://goerli.etherscan.io',
    // usdMarket: true,
    isTestnet: true,
    networkLogoPath: '/icons/networks/ethereum.svg',
  },}

//ChainIdToNetwork需要安装@aave/contract-helpers
import { ChainId, ChainIdToNetwork } from '@aave/contract-helpers';

然后在挂载的时候调用这个函数 假设要目标链是80001

  useEffect(() => {
 
    const isWrongNetwork =  chainId !== 80001  
    if (isWrongNetwork) {
      switchNetwork(provider, NetworkState);
    }
 
  }, [chainId]);

主要参考： aave/interface: An open source interface for the decentralized liquidity protocol Aave (github.com)