[PRO-105] Dashboard: Update service names

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

@@ -1,55 +1,112 @@
+import { BotIcon, CodeIcon, CoinsIcon } from "lucide-react";
 import Link from "next/link";
-import type { ChainMetadataWithServices } from "@/types/chain";
-import { products } from "../../../../components/server/products";
+import { useMemo } from "react";
+import { BridgeIcon } from "@/icons/BridgeIcon";
+import { PayIcon } from "@/icons/PayIcon";
+import { WalletProductIcon } from "@/icons/WalletProductIcon";
+import type {
+  ChainMetadataWithServices,
+  ChainSupportedService,
+} from "@/types/chain";
 import { SectionTitle } from "./SectionTitle";
 
 export function SupportedProductsSection(props: {
   services: ChainMetadataWithServices["services"];
 }) {
-  const enabledProducts = products.filter((product) => {
-    return props.services.find(
-      (service) => service.service === product.id && service.enabled,
+  const enabledServices = useMemo(() => {
+    return props.services.reduce(
+      (acc, service) => {
+        acc[service.service] = service.enabled;
+        return acc;
+      },
+      {} as Record<ChainSupportedService, boolean>,
     );
-  });
-
-  if (enabledProducts.length === 0) {
-    return null;
-  }
+  }, [props.services]);
 
   return (
     <section>
       <SectionTitle title="thirdweb Products" />
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
-        {enabledProducts.map((product) => {
-          return (
-            <div
-              className="relative rounded-xl border bg-card p-4 hover:border-active-border"
-              key={product.id}
-            >
-              <div className="flex mb-4">
-                <div className="p-2 rounded-full border bg-background">
-                  <product.icon className="size-4 text-muted-foreground" />
-                </div>
-              </div>
-              <div>
-                <h3 className="mb-1">
-                  <Link
-                    className="before:absolute before:inset-0 text-base font-medium"
-                    href={product.link}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    {product.name}
-                  </Link>
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  {product.description}
-                </p>
-              </div>
-            </div>
-          );
-        })}
+        {enabledServices["connect-sdk"] && (
+          <ProductCard
+            icon={WalletProductIcon}
+            name="Wallets"
+            description="Create wallets to read and transact"
+            link="https://thirdweb.com/wallets"
+          />
+        )}
+
+        {enabledServices["account-abstraction"] && (
+          <ProductCard
+            icon={PayIcon}
+            name="x402"
+            description="Create internet native payments with x402"
+            link="https://thirdweb.com/x402"
+          />
+        )}
+
+        {enabledServices.pay && (
+          <ProductCard
+            icon={BridgeIcon}
+            name="Bridge"
+            description="Bridge and swap tokens across chains"
+            link="https://thirdweb.com/monetize/bridge"
+          />
+        )}
+
+        {enabledServices.contracts && (
+          <ProductCard
+            icon={CoinsIcon}
+            name="Tokens"
+            description="Launch tokens and markets"
+            link="https://thirdweb.com/token"
+          />
+        )}
+
+        <ProductCard
+          icon={BotIcon}
+          name="AI"
+          description="Read and write onchain via natural language"
+          link="https://thirdweb.com/ai"
+        />
+
+        <ProductCard
+          icon={CodeIcon}
+          name="HTTP API"
+          description="Build products with our HTTP API"
+          link="https://portal.thirdweb.com/reference"
+        />
       </div>
     </section>
   );
 }
+
+function ProductCard(props: {
+  icon: React.FC<{ className?: string }>;
+  link: string;
+  name: string;
+  description: string;
+}) {
+  return (
+    <div className="relative rounded-xl border bg-card p-4 hover:border-active-border">
+      <div className="flex mb-4">
+        <div className="p-2 rounded-full border bg-background">
+          <props.icon className="size-4 text-muted-foreground" />
+        </div>
+      </div>
+      <div>
+        <h3 className="mb-1">
+          <Link
+            className="before:absolute before:inset-0 text-base font-medium"
+            href={props.link}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {props.name}
+          </Link>
+        </h3>
+        <p className="text-muted-foreground text-sm">{props.description}</p>
+      </div>
+    </div>
+  );
+}

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

@@ -15,7 +15,7 @@ import {
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { products } from "../../../components/server/products";
+import { services } from "../../../components/server/products";
 
 function cleanUrl(url: string) {
   if (url.endsWith("?")) {
@@ -345,7 +345,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
 
   const section = (
     <FilterSection title="Services">
-      {products.map((product) => (
+      {services.map((product) => (
         <div className="group flex items-center gap-2" key={product.id}>
           <Checkbox
             checked={isServiceActive(mutableSearchParams, product.id)}
@@ -393,7 +393,7 @@ export const ChainServiceFilter: React.FC<ChainServiceFilterProps> = ({
     }
 
     const firstFilter = allFilters[0];
-    const name = products.find((p) => p.id === firstFilter)?.name;
+    const name = services.find((p) => p.id === firstFilter)?.name;
     const plus = allFilters.length > 1 ? ` +${allFilters.length - 1}` : "";
 
     return [`${name}${plus}`, true];

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

@@ -12,7 +12,7 @@ import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { ChainSupportedService } from "@/types/chain";
 import { ChainIcon } from "../../../components/server/chain-icon";
-import { products } from "../../../components/server/products";
+import { services } from "../../../components/server/products";
 import { getCustomChainMetadata } from "../../../utils";
 
 type ChainListRowProps = {
@@ -83,7 +83,7 @@ export function ChainListRow({
       <TableCell>
         <div className="flex w-[520px] flex-row items-center gap-14 ">
           <div className="z-10 flex items-center gap-4">
-            {products.map((p) => {
+            {services.map((p) => {
               return (
                 <ProductIcon
                   href={p.link}

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

@@ -1,66 +1,62 @@
-import { BotIcon } from "lucide-react";
-import { ConnectSDKIcon } from "@/icons/ConnectSDKIcon";
-import { ContractIcon } from "@/icons/ContractIcon";
-import { EngineIcon } from "@/icons/EngineIcon";
+import { BotIcon, CoinsIcon, FuelIcon, HardDriveIcon } from "lucide-react";
+import { BridgeIcon } from "@/icons/BridgeIcon";
 import { PayIcon } from "@/icons/PayIcon";
 import { RPCIcon } from "@/icons/RPCIcon";
-import { SmartAccountIcon } from "@/icons/SmartAccountIcon";
+import { WalletProductIcon } from "@/icons/WalletProductIcon";
 import type { ChainSupportedService } from "@/types/chain";
 
-export const products = [
+export const services = [
   {
-    description: "Create, deploy and manage smart contracts",
-    icon: ContractIcon,
+    icon: CoinsIcon,
     id: "contracts",
-    link: "https://thirdweb.com/explore",
-    name: "Contracts",
+    link: "https://thirdweb.com/token",
+    name: "Tokens",
   },
   {
-    description: "Create and manage crypto wallets",
-    icon: ConnectSDKIcon,
+    icon: WalletProductIcon,
     id: "connect-sdk",
-    link: "https://thirdweb.com/connect",
-    name: "Wallets",
+    link: "https://thirdweb.com/wallets",
+    name: "User Wallets",
   },
   {
-    description: "Performant and scalable RPC service",
     icon: RPCIcon,
     id: "rpc-edge",
-    link: "https://portal.thirdweb.com/infrastructure/rpc-edge/overview",
-    name: "RPC Edge",
+    link: "https://thirdweb.com/rpc",
+    name: "RPC",
   },
   {
-    description: "Backend server that reads, writes, and deploys contracts",
-    icon: EngineIcon,
+    icon: HardDriveIcon,
     id: "engine",
-    link: "https://thirdweb.com/engine",
-    name: "Transactions",
+    link: "https://thirdweb.com/wallets",
+    name: "Server Wallets",
   },
   {
-    description: "Enable gas sponsorship for seamless transactions",
-    icon: SmartAccountIcon,
+    icon: FuelIcon,
     id: "account-abstraction",
-    link: "https://portal.thirdweb.com/wallets/sponsor-gas",
-    name: "Account Abstraction",
+    link: "https://thirdweb.com/wallets",
+    name: "Gas Sponsorship",
   },
   {
-    description: "Enable payments in any token on any chain",
-    icon: PayIcon,
+    icon: BridgeIcon,
     id: "pay",
-    link: "https://portal.thirdweb.com/payments",
-    name: "Payments",
+    link: "https://thirdweb.com/monetize/bridge",
+    name: "Bridge",
   },
   {
-    description: "The most powerful AI for interacting with the blockchain",
     icon: BotIcon,
     id: "nebula",
     link: "https://thirdweb.com/ai",
-    name: "thirdweb AI",
+    name: "AI",
+  },
+  {
+    icon: PayIcon,
+    id: "account-abstraction",
+    link: "https://thirdweb.com/x402",
+    name: "x402",
   },
 ] satisfies Array<{
   name: string;
   id: ChainSupportedService;
   icon: React.FC<{ className?: string }>;
-  description: string;
   link: string;
 }>;

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

@@ -4,7 +4,7 @@ export const SERVICE_DEFINITIONS = {
     actions: [],
     description: "Bundler & Paymaster services",
     name: "bundler",
-    title: "Account Abstraction",
+    title: "Gas Sponsorship",
   },
   chainsaw: {
     // all actions allowed
@@ -18,7 +18,7 @@ export const SERVICE_DEFINITIONS = {
     actions: [],
     description: "E-mail and social login wallets for easy web3 onboarding",
     name: "embeddedWallets",
-    title: "Wallets",
+    title: "User Wallets",
   },
 
   engineCloud: {
@@ -27,30 +27,30 @@ export const SERVICE_DEFINITIONS = {
     description:
       "Transaction API and Server wallets with high transaction throughput and low latency",
     name: "engineCloud",
-    title: "Transactions",
+    title: "Server Wallets",
   },
   insight: {
     // all actions allowed
     actions: [],
     description: "Indexed data for any EVM chain",
     name: "insight",
-    title: "Insight",
+    title: "Indexer",
   },
   nebula: {
     // all actions allowed
     actions: [],
     description:
       "Advanced blockchain reasoning and execution capabilities with AI",
     name: "nebula",
-    title: "thirdweb AI",
+    title: "AI",
   },
   pay: {
     // all actions allowed
     actions: [],
     description:
       "Bridge, swap, and purchase cryptocurrencies and execute transactions with any fiat or tokens via cross-chain routing",
     name: "pay",
-    title: "Payments",
+    title: "Bridge",
   },
   relayer: {
     // all actions allowed