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

npm i @thirdweb-dev/react @thirdweb-dev/sdk

yarn

yarn add @thirdweb-dev/react @thirdweb-dev/sdk

pnpm

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
Ethereum	Sepolia
Arbitrum	ArbitrumGoerli
Optimism	OptimismGoerli
Polygon	Mumbai
Binance	BinanceTestnet
Avalanche	AvalancheFuji
Base	BaseGoerli
Zora	ZoraTestnet
Scroll	ScrollSepoliaTestnet

Connect to Wallet

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

// ...

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

export default Home;

Sample Code

Resources

thirdweb Getting Start

ThirdwebProvider