Display endpoint pricing in server view.

apps/scan/src/app/_components/resources/executor/header/index.tsx

@@ -3,6 +3,7 @@
 import { Method } from './method';
 
 import { Tags } from '@/app/_components/tags';
+import { formatTokenAmount } from '@/lib/token';
 
 import type { Resources, Tag } from '@x402scan/scan-db/types';
 import type { Methods } from '@/types/x402';
@@ -23,6 +24,12 @@ export const Header: React.FC<Props> = ({
   response,
   hideOrigin = false,
 }) => {
+  // Extract the amount from the first accept option
+  const accept = response.accepts?.[0];
+  const maxAmountRequired = accept?.maxAmountRequired
+    ? BigInt(accept.maxAmountRequired)
+    : null;
+
   return (
     <div className="flex-1 flex flex-col gap-2 w-0">
       <div className="flex md:items-center justify-between flex-col md:flex-row gap-4 md:gap-0 flex-1">
@@ -34,6 +41,11 @@ export const Header: React.FC<Props> = ({
               : resource.resource}
           </span>
           <Tags tags={tags} />
+          {maxAmountRequired !== null && (
+            <span className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+              {formatTokenAmount(maxAmountRequired)} USDC
+            </span>
+          )}
         </div>
       </div>
       <p className="text-xs text-muted-foreground">

apps/scan/src/app/_components/resources/executor/index.tsx

@@ -97,6 +97,7 @@ export const LoadingResourceExecutor = () => {
               <div className="flex items-center gap-2 flex-1 w-full md:w-auto">
                 <Skeleton className="w-8 h-4" />
                 <Skeleton className="w-36 h-[16px] md:h-[18px]" />
+                <Skeleton className="w-16 h-6 rounded-md" />
               </div>
             </div>
             <Skeleton className="w-full h-[12px] md:h-[14px]" />