Skip to content

Commit bc9a38e

Browse files
joaquim-vergesgregfromstl
joaquim-verges
authored and
gregfromstl
committed
Refactor React guides in portal
1 parent 0e5d120 commit bc9a38e

File tree

8 files changed

+614
-465
lines changed

8 files changed

+614
-465
lines changed

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

Lines changed: 88 additions & 61 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";
1112
import { WalletsSmartIcon } 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="Live Playground"
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,79 @@ 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-
124-
### Demos
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+
```
125154

126-
Learn by example with these open-source demos:
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>
127158

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-
/>
159+
Refer to the [smartWallet documentation](/react/v5/smart-wallet) for more advanced configuration of your smart accounts.

‎apps/portal/src/app/react/v5/connecting-wallets/hooks/page.mdx‎

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

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

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

49-
## Post Connection
49+
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.
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+
<Stack>
52+
53+
<ArticleIconCard
54+
title="createWallet"
55+
icon={Wallet}
56+
href="/references/typescript/v5/createWallet"
57+
description="Create any external wallet by id with auto completion"
58+
/>
59+
60+
<ArticleIconCard
61+
title="useConnect"
62+
icon={Wallet}
63+
href="/references/typescript/v5/useConnect"
64+
description="Hook to connect any created wallet"
65+
/>
66+
67+
<ArticleIconCard
68+
title="useAutoConnect"
69+
icon={Wallet}
70+
href="/references/typescript/v5/useConnect"
71+
description="Hook to auto connect a previously connected wallet"
72+
/>
73+
74+
<ArticleIconCard
75+
title="useConnectModal"
76+
icon={Wallet}
77+
href="/references/typescript/v5/useConnectModal"
78+
description="Hook to open a prebuilt connection modal from your own components "
79+
/>
80+
81+
</Stack>
82+
83+
## Post Connection Hooks
84+
85+
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.
86+
87+
<Stack>
88+
89+
<ArticleIconCard
90+
title="useActiveAccount"
91+
icon={Wallet}
92+
href="/references/typescript/v5/useActiveAccount"
93+
description="Get the currently connected account"
94+
/>
95+
96+
<ArticleIconCard
97+
title="useActiveWallet"
98+
icon={Wallet}
99+
href="/references/typescript/v5/useActiveWallet"
100+
description="Get the currently connected wallet"
101+
/>
102+
103+
<ArticleIconCard
104+
title="useConnectedWallets"
105+
icon={Wallet}
106+
href="/references/typescript/v5/useConnectedWallets"
107+
description="Get all connected wallets"
108+
/>
109+
110+
<ArticleIconCard
111+
title="useAdminWallet"
112+
icon={Wallet}
113+
href="/references/typescript/v5/useConnectedWallets"
114+
description="Get the underlying admin wallet of a smart account"
115+
/>
116+
117+
</Stack>

‎apps/portal/src/app/react/v5/connecting-wallets/ui-components/page.mdx‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ArticleIconCard, createMetadata, DocImage, Stack } from "@doc";
22
import { Wallet2Icon } from "lucide-react";
33
import ConnectWalletHeroImage from "../../components/ConnectButton/images/connect-wallet-hero.webp";
4-
import { ComponentIcon } from "lucide-react";
4+
import { ComponentIcon, Wallet } from "lucide-react";
55

66
export const metadata = createMetadata({
77
image: {
@@ -17,13 +17,44 @@ export const metadata = createMetadata({
1717

1818
You can use [`ConnectButton`](/react/v5/ConnectButton) or [`ConnectEmbed`](/react/v5/ConnectEmbed) component for a quick, easy and customizable UI.
1919

20-
These components provide a beautiful UI for connecting various wallets and take care of a lot of wallet-specific edge cases - so you can focus on building your app.
20+
These components provide a prebuilt UI for connecting various wallets and take care of a lot of wallet-specific edge cases - so you can focus on building your app.
2121

22-
These components support over 300+ wallets, including support in-app wallets and account abstraction.
22+
```tsx
23+
import { createThirdwebClient } from "thirdweb";
24+
import { ThirdwebProvider, ConnectButton } from "thirdweb/react";
25+
26+
const client = createThirdwebClient({ clientId });
27+
28+
export default function App() {
29+
return (
30+
<ThirdwebProvider>
31+
<ConnectButton client={client} />
32+
</ThirdwebProvider>
33+
);
34+
}
35+
```
36+
37+
These components support over 350+ wallets, including support in-app wallets and account abstraction.
2338

2439
It also automatically shows all installed `EIP-6963` compliant wallet extensions installed by the user.
2540

26-
<DocImage src={ConnectWalletHeroImage} />
41+
<Stack>
42+
43+
<ArticleIconCard
44+
title="ConnectButton"
45+
icon={Wallet}
46+
href="/references/typescript/v5/ConnectButton"
47+
description="All in one button with connected state"
48+
/>
49+
50+
<ArticleIconCard
51+
title="ConnectEmbed"
52+
icon={Wallet}
53+
href="/references/typescript/v5/ConnectButton"
54+
description="Standalone connect component"
55+
/>
56+
57+
</Stack>
2758

2859
The SDK supports 350+ wallets out of the box, all you need to pass is their id.
2960

0 commit comments

Comments
 (0)