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