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 34edded8bb3..00000000000 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/IntegrateAPIKeyCodeTabs.tsx +++ /dev/null @@ -1,45 +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: Record; -}) { - const [tab, setTab] = useState("api"); - - return ( -
- ({ - isActive: tab === key, - name, - onClick: () => setTab(key as TabKey), - }))} - /> -
- {props.tabs[tab]} -
- ); -} 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..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,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} /> - +

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

@@ -121,13 +113,7 @@ export function ProjectWalletSection(props: { // Integrate API key section ------------------------------------------------------------ -function IntegrateAPIKeySection({ - project, - teamSlug, -}: { - project: Project; - teamSlug: string; -}) { +function IntegrateAPIKeySection({ project }: { project: Project }) { const secretKeyMasked = project.secretKeys[0]?.masked; const clientId = project.publishableKey; @@ -149,194 +135,38 @@ function IntegrateAPIKeySection({
- -
- - ); -} - -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 }) {