This repository has been archived by the owner on Aug 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 150
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Account Abstraction documentation for 'Get Started' and 'Build Yo…
…ur Own UI' guides (#549)
- Loading branch information
1 parent
397b0ef
commit 9a92d9f
Showing
11 changed files
with
810 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
src/app/react/v5/account-abstraction/batching-transactions/page.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| 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. | ||
|
|
||
| ```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); | ||
| }; | ||
| ``` |
139 changes: 139 additions & 0 deletions
139
src/app/react/v5/account-abstraction/build-your-own-ui/page.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"} | ||
| /> |
Oops, something went wrong.