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.
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
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.Paramter | Type | Description | Required |
|---|---|---|---|
appId | string | Blocto dApp ID | No |
Mainnet | Testnet |
|---|---|
Ethereum | Goerli |
Arbitrum | ArbitrumGoerli |
Optimism | OptimismGoerli |
Polygon | Mumbai |
Binance | BinanceTestnet |
Avalanche | AvalancheFuji |
import { ConnectWallet } from "@thirdweb-dev/react";
// ...
const Home = () => {
return (
<ConnectWallet />
// ...
)
}
export default Home;
Last modified 4d ago