Skip to content

Commit 00af0ed

Browse files
joaquim-vergesjoaquim-verges
authored
docs: Reorganize Connect SDK documentation structure and UI (#5816)
1 parent 1ed2f86 commit 00af0ed

File tree

16 files changed

+310
-317
lines changed

16 files changed

+310
-317
lines changed

‎apps/portal/src/app/connect/account-abstraction/erc-20-paymaster/page.mdx

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
1+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
22

33
# ERC-20 Paymaster
44

@@ -7,17 +7,20 @@ In traditional Ethereum transactions, users pay gas fees in the native cryptocur
77
### Get Started
88

99

10-
1. Install Connect SDK
11-
12-
```bash
13-
npm install thirdweb
14-
```
15-
16-
2. Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees.
10+
Configure the Paymaster In your SDK code, specify the ERC-20 token you wish to use for gas fees.
1711

1812
Currently you may use Lisk LSK, Base USDC or Celo CUSD.
1913

14+
<Tabs>
15+
16+
<TabsList>
17+
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
18+
<TabsTrigger value="react">React</TabsTrigger>
19+
<TabsTrigger value="dotnet">.NET</TabsTrigger>
20+
<TabsTrigger value="unity">Unity</TabsTrigger>
21+
</TabsList>
2022

23+
<TabsContent value="typescript">
2124
```tsx
2225
import { base, lisk, celo } from "thirdweb/chains";
2326
import { TokenPaymaster, smartWallet } from "thirdweb/wallets";
@@ -48,4 +51,52 @@ const cusdWallet = smartWallet({
4851
tokenPaymaster: TokenPaymaster.CELO_CUSD,
4952
},
5053
});
51-
```
54+
```
55+
</TabsContent>
56+
57+
<TabsContent value="react">
58+
```tsx
59+
import { base, lisk, celo } from "thirdweb/chains";
60+
import { TokenPaymaster, smartWallet } from "thirdweb/wallets";
61+
62+
// Have users pay for gas in Base USDC
63+
<ConnectButton
64+
client={client}
65+
accountAbstraction={{
66+
chain: base,
67+
sponsorGas: true,
68+
overrides: {
69+
tokenPaymaster: TokenPaymaster.BASE_USDC,
70+
},
71+
});
72+
```
73+
</TabsContent>
74+
75+
<TabsContent value="dotnet">
76+
```csharp
77+
var chainId = 1135; // lisk
78+
79+
var erc20SmartWallet = await SmartWallet.Create(
80+
personalWallet: privateKeyWallet,
81+
chainId: chainId,
82+
tokenPaymaster: TokenPaymaster.LISK_LSK
83+
);
84+
```
85+
</TabsContent>
86+
87+
<TabsContent value="unity">
88+
```csharp
89+
var chainId = 8453; // base
90+
91+
var erc20SmartWallet = await ConnectWallet(
92+
new WalletOptions(
93+
WalletProvider.InAppWallet,
94+
chainId,
95+
inAppWalletOptions: new InAppWalletOptions(authprovider: AuthProvider.Steam),
96+
smartWalletOptions: new SmartWalletOptions(sponsorGas: true, tokenPaymaster: TokenPaymaster.BASE_USDC)
97+
)
98+
);
99+
```
100+
</TabsContent>
101+
102+
</Tabs>

‎apps/portal/src/app/connect/page.mdx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import {
88
Stack,
99
ConnectCard,
1010
SDKCard,
11-
Callout
11+
Callout,
12+
ArticleIconCard,
1213
} from "@doc";
14+
import { ExternalLink } from "lucide-react";
1315
import { TypeScriptIcon, ReactIcon, DotNetIcon, UnityIcon, UnrealEngineIcon } from "@/icons";
1416
import { cn } from "@/lib/utils";
1517
import Link from "next/link";
@@ -28,29 +30,27 @@ export const metadata = createMetadata({
2830

2931
Connect is the complete toolkit for connecting every user to your application. It features customizable onboarding flows, self-custodial in-app wallets, account abstraction, onramps, and a performant API to interact with the blockchain.
3032

31-
<div
32-
className={cn(
33-
"my-4 grid gap-4 md:grid-cols-2 lg:grid-cols-2",
34-
props.className,
35-
)}
36-
>
37-
<ConnectCard
38-
title="Playground"
39-
href="https://playground.thirdweb.com"
40-
iconUrl="/icons/connect/intros/demo.svg"
41-
isExternal={true}
42-
/>
43-
<ConnectCard
44-
title="Templates"
45-
href="https://thirdweb.com/templates"
46-
iconUrl="/icons/connect/intros/quickstart.svg"
47-
/>
48-
</div>
33+
## Live Playground
34+
35+
You can interact with the React SDK in the [Live Playground](https://playground.thirdweb.com/).
4936

50-
### Quick starts
37+
<Stack>
38+
39+
<ArticleIconCard
40+
title="Try the demo"
41+
icon={ExternalLink}
42+
href="https://playground.thirdweb.com"
43+
description="See the SDK in action on the live playground"
44+
/>
45+
46+
</Stack>
47+
48+
## Quick starts
49+
50+
Get started with Connect in your preferred language.
5151

5252
<Grid>
53-
<SDKCard
53+
<SDKCard
5454
title="TypeScript"
5555
href="/typescript/v5/getting-started"
5656
icon={TypeScriptIcon}
@@ -82,9 +82,9 @@ Connect is the complete toolkit for connecting every user to your application. I
8282
/>
8383
</Grid>
8484

85-
### With Connect, you can
85+
## With Connect, you can
8686

87-
- **Connect to 350+ different wallet providers** with support for every EVM network
87+
- **Connect to 500+ different wallet providers** with support for every EVM network
8888
- **Log in and authenticate your users** with customizable and secure [email, phone, passkeys and social login](https://portal.thirdweb.com/connect/in-app-wallet/overview) flows.
8989
- **Sponsor transactions** to seamlessly onboard non-native or new crypto users with [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview).
9090
- **Perform wallet actions** like connecting and disconnecting wallets, viewing balance, displaying ENS names, and execute transactions with our [perfomant, reliable and type safe API](https://portal.thirdweb.com/connect/blockchain-api)
@@ -107,11 +107,11 @@ Connect is the complete toolkit for connecting every user to your application. I
107107
</div>
108108
</Callout>
109109

110-
### Supported Chains
110+
## Supported Chains
111111

112112
Connect is supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist).
113113

114-
### Starter Kits & demos
114+
## Starter Kits & demos
115115

116116
View all available starter kits, demos and templates on Github.
117117

‎apps/portal/src/app/connect/wallet/get-started/page.mdx

Lines changed: 42 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { Callout, OpenSourceCard, createMetadata, InstallTabs, ArticleIconCard } from "@doc";
1+
import { Callout, OpenSourceCard, createMetadata, InstallTabs, SDKCard, Grid, ArticleIconCard } from "@doc";
22
import {
33
ReactIcon,
44
TypeScriptIcon,
55
UnityIcon,
66
DotNetIcon,
7-
ExternalLinkIcon,
87
UnrealEngineIcon
98
} from "@/icons"
9+
import { ExternalLink } from "lucide-react";
1010

1111
export const metadata = createMetadata({
1212
image: {
@@ -27,13 +27,13 @@ thirdweb offers multiple ways to add wallets to your application. Choose the met
2727

2828
These methods can be used independently or together in the same application to provide the best experience for your users.
2929

30-
## Try the demo
30+
## Live Playground
3131

32-
We have a playground that lets you see all the various options via our prebuilt UI:
32+
Check out the playground that lets you see all the various capabilities of Connect.
3333

3434
<ArticleIconCard
35-
title="Connect demo"
36-
icon={ExternalLinkIcon}
35+
title="Try the demo"
36+
icon={ExternalLink}
3737
description="Play around with various wallet connection options"
3838
href="https://playground.thirdweb.com/connect/sign-in/button"
3939
/>
@@ -42,103 +42,40 @@ We have a playground that lets you see all the various options via our prebuilt
4242

4343
To use in-app wallets in your applications, you will need a client ID. You can get one for free on [your thirdweb dashboard](https://thirdweb.com/create-api-key).
4444

45-
## External Wallets
46-
47-
Connect to popular external wallets like Metamask, Rainbow, Coinbase, etc.
48-
49-
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
50-
<ArticleIconCard
51-
title="TypeScript"
52-
icon={TypeScriptIcon}
53-
href="/typescript/v5/createWallet"
54-
/>
55-
<ArticleIconCard
56-
title="React"
57-
icon={ReactIcon}
58-
href="/react/v5/connecting-wallets/ui-components"
59-
/>
60-
<ArticleIconCard
61-
title="React Native"
62-
icon={ReactIcon}
63-
href="/react-native/v5/ConnectButton"
64-
/>
65-
<ArticleIconCard
66-
title="Unity"
67-
icon={UnityIcon}
68-
href="/unity/v5/wallets/walletconnect"
69-
/>
70-
</div>
71-
72-
## In-App Wallets
73-
74-
Create in-app wallets with social/email/sms/passkey login.
75-
76-
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
77-
<ArticleIconCard
78-
title="TypeScript"
79-
icon={TypeScriptIcon}
80-
href="/typescript/v5/inAppWallet"
81-
/>
82-
<ArticleIconCard
83-
title="React"
84-
icon={ReactIcon}
85-
href="/react/v5/in-app-wallet/get-started"
86-
/>
87-
{/* TODO: Link to react native getting started for in appw allet */}
88-
<ArticleIconCard
89-
title="React Native"
90-
icon={ReactIcon}
91-
href="/react/v5/in-app-wallet/get-started"
92-
/>
93-
<ArticleIconCard
94-
title=".NET"
95-
icon={DotNetIcon}
96-
href="/dotnet/wallets/providers/in-app-wallet"
97-
/>
98-
<ArticleIconCard
99-
title="Unity"
100-
icon={UnityIcon}
101-
href="/unity/v5/wallets/in-app-wallet"
102-
/>
103-
<ArticleIconCard
104-
title="Unreal Engine"
105-
icon={UnrealEngineIcon}
106-
href="/unreal-engine/blueprints/in-app-wallet"
107-
/>
108-
</div>
109-
110-
## Ecosystem Wallets
111-
112-
If you're looking to set up an ecosystem from scratch, refer to the [set-up guide](/connect/wallet/ecosystem/set-up)
113-
114-
If you're looking to integrate ecosystem wallets in your aplication, refer to the following guides:
115-
116-
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
117-
<ArticleIconCard
118-
title="TypeScript"
119-
icon={TypeScriptIcon}
120-
href="/typescript/v5/ecosystemWallet"
121-
/>
122-
<ArticleIconCard
123-
title="React"
124-
icon={ReactIcon}
125-
href="/react/v5/ecosystem-wallet/get-started"
126-
/>
127-
{/* TODO: Add react native specific getting started for ecosystem wallets */}
128-
<ArticleIconCard
129-
title="React Native"
130-
icon={ReactIcon}
131-
href="/react/v5/ecosystem-wallet/get-started"
132-
/>
133-
<ArticleIconCard
134-
title=".NET"
135-
icon={DotNetIcon}
136-
href="/dotnet/wallets/providers/ecosystem-wallet"
137-
/>
138-
<ArticleIconCard
139-
title="Unity"
140-
icon={UnityIcon}
141-
href="/unity/v5/wallets/ecosystem-wallet"
142-
/>
143-
</div>
45+
## Pick your language
46+
47+
Start with Connect in your preferred language.
48+
49+
<Grid>
50+
<SDKCard
51+
title="TypeScript"
52+
href="/typescript/v5/getting-started"
53+
icon={TypeScriptIcon}
54+
/>
55+
<SDKCard
56+
title="React"
57+
href="/react/v5/getting-started"
58+
icon={ReactIcon}
59+
/>
60+
<SDKCard
61+
title="React Native"
62+
href="/react-native/v5/getting-started"
63+
icon={ReactIcon}
64+
/>
65+
<SDKCard
66+
title="DotNet"
67+
href="/dotnet/getting-started"
68+
icon={DotNetIcon}
69+
/>
70+
<SDKCard
71+
title="Unity"
72+
href="/unity/v5/getting-started"
73+
icon={UnityIcon}
74+
/>
75+
<SDKCard
76+
title="Unreal Engine"
77+
href="/unreal-engine/getting-started"
78+
icon={UnrealEngineIcon}
79+
/>
80+
</Grid>
14481

‎apps/portal/src/app/connect/wallet/overview/page.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const metadata = createMetadata({
1717

1818
A flexible sign-up flow that accommodates different preferences is critical when onboarding users. thirdweb offers multiple wallet solutions to meet various integration needs:
1919

20-
1. **External Wallets** - Traditional wallet connection with 350+ providers
20+
1. **External Wallets** - Traditional wallet connection with 500+ providers
2121
2. **In-App Wallet** - Seamless onboarding with email, social, and passkey options
2222
3. **Ecosystem Wallet** - Branded wallet service for cross-application authentication
2323

@@ -30,7 +30,7 @@ A flexible sign-up flow that accommodates different preferences is critical when
3030
>
3131
<FeatureCard
3232
title="Wallet Support"
33-
description="350+ wallet providers supported"
33+
description="500+ wallet providers supported"
3434
iconUrl="/icons/feature-cards/wallet.svg"
3535
/>
3636
<FeatureCard

0 commit comments

Comments
 (0)