Skip to content

Commit cd80067

Browse files
MananTankMananTank
committed
[MNY-106] Playground: Add overview pages for all sections in sidebar
1 parent f47eda6 commit cd80067

File tree

14 files changed

+581
-258
lines changed

14 files changed

+581
-258
lines changed

‎apps/playground-web/src/app/account-abstraction/page.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { OverviewPage } from "@/components/blocks/OverviewPage";
2+
import { SmartAccountIcon } from "../../icons/SmartAccountIcon";
3+
import { accountAbstractionsFeatureCards } from "../data/pages-metadata";
4+
5+
export default function Page() {
6+
return (
7+
<OverviewPage
8+
icon={SmartAccountIcon}
9+
title="Account Abstraction"
10+
description={
11+
<>
12+
Transaction infrastructure for gasless or permissioned transactions
13+
utilizing EIP-4337 and 7702 specs
14+
</>
15+
}
16+
featureCards={accountAbstractionsFeatureCards}
17+
/>
18+
);
19+
}

‎apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export function ChatContainer() {
120120

121121
<PromptInput
122122
onSubmit={handleSubmit}
123-
className="mt-4 w-full max-w-2xl mx-auto relative"
123+
className="mt-4 w-full max-w-2xl mx-auto relative border-x-0 border-b-0 rounded-t-none"
124124
>
125125
<PromptInputTextarea
126126
value={input}

‎apps/playground-web/src/app/ai/page.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { BotIcon } from "lucide-react";
2+
import { OverviewPage } from "@/components/blocks/OverviewPage";
3+
import { aiFeatureCards } from "../data/pages-metadata";
4+
5+
export default function Page() {
6+
return (
7+
<OverviewPage
8+
icon={BotIcon}
9+
title="thirdweb AI"
10+
description={
11+
<>
12+
Query onchain data, analyze transactions, prepare contract calls, and
13+
do swaps with AI
14+
</>
15+
}
16+
featureCards={aiFeatureCards}
17+
/>
18+
);
19+
}

‎apps/playground-web/src/app/contracts/page.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { OverviewPage } from "@/components/blocks/OverviewPage";
2+
import { ContractIcon } from "../../icons/ContractIcon";
3+
import { contractsFeatureCards } from "../data/pages-metadata";
4+
5+
export default function Page() {
6+
return (
7+
<OverviewPage
8+
title="Contracts"
9+
description="Comprehensive toolkit to create, deploy, and manage smart contracts"
10+
featureCards={contractsFeatureCards}
11+
icon={ContractIcon}
12+
/>
13+
);
14+
}

‎apps/playground-web/src/app/data/pages-metadata.ts‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import {
2+
ArrowLeftRightIcon,
3+
BlocksIcon,
4+
BotIcon,
5+
BoxIcon,
6+
BracesIcon,
7+
CircleUserIcon,
8+
CreditCardIcon,
9+
DollarSignIcon,
10+
GlobeIcon,
11+
ImageIcon,
12+
LinkIcon,
13+
LockIcon,
14+
PanelTopIcon,
15+
PencilIcon,
16+
PlaneIcon,
17+
RectangleHorizontalIcon,
18+
RssIcon,
19+
ScanTextIcon,
20+
ShieldIcon,
21+
ShoppingBagIcon,
22+
SquircleDashedIcon,
23+
StampIcon,
24+
UserIcon,
25+
WalletCardsIcon,
26+
} from "lucide-react";
27+
import { InsightIcon } from "../../icons/InsightIcon";
28+
29+
export type FeatureCardMetadata = {
30+
icon: React.FC<{ className?: string }>;
31+
title: string;
32+
link: string;
33+
description: string;
34+
};
35+
36+
export const walletsFeatureCards: FeatureCardMetadata[] = [
37+
{
38+
icon: RectangleHorizontalIcon,
39+
title: "Connect Button",
40+
link: "/wallets/sign-in/button",
41+
description:
42+
"Wallet connection component for EOA or email, mobile, social, and passkey logins",
43+
},
44+
{
45+
icon: PanelTopIcon,
46+
title: "Connect Embed",
47+
link: "/wallets/sign-in/embed",
48+
description: "Embedded component to view balance, get funds, and more",
49+
},
50+
51+
{
52+
icon: SquircleDashedIcon,
53+
title: "Headless Connect",
54+
link: "/wallets/sign-in/headless",
55+
description: "Customizable wallet connection components using React hooks",
56+
},
57+
58+
{
59+
icon: UserIcon,
60+
title: "In-App Wallets",
61+
link: "/wallets/in-app-wallet",
62+
description:
63+
"Add social login, passkey, phone, or email sign-in to your app",
64+
},
65+
66+
{
67+
icon: LockIcon,
68+
title: "Authentication (SIWE)",
69+
link: "/wallets/auth",
70+
description: "Authenticate users to your backend using their wallet",
71+
},
72+
73+
{
74+
icon: GlobeIcon,
75+
title: "Social Profiles",
76+
link: "/wallets/social",
77+
description:
78+
"Get user profiles across apps like ENS, Lens, Farcaster, and more",
79+
},
80+
81+
{
82+
icon: BoxIcon,
83+
title: "Headless Components",
84+
link: "/wallets/headless",
85+
description: "Components for rendering various wallet related information",
86+
},
87+
];
88+
89+
export const headlessComponentsFeatureCards: FeatureCardMetadata[] = [
90+
{
91+
icon: CircleUserIcon,
92+
title: "Account Components",
93+
link: "/wallets/headless/account-components",
94+
description: "Components for rendering various account related information",
95+
},
96+
{
97+
icon: LinkIcon,
98+
title: "Chain Components",
99+
link: "/wallets/headless/chain-components",
100+
description: "Components for rendering various chain related information",
101+
},
102+
{
103+
icon: WalletCardsIcon,
104+
title: "Wallet Components",
105+
link: "/wallets/headless/wallet-components",
106+
description: "Components for rendering various wallet related information",
107+
},
108+
];
109+
110+
export const transactionsFeatureCards: FeatureCardMetadata[] = [
111+
{
112+
icon: PlaneIcon,
113+
title: "Airdrop Tokens",
114+
link: "/transactions/airdrop-tokens",
115+
description:
116+
"Airdrop any token with a few lines of code with gas sponsorship, optional.",
117+
},
118+
{
119+
icon: StampIcon,
120+
title: "Mint NFTs",
121+
link: "/transactions/mint-tokens",
122+
description:
123+
"Gasless and efficient token minting with just a wallet address",
124+
},
125+
126+
{
127+
icon: RssIcon,
128+
title: "Webhooks",
129+
link: "/transactions/webhooks",
130+
description:
131+
"Receive real-time notifications for transactions and wallet events.",
132+
},
133+
];
134+
135+
export const contractsFeatureCards: FeatureCardMetadata[] = [
136+
{
137+
icon: ScanTextIcon,
138+
title: "Read Contract",
139+
link: "/contracts/read",
140+
description: "Read data from any contract on any EVM",
141+
},
142+
{
143+
icon: PencilIcon,
144+
title: "Write Contract",
145+
link: "/contracts/write",
146+
description: "Send transactions from the connected wallet",
147+
},
148+
{
149+
icon: BlocksIcon,
150+
title: "Pre-Built Extensions",
151+
link: "/contracts/extensions",
152+
description: "High-level read and write functions",
153+
},
154+
{
155+
icon: RssIcon,
156+
title: "Listen Contract Events",
157+
link: "/contracts/events",
158+
description: "Subscribe to any contract event",
159+
},
160+
];
161+
162+
export const paymentsFeatureCards: FeatureCardMetadata[] = [
163+
{
164+
icon: BoxIcon,
165+
title: "Payments UI Components",
166+
link: "/payments/ui-components",
167+
description: "Onramp, swap, and bridge over 1,000+ crypto tokens",
168+
},
169+
{
170+
icon: ShoppingBagIcon,
171+
title: "Buy Crypto",
172+
link: "/payments/fund-wallet",
173+
description:
174+
"Buy any token with ability to customize theme, amounts, and more",
175+
},
176+
{
177+
icon: CreditCardIcon,
178+
title: "Checkout",
179+
link: "/payments/commerce",
180+
description:
181+
"Enable crypto payments for services and get notified on each sale",
182+
},
183+
{
184+
icon: ArrowLeftRightIcon,
185+
title: "Transactions",
186+
link: "/payments/transactions",
187+
description:
188+
"Enable users to pay for onchain transactions with fiat or crypto",
189+
},
190+
{
191+
icon: BracesIcon,
192+
title: "Payments API",
193+
link: "/payments/backend",
194+
description: "Create customizable UIs or backend flows using the HTTP API",
195+
},
196+
];
197+
198+
export const insightFeatureCards: FeatureCardMetadata[] = [
199+
{
200+
icon: InsightIcon,
201+
title: "Events",
202+
link: "/insight",
203+
description: "Query contract events on any supported EVM chain",
204+
},
205+
{
206+
icon: InsightIcon,
207+
title: "Transactions",
208+
link: "/insight",
209+
description: "Query transactions to and from specified recipients",
210+
},
211+
{
212+
icon: InsightIcon,
213+
title: "Tokens",
214+
link: "/insight",
215+
description: "Query token owners, transfers, prices, and more",
216+
},
217+
{
218+
icon: InsightIcon,
219+
title: "NFTs",
220+
link: "/insight",
221+
description:
222+
"Query NFT balances, collections, transfers, metadata, and more.",
223+
},
224+
{
225+
icon: InsightIcon,
226+
title: "Wallets",
227+
link: "/insight",
228+
description: "Query transactions to and from specific wallets",
229+
},
230+
{
231+
icon: InsightIcon,
232+
title: "Contracts",
233+
link: "/insight",
234+
description: "Query a contract's ABI or metadata",
235+
},
236+
];
237+
238+
export const accountAbstractionsFeatureCards: FeatureCardMetadata[] = [
239+
{
240+
icon: ShieldIcon,
241+
title: "EIP-4337",
242+
link: "/account-abstraction/eip-4337",
243+
description:
244+
"Implement via a higher-layer mempool using objects and bundlers",
245+
},
246+
{
247+
icon: ShieldIcon,
248+
title: "EIP-7702",
249+
link: "/account-abstraction/eip-7702",
250+
description:
251+
"Allow EOAs to temporarily behave like smart contracts during txs",
252+
},
253+
{
254+
icon: ShieldIcon,
255+
title: "EIP-5792",
256+
link: "/account-abstraction/eip-5792",
257+
description:
258+
"Define a standard RPC interface for smart account interactions",
259+
},
260+
{
261+
icon: ShieldIcon,
262+
title: "Native AA (zkSync)",
263+
link: "/account-abstraction/native-aa",
264+
description: "Native account abstraction available for zkSync chains",
265+
},
266+
];
267+
268+
export const tokensFeatureCards: FeatureCardMetadata[] = [
269+
{
270+
icon: DollarSignIcon,
271+
title: "Token Components",
272+
link: "/tokens/token-components",
273+
description:
274+
"Headless UI components for rendering token image, name, and symbol",
275+
},
276+
{
277+
icon: ImageIcon,
278+
title: "NFT Components",
279+
link: "/tokens/nft-components",
280+
description: "Headless UI components for rendering NFT Media and metadata",
281+
},
282+
];
283+
284+
export const aiFeatureCards: FeatureCardMetadata[] = [
285+
{
286+
icon: BotIcon,
287+
title: "Blockchain LLM",
288+
link: "/ai/chat",
289+
description: "thirdweb AI demo chat application",
290+
},
291+
{
292+
icon: BotIcon,
293+
title: "AI SDK Integration",
294+
link: "/ai/ai-sdk",
295+
description: "Use the thirdweb blockchain models with the Vercel AI SDK",
296+
},
297+
];

0 commit comments

Comments
 (0)