From 20fdd5b6d7cc5ad3c773ac0d2e175705c9bd7183 Mon Sep 17 00:00:00 2001
From: iuwqyir <toomas.oosalu@gmail.com>
Date: Tue, 20 May 2025 21:04:28 +0000
Subject: [PATCH] show deprecation in playground UI (#7100)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- 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 -->
---
 .../src/app/insight/[blueprint_slug]/page.tsx | 24 ++++++++++++-
 .../src/app/insight/insightBlueprints.ts      | 34 +++++++++++++++++++
 apps/playground-web/src/app/insight/page.tsx  | 12 ++++++-
 apps/playground-web/src/app/insight/utils.ts  |  2 ++
 apps/playground-web/src/app/navLinks.ts       |  1 +
 .../src/components/ui/sidebar.tsx             |  2 ++
 6 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx b/apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
index 9604218d930..f11aad927ae 100644
--- a/apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
+++ b/apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -5,6 +6,7 @@ import {
   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}
diff --git a/apps/playground-web/src/app/insight/insightBlueprints.ts b/apps/playground-web/src/app/insight/insightBlueprints.ts
index 687595119a6..69add9a31fe 100644
--- a/apps/playground-web/src/app/insight/insightBlueprints.ts
+++ b/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,
       },
     ],
   },
diff --git a/apps/playground-web/src/app/insight/page.tsx b/apps/playground-web/src/app/insight/page.tsx
index b4ce9bef8d8..5585ff5ed7c 100644
--- a/apps/playground-web/src/app/insight/page.tsx
+++ b/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>
diff --git a/apps/playground-web/src/app/insight/utils.ts b/apps/playground-web/src/app/insight/utils.ts
index b07558fda8b..f17b1087fdd 100644
--- a/apps/playground-web/src/app/insight/utils.ts
+++ b/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;
   }[];
 };
 
diff --git a/apps/playground-web/src/app/navLinks.ts b/apps/playground-web/src/app/navLinks.ts
index 0390ebbfe80..dc8ce973c1e 100644
--- a/apps/playground-web/src/app/navLinks.ts
+++ b/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,
         };
       }),
     };
diff --git a/apps/playground-web/src/components/ui/sidebar.tsx b/apps/playground-web/src/components/ui/sidebar.tsx
index 35e3441765e..0b9da32a758 100644
--- a/apps/playground-web/src/components/ui/sidebar.tsx
+++ b/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}