Account Abstraction EIP-4337

Enable account abstraction with EIP-4337. Unlock gasless transactions, session keys, paymaster support, and smart wallet programmability

Documentation

Usage with any external wallet

Use the accountAbstraction flag on the ConnectButton or useConnect hook to automatically convert any external wallet to a EIP-4337 smart contract wallet.

Code

import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";

function App() {
  return (
    <>
      <ConnectButton
        client={client}
        accountAbstraction={{
          chain,
          sponsorGas: true, // sponsor gas for all transactions
        }}
        connectButton={{
          label: "Login to mint this Kitten!",
        }}
      />
      {/* since sponsorGas is true, transactions will be sponsored */}
      <TransactionButton
        transaction={() =>
          claimTo({ contract, to: "0x123...", tokenId: 0n, quantity: 1n })
        }
      >
        Mint
      </TransactionButton>
    </>
  );
}

Preview

Usage with in-app wallets

Set the executionMode when creating your in-app wallet to turn it into a EIP-4337 smart contract wallet. Note that when set, the returned address will be the smart contract wallet address.

Code

import { inAppWallet } from "thirdweb/wallets";
import { claimTo } from "thirdweb/extensions/erc1155";
import { ConnectButton, TransactionButton } from "thirdweb/react";
import { baseSepolia } from "thirdweb/chains";

const wallets = [
  inAppWallet({
    // turn on gas sponsorship for in-app wallets
    // Can use EIP4337 or EIP7702 on supported chains
    executionMode: {
      mode: "EIP4337",
      smartAccount: { chain: baseSepolia, sponsorGas: true },
    },
  }),
];

function App() {
  return (
    <>
      <ConnectButton client={client} wallets={wallets} />

      {/* signless, sponsored transactions */}
      <TransactionButton
        transaction={() =>
          claimTo({
            contract,
            to: "0x123...",
            tokenId: 0n,
            quantity: 1n,
          })
        }
      >
        Mint
      </TransactionButton>
    </>
  );
}

Preview

Build custom UI

Build your own UI to connect to 4337 smart accounts

Code

import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";

const wallet = inAppWallet({
  executionMode: {
    mode: "EIP4337",
    smartAccount: { chain: baseSepolia, sponsorGas: true },
  },
});

function App() {
  const { connect } = useConnect();

  return (
    <>
      <button
        onClick={() =>
          connect(async () => {
            await wallet.connect({ client, strategy: "google" });
            return adminWallet;
          })
        }
      >
        Connect with Google
      </button>
    </>
  );
}

Preview