From a1103bfd6989138e0c870ede05224e48489f84e8 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Tue, 3 Feb 2026 20:26:10 +0530
Subject: [PATCH 1/2] portal: OpenApiEndpoint UI tweaks

---
 .../portal/src/app/wallets/get-users/page.mdx |  2 ++
 .../Document/APIEndpointMeta/ApiEndpoint.tsx  | 25 +++++++++++--------
 .../APIEndpointMeta/DynamicRequestExample.tsx | 17 +++++++------
 .../APIEndpointMeta/OpenApiEndpoint.tsx       |  7 +++---
 .../APIEndpointMeta/RequestExample.tsx        |  6 ++---
 5 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/apps/portal/src/app/wallets/get-users/page.mdx b/apps/portal/src/app/wallets/get-users/page.mdx
index 6fb35c8b225..2dbf8b71db2 100644
--- a/apps/portal/src/app/wallets/get-users/page.mdx
+++ b/apps/portal/src/app/wallets/get-users/page.mdx
@@ -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>
diff --git a/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx b/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
index 74b51a82b24..ea86c85aa64 100644
--- a/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
+++ b/apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx
@@ -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}
@@ -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"),
                       })}
                     />
@@ -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"
@@ -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) {
@@ -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>
         )}
@@ -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)
diff --git a/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx b/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
index eb8545e9015..04aea618030 100644
--- a/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
+++ b/apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx
@@ -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>
         )}
@@ -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]"
@@ -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>
@@ -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: (
diff --git a/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx b/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
index 1b6cdd5383d..6c3a9ead66d 100644
--- a/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
+++ b/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
@@ -5,6 +5,7 @@ import {
   ApiEndpoint,
   type ApiEndpointMeta,
 } from "./ApiEndpoint";
+import { Spinner } from "@workspace/ui/components/spinner";
 
 // OpenAPI 3.0 types (simplified for our needs)
 type OpenApiSpec = OpenAPIV3_1.Document;
@@ -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>
   );
 }
diff --git a/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx b/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
index ac8f7186d01..a1ed244f87c 100644
--- a/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
+++ b/apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx
@@ -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">
@@ -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">
@@ -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">

From 4022e335cb5f8c52a69ecf085a19fc0b9ea7a5fb Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Tue, 3 Feb 2026 21:04:15 +0530
Subject: [PATCH 2/2] fix formatting

---
 .../components/Document/APIEndpointMeta/OpenApiEndpoint.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx b/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
index 6c3a9ead66d..4f5626e7c81 100644
--- a/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
+++ b/apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx
@@ -1,3 +1,4 @@
+import { Spinner } from "@workspace/ui/components/spinner";
 import type { OpenAPIV3_1 } from "openapi-types";
 import { cache, Suspense } from "react";
 import {
@@ -5,7 +6,6 @@ import {
   ApiEndpoint,
   type ApiEndpointMeta,
 } from "./ApiEndpoint";
-import { Spinner } from "@workspace/ui/components/spinner";
 
 // OpenAPI 3.0 types (simplified for our needs)
 type OpenApiSpec = OpenAPIV3_1.Document;
@@ -457,7 +457,7 @@ function transformOpenApiToApiEndpointMeta(
 function LoadingFallback() {
   return (
     <div className="flex items-center justify-center p-8 border rounded-lg min-h-[300px] bg-card">
-       <Spinner className="size-8 text-muted-foreground" />
+      <Spinner className="size-8 text-muted-foreground" />
     </div>
   );
 }