ERC-4337 Smart Accounts

Convert any wallet to a ERC-4337 smart account to your application.

• Let users connect to their smart account using any personal wallet, including in-app wallets for easy onboarding.
• Automatically deploy individual account contracts for your users when they do their first onchain transaction.
• Sponsor gas costs for all transactions via the thirdweb paymaster.

Try out in-app wallets for yourself in the in-app wallet live playground

The easiest way to get started with account abstraction is to use the ConnectButton component. Simply add the accountAbstraction property with the desired chain and whether to sponsor gas for your users.

With this property, all connected wallets will be automatically converted to smart accounts. The connected wallet will be the admin wallet of the smart account.

import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton
        client={client}
        accountAbstraction={{
          chain: sepolia, // the chain where your smart accounts will be or is deployed
          sponsorGas: true, // enable or disable sponsored transactions
        }}
      />
    </ThirdwebProvider>
  );
}

You can also make it so only in-app wallets get converted to smart accounts, by configuring the in-app wallet individually. Other external wallets will not be converted to smart accounts with this setup.

import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
const wallets = [
  inAppWallet({
    // only configure smart accounts for in-app wallets
    smartAccount: {
      chain: sepolia,
      sponsorGas: true,
    },
  }),
  // other external wallets will not become smart accounts
  createWallet("io.metamask"),
  createWallet("rainbow.me"),
];
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}

You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.

import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";
 
function App() {
  // 1. set the `accountAbstraction` configuration to convert wallets to smart accounts
  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>
  );
}

Refer to the Smart Wallet API reference for more advanced configuration of your smart accounts.