From 737155ba2177010b055a7c40a946e11474f2b9a8 Mon Sep 17 00:00:00 2001 From: MananTank Date: Wed, 2 Apr 2025 09:12:31 +0000 Subject: [PATCH] [TOOL-3765] Dashboard: Add Insight FTUX (#6614) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on enhancing the `Insight` page by introducing new components for better integration and user experience, specifically around project insights and blueprints. It refactors existing code and adds new features for displaying API usage examples. ### Detailed summary - Updated `isProjectActive` function to accept a structured parameter. - Added `InsightFTUX` component for displaying integration instructions. - Introduced `BlueprintCard` component with feature descriptions. - Modified `WaitingForIntegrationCard` to display the client ID without a period. - Enhanced `page.tsx` to conditionally render `InsightFTUX` or `BlueprintCard` based on project status. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- apps/dashboard/src/@/api/analytics.ts | 7 +- .../components/ProjectFTUX/ProjectFTUX.tsx | 2 +- .../WaitingForIntegrationCard.tsx | 93 ++++++++++++ .../[project_slug]/insight/blueprint-card.tsx | 92 ++++++++++++ .../[project_slug]/insight/insight-ftux.tsx | 79 ++++++++++ .../[project_slug]/insight/page.tsx | 140 ++++++------------ 6 files changed, 313 insertions(+), 100 deletions(-) create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/WaitingForIntegrationCard/WaitingForIntegrationCard.tsx create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/blueprint-card.tsx create mode 100644 apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/insight-ftux.tsx diff --git a/apps/dashboard/src/@/api/analytics.ts b/apps/dashboard/src/@/api/analytics.ts index 71a47616948..55d82f0fe46 100644 --- a/apps/dashboard/src/@/api/analytics.ts +++ b/apps/dashboard/src/@/api/analytics.ts @@ -270,9 +270,10 @@ type ActiveStatus = { ecosystemWallet: boolean; }; -export async function isProjectActive( - params: AnalyticsQueryParams, -): Promise { +export async function isProjectActive(params: { + teamId: string; + projectId: string; +}): Promise { const searchParams = buildSearchParams(params); const res = await fetchAnalytics( `v2/active-usage?${searchParams.toString()}`, diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/ProjectFTUX.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/ProjectFTUX.tsx index 483487ff84c..14c168e896f 100644 --- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/ProjectFTUX.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectFTUX/ProjectFTUX.tsx @@ -62,7 +62,7 @@ function IntegrateAPIKeySection({

Client ID

- Identifies your application. + Identifies your application

+
+

{props.title}

+
+ +
+ {/* Client ID */} +
+

Client ID

+

+ Identifies your application +

+ + +
+ +
+ + {/* Code */} +
+ ({ + name: tab.label, + onClick: () => setSelectedTab(tab.label), + isActive: tab.label === selectedTab, + }))} + /> +
+ {props.codeTabs.find((tab) => tab.label === selectedTab)?.code} +
+
+ +
+
+ {props.ctas.map((cta) => ( + + ))} +
+ +

+ + + + + Waiting for integration +

+
+
+ ); +} diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/blueprint-card.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/blueprint-card.tsx new file mode 100644 index 00000000000..4e4a9716fac --- /dev/null +++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/blueprint-card.tsx @@ -0,0 +1,92 @@ +import { Button } from "@/components/ui/button"; +import { + Code2Icon, + DatabaseIcon, + ExternalLinkIcon, + ZapIcon, +} from "lucide-react"; +import Link from "next/link"; + +export function BlueprintCard() { + const features = [ + { + icon: Code2Icon, + title: "Easy-to-Use API", + description: "RESTful endpoints for any application", + }, + { + icon: DatabaseIcon, + title: "Managed Infrastructure", + description: + "No need to index blockchains yourself or manage infrastructure and RPC costs.", + }, + { + icon: ZapIcon, + title: "Lightning-Fast Queries", + description: "Access any transaction, event or token API data", + }, + ]; + + return ( +
+ {/* header */} +
+
+

Blueprints

+ +
+ +
+
+
+ + {/* Content */} +
+

+ Simple endpoints for querying rich blockchain data +

+

+ A blueprint is an API that provides access to on-chain data in a + user-friendly format.
No need for ABIs, decoding, RPC, or web3 + knowledge required to fetch blockchain data. +

+ +
+ + {/* Features */} +
+ {features.map((feature) => ( +
+
+ +
+
+

{feature.title}

+

+ {feature.description} +

+
+
+ ))} +
+
+ + {/* Playground link */} +
+ +
+
+ ); +} diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/insight-ftux.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/insight-ftux.tsx new file mode 100644 index 00000000000..f854eebe279 --- /dev/null +++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/insight-ftux.tsx @@ -0,0 +1,79 @@ +import { CodeServer } from "@/components/ui/code/code.server"; +import { isProd } from "@/constants/env"; +import { WaitingForIntegrationCard } from "../components/WaitingForIntegrationCard/WaitingForIntegrationCard"; + +export function InsightFTUX(props: { + clientId: string; +}) { + return ( + + ), + }, + { + label: "Python", + code: ( + + ), + }, + { + label: "Curl", + code: ( + + ), + }, + ]} + ctas={[ + { + label: "Try on Playground", + href: "https://playground.thirdweb.com/insight", + trackingLabel: "playground", + }, + { + label: "View Docs", + href: "https://portal.thirdweb.com/insight", + trackingLabel: "docs", + }, + ]} + /> + ); +} + +const twDomain = isProd ? "thirdweb" : "thirdweb-dev"; + +const jsCode = (clientId: string) => `\ +// Example: Get latest 10 transactions on Ethereum +const res = await fetch("https://insight.${twDomain}.com/v1/transactions?chain=1&limit=10&clientId=${clientId}"); +const data = await res.json(); +`; + +const curlCode = (clientId: string) => `\ +# Example: Get latest 10 transactions on Ethereum +curl -X GET "https://insight.${twDomain}.com/v1/transactions?chain=1&limit=10&clientId=${clientId}" +`; + +const pythonCode = (clientId: string) => `\ +# Example: Get latest 10 transactions on Ethereum +import requests + +response = requests.get("https://insight.${twDomain}.com/v1/transactions?chain=1&limit=10&clientId=${clientId}") +data = response.json() +`; diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx index 30daf00d49a..e410796b5fd 100644 --- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/page.tsx @@ -1,106 +1,54 @@ -import { Button } from "@/components/ui/button"; -import { - Code2Icon, - DatabaseIcon, - ExternalLinkIcon, - ZapIcon, -} from "lucide-react"; -import Link from "next/link"; +import { isProjectActive } from "@/api/analytics"; +import { getProject } from "@/api/projects"; +import { getTeamBySlug } from "@/api/team"; +import { notFound } from "next/navigation"; +import { BlueprintCard } from "./blueprint-card"; +import { InsightFTUX } from "./insight-ftux"; + +export default async function Page(props: { + params: Promise<{ + team_slug: string; + project_slug: string; + }>; +}) { + const params = await props.params; + + const [team, project] = await Promise.all([ + getTeamBySlug(params.team_slug), + getProject(params.team_slug, params.project_slug), + ]); + + if (!team || !project) { + notFound(); + } + + const activeResponse = await isProjectActive({ + teamId: team.id, + projectId: project.id, + }); + + const showFTUX = !activeResponse.insight; -export default async function Page() { return (
-

- Insight -

- -
- -
-
- ); -} - -function BlueprintCard() { - const features = [ - { - icon: Code2Icon, - title: "Easy-to-Use API", - description: "RESTful endpoints for any application", - }, - { - icon: DatabaseIcon, - title: "Managed Infrastructure", - description: - "No need to index blockchains yourself or manage infrastructure and RPC costs.", - }, - { - icon: ZapIcon, - title: "Lightning-Fast Queries", - description: "Access any transaction, event or token API data", - }, - ]; - - return ( -
{/* header */} -
-
-

Blueprints

- -
- -
-
-
- - {/* Content */} -
-

- Simple endpoints for querying rich blockchain data +

+

+ Insight +

+

+ APIs to retrieve blockchain data from any EVM chain, enrich it with + metadata, and transform it using custom logic

-

- A blueprint is an API that provides access to on-chain data in a - user-friendly format.
No need for ABIs, decoding, RPC, or web3 - knowledge required to fetch blockchain data. -

- -
- - {/* Features */} -
- {features.map((feature) => ( -
-
- -
-
-

{feature.title}

-

- {feature.description} -

-
-
- ))} -
- {/* Playground link */} -
- -
+
+ + {showFTUX ? ( + + ) : ( + + )}
); }