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 项目,实现钱包连接和交易功能。