feat: chainhooks v2

app/[locale]/(home)/_pages/page.en.tsx

@@ -57,6 +57,7 @@ export default function HomePage() {
             <Cards>
               <SmallCard
                 icon={<Chainhook />}
+                badge="beta"
                 href="/tools/chainhook"
                 title="Chainhook"
                 description="Create custom event streams and triggers for real-time blockchain data processing."

app/[locale]/(home)/tools/_pages/page.en.tsx

@@ -16,12 +16,15 @@ export default function ToolsPage() {
               href="/tools/chainhook"
               title="Chainhook"
               icon={<Chainhook />}
+              badge="beta"
+              tag="Stacks"
               description="Create custom event streams and triggers for real-time blockchain data processing."
             />
             <IndexCard
               href="/tools/contract-monitoring"
               title="Contract Monitoring"
               icon={<Brackets />}
+              tag="Stacks"
               description="Monitor and track smart contract activity and performance metrics."
             />
             <IndexCard

app/[locale]/[...slug]/page.tsx

@@ -26,6 +26,7 @@ import { API } from '@/components/reference/api-page';
 import { Badge } from '@/components/ui/badge';
 import * as customIcons from '@/components/ui/icon';
 import { TagFilterSystem } from '@/components/ui/tag-filter-system';
+import { getAPIConfig } from '@/lib/api-config';
 import { i18n } from '@/lib/i18n';
 import { getAllFilterablePages, source } from '@/lib/source';
 import type { HeadingProps } from '@/types';
@@ -120,6 +121,7 @@ export default async function Page(props: {
     interactiveLinks, // Use the processed links with React components
   };
 
+
   return (
     <DocsPage data={pageData}>
       {page.data.interactive ? (
@@ -138,14 +140,20 @@ export default async function Page(props: {
                   components={getMDXComponents({
                     // Custom overrides that need special handling
                     API: (props) => <API {...props} />,
-                    APIPage: (props) => (
-                      <APIPage
-                        baseUrl="https://api.hiro.so"
-                        enablePlayground={true}
-                        clarityConversion={true}
-                        {...props}
-                      />
-                    ),
+                    APIPage: (props) => {
+                      const config = props.document
+                        ? getAPIConfig(String(props.document))
+                        : undefined;
+
+                      const mergedProps = {
+                        ...(config ?? {}),
+                        ...props,
+                        playgroundOptions:
+                          props.playgroundOptions ?? config?.playgroundOptions,
+                      };
+
+                      return <APIPage {...mergedProps} />;
+                    },
                     h1: ({ children, ...props }: HeadingProps) => {
                       const H1 = defaultMdxComponents.h1 as React.ComponentType<HeadingProps>;
                       const id = typeof children === 'string' ? children : undefined;
@@ -238,14 +246,20 @@ export default async function Page(props: {
                   components={getMDXComponents({
                     // Custom overrides that need special handling
                     API: (props) => <API {...props} />,
-                    APIPage: (props) => (
-                      <APIPage
-                        baseUrl="https://api.hiro.so"
-                        enablePlayground={true}
-                        clarityConversion={true}
-                        {...props}
-                      />
-                    ),
+                    APIPage: (props) => {
+                      const config = props.document
+                        ? getAPIConfig(String(props.document))
+                        : undefined;
+
+                      const mergedProps = {
+                        ...(config ?? {}),
+                        ...props,
+                        playgroundOptions:
+                          props.playgroundOptions ?? config?.playgroundOptions,
+                      };
+
+                      return <APIPage {...mergedProps} />;
+                    },
                     h1: ({ children, ...props }: HeadingProps) => {
                       const H1 = defaultMdxComponents.h1 as React.ComponentType<HeadingProps>;
                       const id = typeof children === 'string' ? children : undefined;

app/api/proxy/route.ts

@@ -0,0 +1,86 @@
+import { NextResponse } from 'next/server';
+
+const ALLOWED_METHODS = new Set(['GET', 'POST', 'PUT', 'PATCH', 'DELETE']);
+const ALLOWED_HOSTNAMES = new Set(['api.hiro.so', 'api.mainnet.hiro.so', 'api.testnet.hiro.so']);
+const BLOCKED_REQUEST_HEADERS = new Set(['host', 'cookie', 'connection', 'content-length']);
+const STRIPPED_RESPONSE_HEADERS = new Set(['set-cookie', 'server', 'via', 'www-authenticate']);
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(request: Request) {
+  try {
+    const { url, method = 'GET', headers = {}, body } = await request.json();
+
+    if (!url || typeof url !== 'string') {
+      return NextResponse.json({ error: 'A target URL is required.' }, { status: 400 });
+    }
+
+    let parsedUrl: URL;
+    try {
+      parsedUrl = new URL(url);
+    } catch {
+      return NextResponse.json({ error: 'URL must be absolute.' }, { status: 400 });
+    }
+
+    if (parsedUrl.protocol !== 'https:' || !ALLOWED_HOSTNAMES.has(parsedUrl.hostname)) {
+      return NextResponse.json(
+        { error: 'This proxy only allows Hiro API hosts over HTTPS.' },
+        { status: 403 },
+      );
+    }
+
+    const upperMethod = String(method).toUpperCase();
+    if (!ALLOWED_METHODS.has(upperMethod)) {
+      return NextResponse.json(
+        { error: `Method ${upperMethod} is not supported by the proxy.` },
+        { status: 405 },
+      );
+    }
+
+    const upstreamHeaders = new Headers();
+    if (headers && typeof headers === 'object') {
+      for (const [key, value] of Object.entries(headers)) {
+        if (typeof value === 'string' && !BLOCKED_REQUEST_HEADERS.has(key.toLowerCase())) {
+          upstreamHeaders.set(key, value);
+        }
+      }
+    }
+
+    const requestInit: RequestInit = {
+      method: upperMethod,
+      headers: upstreamHeaders,
+    };
+
+    if (body !== undefined && body !== null && upperMethod !== 'GET' && upperMethod !== 'HEAD') {
+      requestInit.body = typeof body === 'string' ? body : JSON.stringify(body);
+    }
+
+    const upstreamResponse = await fetch(parsedUrl, requestInit);
+    const contentType = upstreamResponse.headers.get('content-type') ?? '';
+    let data: unknown;
+
+    if (contentType.includes('application/json')) {
+      data = await upstreamResponse.json();
+    } else {
+      data = await upstreamResponse.text();
+    }
+
+    const sanitizedHeaders = Object.fromEntries(
+      Array.from(upstreamResponse.headers.entries()).filter(
+        ([key]) => !STRIPPED_RESPONSE_HEADERS.has(key.toLowerCase()),
+      ),
+    );
+
+    return NextResponse.json({
+      status: upstreamResponse.status,
+      statusText: upstreamResponse.statusText,
+      headers: sanitizedHeaders,
+      data,
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Proxy request failed.' },
+      { status: 500 },
+    );
+  }
+}

app/layout.config.tsx

@@ -25,6 +25,7 @@ export const baseOptions: BaseLayoutProps = {
           text: 'Chainhook',
           description: 'Monitor and analyze Clarity smart contract activity.',
           url: '/tools/chainhook',
+          isBeta: true,
         },
         {
           text: 'Contract Monitoring',
@@ -35,7 +36,6 @@ export const baseOptions: BaseLayoutProps = {
           text: 'Bitcoin Indexer',
           description: 'Indexer for Bitcoin blockchain data.',
           url: '/tools/bitcoin-indexer',
-          isNew: true,
         },
       ],
     },
@@ -69,6 +69,12 @@ export const baseOptions: BaseLayoutProps = {
           description: 'API for retrieving NFT and fungible token metadata.',
           url: '/apis/token-metadata-api',
         },
+        {
+          text: 'Chainhook API',
+          description: 'RESTful API for accessing Chainhook',
+          url: '/apis/chainhook-api',
+          isNew: true,
+        },
         {
           text: 'Platform API',
           description: 'API for accessing Hiro Platform data and functionality.',

app/layout.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { aeonik, aeonikFono, aeonikMono, inter } from '@/fonts';
 import { KeyboardShortcutsProvider } from '@/hooks/use-keyboard-shortcuts';
 import { QueryProvider } from '@/providers/query-provider';
+import { ApiCredentialsProvider } from '@/providers/api-credentials-provider';
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
@@ -14,15 +15,17 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     >
       <body className="flex flex-col min-h-screen">
         <QueryProvider>
-          <KeyboardShortcutsProvider>
-            <RootProvider
-              search={{
-                enabled: true,
-              }}
-            >
-              {children}
-            </RootProvider>
-          </KeyboardShortcutsProvider>
+          <ApiCredentialsProvider>
+            <KeyboardShortcutsProvider>
+              <RootProvider
+                search={{
+                  enabled: true,
+                }}
+              >
+                {children}
+              </RootProvider>
+            </KeyboardShortcutsProvider>
+          </ApiCredentialsProvider>
         </QueryProvider>
       </body>
     </html>

components/card.tsx

@@ -123,6 +123,7 @@ export type SecondaryCardProps = {
   title: string;
   description: string;
   tag?: string;
+  beta?: string;
 } & Omit<LinkProps, 'title'>;
 
 export function SecondaryCard({
@@ -174,17 +175,23 @@ export type IndexCardProps = {
   title: string;
   description: string;
   tag?: string;
+  badge?: 'new' | 'beta';
 } & Omit<LinkProps, 'title'>;
 
 export function IndexCard({
   icon,
   title,
   description,
   tag,
+  badge,
   ...props
 }: IndexCardProps): React.ReactElement {
   const isBitcoinTag =
     tag && (tag.toLowerCase() === 'bitcoin' || tag.toLowerCase() === 'bitcoin l1');
+  const badgeClassName =
+    badge === 'beta'
+      ? 'bg-brand-orange dark:bg-brand-orange text-neutral-950'
+      : 'bg-[var(--color-brand-mint)] dark:bg-[var(--color-brand-mint)] text-neutral-950';
 
   return (
     <Link
@@ -201,17 +208,26 @@ export function IndexCard({
           </div>
         )}
         <div className="flex-1 min-w-0">
-          <h3 className="font-normal text-card-foreground mb-2 leading-tight">{title}</h3>
+          <div className="flex items-center gap-2 mb-2">
+            <h3 className="font-normal text-card-foreground leading-tight">{title}</h3>
+            {badge && (
+              <Badge
+                className={cn(
+                  'font-regular text-[10px] px-1 py-0.5 rounded uppercase bg-brand-orange dark:bg-brand-orange text-neutral-950 border-none',
+                  badgeClassName,
+                )}
+              >
+                {badge.toUpperCase()}
+              </Badge>
+            )}
+          </div>
           <p className="text-sm text-muted-foreground leading-relaxed">{description}</p>
         </div>
         {tag && (
           <Badge
             variant="outline"
             className={cn(
-              'uppercase rounded-md transition-colors h-fit',
-              isBitcoinTag
-                ? 'bg-orange-500 dark:bg-brand-orange text-neutral-900 border-none'
-                : 'text-card-foreground bg-accent border border-border shadow-md',
+              'uppercase rounded-md transition-colors h-fit bg-neutral-800 text-white dark:bg-brand-gold dark:text-neutral-900 border-none',
             )}
           >
             {tag}
@@ -223,12 +239,24 @@ export function IndexCard({
 }
 
 export type SmallCardProps = {
-  icon: ReactNode;
+  icon?: ReactNode;
   title: string;
   description: string;
+  badge?: 'new' | 'beta';
 } & Omit<LinkProps, 'title'>;
 
-export function SmallCard({ icon, title, description, ...props }: CardProps): React.ReactElement {
+export function SmallCard({
+  icon,
+  title,
+  description,
+  badge,
+  ...props
+}: SmallCardProps): React.ReactElement {
+  const badgeClassName =
+    badge === 'beta'
+      ? 'bg-brand-orange dark:bg-brand-orange text-neutral-950'
+      : 'bg-[var(--color-brand-mint)] dark:bg-[var(--color-brand-mint)] text-neutral-950';
+
   return (
     <Link
       {...props}
@@ -244,9 +272,21 @@ export function SmallCard({ icon, title, description, ...props }: CardProps): Re
           </div>
         )}
         <div className="flex flex-col w-full">
-          <h3 className="mb-1 font-inter font-medium text-md text-primary dark:text-[#f6f5f3]">
-            {title}
-          </h3>
+          <div className="flex items-center gap-2">
+            <h3 className="mb-1 font-inter font-medium text-md text-primary dark:text-[#f6f5f3]">
+              {title}
+            </h3>
+            {badge && (
+              <Badge
+                className={cn(
+                  'font-regular text-[10px] px-1 py-0.5 rounded uppercase bg-brand-orange dark:bg-brand-orange text-neutral-950 border-none',
+                  badgeClassName,
+                )}
+              >
+                {badge.toUpperCase()}
+              </Badge>
+            )}
+          </div>
           <p className="text-sm text-muted-foreground">{description}</p>
         </div>
       </div>

components/docskit/code-group.tsx

@@ -1,6 +1,6 @@
 export const TITLEBAR = 'px-2 py-1 w-full h-10 font-inter';
 export const CODEBLOCK =
-  'border rounded selection:bg-ch-selection border-ch-border overflow-x-auto my-4 relative grid';
+  'border rounded selection:bg-ch-selection border-ch-border overflow-x-auto my-4 relative grid group';
 
 type CodeOptions = {
   copyButton?: boolean;