Web3-Onboard

Prerequisites

A basic frontend project environment (React, Vue, or plain JavaScript)
A browser with Bitget Wallet installed

Steps

1. Install Web3 Onboard

Install Web3 Onboard via yarn or npm. Run the following command in the root directory of your project: npm

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

yarn

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

2. Import and Configure Web3 Onboard in Your Project

In your frontend project, create a configuration to initialize Web3 Onboard. For example, in a React application, you can do it like this:

        
         
        
import Onboard from "@web3-onboard/core";
import bitgetWalletModule from "@web3-onboard/bitget";
 
function App() {
  const bitgetWallet = bitgetWalletModule();
 
  // initialize Onboard
  const onboard = Onboard({
    // ... other Onboard options
    wallets: [
      bitgetWallet,
      //... other wallets
    ],
  });
 
  return (
    <div className="App">
      <button onclick={connectWallet}>Connect Bitget wallet</button>
    </div>
  );
}
 
export default App;

3. Connect Wallet

Create a button that, when clicked by the user, calls Web3 Onboard to connect the wallet.

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

4. Frontend Interface

In the appropriate place in your frontend application, add a button to trigger the wallet connection:

        
         
        
<button onclick={connectWallet}>Connect Bitget wallet</button>

5.Listen to Wallet Status

        
         
        
onboard.state.select("wallets").subscribe((wallets) => {
  if (wallets.length > 0) {
    console.log("Wallet is connected");
  } else {
    console.log("Wallet is disconnected");
  }
});

API Reference Link

Web3-Onboard Installation