Comment on page
Integrate with Web3-Onboard
You can easily add Blocto wallet to Web3-Onboard
Web3-Onboard is an open-source, framework-agnostic JavaScript library made by Blocknative to onboard users to web3 apps. Help your users transact with ease by enabling wallet connection, real-time transaction states, and more.
Note that Blocto SDK for EVM-compatible chains is still in Beta. APIs are subject to breaking changes.
Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @web3-onboard/core @web3-onboard/blocto ethers
yarn add @web3-onboard/core @web3-onboard/blocto ethers
pnpm add @web3-onboard/core @web3-onboard/blocto ethers
Import Web3-Onboard, ethers, and bloctoWallet.
import Onboard from "@web3-onboard/core";
import bloctoModule from "@web3-onboard/blocto";
import { ethers } from "ethers";
Configure your desired chains and generate the required connectors.
const blocto = bloctoModule();
const onboard = Onboard({
wallets: [blocto],
chains: [
{
id: "0x13881",
token: "Polygon",
label: "Polygon testnet",
rpcUrl: "https://rpc-mumbai.maticvigil.com" // rpc
},
],
});
// connect wallet
const connectWallet = async () => {
await onboard.connectWallet();
};
const sendTx = async () => {
// create an ethers provider with the last connected wallet provider
// if using ethers v6 this is:
// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
const ethersProvider = new ethers.providers.Web3Provider(
wallets[0].provider,
"any"
);
const signer = ethersProvider.getSigner();
// send a transaction with the ethers provider
const txn = await signer.sendTransaction({
to: "0x",
value: 100000000000000,
});
const receipt = await txn.wait();
console.log(receipt);
};
const App = () => {
return (
<button onClick={connectWallet}>
connect wallet
</button>
);
};
Now you can easily use
Web3-Onboard connect BloctoWalletTo see more configurations, please check out
Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @web3-onboard/react @web3-onboard/blocto ethers
yarn add @web3-onboard/react @web3-onboard/blocto ethers
pnpm add @web3-onboard/react @web3-onboard/blocto ethers
Import Web3-Onboard, ethers, and bloctoWallet.
import injectedModule from "@web3-onboard/injected-wallets";
import { init, useConnectWallet } from "@web3-onboard/react";
import bloctoModule from "@web3-onboard/blocto";
import { ethers } from "ethers";
Configure your desired chains and generate the required connectors.
const polygonTestnet = {
id: "0x13881",
token: "MATIC",
label: "Polygon",
rpcUrl: "https://rpc-mumbai.maticvigil.com"
};
const chains = [polygonTestnet];
const wallets = [bloctoModule()];
const web3Onboard = init({
wallets,
chains,
appMetadata: {
name: "Web3-Onboard Demo",
icon: "<svg>My App Icon</svg>",
description: "A demo of Web3-Onboard."
}
});
Wrap your application with Web3OnboardProvider.
<Web3OnboardProvider web3Onboard={web3Onboard}>
<App />
</Web3OnboardProvider>
const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
const ethersProviderRef = useRef();
if (wallet && !ethersProviderRef.current) {
// if using ethers v6 this is:
// ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
ethersProviderRef.current = new ethers.providers.Web3Provider(
wallet.provider,
"any"
);
}
const connectWallet = async () => {
}
const App = () => {
return (
<button
disabled={connecting}
onClick={() => (wallet ? disconnect(wallet) : connect())}
>
<span>
{connecting ? "Connecting" : wallet ? "Disconnect" : "Connect"}
</span>
</button>
);
};
To see more configurations, please check out
Last modified 4d ago