EIP-4337 Smart Contract Wallets

Turn any EOA into a smart contract wallet with EIP-4337.

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