links

Author: joaquim-verges

apps/playground-web/package.json

@@ -22,7 +22,7 @@
     "next": "15.3.5",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^1.6.12",
-    "openapi-types": "^12.1.3",
+    "openapi-types": "12.1.3",
     "posthog-js": "1.256.1",
     "prettier": "3.6.2",
     "react": "19.1.0",

apps/portal/src/app/wallets/custom-auth/page.mdx

@@ -68,7 +68,10 @@ You will be asked to enter the following values
 
 <TabsContent value="http">
 
-<OpenApiEndpoint path="/v1/auth/initiate" method="POST" />
+<OpenApiEndpoint path="/v1/auth/complete" method="POST" requestBodyOverride={{
+	type: "jwt",
+	payload: "<your-jwt>",
+}}/>
 
 </TabsContent>
 

apps/portal/src/app/wallets/get-users/page.mdx

@@ -20,7 +20,6 @@ From your backend, you can list all your users and fetch the details of any user
 	<TabsList>
 		<TabsTrigger value="single">Single User</TabsTrigger>
 		<TabsTrigger value="all">All Users</TabsTrigger>
-		<TabsTrigger value="create">Create User</TabsTrigger>
 	</TabsList>
 
 <TabsContent value="single">
@@ -82,31 +81,6 @@ Required headers:
 
 </TabsContent>
 
-<TabsContent value="create">
-
-## Create User Wallet (Pregeneration)
-
-Pregenerate a user wallet before authentication. This creates a wallet in advance that can be claimed later when the user authenticates.
-
-### Use Cases
-
-- Create wallets based on known email addresses or user IDs
-- Pre-fund wallets with tokens or NFTs before users claim them
-- Enable smoother onboarding experiences
-
-### Authentication
-
-Required headers:
-- `x-secret-key`: Your secret key for authentication
-- `x-ecosystem-id` (optional): Your ecosystem ID
-- `x-ecosystem-partner-id` (optional): Your ecosystem partner ID
-
-### Example
-
-<OpenApiEndpoint path="/v1/wallets/user" method="POST" />
-
-</TabsContent>
-
 </Tabs>
 
 ## SDK Integration

apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx

@@ -1,4 +1,5 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ExternalLinkIcon } from "lucide-react";
 import { cn } from "../../../lib/utils";
 import { CodeBlock } from "../Code";
 import { Details } from "../Details";
@@ -27,6 +28,7 @@ export type RequestExampleType = {
 export type ApiEndpointMeta = {
   title: string;
   description: React.ReactNode;
+  referenceUrl: string;
   path: string;
   origin: string;
   method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
@@ -109,7 +111,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
   return (
     <div>
       <div>
-        <Heading anchorId="request" className="text-lg lg:text-lg" level={3}>
+        <Heading anchorId={`request#${props.metadata.method.toLowerCase()}${props.metadata.path}`} className="text-lg lg:text-lg" level={3}>
           Request
         </Heading>
 
@@ -118,6 +120,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
           <DynamicRequestExample
             requestExamples={requestExamples}
             endpointUrl={props.metadata.path}
+            referenceUrl={props.metadata.referenceUrl}
             method={props.metadata.method}
             pathParameters={request.pathParameters}
             headers={request.headers}
@@ -139,6 +142,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
                 label: example.label,
               }))}
               endpointUrl={props.metadata.path}
+              referenceUrl={props.metadata.referenceUrl}
               method={props.metadata.method}
             />
 
@@ -177,7 +181,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
       </div>
 
       <div>
-        <Heading anchorId="response" className="text-lg lg:text-lg" level={3}>
+        <Heading anchorId={`response#${props.metadata.method.toLowerCase()}${props.metadata.path}`} className="text-lg lg:text-lg" level={3}>
           Response
         </Heading>
         <div className="overflow-hidden rounded-lg border">

apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx

@@ -17,6 +17,7 @@ interface DynamicRequestExampleProps {
     bodyParameters?: APIParameter[];
   }>;
   endpointUrl: string;
+  referenceUrl: string;
   method: string;
   pathParameters: APIParameter[];
   headers: APIParameter[];
@@ -77,6 +78,7 @@ function ParameterSection(props: {
   return (
     <div className="border-b last:border-b-0">
       <Details
+        key={props.title}
         summary={
           <div className="flex items-center gap-3">
             <span className="text-sm font-medium">{props.title}</span>
@@ -154,6 +156,7 @@ export function DynamicRequestExample(props: DynamicRequestExampleProps) {
             exampleType: example.exampleType,
           }))}
           endpointUrl={props.endpointUrl}
+          referenceUrl={props.referenceUrl}
           method={props.method}
           hasSeparateDropdowns={props.hasMultipleExamples}
           selectedExample={

apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx

@@ -427,12 +427,15 @@ function transformOpenApiToApiEndpointMeta(
     }
   }
 
+  const tag = operation.tags?.[0] || "";
+
   return {
     title: operation.summary || `${method.toUpperCase()} ${path}`,
     description: operation.description || operation.summary || "",
     path,
     origin: baseUrl,
     method: method.toUpperCase() as "GET" | "POST" | "PUT" | "DELETE" | "PATCH",
+    referenceUrl: generateReferenceUrl(tag, path, method),
     request: {
       pathParameters,
       headers,
@@ -479,7 +482,7 @@ async function OpenApiEndpointInner({
       requestBodyOverride,
       responseExampleOverride,
     );
-    return <ApiEndpoint metadata={metadata} key={specUrl + path} />;
+    return <ApiEndpoint metadata={metadata} key={specUrl + path + method} />;
   } catch (error) {
     return (
       <div className="rounded-lg border border-red-200 bg-red-50 p-4">
@@ -491,3 +494,9 @@ async function OpenApiEndpointInner({
     );
   }
 }
+
+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}`;
+}

apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx

@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { ExternalLinkIcon } from "lucide-react";
 
 export function RequestExample(props: {
   codeExamples: Array<{
@@ -19,6 +20,7 @@ export function RequestExample(props: {
   }>;
   method: string;
   endpointUrl: string;
+  referenceUrl: string;
   onExampleChange?: (label: string) => void;
   onFormatChange?: (format: "fetch" | "curl") => void;
   onExampleTypeChange?: (exampleType: string) => void;
@@ -77,7 +79,10 @@ export function RequestExample(props: {
             {props.method}
           </Badge>
           <span className="truncate font-mono text-sm">
-            {props.endpointUrl}
+            <a href={props.referenceUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:underline">
+              {props.endpointUrl}
+              <ExternalLinkIcon className="size-3" />
+            </a>
           </span>
         </div>
         {props.hasSeparateDropdowns ? (

apps/portal/src/components/Document/Details.tsx

@@ -28,15 +28,15 @@ export function Details(props: {
       defaultOpen={props.startExpanded}
       trigger={
         <div className="flex gap-3">
-          <p
+          <span
             className={cn(
               "break-all font-bold text-foreground text-sm tracking-tight",
               "flex w-full gap-3 text-left font-semibold text-foreground group-hover:underline",
               props.headingClassName,
             )}
           >
             {props.summary}
-          </p>
+          </span>
           {props.tags && props.tags.length > 0 && (
             <div className="ml-auto flex items-center gap-2">
               {props.tags?.map((flag) => {