Web3-Onboard 项目使用教程

1. 项目的目录结构及介绍

Web3-Onboard 项目的目录结构如下：

web3-onboard/
├── docs/
├── examples/
├── packages/
│   ├── core/
│   ├── injected-wallets/
│   ├── transaction-preview/
│   └── ...
├── scripts/
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── ...

目录介绍

• docs/: 包含项目的文档文件。
• examples/: 包含示例代码，展示如何使用 Web3-Onboard。
• packages/: 包含核心库和其他模块，如 core/, injected-wallets/, transaction-preview/ 等。
• scripts/: 包含用于构建和测试的脚本。
• .gitignore: Git 忽略文件。
• LICENSE: 项目许可证文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的主 README 文件。

2. 项目的启动文件介绍

Web3-Onboard 的启动文件主要位于 packages/core/ 目录下。核心启动文件是 index.js 或 index.ts，它负责初始化和配置 Web3-Onboard。

核心启动文件

// packages/core/index.js
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'

const injected = injectedModule()
const onboard = Onboard({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: 'https://mainnet.infura.io/v3/<INFURA_KEY>'
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const wallets = await onboard.connectWallet()

启动文件介绍

• Onboard 初始化: 使用 Onboard 函数初始化 Web3-Onboard，配置钱包和链信息。
• 钱包模块: 引入 injected-wallets 模块，支持浏览器扩展和移动钱包。
• 链配置: 配置支持的链，包括链 ID、代币符号、链标签和 RPC URL。

3. 项目的配置文件介绍

Web3-Onboard 的配置文件主要是 package.json 和各个模块的配置文件。

package.json

{
  "name": "@web3-onboard/core",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "@web3-onboard/injected-wallets": "^1.0.0",
    "ethers": "^5.0.0"
  },
  "scripts": {
    "start": "node index.js"
  }
}

配置文件介绍

• name: 包的名称。
• version: 包的版本。
• main: 入口文件。
• dependencies: 依赖包，包括 @web3-onboard/injected-wallets 和 ethers。
• scripts: 脚本命令，如 start 用于启动项目。

通过以上配置，可以快速启动和配置 Web3-Onboard 项目，实现钱包连接和交易功能。