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

thirdweb Documentation

Next Steps

After successfully migrating, consider exploring additional thirdweb features: