AutoConnectProps
type AutoConnectProps = { appMetadata?: AppMetadata; onTimeout?: () => void; siweAuth?: { doLogin: () => Promise<void>; isLoggedIn: boolean | undefined; isLoggingIn: boolean | undefined; requiresAuth: boolean; }; timeout?: number;};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; }}/>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",};Optional chain to autoconnect to
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>",});let wallet: { id: TWalletId; onConnectRequested?: () => Promise<void>; autoConnect: ( connect: ( disconnect: () => Promise<void>; getChain: () => | undefined switchChain: (chain: Readonly) => Promise<void>;};type siweAuth = { doLogin: () => Promise<void>; isLoggedIn: boolean | undefined; isLoggingIn: boolean | undefined; requiresAuth: boolean;};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
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} />;}