integrate-with-thirdweb.md

description
You can easily connect Blocto on thirdweb

Integrate with 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

{% tabs %} {% tab title="npm" %}

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

{% endtab %}

{% tab title="yarn" %}

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

{% endtab %}

{% tab title="pnpm" %}

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

{% endtab %} {% endtabs %}

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

Paramter	Type	Description	Required
appId	string	Blocto dApp ID	No

Blocto supportedChains

Mainnet	Testnet
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

{% embed url="https://codesandbox.io/s/github/blocto/blocto-sdk-examples/tree/main/src/adapter/evm/with-thirdweb-next" %}

Resources

thirdweb Getting Start

ThirdwebProvider