Add Account Abstraction documentation for 'Get Started' and 'Build Yo…

…ur Own UI' guides

src/app/react/v5/account-abstraction/build-your-own-ui/page.mdx

@@ -0,0 +1,139 @@
+import {
+	Grid,
+	Callout,
+	OpenSourceCard,
+	ArticleIconCard,
+	createMetadata,
+	Steps,
+	Step,
+} from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { WalletsSmartIcon } from "@/icons";
+
+export const metadata = createMetadata({
+	image: {
+		title: "Build a custom UI for connecting smart accounts",
+		icon: "wallets",
+	},
+	title: "Build a custom UI for smart accounts | thirdweb",
+	description:
+		"You have full control with the connection hooks and functions to build your own UI",
+});
+
+# Build your own UI
+
+You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.
+
+<Steps>
+<Step title="Get a free API key">
+
+You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
+
+Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
+
+The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for smart accounts to operate and optionally enable [gasless transactions](/glossary/gasless-transactions).
+
+Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
+
+</Step>
+<Step title="Connect smart accounts in your application">
+
+Using `useConnect`, you can pass the `accountAbstraction` prop to automatically convert any connected wallet to a smart account.
+
+The connected wallet will be the admin wallet of the smart account.
+
+<Callout title="Sponsored transactions" variant="info">
+
+To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
+All transactions performed with the smart account will then be sponsored by your application. Testnet transactions are free, but you need a valid credit card on file for mainnet transactions.
+
+</Callout>
+
+```tsx
+import { useConnect } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets";
+import { sepolia } from "thirdweb/chains";
+
+function App() {
+	// 1. set the `accountAbstraction` configuration
+	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 = inAppWallet(); // or any other wallet
+			await wallet.connect({
+				client,
+				chain: sepolia,
+				strategy: "google",
+			});
+			return wallet;
+		});
+	};
+
+	return <button onClick={() => connectToSmartAccount()}>Connect</button>;
+}
+```
+
+</Step>
+<Step title="Executing Transactions with Smart Accounts">
+
+Once setup, you can use the Connect [TypeScript](/typescript/v5), [React](/react/v5), or [React Native](/react-native/v5) SDKs to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.
+
+```tsx
+import { getContract } from "thirdweb";
+import { useActiveAccount, useSendTransaction } from "thirdweb/react";
+import { claimTo, balanceOf } from "thirdweb/extensions/erc721";
+
+const contract = getContract({ client, chain, address: "0x..." });
+
+// The ThirdwebProvider setup above already handles the connection to the smart account
+// Within the provider, you can use the SDK normally to interact with the blockchain
+export default function MyComponent() {
+	// Get the connected smart account
+	const smartAccount = useActiveAccount();
+	// Example read
+	const { data, isLoading } = useReadContract(
+		balanceOf,
+		{
+			contract,
+			owner: smartAccount.address,
+		},
+		{
+			enabled: !!smartAccount,
+		},
+	);
+	// Example write
+	const { mutate: sendTransaction, isPending } = useSendTransaction();
+	const mint = () => {
+		sendTransaction({
+			transaction: claimTo({
+				contract,
+				to: smartAccount.address,
+				quantity: 1n,
+			}),
+		});
+	};
+	// Mint a new NFT
+	return <button onClick={mint}>Mint NFT</button>;
+}
+```
+
+</Step>
+</Steps>
+
+### Demos
+
+Learn by example with these open-source demos:
+
+<OpenSourceCard
+	title="Account Abstraction Demos"
+	description="A reference implementation to create and interact with smart accounts."
+	href={"https://github.com/thirdweb-example/account-abstraction"}
+/>

src/app/react/v5/account-abstraction/get-started/page.mdx

@@ -0,0 +1,132 @@
+import {
+	Grid,
+	Callout,
+	OpenSourceCard,
+	ArticleIconCard,
+	createMetadata,
+	Steps,
+	Step,
+} from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { WalletsSmartIcon } from "@/icons";
+
+export const metadata = createMetadata({
+	image: {
+		title: "Get started with Account Abstraction",
+		icon: "wallets",
+	},
+	title: "Getting Started with Account Abstraction | thirdweb",
+	description:
+		"Getting started to add ERC-4337 Account Abstraction support to your application easily.",
+});
+
+# Getting Started
+
+Getting started to add ERC-4337 compatible smart accounts to your application easily.
+
+Once set, your application will:
+
+- Let users **connect to their smart account** using any personal wallet, including in-app wallets for easy onboarding.
+- Automatically **deploy individual account contracts** for your users when they do their first onchain transaction.
+- **Handle all transaction gas costs** via the thirdweb paymaster.
+
+<Steps>
+<Step title="Get a free API key">
+
+You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
+
+Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
+
+The API key lets you access thirdweb's bundler and paymaster infrastructure, which is required for smart accounts to operate and optionally enable [gasless transactions](/glossary/gasless-transactions).
+
+Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
+
+</Step>
+<Step title="Connect smart accounts in your application">
+
+The easiest way to get started with account abstraction is to use the [ConnectButton](/connect/sign-in/ConnectButton) component. Simply add the `accountAbstraction` property with the desired chain and whether to sponsor gas for your users.
+
+With this property, all connected wallets will be automatically converted to smart accounts. The connected wallet will be the admin wallet of the smart account.
+
+<Callout title="Sponsored transactions" variant="info">
+
+To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
+All transactions performed with the smart account will then be sponsored by your application. Testnet transactions are free, but you need a valid credit card on file for mainnet transactions.
+
+</Callout>
+
+```tsx
+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>
+  );
+}
+```
+</Step>
+<Step title="Executing Transactions with Smart Accounts">
+
+Once setup, you can use the rest of the Connect [React SDK](/react/latest) to deploy contracts, perform transactions, and manipulate smart accounts like any other wallet.
+
+```tsx
+import { getContract } from "thirdweb";
+import { useActiveAccount, TransactionButton } from "thirdweb/react";
+import { claimTo } from "thirdweb/extensions/erc721";
+
+const contract = getContract({ client, chain, address: "0x..." });
+
+// The ThirdwebProvider setup above already handles the connection to the smart account
+// Within the provider, you can use the SDK normally to interact with the blockchain
+export default function MyComponent() {
+	// Get the connected smart account
+	const smartAccount = useActiveAccount();
+	// Mint a new NFT
+	return (
+		<TransactionButton
+			transaction={() => {
+				if (!account) return;
+				return claimTo({
+					contract,
+					to: account.address,
+					quantity: 1n,
+				});
+			}}
+		>
+			Mint NFT
+		</TransactionButton>
+	);
+}
+```
+
+</Step>
+</Steps>
+
+### Build your own UI
+
+You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.
+
+See the [Build your own UI](/react/v5/account-abstraction/build-your-own-ui) guide for more information.
+
+### Demos
+
+Learn by example with these open-source demos:
+
+<OpenSourceCard
+	title="Account Abstraction Demos"
+	description="A reference implementation to create and interact with smart accounts."
+	href={"https://github.com/thirdweb-example/account-abstraction"}
+/>

src/app/react/v5/sidebar.tsx

@@ -161,6 +161,26 @@ export const sidebar: SideBar = {
 						})),
 					],
 				},
+				{
+					name: "Account Abstraction",
+					links: [
+						{
+							name: "Get Started",
+							href: `${slug}/account-abstraction/get-started`,
+							icon: <Book />,
+						},
+						{
+							name: "Build your own UI",
+							href: `${slug}/account-abstraction/build-your-own-ui`,
+							icon: <Book />,
+						},
+						{
+							name: "Core API",
+							href: "/typescript/v5/smartWallet",
+							icon: <TypeScriptIcon />,
+						},
+					],
+				},
 				{
 					name: "All Supported Wallets",
 					href: "/typescript/v5/supported-wallets",