Adapters

The thirdweb SDK can work side by side with:

• wagmi
• viem
• privy
• ethers.js v5
• ethers.js v6
• older versions of the @thirdweb-dev/sdk (using the ethers.js v5 adapter)
• any other library that conforms to the EIP-1193 standard

Adapters allow you to use contracts, providers and wallets from these libraries with the thirdweb SDK and vice versa.

You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including PayEmbed, TransactionButton, etc.

// Assumes you've wrapped your application in a `<ThirdwebProvider>`
 
import { useEffect } from "react";
import { defineChain } from "thirdweb";
import { useSetActiveWallet } from "thirdweb/react";
import { createWalletAdapter } from "thirdweb/wallets";
import {
  useDisconnect,
  useSwitchChain,
  useWalletClient,
} from "wagmi";
import { viemAdapter } from "thirdweb/adapters/viem";
import { client } from "./client";
 
const { data: walletClient } = useWalletClient(); // from wagmi
const { disconnectAsync } = useDisconnect(); // from wagmi
const { switchChainAsync } = useSwitchChain(); // from wagmi
const setActiveWallet = useSetActiveWallet(); // from thirdweb/react
 
// whenever the walletClient changes,
// we adapt it to a thirdweb account and set it as the active wallet
useEffect(() => {
  const setActive = async () => {
    if (walletClient) {
      // adapt the walletClient to a thirdweb account
      const adaptedAccount = viemAdapter.walletClient.fromViem({
        walletClient: walletClient as any, // accounts for wagmi/viem version mismatches
      });
      // create the thirdweb wallet with the adapted account
      const thirdwebWallet = createWalletAdapter({
        client,
        adaptedAccount,
        chain: defineChain(await walletClient.getChainId()),
        onDisconnect: async () => {
          await disconnectAsync();
        },
        switchChain: async (chain) => {
          await switchChainAsync({ chainId: chain.id as any });
        },
      });
      setActiveWallet(thirdwebWallet);
    }
  };
  setActive();
}, [walletClient]);

You can view a fully functioning wagmi + thirdweb app in this github repository.

Similarly, you can use the thirdweb SDK with privy by setting the privy wallet as the thirdweb 'active wallet'. After that, you can use all of the react components, functions and hooks normally, including PayEmbed, TransactionButton, etc.

// Assumes you've wrapped your application in a `<ThirdwebProvider>`
 
import { useEffect } from "react";
import { defineChain } from "thirdweb";
import { useSetActiveWallet } from "thirdweb/react";
import { createWalletAdapter } from "thirdweb/wallets";
import { client } from "./client";
import { useWallets } from "@privy-io/react-auth";
 
const { wallets } = useWallets(); // from privy
const setActiveWallet = useSetActiveWallet(); // from thirdweb/react
 
// whenever the privy wallet changes,
// we adapt it to a thirdweb account and set it as the active wallet
useEffect(() => {
  const setActive = async () => {
    const privyWallet = wallets[0];
    if (privyWallet) {
      const ethersProvider = await privyWallet.getEthersProvider();
      // adapt privy wallet to a thirdweb account
      const adaptedAccount = await ethers5Adapter.signer.fromEthers({
        signer: ethersProvider.getSigner(),
      });
      // create the thirdweb wallet with the adapted account
      const thirdwebWallet = createWalletAdapter({
        client,
        adaptedAccount,
        // chainId is in the format of "eip155:1"
        chain: defineChain(Number(privyWallet.chainId.split(":")[1])),
        onDisconnect: async () => {
          privyWallet.disconnect();
        },
        switchChain: async (chain) => {
          await privyWallet.switchChain(chain.id);
        },
      });
      setActiveWallet(thirdwebWallet);
    }
  };
  setActive();
}, [wallets]);