add batch transactions page (#323)

src/app/connect/account-abstraction/batching-transactions/page.mdx

@@ -0,0 +1,90 @@
+import { createMetadata } from "@doc";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+# Batching transactions
+
+export const metadata = createMetadata({
+	image: {
+		title: "Batching transactions",
+		icon: "wallets",
+	},
+	title: "Batching transactions | thirdweb",
+	description: "How to batch transactions with smart accounts",
+});
+
+Batching transactions allows sending multiple transactions in a single user operation. This can be useful to save on fees, reduce number of user confimations or to ensure that multiple transactions are executed atomically.
+
+A typical example is to do an approval and a transfer in a single userOperation. This way, the transfer will only happen if the approval is successful.
+
+<Tabs defaultValue="react">
+
+<TabsList>
+	<TabsTrigger value="react">React</TabsTrigger>
+	<TabsTrigger value="typescript">TypeScript</TabsTrigger>
+</TabsList>
+
+<TabsContent value="react">
+
+```tsx
+import { useActiveAccount, useSendBatchTransaction } from "thirdweb/react";
+import { approve, transferFrom } from "thirdweb/extensions/erc20";
+
+const smartAccount = useActiveAccount();
+const { mutate: sendBatchTransaction } = useSendBatchTransaction();
+
+const approveAndTransfer = async () => {
+	const transactions = [
+		approve({
+			contract,
+			spender: "0x...",
+			value: 100,
+		}),
+		transferFrom({
+			contract,
+			from: "0x...",
+			to: "0x...",
+			amount: 100,
+		}),
+	];
+	await sendBatchTransaction(transactions);
+};
+```
+
+</TabsContent>
+
+<TabsContent value="typescript">
+
+```tsx
+import { smartWallet } from "thirdweb/wallets";
+import { sendBatchTransaction } from "thirdweb";
+import { approve, transferFrom } from "thirdweb/extensions/erc20";
+
+const smartWallet = new smartWallet(config);
+const smartAccount = await smartWallet.connect({
+	client,
+	personalAccount,
+});
+
+const transactions = [
+	approve({
+		contract,
+		spender: "0x...",
+		value: 100,
+	}),
+	transferFrom({
+		contract,
+		from: "0x...",
+		to: "0x...",
+		amount: 100,
+	}),
+];
+
+await sendBatchTransaction({
+	transactions,
+	account: smartAccount,
+});
+```
+
+</TabsContent>
+
+</Tabs>

src/app/connect/sidebar.tsx

@@ -161,6 +161,10 @@ export const sidebar: SideBar = {
 					name: "Permissions & Session Keys",
 					href: `${aAslug}/permissions`,
 				},
+				{
+					name: "Batching Transactions",
+					href: `${aAslug}/batching-transactions`,
+				},
 				{
 					name: "Bundler & Paymaster",
 					href: `${aAslug}/infrastructure`,