[BLD-231] Playground: Add API reference, Remove Insight and Payments API playgrounds (#7986)

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/insight-ftux.tsx

@@ -39,10 +39,6 @@ export function InsightFTUX(props: { clientId: string }) {
         },
       ]}
       ctas={[
-        {
-          href: "https://playground.thirdweb.com/insight",
-          label: "Try on Playground",
-        },
         {
           href: "https://portal.thirdweb.com/insight",
           label: "View Docs",

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx

@@ -60,10 +60,6 @@ export default async function Page(props: {
             type: "docs",
             href: "https://portal.thirdweb.com/insight",
           },
-          {
-            type: "playground",
-            href: "https://playground.thirdweb.com/insight",
-          },
           {
             type: "api",
             href: "https://insight-api.thirdweb.com/reference",
@@ -74,44 +70,6 @@ export default async function Page(props: {
           },
         ],
       }}
-      footer={{
-        center: {
-          links: [
-            {
-              href: "https://www.youtube.com/watch?v=U2aW7YIUJVw",
-              label:
-                "Blockchain Data on Any EVM - Quick and Easy REST APIs for Onchain Data",
-            },
-            {
-              href: "https://www.youtube.com/watch?v=HvqewXLVRig",
-              label: "Build a Whale Alerts Telegram Bot with Insight",
-            },
-          ],
-          title: "Tutorials",
-        },
-        left: {
-          links: [
-            {
-              href: "https://portal.thirdweb.com/insight",
-              label: "Overview",
-            },
-            {
-              href: "https://insight-api.thirdweb.com/reference",
-              label: "API Reference",
-            },
-          ],
-          title: "Documentation",
-        },
-        right: {
-          links: [
-            {
-              href: "https://playground.thirdweb.com/insight",
-              label: "API Playground",
-            },
-          ],
-          title: "Demos",
-        },
-      }}
     >
       <ResponsiveSearchParamsProvider value={searchParams}>
         <div>

apps/playground-web/next.config.mjs

@@ -147,6 +147,16 @@ const nextConfig = {
         destination: "/wallets/ecosystem-wallet",
         permanent: false,
       },
+      {
+        source: "/insight",
+        destination: "https://insight.thirdweb.com/reference",
+        permanent: false,
+      },
+      {
+        source: "/payments/backend",
+        destination: "/reference#tag/payments",
+        permanent: false,
+      },
     ];
   },
   async rewrites() {

apps/playground-web/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tooltip": "1.2.7",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@scalar/api-reference-react": "^0.7.42",
     "@tanstack/react-query": "5.81.5",
     "@thirdweb-dev/ai-sdk-provider": "workspace:*",
     "@workspace/ui": "workspace:*",
@@ -77,8 +78,7 @@
     "prefix": "biome check ./src --fix",
     "prelint": "biome check ./src",
     "start": "next start",
-    "typecheck": "tsc --noEmit",
-    "update-insight-blueprints": "bun scripts/updateInsightBlueprints.ts"
+    "typecheck": "tsc --noEmit"
   },
   "version": "0.1.1"
 }

apps/playground-web/scripts/updateInsightBlueprints.ts

@@ -3,7 +3,6 @@ import {
   BlocksIcon,
   BotIcon,
   BoxIcon,
-  BracesIcon,
   CircleUserIcon,
   CreditCardIcon,
   DollarSignIcon,
@@ -24,7 +23,6 @@ import {
   UserIcon,
   WalletCardsIcon,
 } from "lucide-react";
-import { InsightIcon } from "../../icons/InsightIcon";
 
 export type FeatureCardMetadata = {
   icon: React.FC<{ className?: string }>;
@@ -187,52 +185,6 @@ export const paymentsFeatureCards: FeatureCardMetadata[] = [
     description:
       "Enable users to pay for onchain transactions with fiat or crypto",
   },
-  {
-    icon: BracesIcon,
-    title: "Payments API",
-    link: "/payments/backend",
-    description: "Create customizable UIs or backend flows using the HTTP API",
-  },
-];
-
-export const insightFeatureCards: FeatureCardMetadata[] = [
-  {
-    icon: InsightIcon,
-    title: "Events",
-    link: "/insight",
-    description: "Query contract events on any supported EVM chain",
-  },
-  {
-    icon: InsightIcon,
-    title: "Transactions",
-    link: "/insight",
-    description: "Query transactions to and from specified recipients",
-  },
-  {
-    icon: InsightIcon,
-    title: "Tokens",
-    link: "/insight",
-    description: "Query token owners, transfers, prices, and more",
-  },
-  {
-    icon: InsightIcon,
-    title: "NFTs",
-    link: "/insight",
-    description:
-      "Query NFT balances, collections, transfers, metadata, and more.",
-  },
-  {
-    icon: InsightIcon,
-    title: "Wallets",
-    link: "/insight",
-    description: "Query transactions to and from specific wallets",
-  },
-  {
-    icon: InsightIcon,
-    title: "Contracts",
-    link: "/insight",
-    description: "Query a contract's ABI or metadata",
-  },
 ];
 
 export const accountAbstractionsFeatureCards: FeatureCardMetadata[] = [