Skip to content

Commit db4179c

Browse files
ElasticBottleElasticBottle
committed
docs: add fresh getting started guides with relevant links to all supported SDK
1 parent 48567ad commit db4179c

File tree

9 files changed

+284
-88
lines changed

9 files changed

+284
-88
lines changed

‎apps/portal/src/app/connect/sidebar.tsx‎

Lines changed: 10 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,16 @@ export const sidebar: SideBar = {
106106
},
107107
{
108108
name: "Get Started",
109-
href: `${ecosystemSlug}/get-started`,
109+
links: [
110+
{
111+
name: "Overview",
112+
href: `${walletSlug}/get-started/overview`,
113+
},
114+
{
115+
name: "Setting up an ecosystem",
116+
href: `${walletSlug}/get-started/set-up-ecosystem`,
117+
},
118+
],
110119
},
111120
{
112121
name: "Sign-In Methods",
@@ -229,28 +238,6 @@ export const sidebar: SideBar = {
229238
name: "Sign-In",
230239
icon: <WalletsConnectIcon />,
231240
links: [
232-
{
233-
name: "Overview",
234-
href: `${connectSlug}/overview`,
235-
},
236-
{
237-
name: "Get Started",
238-
// expanded: true,
239-
links: [
240-
{
241-
name: "Connect Button",
242-
href: `${connectSlug}/ConnectButton`,
243-
},
244-
{
245-
name: "Connect Embed",
246-
href: `${connectSlug}/ConnectEmbed`,
247-
},
248-
{
249-
name: "Custom UI",
250-
href: `${connectSlug}/Custom-UI`,
251-
},
252-
],
253-
},
254241
{
255242
name: "Sign-In Methods",
256243
links: [
@@ -293,10 +280,6 @@ export const sidebar: SideBar = {
293280
},
294281
],
295282
},
296-
{
297-
name: "Playground",
298-
href: "https://playground.thirdweb.com/connect/sign-in/button",
299-
},
300283
],
301284
},
302285

@@ -305,45 +288,6 @@ export const sidebar: SideBar = {
305288
name: "In-App Wallet",
306289
icon: <WalletsInAppIcon />,
307290
links: [
308-
{
309-
name: "Overview",
310-
href: `${inAppSlug}/overview`,
311-
},
312-
{
313-
name: "Security",
314-
href: `${inAppSlug}/security`,
315-
},
316-
{
317-
name: "Get Started",
318-
links: [
319-
{
320-
name: "TypeScript",
321-
href: "/typescript/v5/inAppWallet",
322-
icon: <TypeScriptIcon />,
323-
},
324-
{
325-
name: "React",
326-
href: "/react/v5/in-app-wallet/get-started",
327-
icon: <ReactIcon />,
328-
},
329-
{
330-
name: "React Native",
331-
// TODO - add react-native dedicated page
332-
href: "/react/v5/in-app-wallet/get-started",
333-
icon: <ReactIcon />,
334-
},
335-
{
336-
name: "Dotnet",
337-
href: "/dotnet/wallets/providers/in-app-wallet",
338-
icon: <DotNetIcon />,
339-
},
340-
{
341-
name: "Unity",
342-
href: "/unity/wallets/providers/in-app-wallet",
343-
icon: <UnityIcon />,
344-
},
345-
],
346-
},
347291
{
348292
name: "Guides",
349293
links: [
@@ -395,29 +339,13 @@ export const sidebar: SideBar = {
395339
name: "Backend APIs",
396340
href: `${inAppSlug}/guides/get-user-details`,
397341
},
398-
{
399-
name: "FAQs",
400-
href: `${inAppSlug}/faqs`,
401-
},
402342
],
403343
},
404344
// Ecosystem Wallet
405345
{
406346
name: "Ecosystem Wallets",
407347
icon: <EcosystemWalletsIcon />,
408348
links: [
409-
{
410-
name: "Overview",
411-
href: `${ecosystemSlug}/overview`,
412-
},
413-
{
414-
name: "Security",
415-
href: `${ecosystemSlug}/security`,
416-
},
417-
{
418-
name: "Get Started",
419-
href: `${ecosystemSlug}/get-started`,
420-
},
421349
{
422350
name: "Managing Ecosystem Permissions",
423351
href: `${ecosystemSlug}/ecosystem-permissions`,
@@ -434,10 +362,6 @@ export const sidebar: SideBar = {
434362
name: "Ecosystem Wallet Explorer Page",
435363
href: `${ecosystemSlug}/wallet-explorer`,
436364
},
437-
{
438-
name: "FAQ",
439-
href: `${ecosystemSlug}/faq`,
440-
},
441365
],
442366
},
443367
//Account abstraction

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

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import { Callout, OpenSourceCard, createMetadata, InstallTabs, ArticleIconCard } from "@doc";
2+
import {
3+
ReactIcon,
4+
TypeScriptIcon,
5+
UnityIcon,
6+
DotNetIcon,
7+
ExternalLinkIcon,
8+
UnrealEngineIcon
9+
} from "@/icons"
10+
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
11+
12+
export const metadata = createMetadata({
13+
image: {
14+
title: "Get started with thirdweb Wallets",
15+
icon: "wallets",
16+
},
17+
title: "Get started with thirdweb Wallet",
18+
description: "Get started with thirdweb Wallet",
19+
});
20+
21+
# Get Started
22+
23+
thirdweb offers multiple ways to add wallets to your application. Choose the method that best suits your needs:
24+
25+
1. **External Wallets** - Connect to existing wallets like MetaMask, Coinbase Wallet, etc.
26+
2. **In-App Wallets** - Create wallets with social/email login.
27+
3. **Ecosystem Wallets** - Create wallets with social/email login that is shareable across various aplications.
28+
29+
These methods can be used independently or together in the same application to provide the best experience for your users.
30+
31+
## Try the demo
32+
33+
We have a playground that lets you see all the various options via our prebuilt UI:
34+
35+
<ArticleIconCard
36+
title="Connect demo"
37+
icon={ExternalLinkIcon}
38+
description="Play around with various wallet connection options"
39+
href="https://playground.thirdweb.com/connect/sign-in/button"
40+
/>
41+
42+
## Starting from existing project
43+
44+
Install the required package:
45+
46+
<InstallTabs
47+
npm="npm i thirdweb"
48+
yarn="yarn add thirdweb"
49+
pnpm="pnpm i thirdweb"
50+
bun="bun i thirdweb"
51+
/>
52+
53+
## Get your client ID
54+
55+
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).
56+
57+
## Connecting & Creating In-App Wallets
58+
59+
## External Wallets
60+
61+
Connect to popular external wallets:
62+
63+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
64+
<ArticleIconCard
65+
title="TypeScript"
66+
icon={TypeScriptIcon}
67+
description="Connect external wallets in TypeScript"
68+
href="/typescript/v5/createWallet"
69+
/>
70+
<ArticleIconCard
71+
title="React"
72+
icon={ReactIcon}
73+
description="Connect external wallets in React"
74+
href="/react/v5/connecting-wallets/ui-components"
75+
/>
76+
<ArticleIconCard
77+
title="React Native"
78+
icon={ReactIcon}
79+
description="Connect external wallets in React Native"
80+
href="/react-native/v5/ConnectButton"
81+
/>
82+
<ArticleIconCard
83+
title="Unity"
84+
icon={UnityIcon}
85+
description="Connect external wallets in Unity"
86+
href="/unity/v5/wallets/walletconnect"
87+
/>
88+
</div>
89+
90+
## In-App Wallets
91+
92+
Create in-app wallets with social/email/sms/passkey login via the following guides:
93+
94+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
95+
<ArticleIconCard
96+
title="TypeScript"
97+
icon={TypeScriptIcon}
98+
description="Implement in-app wallets in TypeScript"
99+
href="/typescript/v5/inAppWallet"
100+
/>
101+
<ArticleIconCard
102+
title="React"
103+
icon={ReactIcon}
104+
description="Implement in-app wallets in React"
105+
href="/react/v5/in-app-wallet/get-started"
106+
/>
107+
{/* TODO: Link to react native getting started for in appw allet */}
108+
<ArticleIconCard
109+
title="React Native"
110+
icon={ReactIcon}
111+
description="Implement in-app wallets in React Native"
112+
href="/react/v5/in-app-wallet/get-started"
113+
/>
114+
<ArticleIconCard
115+
title=".NET"
116+
icon={DotNetIcon}
117+
description="Connect in-app wallets in .NET"
118+
href="/dotnet/wallets/providers/in-app-wallet"
119+
/>
120+
<ArticleIconCard
121+
title="Unity"
122+
icon={UnityIcon}
123+
description="Implement in-app wallets in Unity"
124+
href="/unity/v5/wallets/in-app-wallet"
125+
/>
126+
<ArticleIconCard
127+
title="Unreal Engine"
128+
icon={UnrealEngineIcon}
129+
description="Implement in-app wallets in Unreal Engine"
130+
href="/unreal-engine/blueprints/in-app-wallet"
131+
/>
132+
</div>
133+
134+
## Ecosystem Wallets
135+
136+
If you're looking to set up an ecosystem from scratch, refer to the [set-up guide](/connect/wallet/get-started/set-up-ecosystem)
137+
138+
If you're looking to integrate ecosystem wallets in your aplication, refer to the following guides:
139+
140+
<div className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
141+
<ArticleIconCard
142+
title="TypeScript"
143+
icon={TypeScriptIcon}
144+
description="Connect ecosystem wallets in TypeScript"
145+
href="/typescript/v5/ecosystemWallet"
146+
/>
147+
<ArticleIconCard
148+
title="React"
149+
icon={ReactIcon}
150+
description="Connect ecosystem wallets in React"
151+
href="/react/v5/ecosystem-wallet/get-started"
152+
/>
153+
{/* TODO: Add react native specific getting started for ecosystem wallets */}
154+
<ArticleIconCard
155+
title="React Native"
156+
icon={ReactIcon}
157+
description="Connect ecosystem wallets in React Native"
158+
href="/react/v5/ecosystem-wallet/get-started"
159+
/>
160+
<ArticleIconCard
161+
title=".NET"
162+
icon={DotNetIcon}
163+
description="Connect ecosystem wallets in .NET"
164+
href="/dotnet/wallets/providers/ecosystem-wallet"
165+
/>
166+
<ArticleIconCard
167+
title="Unity"
168+
icon={UnityIcon}
169+
description="Connect ecosystem wallets in Unity"
170+
href="/unity/v5/wallets/ecosystem-wallet"
171+
/>
172+
</div>
173+

‎apps/portal/src/app/connect/wallet/get-started/set-up-ecosystem/assets/add-partner.png‎

45 KB
Loading

‎apps/portal/src/app/connect/wallet/get-started/set-up-ecosystem/assets/ecosystem-info.png‎

81.1 KB
Loading

‎apps/portal/src/app/connect/wallet/get-started/set-up-ecosystem/assets/ecosystem-wallet-permissions.png‎

191 KB
Loading

0 commit comments

Comments
 (0)