From 91683663df6ed2288c73d94b5dd9abc919e1ef68 Mon Sep 17 00:00:00 2001 From: 0xFirekeeper <0xFirekeeper@gmail.com> Date: Thu, 9 Oct 2025 23:50:20 +0700 Subject: [PATCH 1/4] Refactor ProjectFTUX API key integration section Simplifies the IntegrateAPIKeySection by removing language-specific code examples and tabs, replacing them with a single cURL example for sending a test transaction with the Project Wallet. The IntegrateAPIKeyCodeTabs component and related code examples are removed to streamline the user experience. Closes BLD-391 --- .../ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx | 24 +- .../components/ProjectFTUX/ProjectFTUX.tsx | 215 ++---------------- 2 files changed, 41 insertions(+), 198 deletions(-) diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx index 34edded8bb3..917ed927007 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx @@ -25,21 +25,33 @@ const tabNames: Record = { }; export function IntegrateAPIKeyCodeTabs(props: { - tabs: Record; + tabs: Partial>; }) { - const [tab, setTab] = useState("api"); + const availableTabEntries = ( + Object.entries(tabNames) as Array<[TabKey, string]> + ).filter(([key]) => props.tabs[key]); + + const [tab, setTab] = useState(availableTabEntries[0]?.[0] ?? "api"); + + const activeTab = props.tabs[tab] + ? tab + : (availableTabEntries[0]?.[0] ?? "api"); + + if (availableTabEntries.length === 0) { + return null; + } return (
({ - isActive: tab === key, + tabs={availableTabEntries.map(([key, name]) => ({ + isActive: activeTab === key, name, - onClick: () => setTab(key as TabKey), + onClick: () => setTab(key), }))} />
- {props.tabs[tab]} + {props.tabs[activeTab]}
); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx index ab2c95ede86..8324f50e158 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx @@ -1,14 +1,11 @@ import { ArrowLeftRightIcon, ChevronRightIcon, - CircleAlertIcon, ExternalLinkIcon, } from "lucide-react"; import Link from "next/link"; import type { Project } from "@/api/project/projects"; -import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { CodeServer } from "@/components/ui/code/code.server"; -import { UnderlineLink } from "@/components/ui/UnderlineLink"; import { DotNetIcon } from "@/icons/brand-icons/DotNetIcon"; import { GithubIcon } from "@/icons/brand-icons/GithubIcon"; import { ReactIcon } from "@/icons/brand-icons/ReactIcon"; @@ -25,7 +22,6 @@ import { type ProjectWalletSummary, } from "@/lib/server/project-wallet"; import { ClientIDSection } from "./ClientIDSection"; -import { IntegrateAPIKeyCodeTabs } from "./IntegrateAPIKeyCodeTabs"; import { ProjectWalletControls } from "./ProjectWalletControls.client"; import { ProjectWalletSetup } from "./ProjectWalletSetup.client"; import { SecretKeySection } from "./SecretKeySection"; @@ -46,10 +42,7 @@ export async function ProjectFTUX(props: { wallet={projectWallet} managementAccessToken={props.managementAccessToken} /> - +
- -
- - ); -} - -function IntegrationCodeExamples(props: { - project: Project; - teamSlug: string; -}) { - return ( - - - - - - Configure your app's bundle ID in "Allowed Bundle IDs" in - Project - - - Go to{" "} - - Project settings - {" "} - and add your app's bundle ID to the "Allowed Bundle IDs" list. - - -
- ), - react: ( - - ), - "react-native": ( - - ), - ts: ( +
+

+ Run this command in your terminal to send a test transaction using + your Project Wallet. +

- ), - unity: ( - - - - Configure Client ID in Thirdweb Manager prefab - - - Configure "Client ID" and "Bundle ID" in{" "} - - Thirdweb Manager prefab - - - Make sure to configure your app's bundle ID in "Allowed Bundle - IDs" in{" "} - - Project settings - - - - - ), - unreal: ( - - - - Configure Client ID in Thirdweb Unreal Plugin{" "} - - - Configure "Client ID" and "Bundle ID" in{" "} - - thirdweb plugin settings - - - Make sure to configure your app's bundle ID in "Allowed Bundle - IDs" in{" "} - - Project settings - - - - - ), - api: ( - - ), - curl: ( - - ), - }} - /> +
+ + ); } - -const typescriptCodeExample = (project: Project) => `\ -import { createThirdwebClient } from "thirdweb"; - -const client = createThirdwebClient({ - // use clientId for client side usage - clientId: "${project.publishableKey}", - // use secretKey for server side usage - secretKey: "${project.secretKeys[0]?.masked}", // replace this with full secret key -});`; - -const reactCodeExample = (project: Project) => `\ -import { createThirdwebClient } from "thirdweb"; - -const client = createThirdwebClient({ - clientId: "${project.publishableKey}", -});`; - -const dotNotCodeExample = (project: Project) => `\ -using Thirdweb; - -// For web applications -var client = ThirdwebClient.Create(clientId: "${project.publishableKey}"); - -// For native applications - Replace "yourBundleId" with your app's bundle ID -var client = ThirdwebClient.Create(clientId: "${project.publishableKey}", bundleId: "yourBundleId"); - -// For backend applications (Note: below shown secret key is not the full secret key) -var client = ThirdwebClient.Create(secretKey: "${project.secretKeys[0]?.masked}");`; - -const apiCodeExample = (project: Project): string => `\ -// Server-side only: replace with your full secret key. Never expose in browser code. -fetch('https://api.thirdweb.com/v1/wallets/server', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'x-secret-key': '${project.secretKeys[0]?.masked ?? ""}' - }, - body: JSON.stringify({ - identifier: 'treasury-wallet-123' - }) -});`; - const curlCodeExample = (project: Project): string => `\ -// Server-side only: replace with your full secret key. Never expose in browser code. -curl https://api.thirdweb.com/v1/wallets/server \\ +curl https://api.thirdweb.com/v1/transactions \\ --request POST \\ --header 'Content-Type: application/json' \\ --header 'x-secret-key: ${project.secretKeys[0]?.masked ?? ""}' \\ --data '{ - "identifier": "treasury-wallet-123" -}'`; + "chainId": 421614, + "transactions": [ + { + "data": "0x", + "to": "vitalik.eth", + "value": "0" + } + ] +}' +`; + // products section ------------------------------------------------------------ function ProductsSection(props: { teamSlug: string; projectSlug: string }) { From eef396d1a2a353b4a3221a2f4dd2d75f414dbb2f Mon Sep 17 00:00:00 2001 From: 0xFirekeeper <0xFirekeeper@gmail.com> Date: Thu, 9 Oct 2025 23:55:33 +0700 Subject: [PATCH 2/4] Remove IntegrateAPIKeyCodeTabs component Deleted the IntegrateAPIKeyCodeTabs.tsx file from the ProjectFTUX sidebar components. This component is no longer needed or has been replaced. --- .../ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx | 57 ------------------- 1 file changed, 57 deletions(-) delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx deleted file mode 100644 index 917ed927007..00000000000 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx +++ /dev/null @@ -1,57 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { TabButtons } from "@/components/ui/tabs"; - -type TabKey = - | "ts" - | "react" - | "react-native" - | "dotnet" - | "unity" - | "unreal" - | "api" - | "curl"; - -const tabNames: Record = { - api: "API", - ts: "TypeScript", - react: "React", - "react-native": "React Native", - dotnet: ".NET", - unity: "Unity", - unreal: "Unreal Engine", - curl: "cURL", -}; - -export function IntegrateAPIKeyCodeTabs(props: { - tabs: Partial>; -}) { - const availableTabEntries = ( - Object.entries(tabNames) as Array<[TabKey, string]> - ).filter(([key]) => props.tabs[key]); - - const [tab, setTab] = useState(availableTabEntries[0]?.[0] ?? "api"); - - const activeTab = props.tabs[tab] - ? tab - : (availableTabEntries[0]?.[0] ?? "api"); - - if (availableTabEntries.length === 0) { - return null; - } - - return ( -
- ({ - isActive: activeTab === key, - name, - onClick: () => setTab(key), - }))} - /> -
- {props.tabs[activeTab]} -
- ); -} From cdb91f15486ae895506aec9c53f9ae9bd9f4d668 Mon Sep 17 00:00:00 2001 From: 0xFirekeeper <0xFirekeeper@gmail.com> Date: Fri, 10 Oct 2025 00:01:11 +0700 Subject: [PATCH 3/4] Refactor ProjectFTUX component for consistent formatting Reformatted the ProjectFTUX.tsx file to use consistent indentation and code style throughout. No functional changes were made; this update improves code readability and maintainability. --- .../components/ProjectFTUX/ProjectFTUX.tsx | 671 +++++++++--------- 1 file changed, 335 insertions(+), 336 deletions(-) diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx index 8324f50e158..2b034f285fa 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx @@ -1,7 +1,7 @@ import { - ArrowLeftRightIcon, - ChevronRightIcon, - ExternalLinkIcon, + ArrowLeftRightIcon, + ChevronRightIcon, + ExternalLinkIcon, } from "lucide-react"; import Link from "next/link"; import type { Project } from "@/api/project/projects"; @@ -18,8 +18,8 @@ import { PayIcon } from "@/icons/PayIcon"; import { WalletProductIcon } from "@/icons/WalletProductIcon"; import { getProjectWalletLabel } from "@/lib/project-wallet"; import { - getProjectWallet, - type ProjectWalletSummary, + getProjectWallet, + type ProjectWalletSummary, } from "@/lib/server/project-wallet"; import { ClientIDSection } from "./ClientIDSection"; import { ProjectWalletControls } from "./ProjectWalletControls.client"; @@ -27,129 +27,128 @@ import { ProjectWalletSetup } from "./ProjectWalletSetup.client"; import { SecretKeySection } from "./SecretKeySection"; export async function ProjectFTUX(props: { - project: Project; - teamSlug: string; - wallet?: ProjectWalletSummary | undefined; - managementAccessToken: string | undefined; + project: Project; + teamSlug: string; + wallet?: ProjectWalletSummary | undefined; + managementAccessToken: string | undefined; }) { - const projectWallet = props.wallet ?? (await getProjectWallet(props.project)); + const projectWallet = props.wallet ?? (await getProjectWallet(props.project)); - return ( -
- - - - - -
- ); + return ( +
+ + + + + +
+ ); } export function ProjectWalletSection(props: { - project: Project; - teamSlug: string; - wallet: ProjectWalletSummary | undefined; - managementAccessToken: string | undefined; + project: Project; + teamSlug: string; + wallet: ProjectWalletSummary | undefined; + managementAccessToken: string | undefined; }) { - const defaultLabel = getProjectWalletLabel(props.project.name); - const walletAddress = props.wallet?.address; - const label = props.wallet?.label ?? defaultLabel; + const defaultLabel = getProjectWalletLabel(props.project.name); + const walletAddress = props.wallet?.address; + const label = props.wallet?.label ?? defaultLabel; - return ( -
-
-
-
-
- -
-
-

- Project Wallet -

-

- Default managed server wallet for this project. Use it for - deployments, payments, and API integrations. -

-
-
+ return ( +
+
+
+
+
+ +
+
+

+ Project Wallet +

+

+ Use it for deployments, payments, and API integrations. +

+
+
- {walletAddress ? ( - <> - -
- - View Transactions - - -
- - ) : ( - - )} -
-
-
- ); + {walletAddress ? ( + <> + +
+ + View Transactions + + +
+ + ) : ( + + )} +
+
+
+ ); } // Integrate API key section ------------------------------------------------------------ function IntegrateAPIKeySection({ project }: { project: Project }) { - const secretKeyMasked = project.secretKeys[0]?.masked; - const clientId = project.publishableKey; + const secretKeyMasked = project.secretKeys[0]?.masked; + const clientId = project.publishableKey; - return ( -
-

- Integrate API key -

+ return ( +
+

+ Integrate API key +

-
-
- - {secretKeyMasked && ( - - )} -
+
+
+ + {secretKeyMasked && ( + + )} +
-
-
-

- Run this command in your terminal to send a test transaction using - your Project Wallet. -

- -
-
-
- ); +
+
+

+ Run this command in your terminal to send a test transaction using + your Project Wallet. +

+ +
+
+
+ ); } const curlCodeExample = (project: Project): string => `\ curl https://api.thirdweb.com/v1/transactions \\ @@ -171,265 +170,265 @@ curl https://api.thirdweb.com/v1/transactions \\ // products section ------------------------------------------------------------ function ProductsSection(props: { teamSlug: string; projectSlug: string }) { - const products: Array<{ - title: string; - description: string; - href: string; - icon: React.FC<{ className?: string }>; - }> = [ - { - description: - "Scale your application with a backend server to read, write, and deploy contracts at production-grade.", - href: `/team/${props.teamSlug}/${props.projectSlug}/transactions`, - icon: ArrowLeftRightIcon, - title: "Transactions", - }, - { - description: - "Deploy your own contracts or leverage existing solutions for onchain implementation", - href: `/team/${props.teamSlug}/${props.projectSlug}/contracts`, - icon: ContractIcon, - title: "Contracts", - }, - { - description: - "Add indexing capabilities to retrieve real-time onchain data", - href: `/team/${props.teamSlug}/${props.projectSlug}/insight`, - icon: InsightIcon, - title: "Insight", - }, - { - description: - "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing", - href: `/team/${props.teamSlug}/${props.projectSlug}/payments`, - icon: PayIcon, - title: "Payments", - }, - ]; + const products: Array<{ + title: string; + description: string; + href: string; + icon: React.FC<{ className?: string }>; + }> = [ + { + description: + "Scale your application with a backend server to read, write, and deploy contracts at production-grade.", + href: `/team/${props.teamSlug}/${props.projectSlug}/transactions`, + icon: ArrowLeftRightIcon, + title: "Transactions", + }, + { + description: + "Deploy your own contracts or leverage existing solutions for onchain implementation", + href: `/team/${props.teamSlug}/${props.projectSlug}/contracts`, + icon: ContractIcon, + title: "Contracts", + }, + { + description: + "Add indexing capabilities to retrieve real-time onchain data", + href: `/team/${props.teamSlug}/${props.projectSlug}/insight`, + icon: InsightIcon, + title: "Insight", + }, + { + description: + "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing", + href: `/team/${props.teamSlug}/${props.projectSlug}/payments`, + icon: PayIcon, + title: "Payments", + }, + ]; - return ( -
-

- Complete your full-stack application -

-

- Tools to build frontend, backend, and onchain with built-in - infrastructure and analytics. -

+ return ( +
+

+ Complete your full-stack application +

+

+ Tools to build frontend, backend, and onchain with built-in + infrastructure and analytics. +

-
+
- {/* Feature Cards */} -
- {products.map((product) => ( - - ))} -
-
- ); + {/* Feature Cards */} +
+ {products.map((product) => ( + + ))} +
+
+ ); } function ProductCard(props: { - title: string; - description: string; - href: string; - icon: React.FC<{ className?: string }>; + title: string; + description: string; + href: string; + icon: React.FC<{ className?: string }>; }) { - return ( -
-
- -
-

- - {props.title} - -

-

{props.description}

-
- ); + return ( +
+
+ +
+

+ + {props.title} + +

+

{props.description}

+
+ ); } // sdk section ------------------------------------------------------------ type SDKCardProps = { - name: string; - href: string; - icon: React.FC<{ className?: string }>; - trackingLabel: string; + name: string; + href: string; + icon: React.FC<{ className?: string }>; + trackingLabel: string; }; const sdks: SDKCardProps[] = [ - { - href: "https://portal.thirdweb.com/sdk/typescript", - icon: TypeScriptIcon, - name: "TypeScript", - trackingLabel: "typescript", - }, - { - href: "https://portal.thirdweb.com/react/v5", - icon: ReactIcon, - name: "React", - trackingLabel: "react", - }, - { - href: "https://portal.thirdweb.com/react-native/v5", - icon: ReactIcon, - name: "React Native", - trackingLabel: "react_native", - }, - { - href: "https://portal.thirdweb.com/unity/v5", - icon: UnityIcon, - name: "Unity", - trackingLabel: "unity", - }, - { - href: "https://portal.thirdweb.com/unreal-engine", - icon: UnrealIcon, - name: "Unreal Engine", - trackingLabel: "unreal", - }, - { - href: "https://portal.thirdweb.com/dotnet", - icon: DotNetIcon, - name: ".NET", - trackingLabel: "dotnet", - }, + { + href: "https://portal.thirdweb.com/sdk/typescript", + icon: TypeScriptIcon, + name: "TypeScript", + trackingLabel: "typescript", + }, + { + href: "https://portal.thirdweb.com/react/v5", + icon: ReactIcon, + name: "React", + trackingLabel: "react", + }, + { + href: "https://portal.thirdweb.com/react-native/v5", + icon: ReactIcon, + name: "React Native", + trackingLabel: "react_native", + }, + { + href: "https://portal.thirdweb.com/unity/v5", + icon: UnityIcon, + name: "Unity", + trackingLabel: "unity", + }, + { + href: "https://portal.thirdweb.com/unreal-engine", + icon: UnrealIcon, + name: "Unreal Engine", + trackingLabel: "unreal", + }, + { + href: "https://portal.thirdweb.com/dotnet", + icon: DotNetIcon, + name: ".NET", + trackingLabel: "dotnet", + }, ]; function SDKSection() { - return ( -
-

Client SDKs

-
- {sdks.map((sdk) => ( - - ))} -
-
- ); + return ( +
+

Client SDKs

+
+ {sdks.map((sdk) => ( + + ))} +
+
+ ); } function SDKCard(props: SDKCardProps) { - return ( -
-
- -
-
-

- - {props.name} - -

-

- View Docs - -

-
-
- ); + return ( +
+
+ +
+
+

+ + {props.name} + +

+

+ View Docs + +

+
+
+ ); } // starter kits section ------------------------------------------------------------ type StartedKitCardProps = { - name: string; - href: string; - trackingLabel: string; + name: string; + href: string; + trackingLabel: string; }; const startedKits: StartedKitCardProps[] = [ - { - href: "https://github.com/thirdweb-example/next-starter", - name: "Next Starter", - trackingLabel: "next_starter", - }, - { - href: "https://github.com/thirdweb-example/vite-starter", - name: "Vite Starter", - trackingLabel: "vite_starter", - }, - { - href: "https://github.com/thirdweb-example/expo-starter", - name: "Expo Starter", - trackingLabel: "expo_starter", - }, - { - href: "https://github.com/thirdweb-example/node-starter", - name: "Node Starter", - trackingLabel: "node_starter", - }, + { + href: "https://github.com/thirdweb-example/next-starter", + name: "Next Starter", + trackingLabel: "next_starter", + }, + { + href: "https://github.com/thirdweb-example/vite-starter", + name: "Vite Starter", + trackingLabel: "vite_starter", + }, + { + href: "https://github.com/thirdweb-example/expo-starter", + name: "Expo Starter", + trackingLabel: "expo_starter", + }, + { + href: "https://github.com/thirdweb-example/node-starter", + name: "Node Starter", + trackingLabel: "node_starter", + }, ]; function StarterKitsSection() { - return ( -
-
-

Starter Kits

- - View all - -
+ return ( +
+
+

Starter Kits

+ + View all + +
-
- {startedKits.map((kit) => ( - - ))} -
-
- ); +
+ {startedKits.map((kit) => ( + + ))} +
+
+ ); } function StarterKitCard(props: StartedKitCardProps) { - return ( -
-
- -
+ return ( +
+
+ +
-
- - {props.name} - -

- View Repo - -

-
-
- ); +
+ + {props.name} + +

+ View Repo + +

+
+
+ ); } From 7939e1ca53ccc92f418f214919cf0550532d8a39 Mon Sep 17 00:00:00 2001 From: 0xFirekeeper <0xFirekeeper@gmail.com> Date: Fri, 10 Oct 2025 00:05:22 +0700 Subject: [PATCH 4/4] fmt --- .../components/ProjectFTUX/ProjectFTUX.tsx | 670 +++++++++--------- 1 file changed, 335 insertions(+), 335 deletions(-) diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx index 2b034f285fa..144415b5441 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx @@ -1,7 +1,7 @@ import { - ArrowLeftRightIcon, - ChevronRightIcon, - ExternalLinkIcon, + ArrowLeftRightIcon, + ChevronRightIcon, + ExternalLinkIcon, } from "lucide-react"; import Link from "next/link"; import type { Project } from "@/api/project/projects"; @@ -18,8 +18,8 @@ import { PayIcon } from "@/icons/PayIcon"; import { WalletProductIcon } from "@/icons/WalletProductIcon"; import { getProjectWalletLabel } from "@/lib/project-wallet"; import { - getProjectWallet, - type ProjectWalletSummary, + getProjectWallet, + type ProjectWalletSummary, } from "@/lib/server/project-wallet"; import { ClientIDSection } from "./ClientIDSection"; import { ProjectWalletControls } from "./ProjectWalletControls.client"; @@ -27,128 +27,128 @@ import { ProjectWalletSetup } from "./ProjectWalletSetup.client"; import { SecretKeySection } from "./SecretKeySection"; export async function ProjectFTUX(props: { - project: Project; - teamSlug: string; - wallet?: ProjectWalletSummary | undefined; - managementAccessToken: string | undefined; + project: Project; + teamSlug: string; + wallet?: ProjectWalletSummary | undefined; + managementAccessToken: string | undefined; }) { - const projectWallet = props.wallet ?? (await getProjectWallet(props.project)); + const projectWallet = props.wallet ?? (await getProjectWallet(props.project)); - return ( -
- - - - - -
- ); + return ( +
+ + + + + +
+ ); } export function ProjectWalletSection(props: { - project: Project; - teamSlug: string; - wallet: ProjectWalletSummary | undefined; - managementAccessToken: string | undefined; + project: Project; + teamSlug: string; + wallet: ProjectWalletSummary | undefined; + managementAccessToken: string | undefined; }) { - const defaultLabel = getProjectWalletLabel(props.project.name); - const walletAddress = props.wallet?.address; - const label = props.wallet?.label ?? defaultLabel; + const defaultLabel = getProjectWalletLabel(props.project.name); + const walletAddress = props.wallet?.address; + const label = props.wallet?.label ?? defaultLabel; - return ( -
-
-
-
-
- -
-
-

- Project Wallet -

-

- Use it for deployments, payments, and API integrations. -

-
-
+ return ( +
+
+
+
+
+ +
+
+

+ Project Wallet +

+

+ Use it for deployments, payments, and API integrations. +

+
+
- {walletAddress ? ( - <> - -
- - View Transactions - - -
- - ) : ( - - )} -
-
-
- ); + {walletAddress ? ( + <> + +
+ + View Transactions + + +
+ + ) : ( + + )} +
+
+
+ ); } // Integrate API key section ------------------------------------------------------------ function IntegrateAPIKeySection({ project }: { project: Project }) { - const secretKeyMasked = project.secretKeys[0]?.masked; - const clientId = project.publishableKey; + const secretKeyMasked = project.secretKeys[0]?.masked; + const clientId = project.publishableKey; - return ( -
-

- Integrate API key -

+ return ( +
+

+ Integrate API key +

-
-
- - {secretKeyMasked && ( - - )} -
+
+
+ + {secretKeyMasked && ( + + )} +
-
-
-

- Run this command in your terminal to send a test transaction using - your Project Wallet. -

- -
-
-
- ); +
+
+

+ Run this command in your terminal to send a test transaction using + your Project Wallet. +

+ +
+
+
+ ); } const curlCodeExample = (project: Project): string => `\ curl https://api.thirdweb.com/v1/transactions \\ @@ -170,265 +170,265 @@ curl https://api.thirdweb.com/v1/transactions \\ // products section ------------------------------------------------------------ function ProductsSection(props: { teamSlug: string; projectSlug: string }) { - const products: Array<{ - title: string; - description: string; - href: string; - icon: React.FC<{ className?: string }>; - }> = [ - { - description: - "Scale your application with a backend server to read, write, and deploy contracts at production-grade.", - href: `/team/${props.teamSlug}/${props.projectSlug}/transactions`, - icon: ArrowLeftRightIcon, - title: "Transactions", - }, - { - description: - "Deploy your own contracts or leverage existing solutions for onchain implementation", - href: `/team/${props.teamSlug}/${props.projectSlug}/contracts`, - icon: ContractIcon, - title: "Contracts", - }, - { - description: - "Add indexing capabilities to retrieve real-time onchain data", - href: `/team/${props.teamSlug}/${props.projectSlug}/insight`, - icon: InsightIcon, - title: "Insight", - }, - { - description: - "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing", - href: `/team/${props.teamSlug}/${props.projectSlug}/payments`, - icon: PayIcon, - title: "Payments", - }, - ]; + const products: Array<{ + title: string; + description: string; + href: string; + icon: React.FC<{ className?: string }>; + }> = [ + { + description: + "Scale your application with a backend server to read, write, and deploy contracts at production-grade.", + href: `/team/${props.teamSlug}/${props.projectSlug}/transactions`, + icon: ArrowLeftRightIcon, + title: "Transactions", + }, + { + description: + "Deploy your own contracts or leverage existing solutions for onchain implementation", + href: `/team/${props.teamSlug}/${props.projectSlug}/contracts`, + icon: ContractIcon, + title: "Contracts", + }, + { + description: + "Add indexing capabilities to retrieve real-time onchain data", + href: `/team/${props.teamSlug}/${props.projectSlug}/insight`, + icon: InsightIcon, + title: "Insight", + }, + { + description: + "Bridge, swap, and purchase cryptocurrencies with any fiat options or tokens via cross-chain routing", + href: `/team/${props.teamSlug}/${props.projectSlug}/payments`, + icon: PayIcon, + title: "Payments", + }, + ]; - return ( -
-

- Complete your full-stack application -

-

- Tools to build frontend, backend, and onchain with built-in - infrastructure and analytics. -

+ return ( +
+

+ Complete your full-stack application +

+

+ Tools to build frontend, backend, and onchain with built-in + infrastructure and analytics. +

-
+
- {/* Feature Cards */} -
- {products.map((product) => ( - - ))} -
-
- ); + {/* Feature Cards */} +
+ {products.map((product) => ( + + ))} +
+
+ ); } function ProductCard(props: { - title: string; - description: string; - href: string; - icon: React.FC<{ className?: string }>; + title: string; + description: string; + href: string; + icon: React.FC<{ className?: string }>; }) { - return ( -
-
- -
-

- - {props.title} - -

-

{props.description}

-
- ); + return ( +
+
+ +
+

+ + {props.title} + +

+

{props.description}

+
+ ); } // sdk section ------------------------------------------------------------ type SDKCardProps = { - name: string; - href: string; - icon: React.FC<{ className?: string }>; - trackingLabel: string; + name: string; + href: string; + icon: React.FC<{ className?: string }>; + trackingLabel: string; }; const sdks: SDKCardProps[] = [ - { - href: "https://portal.thirdweb.com/sdk/typescript", - icon: TypeScriptIcon, - name: "TypeScript", - trackingLabel: "typescript", - }, - { - href: "https://portal.thirdweb.com/react/v5", - icon: ReactIcon, - name: "React", - trackingLabel: "react", - }, - { - href: "https://portal.thirdweb.com/react-native/v5", - icon: ReactIcon, - name: "React Native", - trackingLabel: "react_native", - }, - { - href: "https://portal.thirdweb.com/unity/v5", - icon: UnityIcon, - name: "Unity", - trackingLabel: "unity", - }, - { - href: "https://portal.thirdweb.com/unreal-engine", - icon: UnrealIcon, - name: "Unreal Engine", - trackingLabel: "unreal", - }, - { - href: "https://portal.thirdweb.com/dotnet", - icon: DotNetIcon, - name: ".NET", - trackingLabel: "dotnet", - }, + { + href: "https://portal.thirdweb.com/sdk/typescript", + icon: TypeScriptIcon, + name: "TypeScript", + trackingLabel: "typescript", + }, + { + href: "https://portal.thirdweb.com/react/v5", + icon: ReactIcon, + name: "React", + trackingLabel: "react", + }, + { + href: "https://portal.thirdweb.com/react-native/v5", + icon: ReactIcon, + name: "React Native", + trackingLabel: "react_native", + }, + { + href: "https://portal.thirdweb.com/unity/v5", + icon: UnityIcon, + name: "Unity", + trackingLabel: "unity", + }, + { + href: "https://portal.thirdweb.com/unreal-engine", + icon: UnrealIcon, + name: "Unreal Engine", + trackingLabel: "unreal", + }, + { + href: "https://portal.thirdweb.com/dotnet", + icon: DotNetIcon, + name: ".NET", + trackingLabel: "dotnet", + }, ]; function SDKSection() { - return ( -
-

Client SDKs

-
- {sdks.map((sdk) => ( - - ))} -
-
- ); + return ( +
+

Client SDKs

+
+ {sdks.map((sdk) => ( + + ))} +
+
+ ); } function SDKCard(props: SDKCardProps) { - return ( -
-
- -
-
-

- - {props.name} - -

-

- View Docs - -

-
-
- ); + return ( +
+
+ +
+
+

+ + {props.name} + +

+

+ View Docs + +

+
+
+ ); } // starter kits section ------------------------------------------------------------ type StartedKitCardProps = { - name: string; - href: string; - trackingLabel: string; + name: string; + href: string; + trackingLabel: string; }; const startedKits: StartedKitCardProps[] = [ - { - href: "https://github.com/thirdweb-example/next-starter", - name: "Next Starter", - trackingLabel: "next_starter", - }, - { - href: "https://github.com/thirdweb-example/vite-starter", - name: "Vite Starter", - trackingLabel: "vite_starter", - }, - { - href: "https://github.com/thirdweb-example/expo-starter", - name: "Expo Starter", - trackingLabel: "expo_starter", - }, - { - href: "https://github.com/thirdweb-example/node-starter", - name: "Node Starter", - trackingLabel: "node_starter", - }, + { + href: "https://github.com/thirdweb-example/next-starter", + name: "Next Starter", + trackingLabel: "next_starter", + }, + { + href: "https://github.com/thirdweb-example/vite-starter", + name: "Vite Starter", + trackingLabel: "vite_starter", + }, + { + href: "https://github.com/thirdweb-example/expo-starter", + name: "Expo Starter", + trackingLabel: "expo_starter", + }, + { + href: "https://github.com/thirdweb-example/node-starter", + name: "Node Starter", + trackingLabel: "node_starter", + }, ]; function StarterKitsSection() { - return ( -
-
-

Starter Kits

- - View all - -
+ return ( +
+
+

Starter Kits

+ + View all + +
-
- {startedKits.map((kit) => ( - - ))} -
-
- ); +
+ {startedKits.map((kit) => ( + + ))} +
+
+ ); } function StarterKitCard(props: StartedKitCardProps) { - return ( -
-
- -
+ return ( +
+
+ +
-
- - {props.name} - -

- View Repo - -

-
-
- ); +
+ + {props.name} + +

+ View Repo + +

+
+
+ ); }