DO NOT MERGE: Offsite swap branch

.env.example

@@ -0,0 +1,5 @@
+# AWS S3 Font Storage (server-side only, used by prebuild script)
+AWS_ACCESS_KEY_ID=your_access_key_id
+AWS_SECRET_ACCESS_KEY=your_secret_access_key
+AWS_S3_BUCKET=your_bucket_name
+AWS_REGION=us-east-1

next.config.js

@@ -94,10 +94,14 @@ const nextConfig = {
       layers: true,
     };
 
+
     return config;
   },
 
   experimental: {
+    webpackBuildWorker: true,
+    parallelServerCompiles: true,
+    parallelServerBuildTraces: true,
     optimizePackageImports: [
       '@hyperlane-xyz/registry',
       '@hyperlane-xyz/sdk',

package.json

@@ -40,6 +40,7 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
+    "@aws-sdk/client-s3": "^3.967.0",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.1",
     "@tanstack/eslint-plugin-query": "^5.28.6",
@@ -75,6 +76,8 @@
   },
   "scripts": {
     "clean": "rm -rf dist cache .next",
+    "prebuild": "node scripts/fetch-fonts.mjs",
+    "fetch-fonts": "node --env-file=.env.local scripts/fetch-fonts.mjs",
     "dev": "next dev",
     "build": "next build",
     "typecheck": "tsc",
@@ -91,7 +94,8 @@
       "cipher-base": "1.0.5",
       "elliptic": "6.6.1",
       "pbkdf2": "3.1.3",
-      "form-data": "4.0.4"
+      "form-data": "4.0.4",
+      "@hyperlane-xyz/sdk": "21.1.0-preview.9c72f6fb2deb13238aa68a4a83bff7a7156047e6"
     },
     "onlyBuiltDependencies": []
   }

scripts/fetch-fonts.mjs

@@ -0,0 +1,87 @@
+import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3';
+import { createWriteStream, existsSync, mkdirSync } from 'fs';
+import { dirname, join } from 'path';
+import { Readable } from 'stream';
+import { pipeline } from 'stream/promises';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const FONTS_DIR = join(__dirname, '..', 'public', 'fonts');
+
+// Font files to download from S3
+const FONTS = [
+  // Variable fonts for CSS (browser rendering)
+  'PPValve-PlainVariable.woff2',
+  'PPFraktionMono-Variable.woff2',
+  // TTF fonts for OG image generation (Satori requires TTF)
+  'PPValve-PlainMedium.ttf',
+  'PPFraktionMono-Regular.ttf',
+];
+
+async function fetchFonts() {
+  const { AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_S3_BUCKET, AWS_REGION } = process.env;
+
+  // Gracefully skip if environment variables are not configured
+  if (!AWS_ACCESS_KEY_ID || !AWS_SECRET_ACCESS_KEY || !AWS_S3_BUCKET) {
+    console.warn('AWS environment variables not configured - skipping font download');
+    console.warn(
+      'To enable font fetching, set: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_S3_BUCKET',
+    );
+    return;
+  }
+
+  const s3 = new S3Client({
+    region: AWS_REGION || 'us-east-1',
+    credentials: {
+      accessKeyId: AWS_ACCESS_KEY_ID,
+      secretAccessKey: AWS_SECRET_ACCESS_KEY,
+    },
+  });
+
+  // Ensure fonts directory exists
+  if (!existsSync(FONTS_DIR)) {
+    mkdirSync(FONTS_DIR, { recursive: true });
+    console.log(`Created directory: ${FONTS_DIR}`);
+  }
+
+  const results = { success: [], failed: [] };
+
+  // Download each font, continuing on failure
+  for (const fontFile of FONTS) {
+    const outputPath = join(FONTS_DIR, fontFile);
+
+    try {
+      console.log(`Downloading ${fontFile}...`);
+
+      const command = new GetObjectCommand({
+        Bucket: AWS_S3_BUCKET,
+        Key: fontFile,
+      });
+
+      const response = await s3.send(command);
+      const writeStream = createWriteStream(outputPath);
+
+      await pipeline(Readable.fromWeb(response.Body.transformToWebStream()), writeStream);
+
+      console.log(`Downloaded ${fontFile}`);
+      results.success.push(fontFile);
+    } catch (error) {
+      console.warn(`Failed to download ${fontFile}: ${error.message}`);
+      results.failed.push(fontFile);
+    }
+  }
+
+  // Summary
+  console.log(
+    `\nFont download complete: ${results.success.length} succeeded, ${results.failed.length} failed`,
+  );
+
+  if (results.failed.length > 0) {
+    console.warn('Failed fonts:', results.failed.join(', '));
+  }
+}
+
+fetchFonts().catch((error) => {
+  console.warn('Font fetch script encountered an error:', error.message);
+  // Exit gracefully - don't fail the build
+});

src/AppLayout.tsx

@@ -18,13 +18,10 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{`Hyperlane Explorer | ${getHeadTitle(pathName)}`}</title>
       </Head>
-      <div
-        style={styles.container}
-        className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between bg-blue-500"
-      >
-        {/* <InfoBanner /> */}
+      <div className="min-w-screen relative flex h-full min-h-screen w-full flex-col justify-between bg-brand-gradient">
+        <div className="pointer-events-none fixed inset-0 z-0" style={styles.starOverlay} />
         <Header pathName={pathName} />
-        <div className="mx-auto max-w-5xl grow">
+        <div className="relative z-10 mx-auto max-w-5xl grow">
           <main style={styles.main} className="relative min-h-full pt-3">
             {children}
           </main>
@@ -42,10 +39,9 @@ function getHeadTitle(pathName: string) {
 }
 
 const styles = {
-  container: {
+  starOverlay: {
     backgroundImage: 'url(/images/background.svg)',
     backgroundSize: 'cover',
-    backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center',
   },
   main: {

src/components/buttons/RadioButtons.tsx

@@ -18,7 +18,7 @@ export function RadioButtons({ options, selected, onChange, label }: Props) {
               key={o.value}
               value={o.value}
               className={({ checked }) =>
-                `${checked ? 'bg-blue-500 hover:bg-blue-400' : 'bg-white hover:bg-gray-100'} relative flex cursor-pointer px-2 py-1.5 outline-none`
+                `${checked ? 'bg-primary-500 hover:bg-primary-400' : 'bg-white hover:bg-gray-100'} relative flex cursor-pointer px-2 py-1.5 outline-none`
               }
             >
               {({ checked }) => (

src/components/buttons/SolidButton.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactElement } from 'react';
 
 interface ButtonProps {
-  color?: 'white' | 'blue' | 'green' | 'red' | 'pink'; // defaults to blue
+  color?: 'white' | 'primary' | 'green' | 'red' | 'accent';
   type?: 'submit' | 'reset' | 'button';
   onClick?: () => void;
   classes?: string;
@@ -24,18 +24,18 @@ export function SolidButton(props: PropsWithChildren<ButtonProps>) {
     title,
     passThruProps,
   } = props;
-  const color = _color ?? 'blue';
+  const color = _color ?? 'primary';
 
   const base = 'flex items-center justify-center rounded-full transition-all duration-500';
   let baseColors, onHover, onActive;
-  if (color === 'blue') {
-    baseColors = 'bg-blue-500 text-white';
-    onHover = 'hover:bg-blue-600';
-    onActive = 'active:bg-blue-700';
-  } else if (color === 'pink') {
-    baseColors = 'bg-pink-500 text-white';
-    onHover = 'hover:bg-pink-600';
-    onActive = 'active:bg-pink-700';
+  if (color === 'primary') {
+    baseColors = 'bg-primary-600 text-white';
+    onHover = 'hover:bg-primary-700';
+    onActive = 'active:bg-primary-800';
+  } else if (color === 'accent') {
+    baseColors = 'bg-accent-700 text-white';
+    onHover = 'hover:bg-accent-800';
+    onActive = 'active:bg-accent-900';
   } else if (color === 'green') {
     baseColors = 'bg-green-500 text-white';
     onHover = 'hover:bg-green-600';

src/components/icons/CheckmarkIcon.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+
+import { Color } from '../../styles/Color';
+
+interface Props {
+  width?: number;
+  height?: number;
+  color?: string;
+  className?: string;
+}
+
+function _CheckmarkIcon({ width = 16, height = 16, color = Color.primary, className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={width}
+      height={height}
+      className={className}
+      fill={color}
+    >
+      <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
+      <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
+    </svg>
+  );
+}
+
+export const CheckmarkIcon = memo(_CheckmarkIcon);