如何将自定义Ethers Wallet与Uniswap Widget集成？

问题根源 #

Uniswap SwapWidget要求传入的provider必须符合EIP-1193标准，你当前传入的JsonRpcProvider只是只读的RPC节点连接，不包含钱包签名逻辑，也没有实现EIP-1193规定的核心方法（如eth_requestAccounts、eth_sendTransaction），所以Widget会持续提示需要连接钱包。

你创建的自定义ethers.Wallet虽已关联provider，但它本身不是EIP-1193兼容的provider，必须包装成符合标准的对象才能被SwapWidget识别。

解决方案：封装EIP-1193兼容Provider #

手动实现极简的EIP-1193 provider，将自定义钱包的签名逻辑注入其中，再传给SwapWidget。以下是修改后的完整代码：

import { useState } from 'react';
import { ethers } from 'ethers';
import { SwapWidget } from '@uniswap/widgets';
import '@uniswap/widgets/fonts.css';

function App() {
  const [address, setAddress] = useState('');
  const [balance, setBalance] = useState('0');
  const [swap, setSwap] = useState(false);
  const [eip1193Provider, setEip1193Provider] = useState(null);
  const infuraId = '你的Infura ID';

  async function createWallet() {
    // 创建并连接自定义钱包
    const wallet = ethers.Wallet.createRandom();
    const rpcProvider = new ethers.providers.JsonRpcProvider(
      `https://mainnet.infura.io/v3/${infuraId}`
    );
    const connectedWallet = wallet.connect(rpcProvider);
    setAddress(connectedWallet.address);

    // 获取ETH余额
    const ethBalance = await connectedWallet.getBalance();
    setBalance(ethers.utils.formatEther(ethBalance));

    // 实现EIP-1193兼容的provider
    const customProvider = {
      request: async ({ method, params }) => {
        switch (method) {
          // 返回当前钱包地址，让Widget识别已连接账户
          case 'eth_requestAccounts':
          case 'eth_accounts':
            return [connectedWallet.address];
          // 使用自定义钱包签名并发送交易
          case 'eth_sendTransaction':
            const tx = await connectedWallet.sendTransaction(params[0]);
            return tx.hash;
          // 其他RPC请求转发给Infura节点
          default:
            return rpcProvider.send(method, params);
        }
      }
    };

    setEip1193Provider(customProvider);
    setSwap(true);
  }

  return (
    <div>
      <button onClick={createWallet}>Create Wallet</button>
      {address && <div>Address: {address}</div>}
      {balance && <div>Balance: {balance} ETH</div>}

      {swap && eip1193Provider && <SwapWidget provider={eip1193Provider} />}
    </div>
  );
}

export default App;

关键说明 #

• 核心方法实现：自定义provider必须实现request方法，处理SwapWidget依赖的RPC调用：
  • eth_requestAccounts/eth_accounts：返回钱包地址，完成账户连接识别
  • eth_sendTransaction：利用自定义钱包完成交易签名与发送
  • 其余RPC请求直接转发给Infura的JsonRpcProvider处理
• 状态校验：确保传入Widget前，EIP-1193 provider已初始化完成，避免空值报错
• 版本兼容：保证ethers与@uniswap/widgets使用最新稳定版，避免依赖冲突

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