Skip to content

portal: OpenApiEndpoint card UI tweaks #8661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joaquim-verges merged 2 commits into from
Feb 5, 2026
+31 −26
Merged

portal: OpenApiEndpoint card UI tweaks #8661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1103bf
portal: OpenApiEndpoint UI tweaks
MananTank Feb 3, 2026
4022e33
fix formatting
MananTank Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/portal/src/app/wallets/get-users/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ Required headers:

<OpenApiEndpoint path="/v1/wallets/user" method="GET" />

<br/>

For ecosystem wallets, include the ecosystem headers in your requests.

</TabsContent>
Expand Down
25 changes: 14 additions & 11 deletions apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,12 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
hasMultipleExamples={true}
/>
) : (
<div className="rounded-lg border">
<div className="rounded-lg border bg-card">
<RequestExample
codeExamples={requestExamples.map((example) => ({
code: (
<CodeBlock
className="rounded-none border-none"
className="rounded-none border-none !bg-card"
code={example.code}
containerClassName="m-0"
lang={example.lang}
Expand Down Expand Up @@ -190,16 +190,17 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
>
Response
</Heading>
<div className="overflow-hidden rounded-lg border">
<div className="overflow-hidden rounded-lg border bg-card">
<Tabs className="w-full" defaultValue={responseKeys[0]}>
<TabsList className="w-full">
<TabsList className="w-full pt-1">
{responseKeys.map((status) => (
<TabsTrigger key={status} value={status}>
<div className="flex items-center gap-2 py-1">
<div className="flex items-center gap-1.5 px-0.5">
<span
className={cn("h-2 w-2 rounded-full", {
"bg-green-500": status.startsWith("2"),
"bg-red-500": status.startsWith("4"),
"bg-orange-500": status.startsWith("3"),
"bg-yellow-500": status.startsWith("5"),
})}
/>
Expand All @@ -212,7 +213,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
{responseKeys.map((status) => (
<TabsContent className="m-0" key={status} value={status}>
<CodeBlock
className="rounded-none border-none"
className="rounded-none border-none !bg-card"
code={responseExamples[status] as string}
containerClassName="m-0"
lang="json"
Expand All @@ -237,15 +238,16 @@ function ParameterSection(props: {
summary={
<div className="flex items-center gap-3">
<span className="text-sm font-medium">{props.title}</span>
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
<span className="text-xs text-muted-foreground bg-muted size-6 rounded-full inline-flex justify-center items-center">
{props.parameters.length}
</span>
</div>
}
accordionItemClassName="border-0 my-0"
accordionTriggerClassName="p-4 hover:bg-muted/50 transition-colors"
headingClassName="!no-underline"
>
<div className="px-4 pb-4">
<div className="px-4 pb-4 space-y-2">
{props.parameters
.sort((a, b) => {
if (a.required === b.required) {
Expand All @@ -266,16 +268,16 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
return (
<div className="flex flex-col gap-2 p-3">
<div className="flex items-center gap-2 flex-wrap">
<code className="text-foreground text-sm font-mono bg-background px-2 py-1 rounded border">
<code className="text-foreground text-base font-mono font-medium">
{param.name}
</code>
{param.type && (
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded">
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-lg">
{param.type}
</span>
)}
{param.required && (
<span className="text-xs text-warning-text px-2 py-1 rounded border border-warning-text">
<span className="text-xs text-warning-text px-2 py-1 rounded-lg border border-warning-text/30 bg-warning-text/15">
Required
</span>
)}
Expand All @@ -289,6 +291,7 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
<div className="text-sm flex flex-col gap-2">
<span className="text-muted-foreground">Example: </span>
<CodeBlock
className="!bg-card"
code={
typeof param.example === "object"
? JSON.stringify(param.example)
Expand Down
17 changes: 9 additions & 8 deletions apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
return (
<div className="flex flex-col gap-2 p-3 rounded-lg">
<div className="flex items-center gap-2 flex-wrap">
<code className="text-foreground text-sm font-mono bg-background px-2 py-1 rounded border">
<code className="text-foreground text-base font-mono font-medium">
{param.name}
</code>
{param.type && (
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded">
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-lg">
{param.type}
</span>
)}
{param.required && (
<span className="text-xs text-warning-text px-2 py-1 rounded border border-warning-text">
<span className="text-xs text-warning-text px-2 py-1 rounded-lg border border-warning-text/30 bg-warning-text/15">
Required
</span>
)}
Expand All @@ -49,15 +49,15 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
)}

{param.example !== undefined && (
<div className="text-sm flex flex-col gap-2">
<span className="text-muted-foreground">Example: </span>
<div className="text-sm flex flex-col gap-2 my-3">
<span className="text-muted-foreground">Example </span>
<CodeClient
code={
typeof param.example === "object"
? JSON.stringify(param.example)
: String(param.example)
}
className="rounded-none border-none"
className="rounded-lg"
lang="json"
scrollableContainerClassName="m-0"
scrollableClassName="max-h-[200px]"
Expand All @@ -78,10 +78,11 @@ function ParameterSection(props: {
<div className="border-b last:border-b-0">
<Details
key={props.title}
headingClassName="!no-underline"
summary={
<div className="flex items-center gap-3">
<span className="text-sm font-medium">{props.title}</span>
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
<span className="text-xs text-muted-foreground bg-muted size-6 rounded-full inline-flex justify-center items-center">
{props.parameters.length}
</span>
</div>
Expand Down Expand Up @@ -138,7 +139,7 @@ export function DynamicRequestExample(props: DynamicRequestExampleProps) {

return (
<QueryClientProvider client={queryClient}>
<div className="rounded-lg border">
<div className="rounded-lg border bg-card">
<RequestExample
codeExamples={props.requestExamples.map((example) => ({
code: (
Expand Down
7 changes: 3 additions & 4 deletions apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Spinner } from "@workspace/ui/components/spinner";
import type { OpenAPIV3_1 } from "openapi-types";
import { cache, Suspense } from "react";
import {
Expand Down Expand Up @@ -455,10 +456,8 @@ function transformOpenApiToApiEndpointMeta(

function LoadingFallback() {
return (
<div className="flex items-center justify-center p-8">
<div className="text-sm text-muted-foreground">
Loading API documentation...
</div>
<div className="flex items-center justify-center p-8 border rounded-lg min-h-[300px] bg-card">
<Spinner className="size-8 text-muted-foreground" />
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export function RequestExample(props: {
}}
value={selectedFormat}
>
<SelectTrigger className="w-[130px] rounded-full bg-card">
<SelectTrigger className="w-[130px] rounded-xl bg-card ">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-background rounded-xl">
Expand Down Expand Up @@ -144,7 +144,7 @@ export function RequestExample(props: {
}}
value={selectedExampleType}
>
<SelectTrigger className="w-[130px] rounded-full bg-card">
<SelectTrigger className="md:w-[250px] rounded-xl bg-card text-left">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-background rounded-xl">
Expand All @@ -169,7 +169,7 @@ export function RequestExample(props: {
}}
value={selectedExample?.label}
>
<SelectTrigger className="w-[130px] rounded-full bg-card">
<SelectTrigger className="w-[150px] rounded-xl bg-card">
<SelectValue />
</SelectTrigger>
<SelectContent className="bg-background rounded-xl">
Expand Down
Loading