Docs

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.

  • Deploy an Account Factory

    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.

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

    • 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.

  • Build your connection UI

    Using Connect Wallet (prebuilt UI)

    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.

    Using the useSmartWallet hook (custom UI)

    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>
    );
    }
  • 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 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>
    );
    }
    `;
  • Bonus: Add a Session Key

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

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

    React App

    A React app to create and interact with smart wallets.