[Dashboard] Add thirdweb API option alongside Engine API (#7734)

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/send-test-tx.client.tsx

@@ -292,7 +292,7 @@ export function SendTestTransaction(props: {
 
   return (
     <div className="mt-3 w-full rounded-md border bg-background p-6">
-      <TryItOut />
+      <TryItOut useEngineAPI={false} />
       <div className="mt-6 flex flex-col gap-2 md:flex-row md:justify-end md:gap-2">
         <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
           <DialogTrigger asChild>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/explorer/components/scalar.tsx

@@ -1,22 +1,40 @@
 "use client";
 import { ApiReferenceReact } from "@scalar/api-reference-react";
 import "@scalar/api-reference-react/style.css";
-import { NEXT_PUBLIC_ENGINE_CLOUD_URL } from "@/constants/public-envs";
+import {
+  NEXT_PUBLIC_ENGINE_CLOUD_URL,
+  NEXT_PUBLIC_THIRDWEB_API_HOST,
+} from "@/constants/public-envs";
+
+interface ScalarProps {
+  useEngineAPI: boolean;
+}
+
+export function Scalar({ useEngineAPI }: ScalarProps) {
+  const apiUrl = useEngineAPI
+    ? NEXT_PUBLIC_ENGINE_CLOUD_URL
+    : NEXT_PUBLIC_THIRDWEB_API_HOST;
+  const openApiUrl = useEngineAPI
+    ? `${apiUrl}/openapi`
+    : `${apiUrl}/openapi.json`;
+  const apiName = useEngineAPI ? "Engine API (advanced)" : "thirdweb API";
+  const serverDescription = useEngineAPI ? "Engine Cloud" : "thirdweb API";
 
-export function Scalar() {
   return (
     <div className="flex flex-col gap-4">
-      <h2 className="font-bold text-2xl tracking-tight">Full API Reference</h2>
+      <h2 className="font-bold text-2xl tracking-tight">
+        Full API Reference - {apiName}
+      </h2>
       <ApiReferenceReact
         configuration={{
           hideModels: true,
           servers: [
             {
-              description: "Engine Cloud",
-              url: NEXT_PUBLIC_ENGINE_CLOUD_URL,
+              description: serverDescription,
+              url: apiUrl,
             },
           ],
-          url: `${NEXT_PUBLIC_ENGINE_CLOUD_URL}/openapi`,
+          url: openApiUrl,
         }}
       />
     </div>

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

@@ -1,11 +1,47 @@
+"use client";
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { TryItOut } from "../server-wallets/components/try-it-out";
 import { Scalar } from "./components/scalar";
 
-export default async function TransactionsExplorerPage() {
+export default function TransactionsExplorerPage() {
+  const [apiMode, setApiMode] = useState<"thirdweb" | "engine">("thirdweb");
+  const useEngineAPI = apiMode === "engine";
+
   return (
     <div className="flex flex-col gap-4">
-      <TryItOut />
-      <Scalar />
+      <div className="flex items-center justify-between rounded-lg border bg-card p-4">
+        <div className="flex flex-col gap-1">
+          <h3 className="font-medium text-sm">Select API Mode</h3>
+          <p className="text-muted-foreground text-xs">
+            Choose between thirdweb API (recommended) or Engine API (advanced)
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <Select
+            value={apiMode}
+            onValueChange={(value: "thirdweb" | "engine") => setApiMode(value)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="thirdweb">
+                thirdweb API (recommended)
+              </SelectItem>
+              <SelectItem value="engine">Engine API (advanced)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <TryItOut useEngineAPI={useEngineAPI} />
+      <Scalar useEngineAPI={useEngineAPI} />
     </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/layout.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
-import { NEXT_PUBLIC_ENGINE_CLOUD_URL } from "@/constants/public-envs";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -45,11 +45,11 @@ function TransactionsLayout(props: {
               <div className="flex items-center gap-2">
                 <Link
                   className="max-w-full truncate text-muted-foreground text-sm hover:text-foreground" // TODO: change this
-                  href={`${NEXT_PUBLIC_ENGINE_CLOUD_URL}/reference`}
+                  href={`${NEXT_PUBLIC_THIRDWEB_API_HOST}/reference`}
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  {NEXT_PUBLIC_ENGINE_CLOUD_URL}
+                  {NEXT_PUBLIC_THIRDWEB_API_HOST}
                 </Link>
               </div>
             </div>