Skip to content

[Docs] Wallets Overview #7543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 7, 2025
Merged

[Docs] Wallets Overview #7543

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
463e4e7
wallets page completed
saminacodes Jul 7, 2025
e3b402d
Merge branch 'main' into wallets-overview
saminacodes Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 66 additions & 33 deletions apps/portal/src/app/connect/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
GithubTemplateCard,
Grid,
ExpandableGrid,
FeatureCard,
createMetadata,
OpenSourceCard,
Stack,
Expand All @@ -12,7 +13,6 @@ import {
ArticleIconCard,
DocImage
} from "@doc";
import { ExternalLink } from "lucide-react";
import {
TypeScriptIcon,
ReactIcon,
Expand All @@ -24,6 +24,8 @@ import { cn } from "@/lib/utils";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import SupportedChains from "../_images/supported-chains.png";
import {FuelIcon,MonitorCheckIcon,WalletCardsIcon,UserLockIcon, ExternalLinkIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon, IdCardIcon, HandCoinsIcon, MonitorSmartphoneIcon} from "lucide-react";


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

# Wallets

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

## Live Playground

You can interact with the React SDK in the [Live Playground](https://playground.thirdweb.com/).

<Stack>

<ArticleIconCard
title="Try the demo"
icon={ExternalLink}
title="Try Wallets"
icon={ExternalLinkIcon}
href="https://playground.thirdweb.com"
description="See the SDK in action on the live playground"
description="Try out the wallet components live in the interactive playground"
/>

</Stack>

## Quick starts
## Features

<div
className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2"
>
<FeatureCard
title="Non-Custodial Wallets"
description="Secure non-custodial wallets only accessible by the owner."
iconUrl={<UserLockIcon />}
/>

<FeatureCard
title="EOA Support"
description="Connect to over 500+ EOA wallet providers for crypto native users."
iconUrl={<WalletCardsIcon />}
/>

<FeatureCard
title="Gas Sponsorship"
description="Support for gasless transactions with account abstraction."
iconUrl={<FuelIcon />}
/>

<FeatureCard
title="Ecosystem Wallets"
description="Global wallets to connect your users to any application in an ecosystem."
iconUrl={<MonitorCheckIcon />}
/>

<FeatureCard
title="Cross Platform Support"
description="Create and manage wallets for web, mobile, games, and agents."
iconUrl={<MonitorSmartphoneIcon />}
/>


Get started with Wallets in your preferred language.
<FeatureCard
title="One-Click Funding"
description="Buy crypto or swap tokens directly in the wallet modal."
iconUrl={<HandCoinsIcon />}
/>

<FeatureCard
title="Authentication"
description="Enable SIWE standard for blockchain-based ID verification."
iconUrl={<IdCardIcon />}
/>

<FeatureCard
title="Hardware-Level Security"
description="Built with AWS Enclaves (TEE) to isolate and protect keys."
iconUrl={<ShieldCheckIcon />}
/>

</div>

## Quick Starts

<Grid>
<SDKCard
Expand All @@ -78,37 +133,15 @@ Get started with Wallets in your preferred language.
/>
</Grid>

## With Wallets, you can

- **Connect to 500+ different wallet providers** with support for every EVM network
- **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.
- **Sponsor transactions** to seamlessly onboard non-native or new crypto users with [Account Abstraction](https://portal.thirdweb.com/connect/account-abstraction/overview).
- **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)
- **Easily integrate with thirdweb's contracts** to enable users to interact with your application.
- **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).

<Callout variant="info" title="Have you generated a client ID?">
<div className="flex flex-col gap-4 items-start">
<p>
You'll need a client ID to access the Wallet APIs, storage, and more.
</p>

<Button asChild variant='outline'>
<Link href="https://thirdweb.com/create-api-key" target="_blank"> Generate </Link>
</Button>

</div>
</Callout>

## Supported Chains

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

<DocImage src={SupportedChains} />

## Starter Kits & demos

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

<GithubTemplateCard
title="View all templates"
Expand Down
4 changes: 0 additions & 4 deletions apps/portal/src/app/connect/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@ export const sidebar: SideBar = {
href: "/connect",
name: "Introduction",
},
{
href: "/connect/why-thirdweb",
name: "Why thirdweb?",
},
{
href: "https://playground.thirdweb.com/",
icon: <ExternalLinkIcon />,
Expand Down
13 changes: 9 additions & 4 deletions apps/portal/src/app/pay/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard } from "@doc";
import { createMetadata, DocImage, Grid, SDKCard, FeatureCard, ArticleIconCard } from "@doc";
import PayOverviewImage from "./assets/pay-overview.png";
import SupportedChains from "../_images/supported-chains.png";
import {RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";
import {ExternalLinkIcon, RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";

Copy link
Contributor

@coderabbitai coderabbitai bot Jul 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify lucide icon names

lucide-react typically exports icons without the “Icon” suffix (e.g. ExternalLink, Rocket, ArrowLeftRight).
If the aliasing layer in your repo does not automatically add the suffix, these imports will fail during the MDX → TS compile.

Run a quick search to see whether the same suffix pattern builds elsewhere and catch potential typos:

If the grep comes back empty (apart from this file), switch the imports to the non-suffixed names.
Example fix:

-import {ExternalLinkIcon, RocketIcon, ArrowLeftRightIcon} from "lucide-react";
+import { ExternalLink, Rocket, ArrowLeftRight } from "lucide-react";

🏁 Script executed:

#!/bin/bash
# Look for any successful import of `ExternalLinkIcon` in the repo
rg --no-heading -n $'ExternalLinkIcon' | head

Length of output: 1537

#!/bin/bash
# Find all imports from lucide-react that include names ending with 'Icon'
rg --no-heading -n 'import\s*{\s*[^}*Icon][^}]*Icon[^}]*}\s*from\s*"lucide-react"' -n

Update lucide-react icon imports to use the correct names

  • lucide-react exports icons without the “Icon” suffix.
  • In apps/portal/src/app/pay/page.mdx (and likewise in any other files importing from “lucide-react”), rename imports:
    • ExternalLinkIcon → ExternalLink
    • RocketIcon → Rocket
    • ArrowLeftRightIcon → ArrowLeftRight
    • WalletIcon → Wallet
    • PencilIcon → Pencil
    • ShieldCheckIcon → ShieldCheck
    • PiggyBankIcon → PiggyBank
    • GlobeIcon → Globe
    • ComponentIcon → Component
    • CodeIcon → Code
    • ApiIcon → Api
    • WebhookIcon → Webhook
  • Also update all JSX usages accordingly (e.g. <ExternalLinkIcon /> → <ExternalLink />).

Proposed diff:

 apps/portal/src/app/pay/page.mdx
-import { ExternalLinkIcon, RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon } from "lucide-react";
+import { ExternalLink, Rocket, ArrowLeftRight, Wallet, Pencil, ShieldCheck, PiggyBank, Globe, Component, Code, Api, Webhook } from "lucide-react";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import {ExternalLinkIcon, RocketIcon, ArrowLeftRightIcon, WalletIcon, PencilIcon, ShieldCheckIcon, PiggyBankIcon, GlobeIcon, ComponentIcon, CodeIcon, ApiIcon, WebhookIcon} from "lucide-react";
import { ExternalLink, Rocket, ArrowLeftRight, Wallet, Pencil, ShieldCheck, PiggyBank, Globe, Component, Code, Api, Webhook } from "lucide-react";
🤖 Prompt for AI Agents 
In apps/portal/src/app/pay/page.mdx at line 4, the imports from lucide-react
incorrectly include the "Icon" suffix. Remove the "Icon" suffix from all
imported icon names (e.g., change ExternalLinkIcon to ExternalLink) and update
all corresponding JSX usages in the file to use the new names without the
suffix.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nop- this needs to have Icon via the new lint.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@saminacodes, got it! Thanks for the clarification about the linting rule requiring the "Icon" suffix for lucide-react imports. I'll note this for future reviews.

✏️ Learnings added 
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.463Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.

Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/*.client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`)

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support for in-app wallets (social/email login) in wallet architecture

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : For notices & skeletons rely on `AnnouncementBanner`, `GenericLoadingPage`, `EmptyStateCard`.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Reuse core UI primitives; avoid re-implementing buttons, cards, modals.

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks)

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Client Components: Support fast transitions with prefetched data

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Use `NavLink` (`@/components/ui/NavLink`) for internal navigation so active states are handled automatically.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Stick to design-tokens: background (`bg-card`), borders (`border-border`), muted text (`text-muted-foreground`) etc.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-30T10:26:04.389Z
Learning: Applies to dashboard/**/components/**/*.{ts,tsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{tsx,ts} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.488Z
Learning: Surface breaking changes prominently in PR descriptions

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Unified `Wallet` and `Account` interfaces in wallet architecture

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Support EIP-1193, EIP-5792, EIP-7702 standards in wallet architecture

Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-30T10:25:29.489Z
Learning: Applies to src/wallets/**/*.{ts,tsx} : Smart wallets with account abstraction in wallet architecture

export const metadata = createMetadata({
image: {
Expand All @@ -17,9 +17,14 @@ export const metadata = createMetadata({

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.

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).
## Live Playground

<DocImage src={PayOverviewImage} />
<ArticleIconCard
title="Try Payments"
icon={ExternalLinkIcon}
href="https://playground.thirdweb.com/connect/pay"
description="Try out the payment components live in the interactive playground"
/>

## Features

Expand Down
Loading