安装

Web3Modal被拆分为颗粒包，允许你组合应用所需的确切功能。在大多数情况下，你会想为你的应用使用framework和chain包。到目前为止，我们支持 @web3modal/react和 @web3modal/ethereum。对更多框架和非evm链的支持即将到来。

获取项目ID

转到WalletConnect Cloud登录或注册。创建(或使用一个现有的)项目并复制其关联的项目ID。我们将在后面的步骤中需要它。

添加包

npm

npm install @web3modal/ethereum @web3modal/react wagmi ethers

Yarn

yarn add @web3modal/ethereum @web3modal/react wagmi ethers

导入

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";

import { Web3Modal } from "@web3modal/react";

import { chain, configureChains, createClient, WagmiConfig } from "wagmi";

配置

配置wagmi和Web3Modal客户端。请参考wagmi文档了解更高级的主题，如自定义链创建，使用其他提供商，如infura或alchemy等。现在，我们将使用web3modal的最佳默认设置。

const chains = [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum];

// Wagmi client
const { provider } = configureChains(chains, [
  walletConnectProvider({ projectId: "<YOUR_PROJECT_ID>" }),
]);
const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({ appName: "web3Modal", chains }),
  provider,
});

// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);

添加React组件

You don't have to wrap Web3Modal inside WagmiConfig, in fact, we recommend placing it somewhere outside of your main app, thus removing extra re-rendering work. See Customization docs for more information about modal props.

function App() {
  return (
    <>
      <WagmiConfig client={wagmiClient}>
        <HomePage />
      </WagmiConfig>

      <Web3Modal
        projectId="<YOUR_PROJECT_ID>"
        theme="dark"
        accentColor="default"
        ethereumClient={ethereumClient}
      />
    </>
  );
}

添加连接按钮

import { Web3Button } from "@web3modal/react";

function HomePage() {
  return <Web3Button />;
}

示例

• Full NextJS example
• Standalone NextJS example