feat: add route-specific explorer metadata

Author: niran

src/app/block/[hash]/layout.tsx

@@ -0,0 +1,58 @@
+import type { Metadata } from "next";
+import { createPublicClient, type Hash, http } from "viem";
+import { mainnet } from "viem/chains";
+
+interface BlockLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ hash: string }>;
+}
+
+const RPC_URL = process.env.TIPS_UI_RPC_URL || "http://localhost:8545";
+
+const client = createPublicClient({
+  chain: mainnet,
+  transport: http(RPC_URL),
+});
+
+function blockLabel(value: string): string {
+  if (/^0x[0-9a-f]+$/i.test(value) && value.length < 66) {
+    try {
+      return `#${BigInt(value).toLocaleString()}`;
+    } catch {
+      return value;
+    }
+  }
+
+  if (/^[0-9]+$/.test(value)) {
+    return `#${Number(value).toLocaleString()}`;
+  }
+
+  return `${value.slice(0, 10)}...${value.slice(-8)}`;
+}
+
+async function blockNumberLabel(value: string): Promise<string> {
+  try {
+    const block = /^0x[0-9a-f]{64}$/i.test(value)
+      ? await client.getBlock({ blockHash: value as Hash })
+      : await client.getBlock({ blockNumber: BigInt(value) });
+    return `#${block.number.toLocaleString()}`;
+  } catch {
+    return blockLabel(value);
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: BlockLayoutProps): Promise<Metadata> {
+  const { hash } = await params;
+  const label = await blockNumberLabel(hash);
+
+  return {
+    title: `Block ${label}`,
+    description: `Inspect transactions, execution data, and event history for Base block ${label}.`,
+  };
+}
+
+export default function BlockLayout({ children }: BlockLayoutProps) {
+  return children;
+}

src/app/blocks/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blocks",
+  description: "Browse recent Base blocks and their execution data.",
+};
+
+export default function BlocksLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

src/app/bundles/[hash]/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+
+interface BundleLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ hash: string }>;
+}
+
+function shortHash(hash: string): string {
+  return `${hash.slice(0, 10)}...${hash.slice(-8)}`;
+}
+
+export async function generateMetadata({
+  params,
+}: BundleLayoutProps): Promise<Metadata> {
+  const { hash } = await params;
+  const label = shortHash(hash);
+
+  return {
+    title: `Bundle ${label}`,
+    description: `Inspect bundle history and simulation data for Base bundle ${hash}.`,
+  };
+}
+
+export default function BundleLayout({ children }: BundleLayoutProps) {
+  return children;
+}

src/app/layout.tsx

@@ -13,8 +13,12 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "TIPS",
-  description: "A beautiful UI for interacting with TIPS",
+  title: {
+    default: "TIPS | Base transaction observability",
+    template: "%s | TIPS",
+  },
+  description:
+    "Explore Base transaction events, blocks, bundles, and on-chain inclusion.",
 };
 
 export default function RootLayout({

src/app/txn/[hash]/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+
+interface TransactionLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ hash: string }>;
+}
+
+function shortHash(hash: string): string {
+  return `${hash.slice(0, 10)}...${hash.slice(-8)}`;
+}
+
+export async function generateMetadata({
+  params,
+}: TransactionLayoutProps): Promise<Metadata> {
+  const { hash } = await params;
+  const label = shortHash(hash);
+
+  return {
+    title: `Transaction ${label}`,
+    description: `Inspect audit events and on-chain status for Base transaction ${hash}.`,
+  };
+}
+
+export default function TransactionLayout({
+  children,
+}: TransactionLayoutProps) {
+  return children;
+}

src/app/txs/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Transactions",
+  description: "Browse confirmed Base transactions from newest to oldest.",
+};
+
+export default function TransactionsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}