Getting Started

You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.

Obtain an API key from the thirdweb dashboard Settings page.

The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for smart accounts to operate and optionally enable gasless transactions.

Learn more about creating an API key and restricting which contracts the smart account can interact with here.

The easiest way to get started with account abstraction is to use the ConnectButton component. Simply add the accountAbstraction property with the desired chain and whether to sponsor gas for your users.

With this property, all connected wallets will be automatically converted to smart accounts. The connected wallet will be the admin wallet of the smart account.

import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton
        client={client}
        accountAbstraction={{
          chain: sepolia, // the chain where your smart accounts will be or is deployed
          sponsorGas: true, // enable or disable sponsored transactions
        }}
      />
    </ThirdwebProvider>
  );
}

Once setup, you can use the rest of the Connect React SDK to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.

import { getContract } from "thirdweb";
import { useActiveAccount, TransactionButton } from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc721";
 
const contract = getContract({ client, chain, address: "0x..." });
 
// The ThirdwebProvider setup above already handles the connection to the smart account
// Within the provider, you can use the SDK normally to interact with the blockchain
export default function MyComponent() {
  // Get the connected smart account
  const smartAccount = useActiveAccount();
  // Mint a new NFT
  return (
    <TransactionButton
      transaction={() => {
        if (!account) return;
        return claimTo({
          contract,
          to: account.address,
          quantity: 1n,
        });
      }}
    >
      Mint NFT
    </TransactionButton>
  );
}