Using Account Abstraction in React

To use the bundler and paymaster, you must create an API key and a billing account.

To create an API Key:

• Head to the settings page in the dashboard and click the API Keys tab.
• Click on Create API Key.
• Follow the steps to create your API key.

To use account abstraction infrastructure on mainnet you will also need to create an account and add a payment method.

To use smart accounts in a React app you can either:

• Start from a template like our Next.js or Vite starter.
• Add the dependencies to an existing project using npm i thirdweb or your favorite package manager.

In this guide, we'll use the Next.js starter template.

Clone the repo and follow the instructions in the README to set up the project.

To use the Connect Button component to connect your users to your app using smart accounts, we just need to pass the accountAbstraction prop.

You can change the configuration based on your requirements.

import { ConnectButton } from "thirdweb/react";
import { sepolia } from "thirdweb/chains";
 
const client = createThirdwebClient({ clientId: "your-client-id" });
 
function App() {
  return (
    <div className="App">
      <ConnectButton
        client={client}
        accountAbstraction={{
          chain: sepolia,
          sponsorGas: true,
        }}
      />
    </div>
  );
}

Clicking on the connect button will show the following Modal which allows you to connect a personal wallet. This is the personal wallet you are using to initialize the smart account.

After connecting your personal wallet, a smart account is created for you and connected to the application.

The useConnect hook allows you to programmatically connect your application to the wallet. You will need to build your own UI for connecting the wallet.

import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";
 
function Example() {
  // 1. set the `accountAbstraction` configuration
  const { connect } = useConnect({
    client,
    accountAbstraction: {
      chain: sepolia,
      sponsorGas: true,
    },
  });
 
  const connectToSmartAccount = async () => {
    // 2. connect with the admin wallet of the smart account
    connect(async () => {
      const wallet = inAppWallet(); // or any other wallet
      await wallet.connect({
        client,
        chain: sepolia,
        strategy: "google",
      });
      return wallet;
    });
  };
 
  return (
    <button onClick={() => connectToSmartAccount()}>Connect</button>
  );
}

Now that you have connected your smart account to your app, you can use it to send transactions and interact with smart contracts.

Deploy a NFT Drop contract from the explore page or build your own ERC 721 compatible contract using the Solidity SDK.

Use the dashboard to upload some NFTs that we will claim with our smart account.

To claim an NFT, we will use the TransactionButton component to send the transaction.

import { getContract } from "thirdweb";
import { useActiveAccount, TransactionButton } from "thirdweb/react";
import { mintTo } 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();
  // Fetch owned NFTs
  const { data, isLoading } = useReadContract(
    getOwnedNFTs,
    {
      contract,
      address: smartAccount.address!,
    },
    {
      enabled: !!smartAccount,
    },
  );
  // Mint a new NFT
  return (
    <TransactionButton
      transaction={() => {
        if (!account) return;
        return claimTo({
          contract,
          to: account.address,
          quantity: 1,
        });
      }}
      onTransactionConfirmed={() => {
        alert("NFT Minted!");
      }}
    >
      Mint NFT
    </TransactionButton>
  );
}

In this guide, we learned how to connect users to a React app using two methods:

• With the Connect Wallet component.
• With a custom UI component via the useConnect hook.