Skip to content

Commit 6301fa0

Browse files
joaquim-vergesjoaquim-verges
committed
Refactor React guides in portal
1 parent 7973d64 commit 6301fa0

File tree

15 files changed

+717
-465
lines changed

15 files changed

+717
-465
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/connecting-wallets/hooks/page.mdx‎

Lines changed: 110 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ArticleIconCard, createMetadata, DocImage, Stack } from "@doc";
2-
import { Wallet2Icon } from "lucide-react";
3-
import { ComponentIcon } from "lucide-react";
2+
import { Wallet2Icon, ComponentIcon, Wallet } from "lucide-react";
3+
import { ReactIcon } from "@/icons";
44

55
export const metadata = createMetadata({
66
image: {
@@ -44,8 +44,113 @@ function Example() {
4444
}
4545
```
4646

47-
Refer to [`createWallet`](/references/typescript/v5/createWallet) and [`injectedProvider`](/references/typescript/v5/injectedProvider) for more information.
47+
## Creating Wallets
4848

49-
## Post Connection
49+
You can create any wallet by id with auto completion using the [`createWallet`](/references/typescript/v5/createWallet) function. Or use one of the first party wallets like [`inAppWallet`](/references/typescript/v5/inAppWallet) or [`ecosystemWallet`](/references/typescript/v5/ecosystemWallet).
5050

51-
Once the wallet is connected, you can use the [Wallet Connection hooks](/references/typescript/v5/hooks#wallet-connection) to get information about the connected wallet like getting the address, account, etc
51+
<ArticleIconCard
52+
title="inAppWallet"
53+
icon={Wallet}
54+
href="/references/typescript/v5/inAppWallet"
55+
description="Create an in app wallet"
56+
/>
57+
58+
<ArticleIconCard
59+
title="ecosystemWallet"
60+
icon={Wallet}
61+
href="/references/typescript/v5/ecosystemWallet"
62+
description="Create an ecosystem wallet"
63+
/>
64+
65+
<ArticleIconCard
66+
title="createWallet"
67+
icon={Wallet}
68+
href="/references/typescript/v5/createWallet"
69+
description="Create any external wallet by id with auto completion"
70+
/>
71+
72+
## Pre Connection Hooks
73+
74+
Use these hooks to trigger and manage wallet wallet connection within your own UI. Refer to [wallet connection hooks reference](/references/typescript/v5/useConnect) for more information.
75+
76+
<Stack>
77+
78+
<ArticleIconCard
79+
title="useConnect"
80+
icon={ReactIcon}
81+
href="/references/typescript/v5/useConnect"
82+
description="Hook to connect any created wallet"
83+
/>
84+
85+
<ArticleIconCard
86+
title="useAutoConnect"
87+
icon={ReactIcon}
88+
href="/references/typescript/v5/useConnect"
89+
description="Hook to auto connect a previously connected wallet"
90+
/>
91+
92+
<ArticleIconCard
93+
title="useConnectModal"
94+
icon={ReactIcon}
95+
href="/references/typescript/v5/useConnectModal"
96+
description="Hook to open a prebuilt connection modal UI from anywhere"
97+
/>
98+
99+
<ArticleIconCard
100+
title="useSwitchActiveWalletChain"
101+
icon={ReactIcon}
102+
href="/references/typescript/v5/useSwitchActiveWalletChain"
103+
description="Hook to switch the active wallet chain"
104+
/>
105+
106+
<ArticleIconCard
107+
title="useDisconnect"
108+
icon={ReactIcon}
109+
href="/references/typescript/v5/useDisconnect"
110+
description="Hook to disconnect the wallet"
111+
/>
112+
113+
</Stack>
114+
115+
## Post Connection Hooks
116+
117+
Once the wallet is connected, you can use the [wallet connection hooks](/references/typescript/v5/hooks#wallet-connection) to get information about the connected wallet like getting the address, account, etc.
118+
119+
<Stack>
120+
121+
<ArticleIconCard
122+
title="useActiveAccount"
123+
icon={ReactIcon}
124+
href="/references/typescript/v5/useActiveAccount"
125+
description="Get the currently connected account"
126+
/>
127+
128+
<ArticleIconCard
129+
title="useActiveWallet"
130+
icon={ReactIcon}
131+
href="/references/typescript/v5/useActiveWallet"
132+
description="Get the currently connected wallet"
133+
/>
134+
135+
<ArticleIconCard
136+
title="useWalletDetailsModal"
137+
icon={ReactIcon}
138+
href="/references/typescript/v5/useWalletDetailsModal"
139+
description="Show a prebuilt modal UI with wallet details from anywhere"
140+
/>
141+
142+
<ArticleIconCard
143+
title="useConnectedWallets"
144+
icon={ReactIcon}
145+
href="/references/typescript/v5/useConnectedWallets"
146+
description="Get all connected wallets"
147+
/>
148+
149+
<ArticleIconCard
150+
title="useAdminWallet"
151+
icon={ReactIcon}
152+
href="/references/typescript/v5/useConnectedWallets"
153+
description="Get the underlying admin wallet of a smart account"
154+
/>
155+
156+
</Stack>

0 commit comments

Comments
 (0)