show deprecation in playground UI (#7100)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on adding a `deprecated` property to various types and components within the application, allowing for better handling and display of deprecated links and features in the UI.

### Detailed summary
- Added `deprecated` property to `pathInfo` in `navLinks.ts`.
- Updated `MinimalBlueprintSpec` type in `utils.ts` to include `deprecated`.
- Modified `SidebarLink` type in `sidebar.tsx` to optionally include `crossedOut`.
- Enhanced UI to visually indicate deprecated items in `page.tsx`.
- Included `deprecated` status for various API endpoints in `insightBlueprints.ts`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: iuwqyir

apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx

@@ -1,10 +1,12 @@
+import { Badge } from "@/components/ui/badge";
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { cn } from "@/lib/utils";
 import { redirect } from "next/navigation";
 import { THIRDWEB_CLIENT } from "../../../lib/client";
 import { isProd } from "../../../lib/env";
@@ -53,8 +55,28 @@ export default async function Page(props: {
     <div>
       <Breadcrumbs />
       <h1 className="mt-3 mb-6 font-semibold text-2xl tracking-tight lg:text-3xl">
-        {title}
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              pathMetadata.deprecated && "text-muted-foreground line-through",
+            )}
+          >
+            {title}
+          </span>
+          {pathMetadata.deprecated && (
+            <Badge variant="destructive" className="text-xs">
+              Deprecated
+            </Badge>
+          )}
+        </div>
       </h1>
+      {pathMetadata.deprecated && (
+        <div className="mt-3 mb-6">
+          <div className="flex items-center gap-2">
+            <span>{pathMetadata.description}</span>
+          </div>
+        </div>
+      )}
       <BlueprintPlayground
         key={searchParams.path}
         metadata={pathMetadata}

apps/playground-web/src/app/insight/insightBlueprints.ts

@@ -9,14 +9,17 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get events",
         path: "/v1/events",
+        deprecated: false,
       },
       {
         name: "Get contract events",
         path: "/v1/events/{contractAddress}",
+        deprecated: false,
       },
       {
         name: "Get contract events with specific signature",
         path: "/v1/events/{contractAddress}/{signature}",
+        deprecated: false,
       },
     ],
   },
@@ -27,14 +30,17 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get transactions",
         path: "/v1/transactions",
+        deprecated: false,
       },
       {
         name: "Get contract transactions",
         path: "/v1/transactions/{contractAddress}",
+        deprecated: false,
       },
       {
         name: "Get contract transactions with specific signature",
         path: "/v1/transactions/{contractAddress}/{signature}",
+        deprecated: false,
       },
     ],
   },
@@ -45,6 +51,7 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get blocks",
         path: "/v1/blocks",
+        deprecated: false,
       },
     ],
   },
@@ -55,38 +62,47 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get token transfers by transaction",
         path: "/v1/tokens/transfers/transaction/{transaction_hash}",
+        deprecated: false,
       },
       {
         name: "Get token transfers by contract",
         path: "/v1/tokens/transfers/{contract_address}",
+        deprecated: false,
       },
       {
         name: "Get token transfers",
         path: "/v1/tokens/transfers",
+        deprecated: false,
       },
       {
         name: "Get ERC-20 balances by address",
         path: "/v1/tokens/erc20/{ownerAddress}",
+        deprecated: false,
       },
       {
         name: "Get ERC-721 balances by address",
         path: "/v1/tokens/erc721/{ownerAddress}",
+        deprecated: true,
       },
       {
         name: "Get ERC-1155 balances by address",
         path: "/v1/tokens/erc1155/{ownerAddress}",
+        deprecated: true,
       },
       {
         name: "Get supported tokens for price data",
         path: "/v1/tokens/price/supported",
+        deprecated: false,
       },
       {
         name: "Get token price",
         path: "/v1/tokens/price",
+        deprecated: false,
       },
       {
         name: "Token lookup",
         path: "/v1/tokens/lookup",
+        deprecated: false,
       },
     ],
   },
@@ -97,54 +113,67 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get NFT balances by address",
         path: "/v1/nfts/balance/{ownerAddress}",
+        deprecated: false,
       },
       {
         name: "Get collection",
         path: "/v1/nfts/collections/{contract_address}",
+        deprecated: false,
       },
       {
         name: "Get NFTs by owner",
         path: "/v1/nfts",
+        deprecated: false,
       },
       {
         name: "Get NFT owners by contract",
         path: "/v1/nfts/owners/{contract_address}",
+        deprecated: false,
       },
       {
         name: "Get NFT owners by token",
         path: "/v1/nfts/owners/{contract_address}/{token_id}",
+        deprecated: false,
       },
       {
         name: "Get NFT transfers",
         path: "/v1/nfts/transfers",
+        deprecated: false,
       },
       {
         name: "Get NFT transfers by transaction",
         path: "/v1/nfts/transfers/transaction/{transaction_hash}",
+        deprecated: false,
       },
       {
         name: "Get NFT transfers by contract",
         path: "/v1/nfts/transfers/{contract_address}",
+        deprecated: false,
       },
       {
         name: "Get NFTs by contract",
         path: "/v1/nfts/{contract_address}",
+        deprecated: false,
       },
       {
         name: "Get NFT transfers by token",
         path: "/v1/nfts/transfers/{contract_address}/{token_id}",
+        deprecated: false,
       },
       {
         name: "Get NFT by token ID",
         path: "/v1/nfts/{contract_address}/{token_id}",
+        deprecated: false,
       },
       {
         name: "Force refresh collection metadata",
         path: "/v1/nfts/metadata/refresh/{contract_address}",
+        deprecated: false,
       },
       {
         name: "Force refresh token metadata",
         path: "/v1/nfts/metadata/refresh/{contract_address}/{token_id}",
+        deprecated: false,
       },
     ],
   },
@@ -155,6 +184,7 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get wallet transactions",
         path: "/v1/wallets/{wallet_address}/transactions",
+        deprecated: false,
       },
     ],
   },
@@ -165,10 +195,12 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Get contract ABI​",
         path: "/v1/contracts/abi/{contractAddress}",
+        deprecated: false,
       },
       {
         name: "Get contract metadata​",
         path: "/v1/contracts/metadata/{contractAddress}",
+        deprecated: false,
       },
     ],
   },
@@ -179,6 +211,7 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Decode logs and transactions​",
         path: "/v1/decode/{contractAddress}",
+        deprecated: false,
       },
     ],
   },
@@ -189,6 +222,7 @@ export const insightBlueprints: MinimalBlueprintSpec[] = [
       {
         name: "Resolve",
         path: "/v1/resolve/{input}",
+        deprecated: false,
       },
     ],
   },

apps/playground-web/src/app/insight/page.tsx

@@ -29,6 +29,7 @@ export default function Page() {
                 return {
                   name: pathInfo.name,
                   link: `/insight/${blueprint.id}?path=${pathInfo.path}`,
+                  deprecated: pathInfo.deprecated,
                 };
               })}
             />
@@ -60,10 +61,19 @@ function BlueprintSection(props: {
                 <span className="flex items-center gap-3">
                   <Link
                     href={item.link}
-                    className="before:absolute before:inset-0"
+                    className={`${
+                      item.deprecated
+                        ? "line-through before:absolute before:inset-0"
+                        : ""
+                    }`}
                   >
                     {item.name}
                   </Link>
+                  {item.deprecated && (
+                    <span className="rounded bg-destructive/10 px-2 py-0.5 font-medium text-destructive text-xs">
+                      Deprecated
+                    </span>
+                  )}
                 </span>
               </TableCell>
             </TableRow>

apps/playground-web/src/app/insight/utils.ts

@@ -20,6 +20,7 @@ export type BlueprintListItem = {
     name: string;
     path: string;
     method: string;
+    deprecated: boolean;
   }[];
 };
 
@@ -36,6 +37,7 @@ export type MinimalBlueprintSpec = {
   paths: {
     name: string;
     path: string;
+    deprecated: boolean;
   }[];
 };
 

apps/playground-web/src/app/navLinks.ts

@@ -141,6 +141,7 @@ export function getSidebarLinks() {
         return {
           name: pathInfo.name,
           href: `/insight/${blueprint.id}?path=${pathInfo.path}`,
+          crossedOut: pathInfo.deprecated,
         };
       }),
     };

apps/playground-web/src/components/ui/sidebar.tsx

@@ -11,6 +11,7 @@ import { CustomAccordion } from "./CustomAccordion";
 export type LinkMeta = {
   name: string;
   href: string;
+  crossedOut?: boolean;
 };
 
 export type LinkGroup = {
@@ -83,6 +84,7 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) {
       className={clsx(
         "block overflow-hidden text-ellipsis py-1 font-medium transition-colors duration-300 hover:text-foreground lg:text-base",
         isActive ? "text-foreground" : "text-muted-foreground",
+        "crossedOut" in link && link.crossedOut && "line-through",
       )}
     >
       {link.name}