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 i @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
  AvalancheFuji,BinanceTestnet
} from "@thirdweb-dev/chains";

// ...

// Mainnet
const BLOCTO_SUPPORTED_MAINNET_CHAIN = [Ethereum, Polygon, Arbitrum, Optimism, Binance, Avalanche];
// Testnet
const BLOCTO_SUPPORTED_TESTNET_CHAIN = [AvalancheFuji, BinanceTestnet];

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider
      activeChain={BinanceTestnet}
      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

ParamterTypeDescriptionRequired

appId

string

Blocto dApp ID

No

Blocto supportedChains

MainnetTestnet

Ethereum

Sepolia

Arbitrum

ArbitrumSepolia

Optimism

OptimismSepolia

Polygon

X

Binance

BinanceTestnet

Avalanche

AvalancheFuji

Base

BaseSepolia

Zora

ZoraTestnet

Scroll

ScrollSepolia

Connect to Wallet

import { ConnectWallet } from "@thirdweb-dev/react";

// ...

const Home = () => {
  return (
    <ConnectWallet />
    
    // ...
  )
}

export default Home;

Sample Code

Resources

thirdweb Getting Start

ThirdwebProvider

Last updated