如何触发 EthersJS *.on 事件？

Question

我正在使用 redux 开发一个 React 应用程序。我确实实施了 thunk 操作：

创建一个 web3modal 实例
注册一个 ethersjs 提供商
注册一个 ethersjs 签名者

一切都非常基础和简单。但是，每当我尝试使用 on 事件时（如果供应商订购合同无关紧要），它们根本不会触发。

我有 2 个文件：

walletSlice.ts 将使用 @reduxjs/toolkit 处理所有 redux 操作和 reducer 逻辑。
wallet-api.ts 具有与钱包交互的所有相关功能。

walletSlice.ts 相关部分看起来完全像这样：

export const connectWallet = createAsyncThunk(
  'web3wallet/connectWallet',
  async (arg, thunkApi) => {
    const instance = await WalletAPI.registerWalletInstance();
    provider = await WalletAPI.registerWalletProvider(instance);
    signer = await WalletAPI.registerWalletSigner(provider);
   
    return Promise.resolve();
  }
);

wallet-api.ts 相关部分看起来完全像这样：

import { ethers, providers } from 'ethers';
import Web3Modal from 'web3modal';

// get Web3Modal Instance
export async function registerWalletInstance(): Promise<Web3Modal> {
  const providerOptions = {};

  const web3Modal = new Web3Modal({
    providerOptions,
  });
  const instance = await web3Modal.connect();

  return Promise.resolve(instance);
}

/**
 * register Wallet provider.
 * Events on provider @see https://docs.ethers.io/v5/api/providers/provider/#Provider--event-methods
 * Implementing the EIP-1193 Standard @see https://eips.ethereum.org/EIPS/eip-1193
 */
export async function registerWalletProvider(
  instance: any
): Promise<providers.JsonRpcProvider> {
  const provider = new ethers.providers.Web3Provider(instance);

  // Subscribe to accounts change
  provider.on('accountsChanged', (accounts: string[]) => {
    console.log(accounts);
  });

  // Subscribe to chainId change
  provider.on('chainChanged', (chainId: number) => {
    console.log(chainId);
  });

  // Subscribe to provider connection
  provider.on('connect', (info: { chainId: number }) => {
    console.log(info);
  });

  // Subscribe to provider disconnection
  provider.on('disconnect', (error: { code: number; message: string }) => {
    console.log(error);
  });

  provider.on('error', (tx) => {
    // Emitted when any error occurs
    console.log({ tx });
  });

  return Promise.resolve(provider);
}

// register Wallet signer.
export async function registerWalletSigner(
  provider: providers.JsonRpcProvider
): Promise<providers.JsonRpcSigner> {
  const signer = provider.getSigner();
  return Promise.resolve(signer);
}

None 个 provider.on() 事件将触发。我尝试将网络从 rinkeby 更改为 polygon 或 mainnet，但没有任何反应。当我断开与该站点的连接时，什么也没有发生。 wallet-api.ts 中显示的所有提供程序事件都相同。我确实对另一个名为 contract-api.ts 的文件尝试了相同的方法。但是合同事件也不会触发。

我尝试将 provider.on() 事件与 useEffect() 或 useCallback() 一起使用。将代码移至独立的 tsx。但是什么也没发生。

在这一点上我很迷茫。非常感谢任何帮助。

Answer 1

await web3Modal.connect() 已经 returns 提供者；尝试使用那个而不是 new ethers.providers.Web3Provider(instance);

如何触发 EthersJS *.on 事件？

How to fire EthersJS *.on events?

reactjs

typescript

redux

web3

ethers.js