-
@@ -70,20 +75,19 @@ function Hero() {
);
}
-function PlaygroundSection() {
+function AISection() {
return (
-
-
-
-
- {props.metadata.title}
-
- {props.metadata.description}
-
-
-
+
Request
-
-
+ )}
+ ({
code: (
+ }))}
+ endpointUrl={props.metadata.path}
+ referenceUrl={props.metadata.referenceUrl}
+ method={props.metadata.method}
+ />
+
+ {/* Parameters section inside the card */}
+
+ {request.headers.length > 0 && (
+
+
-
+
Response
= {};
- const headers = params.metadata.request.headers
- .filter((h) => h.example !== undefined)
+ // Add query parameters to URL
+ const queryParams = params.metadata.request.queryParameters
+ .filter((q) => q.example !== undefined)
+ .map((q) => `${q.name}=${encodeURIComponent(String(q.example))}`)
+ .join("&");
+
+ if (queryParams) {
+ url += `?${queryParams}`;
+ }
+
+ const displayHeaders = params.metadata.request.headers.filter(
+ (h) => h.example !== undefined,
+ );
+
+ // always show secret key header in examples
+ displayHeaders.push({
+ name: "x-secret-key",
+ example: "",
+ description:
+ "Project secret key - for backend usage only. Should not be used in frontend code.",
+ required: false,
+ });
+
+ const headers = displayHeaders
.map((h) => {
return `-H "${h.name}:${
typeof h.example === "object" && h !== null
@@ -240,9 +362,40 @@ function createFetchCommand(params: { metadata: ApiEndpointMeta }) {
const headersObj: Record = {};
const bodyObj: Record = {};
const { request } = params.metadata;
- const url = `${params.metadata.origin}${params.metadata.path}`;
+ let url = `${params.metadata.origin}${params.metadata.path}`;
+
+ // Add query parameters to URL
+ const queryParams = request.queryParameters
+ .filter((q) => q.example !== undefined)
+ .map((q) => `${q.name}=${encodeURIComponent(String(q.example))}`)
+ .join("&");
+
+ if (queryParams) {
+ url += `?${queryParams}`;
+ }
+
+ const displayHeaders = request.headers.filter((h) => h.example !== undefined);
+
+ // always show secret key header in examples
+ if (params.metadata.path.includes("/v1/auth")) {
+ displayHeaders.push({
+ name: "x-client-id",
+ example: "",
+ description:
+ "Project client ID - for frontend usage on authorized domains.",
+ required: false,
+ });
+ } else {
+ displayHeaders.push({
+ name: "x-secret-key",
+ example: "",
+ description:
+ "Project secret key - for backend usage only. Should not be used in frontend code.",
+ required: false,
+ });
+ }
- for (const param of request.headers) {
+ for (const param of displayHeaders) {
if (param.example !== undefined) {
headersObj[param.name] = param.example;
}
@@ -251,6 +404,8 @@ function createFetchCommand(params: { metadata: ApiEndpointMeta }) {
for (const param of request.bodyParameters) {
if (param.example !== undefined) {
bodyObj[param.name] = param.example;
+ } else {
+ bodyObj[param.name] = param.type || "";
}
}
diff --git a/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx b/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
new file mode 100644
index 00000000000..5ae508c515c
--- /dev/null
+++ b/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import CodeClient, { CodeLoading } from "../../code/code.client";
+import { Details } from "../Details";
+import type { APIParameter } from "./ApiEndpoint";
+import { RequestExample } from "./RequestExample";
+
+interface DynamicRequestExampleProps {
+ requestExamples: Array<{
+ lang: "javascript" | "bash";
+ code: string;
+ label: string;
+ format: "fetch" | "curl";
+ exampleType?: string;
+ bodyParameters?: APIParameter[];
+ }>;
+ endpointUrl: string;
+ referenceUrl: string;
+ method: string;
+ pathParameters: APIParameter[];
+ headers: APIParameter[];
+ queryParameters: APIParameter[];
+ hasMultipleExamples: boolean;
+}
+
+function InlineParameterItem({ param }: { param: APIParameter }) {
+ return (
+
+ );
+}
+
+const queryClient = new QueryClient();
+
+export function DynamicRequestExample(props: DynamicRequestExampleProps) {
+ const [selectedFormat, setSelectedFormat] = useState<"fetch" | "curl">(
+ "fetch",
+ );
+ const [selectedExampleType, setSelectedExampleType] = useState
@@ -149,68 +228,111 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
);
}
-// function ParameterSection(props: {
-// title: string;
-// parameters: APIParameter[];
-// }) {
-// return (
-//
+ );
+}
+
+function InlineParameterItem({ param }: { param: APIParameter }) {
+ return (
+
-//
-// {props.title}
-//
-//
-// );
-// }
-
-// function ParameterItem({ param }: { param: APIParameter }) {
-// return (
-//
-// {props.parameters
-// .sort((a, b) => {
-// if (a.required === b.required) {
-// return 0;
-// }
-// return a.required ? -1 : 1;
-// })
-// .map((param) => (
-//
-//
-//
-// );
-// }
+function ParameterSection(props: {
+ title: string;
+ parameters: APIParameter[];
+}) {
+ return (
+
-// {param.description}
-// {param.type && (
-//
-//
-//
-// )}
-// Type
-//
+
+ }
+ accordionItemClassName="border-0 my-0"
+ accordionTriggerClassName="p-4 hover:bg-muted/50 transition-colors"
+ >
+
+ {props.title}
+
+ {props.parameters.length}
+
+
+ {props.parameters
+ .sort((a, b) => {
+ if (a.required === b.required) {
+ return 0;
+ }
+ return a.required ? -1 : 1;
+ })
+ .map((param) => (
+
+
+
+
+ );
+}
function createCurlCommand(params: { metadata: ApiEndpointMeta }) {
- const url = `${params.metadata.origin}${params.metadata.path}`;
+ let url = `${params.metadata.origin}${params.metadata.path}`;
const bodyObj: Record
+
+
+ {param.description && (
+
+ {param.name}
+
+ {param.type && (
+
+ {param.type}
+
+ )}
+ {param.required && (
+
+ Required
+
+ )}
+ {param.description}
+ )}
+
+ {param.example !== undefined && (
+
+ Example:
+
+ )}
+
+
+ );
+}
+
+function ParameterSection(props: {
+ title: string;
+ parameters: APIParameter[];
+}) {
+ if (props.parameters.length === 0) return null;
+
+ return (
+
+
+
+ {param.description && (
+
+ {param.name}
+
+ {param.type && (
+
+ {param.type}
+
+ )}
+ {param.required && (
+
+ Required
+
+ )}
+ {param.description}
+ )}
+
+ {param.example !== undefined && (
+
+ Example:
+
+ )}
+
+
+ }
+ accordionItemClassName="border-0 my-0"
+ accordionTriggerClassName="p-4 hover:bg-muted/50 transition-colors"
+ >
+
+ {props.title}
+
+ {props.parameters.length}
+
+
+ {props.parameters
+ .sort((a, b) => {
+ if (a.required === b.required) {
+ return 0;
+ }
+ return a.required ? -1 : 1;
+ })
+ .map((param) => (
+
+
+
+ ({
+ code: (
+
+
+
+
+
+ );
+}
+
+export function OpenApiEndpoint(props: OpenApiEndpointProps) {
+ return (
+
+ Loading API documentation...
+
+
+
+ );
+ }
+}
+
+const BASE_API_URL = "https://api.thirdweb.com";
+
+function generateReferenceUrl(
+ tag: string,
+ path: string,
+ method: string,
+): string {
+ return `${BASE_API_URL}/reference#tag/${tag.toLowerCase()}/${method.toLowerCase()}${path}`;
+}
diff --git a/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx b/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
index 988165a6662..d3cb2bd0447 100644
--- a/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
+++ b/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
@@ -1,6 +1,7 @@
"use client";
-import { useState } from "react";
+import { ExternalLinkIcon } from "lucide-react";
+import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import {
Select,
@@ -14,11 +15,61 @@ export function RequestExample(props: {
codeExamples: Array<{
label: string;
code: React.ReactElement;
+ format?: "fetch" | "curl";
+ exampleType?: string;
}>;
method: string;
endpointUrl: string;
+ referenceUrl: string;
+ onExampleChange?: (label: string) => void;
+ onFormatChange?: (format: "fetch" | "curl") => void;
+ onExampleTypeChange?: (exampleType: string) => void;
+ hasSeparateDropdowns?: boolean;
+ selectedExample?: (typeof props.codeExamples)[0];
+ selectedFormat?: "fetch" | "curl";
+ selectedExampleType?: string;
}) {
- const [selectedExample, setSelectedExample] = useState(props.codeExamples[0]);
+ const [internalSelectedExample, setInternalSelectedExample] = useState(
+ props.codeExamples[0],
+ );
+ const [internalSelectedFormat, setInternalSelectedFormat] = useState<
+ "fetch" | "curl"
+ >("fetch");
+ const [internalSelectedExampleType, setInternalSelectedExampleType] =
+ useState
+ Failed to load OpenAPI specification:{" "}
+ {error instanceof Error ? error.message : "Unknown error"}
+
+
@@ -28,28 +79,108 @@ export function RequestExample(props: {
{props.method}
- {props.endpointUrl}
+
+ {props.endpointUrl}
+
-
+ {props.hasSeparateDropdowns ? (
+
+ {/* Format Dropdown (Fetch/Curl) */}
+
+
+ {/* Example Type Dropdown */}
+ {(() => {
+ const exampleTypes = [
+ ...new Set(
+ props.codeExamples
+ .map((ex) => ex.exampleType)
+ .filter(Boolean),
+ ),
+ ];
+ return exampleTypes.length > 1 ? (
+
+ ) : null;
+ })()}
+
+ ) : (
+
+ )}
{selectedExample?.code}
{props.summary} -
+ {props.tags && props.tags.length > 0 && (
{props.tags?.map((flag) => {
@@ -58,7 +58,7 @@ export function Details(props: {
props.accordionTriggerClassName,
)}
>
-
{props.children}
+ {props.children}
);
}
diff --git a/apps/portal/src/components/Document/index.ts b/apps/portal/src/components/Document/index.ts
index fe318889920..63e2dd9b22a 100644
--- a/apps/portal/src/components/Document/index.ts
+++ b/apps/portal/src/components/Document/index.ts
@@ -3,6 +3,7 @@
export { Badge } from "../ui/badge";
// export { Table } from "./Table";
export { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+export { OpenApiEndpoint } from "./APIEndpointMeta/OpenApiEndpoint";
export { AuthList } from "./AuthList";
export { Breadcrumb } from "./Breadcrumb";
export { Callout } from "./Callout";
@@ -18,7 +19,6 @@ export { GithubButtonLink } from "./GithubButtonLink";
// export { EditPage } from "./EditPage";
export { Grid } from "./Grid";
export { Heading } from "./Heading";
-// export { ApiEndpoint } from "./APIEndpointMeta/ApiEndpoint";
export { InlineCode } from "./InlineCode";
export { InstallTabs } from "./InstallTabs";
export { UnorderedList } from "./List";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62b37fe8a9f..a47e78e8cf8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -637,7 +637,7 @@ importers:
specifier: ^1.6.12
version: 1.6.12(next@15.3.5(@opentelemetry/api@1.9.0)(@playwright/test@1.53.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
openapi-types:
- specifier: ^12.1.3
+ specifier: 12.1.3
version: 12.1.3
posthog-js:
specifier: 1.256.1
@@ -793,6 +793,9 @@ importers:
node-html-parser:
specifier: ^6.1.13
version: 6.1.13
+ openapi-types:
+ specifier: 12.1.3
+ version: 12.1.3
posthog-js:
specifier: 1.256.1
version: 1.256.1
@@ -7282,7 +7285,6 @@ packages:
'@walletconnect/modal@2.7.0':
resolution: {integrity: sha512-RQVt58oJ+rwqnPcIvRFeMGKuXb9qkgSmwz4noF8JZGUym3gUAzVs+uW2NQ1Owm9XOJAV+sANrtJ+VoVq1ftElw==}
- deprecated: Please follow the migration guide on https://docs.reown.com/appkit/upgrade/wcm
'@walletconnect/react-native-compat@2.17.3':
resolution: {integrity: sha512-lHKwXKoB0rdDH1ukxUx7o86xosWbttWIHYMZ8tgAQC1k9VH3CZZCoBcHOAAX8iBzyb0n0UP3/9zRrOcJE5nz7Q==}
@@ -16745,7 +16747,7 @@ snapshots:
dependencies:
'@babel/template': 7.27.2
'@babel/traverse': 7.28.0
- '@babel/types': 7.28.0
+ '@babel/types': 7.28.2
transitivePeerDependencies:
- supports-color
@@ -17491,7 +17493,7 @@ snapshots:
'@babel/helper-globals': 7.28.0
'@babel/parser': 7.28.0
'@babel/template': 7.27.2
- '@babel/types': 7.28.0
+ '@babel/types': 7.28.2
debug: 4.4.1(supports-color@8.1.1)
transitivePeerDependencies:
- supports-color
@@ -26797,7 +26799,7 @@ snapshots:
babel-plugin-jest-hoist@29.6.3:
dependencies:
'@babel/template': 7.27.2
- '@babel/types': 7.28.0
+ '@babel/types': 7.28.2
'@types/babel__core': 7.20.5
'@types/babel__traverse': 7.20.7
@@ -28469,8 +28471,8 @@ snapshots:
'@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.8.3)
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
- eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0)
- eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0)
+ eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0)
+ eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
eslint-plugin-react: 7.37.5(eslint@8.57.0)
eslint-plugin-react-hooks: 5.2.0(eslint@8.57.0)
@@ -28489,7 +28491,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
- eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0):
+ eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0):
dependencies:
'@nolyfill/is-core-module': 1.0.39
debug: 4.4.1(supports-color@8.1.1)
@@ -28500,7 +28502,7 @@ snapshots:
tinyglobby: 0.2.14
unrs-resolver: 1.10.1
optionalDependencies:
- eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0)
+ eslint-plugin-import: 2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
transitivePeerDependencies:
- supports-color
@@ -28525,18 +28527,18 @@ snapshots:
- bluebird
- supports-color
- eslint-module-utils@2.12.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0))(eslint@8.57.0):
+ eslint-module-utils@2.12.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
dependencies:
debug: 3.2.7
optionalDependencies:
'@typescript-eslint/parser': 7.14.1(eslint@8.57.0)(typescript@5.8.3)
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
- eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0)
+ eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0)
transitivePeerDependencies:
- supports-color
- eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.0):
+ eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
dependencies:
'@rtsao/scc': 1.1.0
array-includes: 3.1.9
@@ -28547,7 +28549,7 @@ snapshots:
doctrine: 2.1.0
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
- eslint-module-utils: 2.12.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.0))(eslint@8.57.0)
+ eslint-module-utils: 2.12.1(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@7.14.1(eslint@8.57.0)(typescript@5.8.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
hasown: 2.0.2
is-core-module: 2.16.1
is-glob: 4.0.3
@@ -31316,7 +31318,7 @@ snapshots:
'@babel/core': 7.28.0
'@babel/generator': 7.28.0
'@babel/parser': 7.28.0
- '@babel/types': 7.28.0
+ '@babel/types': 7.28.2
flow-enums-runtime: 0.0.6
metro: 0.81.4(bufferutil@4.0.9)(utf-8-validate@5.0.10)
metro-babel-transformer: 0.81.4