Web3-Onboard

前提条件

基本的前端项目环境（React、Vue 或纯 JavaScript）
安装了 Bitget Wallet 的浏览器

步骤

1. 安装 Web3 Onboard

通过 yarn 或 npm 安装 Web3 Onboard。在项目的根目录中运行以下命令： npm


npm i @web3-onboard/core @web3-onboard/bitget

yarn


yarn add @web3-onboard/core @web3-onboard/bitget

2. 在项目中导入和配置 Web3 Onboard

在前端项目中，创建一个配置来初始化 Web3 Onboard。例如，在 React 应用程序中，您可以这样做：


import Onboard from '@web3-onboard/core'
import bitgetWalletModule from '@web3-onboard/bitget'
 
function App() {
  const bitgetWallet = bitgetWalletModule()
 
  // 初始化 Onboard
  const onboard = Onboard({
    // ... 其他 Onboard 选项
    wallets: [
      bitgetWallet,
      //... 其他钱包
    ],
  })
 
  return (
    <div className='App'>
      <button onclick={connectWallet}>连接 Bitget 钱包</button>
    </div>
  )
}
 
export default App

3. 连接钱包

创建一个按钮，当用户点击时，调用 Web3 Onboard 连接钱包。


const connectWallet = async () => {
  const wallets = await onboard.connectWallet()
  console.log(wallets)
}

4. 前端界面

在前端应用程序的适当位置，添加一个按钮来触发钱包连接：


<button onclick="{connectWallet}">连接 Bitget 钱包</button>

5. 监听钱包状态


onboard.state.select('wallets').subscribe((wallets) => {
  if (wallets.length > 0) {
    console.log('钱包已连接')
  } else {
    console.log('钱包已断开')
  }
})

API 参考链接

Web3-Onboard 安装