Skip to content

Commit 2136c7b

Browse files
saminacodessaminacodes
authored
[Docs] Wallets Overview (#7543)
1 parent 67c3d86 commit 2136c7b

File tree

3 files changed

+75
-41
lines changed

3 files changed

+75
-41
lines changed

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

Lines changed: 66 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
GithubTemplateCard,
44
Grid,
55
ExpandableGrid,
6+
FeatureCard,
67
createMetadata,
78
OpenSourceCard,
89
Stack,
@@ -12,7 +13,6 @@ import {
1213
ArticleIconCard,
1314
DocImage
1415
} from "@doc";
15-
import { ExternalLink } from "lucide-react";
1616
import {
1717
TypeScriptIcon,
1818
ReactIcon,
@@ -24,6 +24,8 @@ import { cn } from "@/lib/utils";
2424
import Link from "next/link";
2525
import { Button } from "@/components/ui/button";
2626
import SupportedChains from "../_images/supported-chains.png";
27+
import {FuelIcon,MonitorCheckIcon,WalletCardsIcon,UserLockIcon, ExternalLinkIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon, IdCardIcon, HandCoinsIcon, MonitorSmartphoneIcon} from "lucide-react";
28+
2729

2830
export const metadata = createMetadata({
2931
title: "thirdweb Connect",
@@ -36,26 +38,79 @@ export const metadata = createMetadata({
3638

3739
# Wallets
3840

39-
Wallets 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.
41+
Wallets is a complete toolkit for connecting any user to your application. It includes **customizable components** for onboarding, **embedded wallets** , **account abstraction**
42+
for gasless transactions, **server wallets** for developers to carry out transactions, and a secure **non-custodial key management system**.
4043

4144
## Live Playground
4245

43-
You can interact with the React SDK in the [Live Playground](https://playground.thirdweb.com/).
44-
4546
<Stack>
4647

4748
<ArticleIconCard
48-
title="Try the demo"
49-
icon={ExternalLink}
49+
title="Try Wallets"
50+
icon={ExternalLinkIcon}
5051
href="https://playground.thirdweb.com"
51-
description="See the SDK in action on the live playground"
52+
description="Try out the wallet components live in the interactive playground"
5253
/>
5354

5455
</Stack>
5556

56-
## Quick starts
57+
## Features
58+
59+
<div
60+
className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2"
61+
>
62+
<FeatureCard
63+
title="Non-Custodial Wallets"
64+
description="Secure non-custodial wallets only accessible by the owner."
65+
iconUrl={<UserLockIcon />}
66+
/>
67+
68+
<FeatureCard
69+
title="EOA Support"
70+
description="Connect to over 500+ EOA wallet providers for crypto native users."
71+
iconUrl={<WalletCardsIcon />}
72+
/>
73+
74+
<FeatureCard
75+
title="Gas Sponsorship"
76+
description="Support for gasless transactions with account abstraction."
77+
iconUrl={<FuelIcon />}
78+
/>
79+
80+
<FeatureCard
81+
title="Ecosystem Wallets"
82+
description="Global wallets to connect your users to any application in an ecosystem."
83+
iconUrl={<MonitorCheckIcon />}
84+
/>
85+
86+
<FeatureCard
87+
title="Cross Platform Support"
88+
description="Create and manage wallets for web, mobile, games, and agents."
89+
iconUrl={<MonitorSmartphoneIcon />}
90+
/>
91+
5792

58-
Get started with Wallets in your preferred language.
93+
<FeatureCard
94+
title="One-Click Funding"
95+
description="Buy crypto or swap tokens directly in the wallet modal."
96+
iconUrl={<HandCoinsIcon />}
97+
/>
98+
99+
<FeatureCard
100+
title="Authentication"
101+
description="Enable SIWE standard for blockchain-based ID verification."
102+
iconUrl={<IdCardIcon />}
103+
/>
104+
105+
<FeatureCard
106+
title="Hardware-Level Security"
107+
description="Built with AWS Enclaves (TEE) to isolate and protect keys."
108+
iconUrl={<ShieldCheckIcon />}
109+
/>
110+
111+
</div>
112+
113+
## Quick Starts
59114

60115
<Grid>
61116
<SDKCard
@@ -78,37 +133,15 @@ Get started with Wallets in your preferred language.
78133
/>
79134
</Grid>
80135

81-
## With Wallets, you can
82-
83-
- **Connect to 500+ different wallet providers** with support for every EVM network
84-
- **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.
85-
- **Sponsor transactions** to seamlessly onboard non-native or new crypto users with [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview).
86-
- **Perform wallet actions** like connecting and disconnecting wallets, viewing balance, displaying ENS names, and execute transactions with our [performant, reliable and type safe API](https://portal.thirdweb.com/connect/blockchain-api)
87-
- **Easily integrate with thirdweb's contracts** to enable users to interact with your application.
88-
- **Facilitate payments** by letting user top up their wallets or do onchain purchases with a credit card with [Pay](https://portal.thirdweb.com/connect/pay/overview).
89-
90-
<Callout variant="info" title="Have you generated a client ID?">
91-
<div className="flex flex-col gap-4 items-start">
92-
<p>
93-
You'll need a client ID to access the Wallet APIs, storage, and more.
94-
</p>
95-
96-
<Button asChild variant='outline'>
97-
<Link href="https://thirdweb.com/create-api-key" target="_blank"> Generate </Link>
98-
</Button>
99-
100-
</div>
101-
</Callout>
102-
103136
## Supported Chains
104137

105-
Wallets are supported on every EVM compatible chain. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist).
138+
Wallets are supported on EVM compatible chains. To view the full list, visit [thirdweb chainlist](https://thirdweb.com/chainlist?service=connect-sdk).
106139

107140
<DocImage src={SupportedChains} />
108141

109142
## Starter Kits & demos
110143

111-
View all available starter kits, demos and templates on Github.
144+
View all available starter kits, demos, and templates on Github.
112145

113146
<GithubTemplateCard
114147
title="View all templates"

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ export const sidebar: SideBar = {
1717
href: "/connect",
1818
name: "Introduction",
1919
},
20-
{
21-
href: "/connect/why-thirdweb",
22-
name: "Why thirdweb?",
23-
},
2420
{
2521
href: "https://playground.thirdweb.com/",
2622
icon: <ExternalLinkIcon />,

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
1+
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard, ArticleIconCard } from "@doc";
22
import PayOverviewImage from "./assets/pay-overview.png";
33
import SupportedChains from "../_images/supported-chains.png";
4-
import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";
4+
import {ExternalLinkIcon, RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";
55

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

1818
Payments allows you to create both simple and advanced payment flows for bridging, swapping, onramping, and peer-to-peer purchases. It's been used to drive millions in NFT sales, bridge native tokens to brand new chains, send stablecoins between users, and more.
1919

20-
To get started check out the [SDK functions](https://portal.thirdweb.com/typescript/v5/buy/quote), [API reference](https://bridge.thirdweb.com/reference), or [playground](https://playground.thirdweb.com/connect/pay).
20+
## Live Playground
2121

22-
<DocImage src={PayOverviewImage} />
22+
<ArticleIconCard
23+
title="Try Payments"
24+
icon={ExternalLinkIcon}
25+
href="https://playground.thirdweb.com/connect/pay"
26+
description="Try out the payment components live in the interactive playground"
27+
/>
2328

2429
## Features
2530

0 commit comments

Comments
 (0)