Build your own UI

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.

Using useConnect, you can pass the accountAbstraction prop to automatically convert any connected wallet to a smart account.

The connected wallet will be the admin wallet of the smart account.

import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";
 
function App() {
  // 1. set the `accountAbstraction` configuration
  const { connect } = useConnect({
    client,
    accountAbstraction: {
      chain: sepolia, // the chain where your smart accounts will be or is deployed
      sponsorGas: true, // enable or disable sponsored transactions
    },
  });
 
  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>
  );
}

Once setup, you can use the Connect TypeScript, React, or React Native 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 { claimTo, 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: claimTo({
        contract,
        to: smartAccount.address,
        quantity: 1n,
      }),
    });
  };
  // Mint a new NFT
  return <button onClick={mint}>Mint NFT</button>;
}