Skip to content

Commit 17488b8

Browse files
joaquim-vergesjoaquim-verges
authored
[Documentation] Refactor: React guides (#5375)
1 parent 776f5aa commit 17488b8

File tree

30 files changed

+1899
-577
lines changed

30 files changed

+1899
-577
lines changed

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

Lines changed: 98 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import {
66
createMetadata,
77
Steps,
88
Step,
9+
Stack,
910
} from "@doc";
1011
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
11-
import { WalletsSmartIcon } from "@/icons";
12+
import { WalletsSmartIcon, TypeScriptIcon } from "@/icons";
13+
import { ExternalLink } from "lucide-react";
1214

1315
export const metadata = createMetadata({
1416
image: {
@@ -20,40 +22,42 @@ export const metadata = createMetadata({
2022
"Getting started to add ERC-4337 Account Abstraction support to your application easily.",
2123
});
2224

23-
# Getting Started
25+
# ERC-4337 Smart Accounts
2426

25-
Getting started to add ERC-4337 compatible smart accounts to your application easily.
26-
27-
Once set, your application will:
27+
Convert any wallet to a ERC-4337 smart account to your application.
2828

2929
- Let users **connect to their smart account** using any personal wallet, including in-app wallets for easy onboarding.
3030
- 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.
31+
- **Sponsor gas costs for all transactions** via the thirdweb paymaster.
3232

33-
<Steps>
34-
<Step title="Get a free API key">
3533

36-
You will require an API key to use thirdweb's infrastructure services such as the bundler and paymaster.
34+
<Callout title="Sponsored transactions" variant="info">
3735

38-
Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
36+
To set up sponsored transactions, set the `sponsorGas` option to `true` in the smart account configuration.
37+
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.
3938

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).
39+
</Callout>
4140

42-
Learn more about creating an API key and restricting which contracts the smart account can interact with [here](/api-keys).
41+
## Live Playground
4342

44-
</Step>
45-
<Step title="Connect smart accounts in your application">
43+
Try out in-app wallets for yourself in the [in-app wallet live playground](https://playground.thirdweb.com/connect/account-abstraction/connect)
4644

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.
45+
<Stack>
4846

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.
47+
<ArticleIconCard
48+
title="Try the demo"
49+
icon={ExternalLink}
50+
href="https://playground.thirdweb.com/connect/account-abstraction/connect"
51+
description="See the SDK in action on the live playground"
52+
/>
5053

51-
<Callout title="Sponsored transactions" variant="info">
54+
</Stack>
5255

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.
56+
## Usage with Connect UI components
5557

56-
</Callout>
58+
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.
59+
60+
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.
5761

5862
```tsx
5963
import { createThirdwebClient } from "thirdweb";
@@ -77,56 +81,90 @@ return (
7781
);
7882
}
7983
```
80-
</Step>
81-
<Step title="Executing Transactions with Smart Accounts">
8284

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.
85+
You can also make it so *only* in-app wallets get converted to smart accounts, by configuring the in-app wallet individually. Other external wallets will not be converted to smart accounts with this setup.
8486

8587
```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-
);
88+
import { createThirdwebClient } from "thirdweb";
89+
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
90+
91+
const client = createThirdwebClient({
92+
clientId: "YOUR_CLIENT_ID",
93+
});
94+
95+
const wallets = [inAppWallet({
96+
// only configure smart accounts for in-app wallets
97+
smartAccount: {
98+
chain: sepolia,
99+
sponsorGas: true
100+
}
101+
}),
102+
// other external wallets will not become smart accounts
103+
createWallet("io.metamask"),
104+
createWallet("rainbow.me"),
105+
];
106+
107+
export default function App() {
108+
return (
109+
<ThirdwebProvider>
110+
<ConnectButton
111+
client={client}
112+
wallets={wallets}
113+
/>
114+
</ThirdwebProvider>
115+
);
112116
}
113117
```
114118

115-
</Step>
116-
</Steps>
117-
118-
### Build your own UI
119+
## Usage with your own UI
119120

120121
You can also use the connection hooks and functions to connect to your smart accounts and build your fully custom UI.
121122

122-
See the [Build your own UI](/react/v5/account-abstraction/build-your-own-ui) guide for more information.
123+
```tsx
124+
import { useConnect } from "thirdweb/react";
125+
import { inAppWallet } from "thirdweb/wallets";
126+
import { sepolia } from "thirdweb/chains";
127+
128+
function App() {
129+
// 1. set the `accountAbstraction` configuration to convert wallets to smart accounts
130+
const { connect } = useConnect({
131+
client,
132+
accountAbstraction: {
133+
chain: sepolia, // the chain where your smart accounts will be or is deployed
134+
sponsorGas: true, // enable or disable sponsored transactions
135+
},
136+
});
137+
138+
const connectToSmartAccount = async () => {
139+
// 2. connect with the admin wallet of the smart account
140+
connect(async () => {
141+
const wallet = inAppWallet(); // or any other wallet
142+
await wallet.connect({
143+
client,
144+
chain: sepolia,
145+
strategy: "google",
146+
});
147+
return wallet;
148+
});
149+
};
150+
151+
return <button onClick={() => connectToSmartAccount()}>Connect</button>;
152+
}
153+
```
154+
155+
<Callout title="Auto connection of smart accounts" variant="info">
156+
When building your own UI, remember to also pass the `accountAbstraction` prop to `useAutoConnect` to always reconnect to the smart account on page reload.
157+
</Callout>
123158

124-
### Demos
159+
Refer to the [Smart Wallet API reference](/references/typescript/v5/smartWallet) for more advanced configuration of your smart accounts.
125160

126-
Learn by example with these open-source demos:
161+
<Stack>
127162

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"}
163+
<ArticleIconCard
164+
title="Smart Wallet API reference"
165+
icon={TypeScriptIcon}
166+
href="/references/typescript/v5/smartWallet"
167+
description="More advanced configuration of your smart accounts"
132168
/>
169+
170+
</Stack>

‎apps/portal/src/app/react/v5/account-abstraction/permissions/page.mdx

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
2-
import { createMetadata } from "@doc";
2+
import { createMetadata, Stack, ArticleIconCard } from "@doc";
33
import { V4SDKbanner } from "@/components/others/V4SDKBanner";
4+
import { TypeScriptIcon } from "@/icons";
45

56
export const metadata = createMetadata({
67
image: {
7-
title: "Account Permissions & Session Keys",
8+
title: "Permissions & Session Keys",
89
icon: "thirdweb",
910
},
1011
title: "Account Permissions & Session Keys | thirdweb",
@@ -14,11 +15,9 @@ export const metadata = createMetadata({
1415

1516
# Account Permissions & Session Keys
1617

17-
All of the account contracts - [Simple](https://thirdweb.com/thirdweb.eth/AccountFactory) and [Managed](https://thirdweb.com/thirdweb.eth/ManagedAccountFactory) - share the same permission model. In this section, we'll describe this permission model in detail.
18+
A [smart account](/react/v5/account-abstraction/get-started) can have two types of actors: _Session Keys_ and _Admins_.
1819

19-
An account recognizes only two types of actors: _Session Keys_ and _Admins_.
20-
21-
## 1. Admins
20+
## Admins
2221

2322
Admins have **unrestricted access** to the account; call any functions on the contract, use the contract without going through the ERC-4337 infrastructure (bundlers, EntryPoint, etc.), withdraw the account's native token balance, and so on.
2423

@@ -49,7 +48,33 @@ const onClick = () => {
4948
};
5049
```
5150

52-
## 2. Session Keys
51+
Check out the [API reference](/references/typescript/v5/erc4337/addAdmin) function for more information.
52+
53+
<Stack>
54+
55+
<ArticleIconCard
56+
title="addAdmin"
57+
icon={TypeScriptIcon}
58+
href="/references/typescript/v5/erc4337/addAdmin"
59+
description="Function to add a new admin to the account"
60+
/>
61+
62+
<ArticleIconCard
63+
title="getAllAdmins"
64+
icon={TypeScriptIcon}
65+
href="/references/typescript/v5/erc4337/getAllAdmins"
66+
description="Function to get all admins of the account"
67+
/>
68+
69+
<ArticleIconCard
70+
title="removeAdmin"
71+
icon={TypeScriptIcon}
72+
href="/references/typescript/v5/erc4337/removeAdmin"
73+
description="Function to remove an admin from the account"
74+
/>
75+
</Stack>
76+
77+
## Session Keys
5378

5479
Session Keys are additional authorized signers that must go through ERC-4337 infrastructure (bundlers, EntryPoint, etc.) to use an account to execute transactions. Session keys can use an account under certain restrictions.
5580

@@ -91,3 +116,36 @@ const onClick = () => {
91116
sendTransaction(transaction);
92117
};
93118
```
119+
120+
Check out the [API reference](/references/typescript/v5/erc4337/addSessionKey) for more information.
121+
122+
<Stack>
123+
124+
<ArticleIconCard
125+
title="addSessionKey"
126+
icon={TypeScriptIcon}
127+
href="/references/typescript/v5/erc4337/addSessionKey"
128+
description="Function to add a new session key to the account"
129+
/>
130+
131+
<ArticleIconCard
132+
title="getAllActiveSigners"
133+
icon={TypeScriptIcon}
134+
href="/references/typescript/v5/erc4337/getAllActiveSigners"
135+
description="Function to get all session keys of the account"
136+
/>
137+
138+
<ArticleIconCard
139+
title="getPermissionsForSigner"
140+
icon={TypeScriptIcon}
141+
href="/references/typescript/v5/erc4337/getPermissionsForSigner"
142+
description="Function to get the permissions assigned to a session key"
143+
/>
144+
145+
<ArticleIconCard
146+
title="removeSessionKey"
147+
icon={TypeScriptIcon}
148+
href="/references/typescript/v5/erc4337/removeSessionKey"
149+
description="Function to remove a session key from the account"
150+
/>
151+
</Stack>

0 commit comments

Comments
 (0)