Sponsor Transactions

By using Account abstraction or In-App Wallets, you can sponsor all gas costs for your users transactions.

Try out the demo for yourself in the sponsored transactions playground

To enable account abstraction for in-app wallets, you need to add the smartAccount prop with the inAppWallet creation.

import { ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";
 
const wallets = [
  inAppWallet({
    smartAccount: {
      chain: sepolia,
      sponsorGas: true,
    },
  }),
];
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton client={client} wallets={wallets} />
    </ThirdwebProvider>
  );
}

This will create an in-app wallet and a smart account for the user. The smart account will be initialized with the in-app wallet as the owner.

You can sponsor transactions simply by passing sponsrGas: true to the smartAccount prop. This will allow the smart account to send transactions without the user needing to hold any ETH.

To sponsor transactions for all connected wallets, you can use the sponsorGas prop on the ConnectButton or useConnect hook.

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>
  );
}

or with the useConnect hook:

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 = createWallet("io.metamask"); // or any other wallet
      await wallet.connect({
        client,
        chain: sepolia,
      });
      return wallet;
    });
  };
 
  return (
    <button onClick={() => connectToSmartAccount()}>Connect</button>
  );
}

Once connected, all transactions sent via the useSendTransaction hook or the TransactionButton component will be sponsored.