Links
Comment on page

Integrate with thirdweb

You can easily connect Blocto on thirdweb
thirdweb is a comprehensive development framework that empowers you to seamlessly build, launch, and manage web3 applications and games across any EVM-compatible blockchain.

Installation

Install from npm/yarn/pnpm
npm
yarn
pnpm
npm i @thirdweb-dev/react @thirdweb-dev/sdk
yarn add @thirdweb-dev/react @thirdweb-dev/sdk
pnpm add @thirdweb-dev/react @thirdweb-dev/sdk

Configuration with Blocto

Import and initiate bloctoWallet with <ThirdwebProvider />.
import { ThirdwebProvider, bloctoWallet } from "@thirdweb-dev/react";
import {
// Supported Mainnet Chains in Blocto
Ethereum, Polygon, Arbitrum, Optimism, Binance, Avalanche,
// Supported Testnet Chains in Blocto
Goerli, Mumbai, ArbitrumGoerli, OptimismGoerli, BinanceTestnet, AvalancheFuji
} from "@thirdweb-dev/chains";
// ...
// Mainnet
const BLOCTO_SUPPORTED_MAINNET_CHAIN = [Ethereum, Polygon, Arbitrum, Optimism, Binance, Avalanche];
// Testnet
const BLOCTO_SUPPORTED_TESTNET_CHAIN = [Goerli, Mumbai, ArbitrumGoerli, OptimismGoerli, BinanceTestnet, AvalancheFuji];
function MyApp({ Component, pageProps }) {
return (
<ThirdwebProvider
activeChain={Mumbai}
supportedChains={BLOCTO_SUPPORTED_TESTNET_CHAIN}
supportedWallets={[
bloctoWallet({ appId: 'YOUR_DAPP_ID' }),
{/* other wallets */}
]}
>
<App />
</ThirdwebProvider>
);
}
The default supportedChains of ThirdwebProvider includes the Blocto unsupported chain. If a user switches to an unsupported chain, it will trigger a could not switch network error. We strongly recommend manually configuring the supportedChains based on the current environment. You can following below list to get the latest list of Blocto supported chains.

bloctowallet parameters

Paramter
Type
Description
Required
appId
string
Blocto dApp ID
No

Blocto supportedChains

Mainnet
Testnet
Ethereum
Goerli
Arbitrum
ArbitrumGoerli
Optimism
OptimismGoerli
Polygon
Mumbai
Binance
BinanceTestnet
Avalanche
AvalancheFuji

Connect to Wallet

import { ConnectWallet } from "@thirdweb-dev/react";
// ...
const Home = () => {
return (
<ConnectWallet />
// ...
)
}
export default Home;

Sample Code

Resources