Easier account abstraction in Connect SDK (React)

Joaquim Verges

In the latest version of the Connect SDK (v5.12.0) we've made it easier to convert any EOA wallet to a smart account!

You can now pass the accountAbstraction prop directly to useConnect - this will ensure that any wallet connected via this hook will be converted to a smart account.

import { useConnect } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { sepolia } from "thirdweb/chains";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
const chain = sepolia;
 
function App() {
  // 1. set the `accountAbstraction` configuration
  const { connect } = useConnect({
    client,
    accountAbstraction: {
      chain, // the chain where your smart accounts will be deployed
      factoryAddress: "0x...", // your deployed factory address
      gasless: true, // enable or disable gasless 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>
  );
}

And of course, you can also use the ConnectButton or ConnectEmbed UI components and pass the accountAbstraction prop to achieve the same thing with our prebuilt UI.

import { createThirdwebClient } from "thirdweb";
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
import { sepolia } from "thirdweb/chains";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
const chain = sepolia;
 
export default function App() {
  return (
    <ThirdwebProvider>
      <ConnectButton
        client={client}
        accountAbstraction={{
          chain, // chain where your smart accounts will be deployed
          factoryAddress: "0x...", // your deployed factory address
          gasless: true, // enable or disable gasless transactions
        }}
      />
    </ThirdwebProvider>
  );
}

For more resources, check out the documentation.