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
sh
npm i @web3-onboard/core @web3-onboard/bitgetnpm i @web3-onboard/core @web3-onboard/bitgetyarn
sh
yarn add @web3-onboard/core @web3-onboard/bitgetyarn add @web3-onboard/core @web3-onboard/bitget2. 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:
jsx
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;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.
js
const connectWallet = async () => {
const wallets = await onboard.connectWallet();
console.log(wallets);
};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:
html
<button onclick={connectWallet}>Connect Bitget wallet</button><button onclick={connectWallet}>Connect Bitget wallet</button>5.Listen to Wallet Status
js
onboard.state.select("wallets").subscribe((wallets) => {
if (wallets.length > 0) {
console.log("Wallet is connected");
} else {
console.log("Wallet is disconnected");
}
});onboard.state.select("wallets").subscribe((wallets) => {
if (wallets.length > 0) {
console.log("Wallet is connected");
} else {
console.log("Wallet is disconnected");
}
});