Skip to content

Commit b06a918

Browse files
MananTankMananTank
committed
[PRO-105] Dashboard: Update service names (#8419)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on renaming and refactoring the usage of `products` to `services` across various components, updating service definitions, and improving the rendering of product cards in the UI. ### Detailed summary - Renamed `products` to `services` in relevant components. - Updated service definitions with new titles and descriptions. - Modified the `ChainListRow` and `ChainServiceFilter` components to use `services`. - Enhanced `SupportedProductsSection` to conditionally render `ProductCard`. - Added new `ProductCard` component for UI rendering. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 5080b47 commit b06a918

File tree

6 files changed

+135
-103
lines changed

6 files changed

+135
-103
lines changed

‎apps/dashboard/src/@/icons/ConnectSDKIcon.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/SupportedProductsSection.tsx‎

Lines changed: 96 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,112 @@
1+
import { BotIcon, CodeIcon, CoinsIcon } from "lucide-react";
12
import Link from "next/link";
2-
import type { ChainMetadataWithServices } from "@/types/chain";
3-
import { products } from "../../../../components/server/products";
3+
import { useMemo } from "react";
4+
import { BridgeIcon } from "@/icons/BridgeIcon";
5+
import { PayIcon } from "@/icons/PayIcon";
6+
import { WalletProductIcon } from "@/icons/WalletProductIcon";
7+
import type {
8+
ChainMetadataWithServices,
9+
ChainSupportedService,
10+
} from "@/types/chain";
411
import { SectionTitle } from "./SectionTitle";
512

613
export function SupportedProductsSection(props: {
714
services: ChainMetadataWithServices["services"];
815
}) {
9-
const enabledProducts = products.filter((product) => {
10-
return props.services.find(
11-
(service) => service.service === product.id && service.enabled,
16+
const enabledServices = useMemo(() => {
17+
return props.services.reduce(
18+
(acc, service) => {
19+
acc[service.service] = service.enabled;
20+
return acc;
21+
},
22+
{} as Record<ChainSupportedService, boolean>,
1223
);
13-
});
14-
15-
if (enabledProducts.length === 0) {
16-
return null;
17-
}
24+
}, [props.services]);
1825

1926
return (
2027
<section>
2128
<SectionTitle title="thirdweb Products" />
2229
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
23-
{enabledProducts.map((product) => {
24-
return (
25-
<div
26-
className="relative rounded-xl border bg-card p-4 hover:border-active-border"
27-
key={product.id}
28-
>
29-
<div className="flex mb-4">
30-
<div className="p-2 rounded-full border bg-background">
31-
<product.icon className="size-4 text-muted-foreground" />
32-
</div>
33-
</div>
34-
<div>
35-
<h3 className="mb-1">
36-
<Link
37-
className="before:absolute before:inset-0 text-base font-medium"
38-
href={product.link}
39-
rel="noopener noreferrer"
40-
target="_blank"
41-
>
42-
{product.name}
43-
</Link>
44-
</h3>
45-
<p className="text-muted-foreground text-sm">
46-
{product.description}
47-
</p>
48-
</div>
49-
</div>
50-
);
51-
})}
30+
{enabledServices["connect-sdk"] && (
31+
<ProductCard
32+
icon={WalletProductIcon}
33+
name="Wallets"
34+
description="Create wallets to read and transact"
35+
link="https://thirdweb.com/wallets"
36+
/>
37+
)}
38+
39+
{enabledServices["account-abstraction"] && (
40+
<ProductCard
41+
icon={PayIcon}
42+
name="x402"
43+
description="Create internet native payments with x402"
44+
link="https://thirdweb.com/x402"
45+
/>
46+
)}
47+
48+
{enabledServices.pay && (
49+
<ProductCard
50+
icon={BridgeIcon}
51+
name="Bridge"
52+
description="Bridge and swap tokens across chains"
53+
link="https://thirdweb.com/monetize/bridge"
54+
/>
55+
)}
56+
57+
{enabledServices.contracts && (
58+
<ProductCard
59+
icon={CoinsIcon}
60+
name="Tokens"
61+
description="Launch tokens and markets"
62+
link="https://thirdweb.com/token"
63+
/>
64+
)}
65+
66+
<ProductCard
67+
icon={BotIcon}
68+
name="AI"
69+
description="Read and write onchain via natural language"
70+
link="https://thirdweb.com/ai"
71+
/>
72+
73+
<ProductCard
74+
icon={CodeIcon}
75+
name="HTTP API"
76+
description="Build products with our HTTP API"
77+
link="https://portal.thirdweb.com/reference"
78+
/>
5279
</div>
5380
</section>
5481
);
5582
}
83+
84+
function ProductCard(props: {
85+
icon: React.FC<{ className?: string }>;
86+
link: string;
87+
name: string;
88+
description: string;
89+
}) {
90+
return (
91+
<div className="relative rounded-xl border bg-card p-4 hover:border-active-border">
92+
<div className="flex mb-4">
93+
<div className="p-2 rounded-full border bg-background">
94+
<props.icon className="size-4 text-muted-foreground" />
95+
</div>
96+
</div>
97+
<div>
98+
<h3 className="mb-1">
99+
<Link
100+
className="before:absolute before:inset-0 text-base font-medium"
101+
href={props.link}
102+
rel="noopener noreferrer"
103+
target="_blank"
104+
>
105+
{props.name}
106+
</Link>
107+
</h3>
108+
<p className="text-muted-foreground text-sm">{props.description}</p>
109+
</div>
110+
</div>
111+
);
112+
}

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/components/client/filters.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
1616
import { Separator } from "@/components/ui/separator";
1717
import { useDashboardRouter } from "@/lib/DashboardRouter";
18-
import { products } from "../../../components/server/products";
18+
import { services } from "../../../components/server/products";
1919

2020
function cleanUrl(url: string) {
2121
if (url.endsWith("?")) {
@@ -345,7 +345,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
345345

346346
const section = (
347347
<FilterSection title="Services">
348-
{products.map((product) => (
348+
{services.map((product) => (
349349
<div className="group flex items-center gap-2" key={product.id}>
350350
<Checkbox
351351
checked={isServiceActive(mutableSearchParams, product.id)}
@@ -393,7 +393,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
393393
}
394394

395395
const firstFilter = allFilters[0];
396-
const name = products.find((p) => p.id === firstFilter)?.name;
396+
const name = services.find((p) => p.id === firstFilter)?.name;
397397
const plus = allFilters.length > 1 ? ` +${allFilters.length - 1}` : "";
398398

399399
return [`${name}${plus}`, true];

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
1212
import { cn } from "@/lib/utils";
1313
import type { ChainSupportedService } from "@/types/chain";
1414
import { ChainIcon } from "../../../components/server/chain-icon";
15-
import { products } from "../../../components/server/products";
15+
import { services } from "../../../components/server/products";
1616
import { getCustomChainMetadata } from "../../../utils";
1717

1818
type ChainListRowProps = {
@@ -83,7 +83,7 @@ export function ChainListRow({
8383
<TableCell>
8484
<div className="flex w-[520px] flex-row items-center gap-14 ">
8585
<div className="z-10 flex items-center gap-4">
86-
{products.map((p) => {
86+
{services.map((p) => {
8787
return (
8888
<ProductIcon
8989
href={p.link}

‎apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,62 @@
1-
import { BotIcon } from "lucide-react";
2-
import { ConnectSDKIcon } from "@/icons/ConnectSDKIcon";
3-
import { ContractIcon } from "@/icons/ContractIcon";
4-
import { EngineIcon } from "@/icons/EngineIcon";
1+
import { BotIcon, CoinsIcon, FuelIcon, HardDriveIcon } from "lucide-react";
2+
import { BridgeIcon } from "@/icons/BridgeIcon";
53
import { PayIcon } from "@/icons/PayIcon";
64
import { RPCIcon } from "@/icons/RPCIcon";
7-
import { SmartAccountIcon } from "@/icons/SmartAccountIcon";
5+
import { WalletProductIcon } from "@/icons/WalletProductIcon";
86
import type { ChainSupportedService } from "@/types/chain";
97

10-
export const products = [
8+
export const services = [
119
{
12-
description: "Create, deploy and manage smart contracts",
13-
icon: ContractIcon,
10+
icon: CoinsIcon,
1411
id: "contracts",
15-
link: "https://thirdweb.com/explore",
16-
name: "Contracts",
12+
link: "https://thirdweb.com/token",
13+
name: "Tokens",
1714
},
1815
{
19-
description: "Create and manage crypto wallets",
20-
icon: ConnectSDKIcon,
16+
icon: WalletProductIcon,
2117
id: "connect-sdk",
22-
link: "https://thirdweb.com/connect",
23-
name: "Wallets",
18+
link: "https://thirdweb.com/wallets",
19+
name: "User Wallets",
2420
},
2521
{
26-
description: "Performant and scalable RPC service",
2722
icon: RPCIcon,
2823
id: "rpc-edge",
29-
link: "https://portal.thirdweb.com/infrastructure/rpc-edge/overview",
30-
name: "RPC Edge",
24+
link: "https://thirdweb.com/rpc",
25+
name: "RPC",
3126
},
3227
{
33-
description: "Backend server that reads, writes, and deploys contracts",
34-
icon: EngineIcon,
28+
icon: HardDriveIcon,
3529
id: "engine",
36-
link: "https://thirdweb.com/engine",
37-
name: "Transactions",
30+
link: "https://thirdweb.com/wallets",
31+
name: "Server Wallets",
3832
},
3933
{
40-
description: "Enable gas sponsorship for seamless transactions",
41-
icon: SmartAccountIcon,
34+
icon: FuelIcon,
4235
id: "account-abstraction",
43-
link: "https://portal.thirdweb.com/wallets/sponsor-gas",
44-
name: "Account Abstraction",
36+
link: "https://thirdweb.com/wallets",
37+
name: "Gas Sponsorship",
4538
},
4639
{
47-
description: "Enable payments in any token on any chain",
48-
icon: PayIcon,
40+
icon: BridgeIcon,
4941
id: "pay",
50-
link: "https://portal.thirdweb.com/payments",
51-
name: "Payments",
42+
link: "https://thirdweb.com/monetize/bridge",
43+
name: "Bridge",
5244
},
5345
{
54-
description: "The most powerful AI for interacting with the blockchain",
5546
icon: BotIcon,
5647
id: "nebula",
5748
link: "https://thirdweb.com/ai",
58-
name: "thirdweb AI",
49+
name: "AI",
50+
},
51+
{
52+
icon: PayIcon,
53+
id: "account-abstraction",
54+
link: "https://thirdweb.com/x402",
55+
name: "x402",
5956
},
6057
] satisfies Array<{
6158
name: string;
6259
id: ChainSupportedService;
6360
icon: React.FC<{ className?: string }>;
64-
description: string;
6561
link: string;
6662
}>;

‎packages/service-utils/src/core/services.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const SERVICE_DEFINITIONS = {
44
actions: [],
55
description: "Bundler & Paymaster services",
66
name: "bundler",
7-
title: "Account Abstraction",
7+
title: "Gas Sponsorship",
88
},
99
chainsaw: {
1010
// all actions allowed
@@ -18,7 +18,7 @@ export const SERVICE_DEFINITIONS = {
1818
actions: [],
1919
description: "E-mail and social login wallets for easy web3 onboarding",
2020
name: "embeddedWallets",
21-
title: "Wallets",
21+
title: "User Wallets",
2222
},
2323

2424
engineCloud: {
@@ -27,30 +27,30 @@ export const SERVICE_DEFINITIONS = {
2727
description:
2828
"Transaction API and Server wallets with high transaction throughput and low latency",
2929
name: "engineCloud",
30-
title: "Transactions",
30+
title: "Server Wallets",
3131
},
3232
insight: {
3333
// all actions allowed
3434
actions: [],
3535
description: "Indexed data for any EVM chain",
3636
name: "insight",
37-
title: "Insight",
37+
title: "Indexer",
3838
},
3939
nebula: {
4040
// all actions allowed
4141
actions: [],
4242
description:
4343
"Advanced blockchain reasoning and execution capabilities with AI",
4444
name: "nebula",
45-
title: "thirdweb AI",
45+
title: "AI",
4646
},
4747
pay: {
4848
// all actions allowed
4949
actions: [],
5050
description:
5151
"Bridge, swap, and purchase cryptocurrencies and execute transactions with any fiat or tokens via cross-chain routing",
5252
name: "pay",
53-
title: "Payments",
53+
title: "Bridge",
5454
},
5555
relayer: {
5656
// all actions allowed

0 commit comments

Comments
 (0)