thirdwebDocs
GitHub

Getting Started

Getting started to add ERC-4337 compatible smart accounts to your application easily.

Once set, your application will:

  • Let users connect to their smart account using any personal wallet, including in-app wallets for easy onboarding.
  • Automatically deploy individual account contracts for your users when they do their first onchain transaction.
  • Handle all transaction gas costs via the thirdweb paymaster.

  • Get a free API key

    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.

  • Connect smart accounts in your application

    Use the following code to integrate account abstraction into your apps.

    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>
      );
    }

  • Executing Transactions with Smart Accounts

    Once setup, you can use the Connect TypeScript, React and Unity SDKs to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.

    import { getContract } from "thirdweb";
    import { useActiveAccount, useSendTransaction } from "thirdweb/react";
    import { mintTo, balanceOf } 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();
      // Example read
      const { data, isLoading } = useReadContract(
        balanceOf,
        {
          contract,
          owner: smartAccount.address!,
        },
        {
          enabled: !!smartAccount,
        },
      );
      // Example write
      const { mutate: sendTransaction, isPending } = useSendTransaction();
      const mint = () => {
        sendTransaction({
          transaction: mintTo({
            contract,
            to: smartAccount.address,
            nft: {
              name: "My NFT",
              description: "My NFT description",
              image: "https://example.com/image.png",
            },
          }),
        });
      };
      // Mint a new NFT
      return <button onClick={mint}>Mint NFT</button>;
    }

Demos

Learn by example with these open-source demos:

Account Abstraction Demos

A reference implementation to create and interact with smart accounts.

GitHub
View on GitHub