Using Account Abstraction in React

By using the wallet SDK alongside the React SDK, you can use smart accounts in your front-end applications easily.

  • Create an API key

    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.

  • Create an App

    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.

  • Build your connection UI

    Using Connect Wallet (prebuilt UI)

    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.

    Using the useConnect hook (custom UI)

    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>
    );
    }
  • Use the Smart account

    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 { 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();
    // 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>
    );
    }
  • Conclusion

    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.