[BLD-231] Playground: Add API reference, Remove Insight and Payments API playgrounds #7986
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughRemoves Insight and Payments Backend playground pages, components, scripts, data, and nav entries. Adds a new API Reference page rendering a fetched OpenAPI spec via Scalar in both Playground and Portal. Updates rewrites to route /insight externally and /payments/backend to /reference anchor. Adjusts dashboard and portal links to remove Playground Insight. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant NextApp as Playground /reference (Server)
participant API as api.thirdweb.com
User->>NextApp: GET /reference
activate NextApp
NextApp->>API: fetch /openapi.json
API-->>NextApp: 200 JSON (OpenAPI spec)
NextApp-->>User: HTML renders ScalarApiReference(spec)
deactivate NextApp
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
MananTank
requested review from
a team,
jnsdls and
joaquim-verges
as code owners
github-actions
bot
added
Dashboard
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7986 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58626 58626
Branches 4146 4146
=======================================
Hits 33145 33145
Misses 25375 25375
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/portal/src/app/reference/ScalarClient.tsx (1)
24-41: Wrap in a.scalar-appcontainer so your custom CSS variables apply.Without the wrapper, variables from
scalar.csswon't scope to the component and theming may not match the design tokens.- return ( - <ApiReferenceReact + return ( + <div className="scalar-app"> + <ApiReferenceReact configuration={{ theme: "deepSpace", sources: [ { content: props.spec, }, ], layout: "modern", withDefaultFonts: false, showSidebar: true, hideModels: false, hideDarkModeToggle: true, hideDownloadButton: false, hideTestRequestButton: false, - }} - /> + }} + /> + </div> );
🧹 Nitpick comments (9)
apps/playground-web/src/components/blocks/scalar-api/scalar.css (1)
1-4: Scoped theming is good; add safe fallbacks to avoid blank backgrounds when tokens are missing.Apply this small hardening:
.scalar-app { - --scalar-background-1: hsl(var(--background)); - --scalar-background-2: hsl(var(--card)); + --scalar-background-1: hsl(var(--background, 0 0% 100%)); + --scalar-background-2: hsl(var(--card, 0 0% 100%)); }Also ensure the Scalar root element actually has the
scalar-appclass so these vars take effect.apps/playground-web/package.json (2)
81-81: Track bundle budget for the new Reference path.Add a size budget so Scalar doesn’t bloat the app. If you already use size-limit elsewhere, extend it here; otherwise consider adding:
"scripts": { "build": "next build", "dev": "rm -rf .next && next dev --turbopack", @@ - "typecheck": "tsc --noEmit" + "typecheck": "tsc --noEmit", + "size": "size-limit" }, + "size-limit": [ + { "name": "reference chunk", "path": "src/app/reference/page.tsx", "limit": "250 KB" } + ], + "devDependencies": { + "@size-limit/preset-app": "^11.1.0", + "size-limit": "^11.1.0" + }Adjust paths/limits to your setup.
20-20: Verify peerDependencies and lazy-load boundary
- @scalar/api-reference-react@0.7.42 declares React ^18.0.0 || ^19.0.0, so React 19 compatibility is covered.
- In apps/portal/src/app/reference/ScalarClient.tsx (Next.js app route), the import is already code-split to /reference.
- In apps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsx the import is static; wrap it in a dynamic import (e.g. next/dynamic) or move it behind a route-specific boundary to keep the initial bundle lean.
apps/playground-web/next.config.mjs (1)
151-154: External Insight redirect: add basePath safety and catch‑all.Add
basePath: falseand a catch‑all to handle legacy deep links:{ source: "/insight", destination: "https://insight.thirdweb.com/reference", + basePath: false, permanent: false, }, + { + source: "/insight/:path*", + destination: "https://insight.thirdweb.com/reference", + basePath: false, + permanent: false, + },apps/playground-web/src/app/navLinks.ts (1)
245-249: Optional: pin exact match for cleaner active state.If you want the Sidebar to mark only the base route active:
{ href: "/reference", label: "API Reference", icon: Code2Icon, + exactMatch: true, },apps/portal/src/app/reference/ScalarClient.tsx (2)
13-22: UseresolvedThemeto correctly handle “system” theme.
themecan be"system".resolvedThemeis always"light"or"dark".- const { theme } = useTheme(); + const { resolvedTheme } = useTheme(); // scalar is using light-mode and dark-mode classes for theming useEffect(() => { - if (theme === "dark") { + if (resolvedTheme === "dark") { document.body.classList.remove("light-mode"); document.body.classList.add("dark-mode"); } else { document.body.classList.remove("dark-mode"); document.body.classList.add("light-mode"); } - }, [theme]); + }, [resolvedTheme]);
3-3: Lazy-load Scalar to keep bundles lean.
@scalar/api-reference-reactis heavy; load it dynamically with no SSR.Apply outside the selected lines:
import dynamic from "next/dynamic"; // keep the CSS imports as-is const ApiReferenceReact = dynamic( () => import("@scalar/api-reference-react").then((m) => m.ApiReferenceReact), { ssr: false }, );apps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsx (2)
13-22: Handle “system” theme viaresolvedTheme.Prevents incorrect toggling when the user prefers system theme.
- const { theme } = useTheme(); + const { resolvedTheme } = useTheme(); // scalar is using light-mode and dark-mode classes for theming useEffect(() => { - if (theme === "dark") { + if (resolvedTheme === "dark") { document.body.classList.remove("light-mode"); document.body.classList.add("dark-mode"); } else { document.body.classList.remove("dark-mode"); document.body.classList.add("light-mode"); } - }, [theme]); + }, [resolvedTheme]);
3-5: Optional: Lazy-load Scalar and remove the local CSS to follow Tailwind-only guidance.
- Dynamic import reduces the initial client bundle.
- Replace
scalar.csswith Tailwind arbitrary properties on the wrapper to avoid plain CSS inapps/playground-web.Outside the selected lines, replace the imports and wrapper:
import dynamic from "next/dynamic"; const ApiReferenceReact = dynamic( () => import("@scalar/api-reference-react").then((m) => m.ApiReferenceReact), { ssr: false }, ); // remove: import "./scalar.css";Then set variables via Tailwind on the wrapper (combined with the earlier wrapper change):
<div className="scalar-app [--scalar-background-1:hsl(var(--background))] [--scalar-background-2:hsl(var(--card))]"> <ApiReferenceReact configuration={{ /* ... */ }} /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (28)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/insight-ftux.tsx(0 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx(0 hunks)apps/playground-web/next.config.mjs(1 hunks)apps/playground-web/package.json(2 hunks)apps/playground-web/scripts/updateInsightBlueprints.ts(0 hunks)apps/playground-web/scripts/utils.ts(0 hunks)apps/playground-web/src/app/data/pages-metadata.ts(0 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/aggregate-parameter-input.client.tsx(0 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx(0 hunks)apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx(0 hunks)apps/playground-web/src/app/insight/insightBlueprints.ts(0 hunks)apps/playground-web/src/app/insight/layout.tsx(0 hunks)apps/playground-web/src/app/insight/page.tsx(0 hunks)apps/playground-web/src/app/insight/utils.ts(0 hunks)apps/playground-web/src/app/navLinks.ts(2 hunks)apps/playground-web/src/app/page.tsx(0 hunks)apps/playground-web/src/app/payments/backend/layout.tsx(0 hunks)apps/playground-web/src/app/payments/backend/page.tsx(0 hunks)apps/playground-web/src/app/payments/backend/reference/page.tsx(0 hunks)apps/playground-web/src/app/payments/backend/utils.ts(0 hunks)apps/playground-web/src/app/reference/page.tsx(1 hunks)apps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsx(1 hunks)apps/playground-web/src/components/blocks/scalar-api/scalar.css(1 hunks)apps/playground-web/src/icons/InsightIcon.tsx(0 hunks)apps/playground-web/src/lib/env.ts(1 hunks)apps/portal/src/app/insight/sidebar.tsx(0 hunks)apps/portal/src/app/reference/ScalarClient.tsx(2 hunks)apps/portal/src/app/reference/page.tsx(1 hunks)
💤 Files with no reviewable changes (19)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/components/insight-ftux.tsx
- apps/playground-web/src/app/payments/backend/utils.ts
- apps/playground-web/src/app/payments/backend/reference/page.tsx
- apps/playground-web/src/app/insight/[blueprint_slug]/page.tsx
- apps/playground-web/scripts/updateInsightBlueprints.ts
- apps/portal/src/app/insight/sidebar.tsx
- apps/playground-web/src/app/insight/insightBlueprints.ts
- apps/playground-web/src/app/insight/layout.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/insight/page.tsx
- apps/playground-web/src/app/payments/backend/page.tsx
- apps/playground-web/src/app/insight/utils.ts
- apps/playground-web/src/app/insight/page.tsx
- apps/playground-web/src/app/page.tsx
- apps/playground-web/src/app/insight/[blueprint_slug]/aggregate-parameter-input.client.tsx
- apps/playground-web/src/app/payments/backend/layout.tsx
- apps/playground-web/scripts/utils.ts
- apps/playground-web/src/app/insight/[blueprint_slug]/blueprint-playground.client.tsx
- apps/playground-web/src/icons/InsightIcon.tsx
- apps/playground-web/src/app/data/pages-metadata.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Track bundle budgets via
package.json#size-limit
Files:
apps/playground-web/package.json
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/playground-web/src/app/reference/page.tsxapps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsxapps/playground-web/src/lib/env.tsapps/portal/src/app/reference/ScalarClient.tsxapps/playground-web/src/app/navLinks.tsapps/portal/src/app/reference/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/playground-web/src/app/reference/page.tsxapps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsxapps/playground-web/src/lib/env.tsapps/portal/src/app/reference/ScalarClient.tsxapps/playground-web/src/app/navLinks.tsapps/portal/src/app/reference/page.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/playground-web/src/app/reference/page.tsxapps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsxapps/playground-web/src/lib/env.tsapps/playground-web/src/app/navLinks.ts
🧠 Learnings (5)
📚 Learning: 2025-08-07T17:24:31.965Z
Learnt from: MananTank
PR: thirdweb-dev/js#7812
File: apps/dashboard/src/app/(app)/team/~/~project/[[...paths]]/page.tsx:1-11
Timestamp: 2025-08-07T17:24:31.965Z
Learning: In Next.js App Router, page components (page.tsx files) are server components by default and do not require the "server-only" import directive. The "server-only" directive is primarily used for utility functions, API helpers, and data access modules that should never be included in the client bundle.
Applied to files:
apps/playground-web/src/app/reference/page.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Icons come from `lucide-react` or the project-specific `…/icons` exports – never embed raw SVG.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
PR: thirdweb-dev/js#7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/playground-web/src/app/navLinks.ts
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
PR: thirdweb-dev/js#7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/playground-web/src/app/navLinks.ts
🧬 Code graph analysis (3)
apps/playground-web/src/app/reference/page.tsx (1)
apps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsx (1)
ScalarApiReference(10-43)
apps/portal/src/app/reference/ScalarClient.tsx (1)
apps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsx (1)
ScalarApiReference(10-43)
apps/portal/src/app/reference/page.tsx (1)
apps/portal/src/app/reference/ScalarClient.tsx (1)
ScalarApiReference(10-43)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/playground-web/src/lib/env.ts (1)
1-3: Delete the dead comment block in apps/playground-web/src/lib/env.ts
TheisProdexport is unused in this workspace—remove lines 1–3 entirely.apps/playground-web/next.config.mjs (1)
156-159: Anchor in redirect destination – verify behavior.Browsers handle fragments client-side; ensure Next keeps the
#tag/paymentsin the Location header for this redirect. If it’s dropped by the hosting platform, consider a client-side scroll strategy. See Next.js redirects docs for behavior details. (nextjs.org)QA steps:
- Visit /payments/backend in a deployed preview.
- Confirm final URL is /reference#tag/payments and that the Payments section is focused.
apps/playground-web/src/app/navLinks.ts (1)
3-3: LGTM: icon import and client directive match repo conventions.
| export default async function ReferencePage() { | ||
| const responses = await fetch("https://api.thirdweb.com/openapi.json"); | ||
| const spec = await responses.json(); | ||
| return <ScalarApiReference spec={spec} />; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add typing, error handling, and cache policy for the server fetch.
Type the component, validate the response, and avoid indefinite caching. Also rename responses to res.
-export default async function ReferencePage() {
- const responses = await fetch("https://api.thirdweb.com/openapi.json");
- const spec = await responses.json();
- return <ScalarApiReference spec={spec} />;
-}
+export default async function ReferencePage(): Promise<JSX.Element> {
+ try {
+ const res = await fetch("https://api.thirdweb.com/openapi.json", {
+ next: { revalidate: 3600 },
+ headers: { accept: "application/json" },
+ });
+ if (!res.ok) {
+ throw new Error(`Failed to load OpenAPI spec: ${res.status} ${res.statusText}`);
+ }
+ const spec = (await res.json()) as OpenAPIV3.Document;
+ return <ScalarApiReference spec={spec} />;
+ } catch {
+ return (
+ <div className="p-6 text-sm text-muted-foreground">
+ Failed to load API Reference. Please retry.
+ </div>
+ );
+ }
+}Add this import outside the selected lines:
import type { OpenAPIV3 } from "openapi-types";🤖 Prompt for AI Agents
In apps/playground-web/src/app/reference/page.tsx around lines 3 to 6, the
component lacks typing, proper error handling, validation of the fetched spec, a
cache policy, and the response variable should be renamed; update the file to
import type { OpenAPIV3 } from "openapi-types" (outside this snippet), change
the signature to export default async function ReferencePage():
Promise<JSX.Element>, call fetch("https://api.thirdweb.com/openapi.json", {
cache: "no-store" }), rename responses -> res, check if (!res.ok) throw new
Error(`Failed to fetch OpenAPI spec: ${res.status} ${res.statusText}`), parse
const spec = (await res.json()) as OpenAPIV3.Document, validate minimal shape
(e.g., if (!spec || typeof spec !== "object" || !("openapi" in spec || "swagger"
in spec)) throw new Error("Invalid OpenAPI document"), and then return
<ScalarApiReference spec={spec} />.
| return ( | ||
| <ApiReferenceReact | ||
| configuration={{ | ||
| theme: "deepSpace", | ||
| sources: [ | ||
| { | ||
| content: props.spec, | ||
| }, | ||
| ], | ||
| layout: "modern", | ||
| withDefaultFonts: false, | ||
| showSidebar: true, | ||
| hideModels: false, | ||
| hideDarkModeToggle: true, | ||
| hideDownloadButton: false, | ||
| hideTestRequestButton: false, | ||
| }} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Ensure custom variables are applied: wrap with .scalar-app.
This also positions us to drop the extra CSS file using Tailwind arbitrary properties if desired.
- return (
- <ApiReferenceReact
+ return (
+ <div className="scalar-app">
+ <ApiReferenceReact
configuration={{
theme: "deepSpace",
sources: [
{
content: props.spec,
},
],
layout: "modern",
withDefaultFonts: false,
showSidebar: true,
hideModels: false,
hideDarkModeToggle: true,
hideDownloadButton: false,
hideTestRequestButton: false,
- }}
- />
+ }}
+ />
+ </div>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return ( | |
| <ApiReferenceReact | |
| configuration={{ | |
| theme: "deepSpace", | |
| sources: [ | |
| { | |
| content: props.spec, | |
| }, | |
| ], | |
| layout: "modern", | |
| withDefaultFonts: false, | |
| showSidebar: true, | |
| hideModels: false, | |
| hideDarkModeToggle: true, | |
| hideDownloadButton: false, | |
| hideTestRequestButton: false, | |
| }} | |
| /> | |
| return ( | |
| <div className="scalar-app"> | |
| <ApiReferenceReact | |
| configuration={{ | |
| theme: "deepSpace", | |
| sources: [ | |
| { | |
| content: props.spec, | |
| }, | |
| ], | |
| layout: "modern", | |
| withDefaultFonts: false, | |
| showSidebar: true, | |
| hideModels: false, | |
| hideDarkModeToggle: true, | |
| hideDownloadButton: false, | |
| hideTestRequestButton: false, | |
| }} | |
| /> | |
| </div> | |
| ); |
🤖 Prompt for AI Agents
In apps/playground-web/src/components/blocks/scalar-api/ScalarClient.tsx around
lines 24 to 41, the ApiReferenceReact component isn’t wrapped in the .scalar-app
container so custom CSS variables won’t apply; wrap the returned
ApiReferenceReact JSX in a parent element with className="scalar-app" (e.g.,
<div className="scalar-app">...</div>) so the component picks up the custom
theme variables, and then you can remove the extra CSS file and migrate any
variable overrides to Tailwind arbitrary properties if desired.
| export default async function ApiReferencePage() { | ||
| const responses = await fetch("https://api.thirdweb.com/openapi.json"); | ||
| const spec = await responses.json(); | ||
| return ( | ||
| <div className="container max-sm:px-0"> | ||
| <ScalarApiReference /> | ||
| <ScalarApiReference spec={spec} /> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Mirror typing and resiliency: type the component, handle fetch failures, and set revalidation.
Also rename responses to res for clarity.
-export default async function ApiReferencePage() {
- const responses = await fetch("https://api.thirdweb.com/openapi.json");
- const spec = await responses.json();
+export default async function ApiReferencePage(): Promise<JSX.Element> {
+ try {
+ const res = await fetch("https://api.thirdweb.com/openapi.json", {
+ next: { revalidate: 3600 },
+ headers: { accept: "application/json" },
+ });
+ if (!res.ok) {
+ throw new Error(`Failed to load OpenAPI spec: ${res.status} ${res.statusText}`);
+ }
+ const spec = (await res.json()) as OpenAPIV3.Document;
+ return (
+ <div className="container max-sm:px-0">
+ <ScalarApiReference spec={spec} />
+ </div>
+ );
+ } catch {
+ return (
+ <div className="container max-sm:px-0">
+ <div className="p-6 text-sm text-muted-foreground">
+ Failed to load API Reference. Please retry.
+ </div>
+ </div>
+ );
+ }
- return (
- <div className="container max-sm:px-0">
- <ScalarApiReference spec={spec} />
- </div>
- );
}Add this import outside the selected lines:
import type { OpenAPIV3 } from "openapi-types";🤖 Prompt for AI Agents
In apps/portal/src/app/reference/page.tsx around lines 13 to 19, the component
lacks explicit typing, doesn't handle fetch failures, needs ISR revalidation,
and the variable name should be simplified; add the import "import type {
OpenAPIV3 } from 'openapi-types';" at the top, change the function signature to
return JSX and accept no implicit any (e.g. export default async function
ApiReferencePage(): Promise<JSX.Element>), rename responses to res, call fetch
with a revalidate option (e.g. fetch(url, { next: { revalidate: 60 } })), check
res.ok and throw or handle non-2xx responses before calling res.json(), type the
parsed spec as OpenAPIV3.Document (const spec = await res.json() as
OpenAPIV3.Document) and ensure the ScalarApiReference prop is passed the
correctly typed spec or guarded when undefined.
0xFirekeeper
added
the
merge-queue
Merge activity
|
0xFirekeeper
deleted the
09-05-_bld-231_playground_add_api_reference_remove_insight_and_payments_api_playgrounds
branch
PR-Codex overview
This PR primarily focuses on the removal of several files related to the
insightandpaymentsfeatures, updates to theScalarApiReferencecomponent, and modifications to routing and sidebar links. It also introduces new CSS styles and adjusts the API reference fetching logic.Detailed summary
insightandpayments..scalar-appstyles inscalar.css.next.config.mjsfor/insightand/payments/backend.ScalarApiReferenceto accept aspecprop and fetch API data.insightFeatureCardsfrom the feature card metadata.insightand add anAPI Referencelink.ApiReferencePageto fetch and display API specs.InsightIconfrom various locations.Summary by CodeRabbit
New Features
Documentation