Using Account Abstraction in React

Deployable via the explore page or build your own ERC 4337 compatible factory contract using the Solidity SDK.

thirdweb offers the following three different kinds of account factories:

Read about the differences between the three smart account types here.

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 nfrastructure 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:

• Use npx thirdweb create command to create a new project with the dependencies already installed.
• Add the dependencies to an existing project using npx thirdweb install or your favorite package manager.

In this guide, we'll create a new project. Open your terminal and run:

npx thirdweb create app

When prompted, select/input the following options:

• A name for the project
• EVM as the blockchain
• Select your desired environment e.g. Next.js or Vite.
• TypeScript as the language.

This will create a react project with all the dependencies and a simple connect wallet button.

To use the Connect Wallet component to connect your users to your app using smart accounts, we need to pass a smartWallet to the supportedWallets prop in ThirdwebProvider.

You can change the configuration based on your requirements, but for this demo, we will enable gasless transactions and use a EmbeddedWallet as the personal wallet.

import { smartWallet, embeddedWallet } from "@thirdweb-dev/react";
 
const personalWallet = embeddedWallet(); // or any other wallet
 
export const smartWalletConfig = smartWallet(personalWallet, {
  factoryAddress: "your-factory-address",
  gasless: true,
});

Pass the configuration to the provider:

<ThirdwebProvider
  clientId="<your-client-id>"
  activeChain={activeChain}
  supportedWallets={[smartWalletConfig]}
>
  <App />
</ThirdwebProvider>;

Now, import the ConnectWallet component from the React package and add it to your app:

import { ConnectWallet } from "@thirdweb/react";
 
function App() {
  return (
    <div className="App">
      <ConnectWallet />
    </div>
  );
}

Clicking on the connect button will show the following Modal which allows you to create or import a local wallet.

This is the personal wallet you are using to initialize the smart account. For local wallet, you can create a new wallet with a password or import a previously created wallet.

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

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

import { useSmartWallet, metamaskWallet } from "@thirdweb-dev/react";
 
function Example() {
  // here we're using metamask as the personal wallet
  // can be any other wallet, including localWallet(), embeddedWallet(), etc
  const { connect } = useSmartWallet(metamaskWallet(), {
    factoryAddress: "your-factory-address",
    gasless: true,
  });
 
  return (
    <button
      onClick={async () => {
        const smartWallet = await connect();
        console.log(
          "connected to smart wallet",
          await smartWallet.getAddress(),
        );
      }}
    >
      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 useContract hook to fetch the contract and the Web3Button component to send the transaction.

import { useAddress, useContract, useOwnedNFTs, Web3Button } from "@thirdweb-dev/react";
 
// The ThirdwebProvider setup above already handles connection to the smart wallet
// Within the provider, you can use the react SDK hooks to interact with the blockchain
export default function MyComponent() {
  // Get the connected smart wallet address
  const smartWalletAddress = useAddress();
  // Fetch owned NFTs
  const { contract } = useContract("0x..."); // your nft drop contract
  const { data, isLoading } = useOwnedNFTs(contract, smartWalletAddress);
  // Mint a new NFT
  return (
    <Web3Button
      contractAddress={"0x..."}
      action={(contract) => contract.erc721.claim(1)
      }
    >
      Mint NFT
    </Web3Button>
  );
}
`;

To add a session key to your smart wallet, you can use the useCreateSessionKey hook to add a session key to the currently connected smart wallet:

import { useCreateSessionKey } from "@thirdweb-dev/react";
 
const keyAddress = "{{key_address}}";
 
const Component = () => {
    const {
      mutate: createSessionKey,
      isLoading,
      error,
    } = useCreateSessionKey();
 
    const handleOnClick = () => {
	    createSessionKey(
          keyAddress, // the session key address
          {
            approvedCallTargets: ["0x..."], // the addresses of allowed contracts, or '*' for any contract
            nativeTokenLimitPerTransaction: 0.1, // Optional: the maximum amount of native token (in ETH) that the session key can spend per transaction
            startDate: new Date(), // Optional: the date when the session key becomes active
            expirationDate = new Date(Date.now() + 24 * 60 * 60 * 1000); // Optional: the date when the session key expires
          }
        );
    };
 
    return (
      <button
        disabled={isLoading}
        onClick={() => handleOnClick()}
      >
        Create Session Key
      </button>
    );
};

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.
• Low-level control with ThirdwebSDKProvider and the Wallet SDK.

Take a look at the GitHub Repository for the full source code!