AutoConnectProps

Enable Account abstraction for all wallets. This will connect to the users's smart account based on the connected personal wallet and the given options.

If you are connecting to smart wallet using personal wallet - setting this configuration will autoConnect the personal wallet and then connect to the smart wallet.

<AutoConnect
  accountAbstraction={{
   factoryAddress: "0x123...",
   chain: sepolia,
   gasless: true;
  }}
/>

type accountAbstraction = SmartWalletOptions;

Metadata of the app that will be passed to connected wallet. Setting this is highly recommended.

Some wallets display this information to the user when they connect to your app.

type appMetadata = AppMetadata;

{
  name: "My App",
  url: "https://my-app.com",
  description: "some description about your app",
  logoUrl: "https://path/to/my-app/logo.svg",
};

A client is the entry point to the thirdweb SDK. It is required for all other actions. You can create a client using the createThirdwebClient function. Refer to the Creating a Client documentation for more information.

You must provide a clientId or secretKey in order to initialize a client. Pass clientId if you want for client-side usage and secretKey for server-side usage.

import { createThirdwebClient } from "thirdweb";
 
const client = createThirdwebClient({
  clientId: "<your_client_id>",
});

type client = ThirdwebClient;

if the autoConnection does not succeed within given timeout in milliseconds, it will be cancelled.

By default, the timeout is set to 15000ms (15 seconds).

<AutoConnect
  client={client}
  autoConnect={{ timeout: 10000 }}
  wallets={wallets}
  appMetadata={appMetadata}
/>;

type timeout = number;

Array of wallets that your app uses

type wallets = Array<Wallet>;

import { AutoConnect } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";
 
const wallets = [
  inAppWallet(),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("me.rainbow"),
];
 
function Example() {
  return <AutoConnect client={client} wallets={wallets} />;
}