thirdwebDocs

Migration Guide: Blocknative to thirdweb

Introduction

Learn how to migrate from Blocknative's Web3Onboard to thirdweb while maintaining the same wallet support. Following thirdweb's acquisition of Web3Onboard in January 2025, this migration will enable you to leverage thirdweb's enhanced features while ensuring a seamless transition for your users.

Benefits of Migration

  • Over 500+ wallet connections
  • Enhanced wallet connection experience
  • Access to thirdweb's broader ecosystem of tools
  • Ongoing support and updates from thirdweb

Prerequisites

  • An existing project using Blocknative/Web3Onboard

Migration Steps

  • Update Dependencies

    First, remove the Blocknative packages and install the thirdweb packages:

    # Remove Blocknative packages
    npm uninstall bnc-onboard @web3-onboard/core @web3-onboard/injected-wallets
     
    # Install thirdweb unified package
    npm install thirdweb

  • Update Configuration (React)

    Replace your Blocknative configuration with thirdweb's:

    Before (with Blocknative):

    import Onboard from "@web3-onboard/core";
    import injectedModule from "@web3-onboard/injected-wallets";
     
    const injected = injectedModule();
     
    const onboard = Onboard({
      wallets: [injected],
      chains: [
        {
          id: "0x1",
          token: "ETH",
          label: "Ethereum Mainnet",
          rpcUrl: "https://mainnet.infura.io/v3/your-key",
        },
      ],
    });
     
    // Connect wallet
    const wallets = await onboard.connectWallet();

    After (with thirdweb):

    • Create your thirdweb project here.
    • Wrap your application with the <ThirdwebProvider/>
    import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
    import { createThirdwebClient } from "thirdweb";
     
    const client = createThirdwebClient({
      clientId: "YOUR_CLIENT_ID", // Get one from thirdweb.com/dashboard
    });
     
    function App() {
      return (
        <ThirdwebProvider>{/* Your app content */}</ThirdwebProvider>
      );
    }

  • Custom Wallet Configuration

    If you need to support specific wallets:

    import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
    import { createWallet } from "thirdweb/wallets";
    import { createThirdwebClient } from "thirdweb";
     
    const client = createThirdwebClient({
      clientId: "YOUR_CLIENT_ID", // Get one from thirdweb.com/dashboard
    });
     
    const wallets = [
      createWallet("io.metamask"), // Add your wallet in wallet list
      // add other wallets...
    ];
     
    function App() {
      return (
        <ThirdwebProvider>
          <ConnectButton client={client} wallets={wallets} />
        </ThirdwebProvider>
      );
    }

  • Update Wallet Connection Logic

    Replace the wallet connection logic:

    Before (with Blocknative):

    const connectWallet = async () => {
      const wallets = await onboard.connectWallet();
      if (wallets[0]) {
        const provider = wallets[0].provider;
        // Use the provider
      }
    };

    After (with thirdweb):

    import {
      useActiveWallet,
      useDisconnect,
      useConnect,
    } from "thirdweb/react";
     
    function WalletConnect() {
      const wallet = useActiveWallet();
      const { connect } = useConnect();
      const { disconnect } = useDisconnect();
     
      if (wallet) {
        return (
          <div>
            <p>Connected: {wallet.address}</p>
            <button onClick={() => disconnect()}>Disconnect</button>
          </div>
        );
      }
     
      return (
        <button
          onClick={() =>
            connect(async () => {
              // instantiate wallet
              const wallet = createWallet("io.metamask");
              // connect wallet
              await wallet.connect({
                client,
              });
              // return the wallet
              return wallet;
            })
          }
        >
          Connect
        </button>
      );
    }

  • Multi-chain Support

    Configure multi-chain support with thirdweb:

    import { ThirdwebProvider } from "thirdweb/react";
    import { createThirdwebClient } from "thirdweb";
    import {
      ethereum,
      polygon,
      optimism,
      arbitrum,
    } from "thirdweb/chains";
     
    const client = createThirdwebClient({
      clientId: "YOUR_CLIENT_ID",
    });
     
    function App() {
      return (
        <ThirdwebProvider>
          <ConnectButton
            client={client}
            chains={[ethereum, polygon, optimism, arbitrum]}
          />
        </ThirdwebProvider>
      );
    }

Common Issues

  • Wallet not connecting: Ensure you've properly configured the ThirdwebProvider
  • Missing wallets: Check that you've added all wallet types to supported wallets
  • Chain not available: Verify that the chain is properly configured and supported by thirdweb

Support Resources

Next Steps

After successfully migrating, consider exploring additional thirdweb features: