From 210a360dc500e6e03d8f29af75eb34557b30fbfe Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Fri, 2 Aug 2024 21:11:56 +1200 Subject: [PATCH] Add Account Abstraction documentation for 'Get Started' and 'Build Your Own UI' guides --- .../build-your-own-ui/page.mdx | 139 ++++++++++++++++++ .../account-abstraction/get-started/page.mdx | 132 +++++++++++++++++ src/app/react/v5/sidebar.tsx | 20 +++ 3 files changed, 291 insertions(+) create mode 100644 src/app/react/v5/account-abstraction/build-your-own-ui/page.mdx create mode 100644 src/app/react/v5/account-abstraction/get-started/page.mdx diff --git a/src/app/react/v5/account-abstraction/build-your-own-ui/page.mdx b/src/app/react/v5/account-abstraction/build-your-own-ui/page.mdx new file mode 100644 index 00000000..4b7b33fc --- /dev/null +++ b/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. + + + + +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). + + + + +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. + + + +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. + + + +```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 ; +} +``` + + + + +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 ; +} +``` + + + + +### Demos + +Learn by example with these open-source demos: + + diff --git a/src/app/react/v5/account-abstraction/get-started/page.mdx b/src/app/react/v5/account-abstraction/get-started/page.mdx new file mode 100644 index 00000000..2a1539bc --- /dev/null +++ b/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. + + + + +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). + + + + +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. + + + +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. + + + +```tsx +import { createThirdwebClient } from "thirdweb"; +import { ThirdwebProvider, ConnectButton } from "thirdweb/react"; + +const client = createThirdwebClient({ +clientId: "YOUR_CLIENT_ID", +}); + +export default function App() { +return ( + + + + ); +} +``` + + + +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 ( + { + if (!account) return; + return claimTo({ + contract, + to: account.address, + quantity: 1n, + }); + }} + > + Mint NFT + + ); +} +``` + + + + +### 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: + + diff --git a/src/app/react/v5/sidebar.tsx b/src/app/react/v5/sidebar.tsx index fae033f3..1efa5c5c 100644 --- a/src/app/react/v5/sidebar.tsx +++ b/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: , + }, + { + name: "Build your own UI", + href: `${slug}/account-abstraction/build-your-own-ui`, + icon: , + }, + { + name: "Core API", + href: "/typescript/v5/smartWallet", + icon: , + }, + ], + }, { name: "All Supported Wallets", href: "/typescript/v5/supported-wallets",