通过 web3Modal（Metamask、Coinbase 等）为您的 dApp 轻松集成多个钱包

2023-11-19 阅读: 评论: 约 1251 字预计阅读 3 分钟

我们将实现多个钱包，如 Metamask、coinbase、Wallet Connect、trust wallet 等，

介绍

我们正在使用 web3Modal、wagmi 和 viem 实现多个钱包

wagmi：它是 React Hooks 的集合，包含开始使用以太坊所需的一切，您可以将其与其他 React Web3 框架（如 web3-react）进行比较。查看文档以获取更多信息。
viem：它是以太坊的 TypeScript 接口，提供用于与以太坊交互的低级无状态原语。出于明显的包大小原因，我们使用 viem 作为 ethers.js 的替代品。
web3Modal：Web3Modal SDK 允许您轻松地将 Web3 dapp 与钱包连接。它为 dapp 提供了一个简单直观的界面来请求操作，例如签署交易以及与区块链上的智能合约交互。查看文档以获取更多信息。

先决条件

系统上安装了 Node.js 和 npm
React.js 知识
web3.js 或 ethers.js 知识

设置钱包连接项目

做到这一点的步骤，

登录https://walletconnect.com/
单击https://cloud.walletconnect.com/app上的“创建”按钮创建一个新项目

命名项目并选择类型应用程序
转到创建的项目并获取将来需要的项目 ID。

设置 React 项目

我们正在建立一个 React JS 项目来玩。

1

npm create vite@latest

它将询问您一些配置问题，如下所示：

✔ 项目名称：web3-modal-setup

✔ 选择一个框架： › React

✔ 选择一个变体： › JavaScript

1
2
3


cd web3-modal-setup
npm install
npm run dev

安装包

安装所需的包以实现所需的 web3 功能和钱包组件包。

1

npm install @web3modal/wagmi wagmi viem

配置wagmi

wagmi是 React Hooks 的集合，包含开始使用以太坊所需的一切。wagmi 可以轻松地“连接钱包”、显示 ENS 和余额信息、签署消息、与合约交互等等 - 所有这些都具有缓存、请求重复数据删除和持久性。

导入包

1
2
3
4


import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'

import { WagmiConfig } from 'wagmi'
import { arbitrum, mainnet } from 'viem/chains'

创建wagmiConfig 和 web3Modal

建议在 React 应用程序组件之外编写此代码，这样它就不会出现任何不必要的渲染。

这里projectId是我们首先创建的钱包连接项目的项目ID。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 1. Get projectId
const projectId = '57c3edxxxxxxxxxxxxxxxxxxxxxee'

// 2. Create wagmiConfig
const metadata = {
  name: 'web3-modal-setup',
  description: 'Web3 Modal Example',
}

const chains = [mainnet, arbitrum]
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId, chains })

将应用程序包装为`WagmiConfig`

最后，用组件包装您的应用程序WagmiConfig，并将其传递config给它。

1
2
3
4
5
6
7
8
9


function App() {
  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        {/* other components.. */}
      </WagmiConfig>
    </>
  )
}

实现Web3Modal和按钮

组件内部WagmiConfig，实施按钮<w3m-network-button />和<w3m-button />

<w3m-network-button />：这是用于更改网络的按钮
<w3m-button />：这个按钮提供了许多钱包选项来连接您的 dApp。

这里，为了让按钮值得一看，编写了一些 CSS，顺便说一句，这是不必要的。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


function App() {
  const [isNetworkSwitchHighlighted, setIsNetworkSwitchHighlighted] =
    useState(false);
  const [isConnectHighlighted, setIsConnectHighlighted] = useState(false);

  const closeAll = () => {
    setIsNetworkSwitchHighlighted(false);
    setIsConnectHighlighted(false);
  };

  return (
    <>
      <WagmiConfig config={wagmiConfig}>
        <header>
          <div
            className={styles.backdrop}
            style={{
              opacity:
                isConnectHighlighted || isNetworkSwitchHighlighted
                  ? 1
                  : 0,
            }}
          />
          <div className={styles.header}>
            <div className={styles.buttons}>
              <div
                onClick={closeAll}
                className={`${styles.highlight} ${isNetworkSwitchHighlighted
                  ? styles.highlightSelected
                  : ``
                  }`}
              >
                <w3m-network-button />
              </div>
              <div
                onClick={closeAll}
                className={`${styles.highlight} ${isConnectHighlighted
                  ? styles.highlightSelected
                  : ``
                  }`}
              >
                <w3m-button />
              </div>
            </div>
          </div>
        </header>
      </WagmiConfig>
    </>
  )
}

你可以走了！

运行。

1

npm run dev

干得好，

查看Github仓库，无论如何，它是需要的。

原文： https://jarvisdev.hashnode.dev/easy-multiple-wallet-integration-for-your-dapp-with-web3modal-metamask-coinbase-etc

目录