Skip to content
This repository was archived by the owner on Aug 5, 2024. It is now read-only.

Commit 210a360

Browse files
joaquim-vergesjoaquim-verges
committed
Add Account Abstraction documentation for 'Get Started' and 'Build Your Own UI' guides
1 parent 397b0ef commit 210a360

File tree

3 files changed

+291
-0
lines changed

3 files changed

+291
-0
lines changed

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

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import {
2+
Grid,
3+
Callout,
4+
OpenSourceCard,
5+
ArticleIconCard,
6+
createMetadata,
7+
Steps,
8+
Step,
9+
} from "@doc";
10+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
11+
import { WalletsSmartIcon } from "@/icons";
12+
13+
export const metadata = createMetadata({
14+
image: {
15+
title: "Build a custom UI for connecting smart accounts",
16+
icon: "wallets",
17+
},
18+
title: "Build a custom UI for smart accounts | thirdweb",
19+
description:
20+
"You have full control with the connection hooks and functions to build your own UI",
21+
});
22+
23+
# Build your own UI
24+
25+
You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.
26+
27+
<Steps>
28+
<Step title="Get a free API key">
29+
30+
You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
31+
32+
Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
33+
34+
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).
35+
36+
Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
37+
38+
</Step>
39+
<Step title="Connect smart accounts in your application">
40+
41+
Using `useConnect`, you can pass the `accountAbstraction` prop to automatically convert any connected wallet to a smart account.
42+
43+
The connected wallet will be the admin wallet of the smart account.
44+
45+
<Callout title="Sponsored transactions" variant="info">
46+
47+
To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
48+
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.
49+
50+
</Callout>
51+
52+
```tsx
53+
import { useConnect } from "thirdweb/react";
54+
import { inAppWallet } from "thirdweb/wallets";
55+
import { sepolia } from "thirdweb/chains";
56+
57+
function App() {
58+
// 1. set the `accountAbstraction` configuration
59+
const { connect } = useConnect({
60+
client,
61+
accountAbstraction: {
62+
chain: sepolia, // the chain where your smart accounts will be or is deployed
63+
sponsorGas: true, // enable or disable sponsored transactions
64+
},
65+
});
66+
67+
const connectToSmartAccount = async () => {
68+
// 2. connect with the admin wallet of the smart account
69+
connect(async () => {
70+
const wallet = inAppWallet(); // or any other wallet
71+
await wallet.connect({
72+
client,
73+
chain: sepolia,
74+
strategy: "google",
75+
});
76+
return wallet;
77+
});
78+
};
79+
80+
return <button onClick={() => connectToSmartAccount()}>Connect</button>;
81+
}
82+
```
83+
84+
</Step>
85+
<Step title="Executing Transactions with Smart Accounts">
86+
87+
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.
88+
89+
```tsx
90+
import { getContract } from "thirdweb";
91+
import { useActiveAccount, useSendTransaction } from "thirdweb/react";
92+
import { claimTo, balanceOf } from "thirdweb/extensions/erc721";
93+
94+
const contract = getContract({ client, chain, address: "0x..." });
95+
96+
// The ThirdwebProvider setup above already handles the connection to the smart account
97+
// Within the provider, you can use the SDK normally to interact with the blockchain
98+
export default function MyComponent() {
99+
// Get the connected smart account
100+
const smartAccount = useActiveAccount();
101+
// Example read
102+
const { data, isLoading } = useReadContract(
103+
balanceOf,
104+
{
105+
contract,
106+
owner: smartAccount.address,
107+
},
108+
{
109+
enabled: !!smartAccount,
110+
},
111+
);
112+
// Example write
113+
const { mutate: sendTransaction, isPending } = useSendTransaction();
114+
const mint = () => {
115+
sendTransaction({
116+
transaction: claimTo({
117+
contract,
118+
to: smartAccount.address,
119+
quantity: 1n,
120+
}),
121+
});
122+
};
123+
// Mint a new NFT
124+
return <button onClick={mint}>Mint NFT</button>;
125+
}
126+
```
127+
128+
</Step>
129+
</Steps>
130+
131+
### Demos
132+
133+
Learn by example with these open-source demos:
134+
135+
<OpenSourceCard
136+
title="Account Abstraction Demos"
137+
description="A reference implementation to create and interact with smart accounts."
138+
href={"https://github.com/thirdweb-example/account-abstraction"}
139+
/>

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

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import {
2+
Grid,
3+
Callout,
4+
OpenSourceCard,
5+
ArticleIconCard,
6+
createMetadata,
7+
Steps,
8+
Step,
9+
} from "@doc";
10+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
11+
import { WalletsSmartIcon } from "@/icons";
12+
13+
export const metadata = createMetadata({
14+
image: {
15+
title: "Get started with Account Abstraction",
16+
icon: "wallets",
17+
},
18+
title: "Getting Started with Account Abstraction | thirdweb",
19+
description:
20+
"Getting started to add ERC-4337 Account Abstraction support to your application easily.",
21+
});
22+
23+
# Getting Started
24+
25+
Getting started to add ERC-4337 compatible smart accounts to your application easily.
26+
27+
Once set, your application will:
28+
29+
- Let users **connect to their smart account** using any personal wallet, including in-app wallets for easy onboarding.
30+
- Automatically **deploy individual account contracts** for your users when they do their first onchain transaction.
31+
- **Handle all transaction gas costs** via the thirdweb paymaster.
32+
33+
<Steps>
34+
<Step title="Get a free API key">
35+
36+
You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
37+
38+
Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
39+
40+
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).
41+
42+
Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
43+
44+
</Step>
45+
<Step title="Connect smart accounts in your application">
46+
47+
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.
48+
49+
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.
50+
51+
<Callout title="Sponsored transactions" variant="info">
52+
53+
To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
54+
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.
55+
56+
</Callout>
57+
58+
```tsx
59+
import { createThirdwebClient } from "thirdweb";
60+
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
61+
62+
const client = createThirdwebClient({
63+
clientId: "YOUR_CLIENT_ID",
64+
});
65+
66+
export default function App() {
67+
return (
68+
<ThirdwebProvider>
69+
<ConnectButton
70+
client={client}
71+
accountAbstraction={{
72+
chain: sepolia, // the chain where your smart accounts will be or is deployed
73+
sponsorGas: true // enable or disable sponsored transactions
74+
}}
75+
/>
76+
</ThirdwebProvider>
77+
);
78+
}
79+
```
80+
</Step>
81+
<Step title="Executing Transactions with Smart Accounts">
82+
83+
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.
84+
85+
```tsx
86+
import { getContract } from "thirdweb";
87+
import { useActiveAccount, TransactionButton } from "thirdweb/react";
88+
import { claimTo } from "thirdweb/extensions/erc721";
89+
90+
const contract = getContract({ client, chain, address: "0x..." });
91+
92+
// The ThirdwebProvider setup above already handles the connection to the smart account
93+
// Within the provider, you can use the SDK normally to interact with the blockchain
94+
export default function MyComponent() {
95+
// Get the connected smart account
96+
const smartAccount = useActiveAccount();
97+
// Mint a new NFT
98+
return (
99+
<TransactionButton
100+
transaction={() => {
101+
if (!account) return;
102+
return claimTo({
103+
contract,
104+
to: account.address,
105+
quantity: 1n,
106+
});
107+
}}
108+
>
109+
Mint NFT
110+
</TransactionButton>
111+
);
112+
}
113+
```
114+
115+
</Step>
116+
</Steps>
117+
118+
### Build your own UI
119+
120+
You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.
121+
122+
See the [Build your own UI](/react/v5/account-abstraction/build-your-own-ui) guide for more information.
123+
124+
### Demos
125+
126+
Learn by example with these open-source demos:
127+
128+
<OpenSourceCard
129+
title="Account Abstraction Demos"
130+
description="A reference implementation to create and interact with smart accounts."
131+
href={"https://github.com/thirdweb-example/account-abstraction"}
132+
/>

‎src/app/react/v5/sidebar.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,26 @@ export const sidebar: SideBar = {
161161
})),
162162
],
163163
},
164+
{
165+
name: "Account Abstraction",
166+
links: [
167+
{
168+
name: "Get Started",
169+
href: `${slug}/account-abstraction/get-started`,
170+
icon: <Book />,
171+
},
172+
{
173+
name: "Build your own UI",
174+
href: `${slug}/account-abstraction/build-your-own-ui`,
175+
icon: <Book />,
176+
},
177+
{
178+
name: "Core API",
179+
href: "/typescript/v5/smartWallet",
180+
icon: <TypeScriptIcon />,
181+
},
182+
],
183+
},
164184
{
165185
name: "All Supported Wallets",
166186
href: "/typescript/v5/supported-wallets",

0 commit comments

Comments
 (0)