fix: review fixes — migration split, XSS hardening, CI pipeline, monitoring

Security:
- Complete XSS escape in ProfileJsonLd (< > & all escaped)
- Guard window.matchMedia with typeof check in ClaimDialog
- Truncate wallet addresses before sending to Vercel Analytics
- Skip ProfileJsonLd structured data on noindex wallet pages
- Add CoinGecko API key header to OG image fetch

Infrastructure:
- Split migration 019 into 4 files (1 per CONCURRENTLY index + enum fix)
  Supabase CLI has no --no-transaction pragma; each CREATE INDEX
  CONCURRENTLY must be in its own migration file
- CI: replace cache with upload/download-artifact for reliable
  build sharing between jobs (no more double build)

Monitoring:
- Add lib/monitoring.ts with claim event tracking, performance
  metrics, and fee collection tracking
- Instrument claim/bags and claim/confirm routes

Code quality:
- Extract isWalletAddress() to lib/utils.ts (shared by page.tsx)
- Remove dead saveButtonStyle() from ShareButton, add saving state
  feedback with cursor-wait + opacity
- Convert remaining hardcoded colors to design system tokens
  (ShareButton, loading.tsx, ProfileHero chain badges)
- Fix HeroReveal comment (3s → 1.3s actual timeline)
- Simplify SearchAction JSON-LD to string target format
- Add vitest config + initial utils tests

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: screwk

.github/workflows/ci.yml

@@ -26,6 +26,12 @@ jobs:
       - run: npx next lint
       - run: npm run build
 
+      - uses: actions/upload-artifact@v4
+        with:
+          name: nextjs-build
+          path: .next
+          retention-days: 1
+
   e2e:
     runs-on: ubuntu-latest
     needs: build
@@ -39,7 +45,12 @@ jobs:
 
       - run: npm ci
       - run: npx playwright install --with-deps chromium
-      - run: npm run build
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: nextjs-build
+          path: .next
+
       - run: npm run test:e2e
 
       - uses: actions/upload-artifact@v4

app/[handle]/loading.tsx

@@ -23,7 +23,7 @@ export default function Loading() {
 
         {/* SCANNING label */}
         <div
-          className="signal-fade-up signal-scan-label mb-6 font-mono text-[10px] font-medium uppercase tracking-[3px] text-black/28"
+          className="signal-fade-up signal-scan-label mb-6 font-mono text-[10px] font-medium uppercase tracking-[3px] text-foreground/28"
           style={{ animationDelay: '0.1s' }}
         >
           Scanning
@@ -40,11 +40,11 @@ export default function Loading() {
           <svg className="signal-ring-outer signal-ring-outer-svg absolute h-[220px] w-[220px]" viewBox="0 0 220 220">
             <circle
               cx="110" cy="110" r="108"
-              fill="none" stroke="rgba(0,0,0,0.07)" strokeWidth="1.5"
+              fill="none" stroke="currentColor" strokeWidth="1.5" className="text-foreground/[0.07]"
             />
             <circle
               cx="110" cy="110" r="108"
-              fill="none" stroke="rgba(0,0,0,0.45)" strokeWidth="1.5"
+              fill="none" stroke="currentColor" strokeWidth="1.5" className="text-foreground/45"
               strokeLinecap="round" strokeDasharray="80 614"
               transform="rotate(-90 110 110)"
             />
@@ -62,7 +62,7 @@ export default function Loading() {
               <svg className="signal-reticle absolute inset-0 h-full w-full" viewBox="0 0 32 32">
                 <circle
                   cx="16" cy="16" r="14"
-                  stroke="rgba(0,0,0,0.18)" strokeWidth="1"
+                  stroke="currentColor" strokeWidth="1" className="text-foreground/[0.18]"
                   fill="none" strokeDasharray="3 5"
                 />
               </svg>

app/[handle]/opengraph-image.tsx

@@ -60,9 +60,13 @@ function computeUsd(amount: bigint, decimals: number, priceUsd: number): number
 
 async function fetchPrices(): Promise<{ sol: number; eth: number }> {
   try {
+    const headers: Record<string, string> = {};
+    if (process.env.COINGECKO_API_KEY) {
+      headers['x-cg-demo-api-key'] = process.env.COINGECKO_API_KEY;
+    }
     const res = await fetch(
       'https://api.coingecko.com/api/v3/simple/price?ids=solana,ethereum&vs_currencies=usd',
-      { signal: AbortSignal.timeout(4000), next: { revalidate: 300 } },
+      { signal: AbortSignal.timeout(4000), next: { revalidate: 300 }, headers },
     );
     if (!res.ok) return { sol: 0, eth: 0 };
     const data = await res.json();

app/[handle]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 import dynamic from 'next/dynamic';
 import { resolveAndPersistCreator } from '@/lib/services/creator';
 import { getNativeTokenPrices } from '@/lib/prices';
-import { computeFeeUsd } from '@/lib/utils';
+import { computeFeeUsd, isWalletAddress } from '@/lib/utils';
 import { PLATFORM_CONFIG } from '@/lib/constants';
 import { SearchBar } from '../components/SearchBar';
 import { ProfileJsonLd } from '../components/ProfileJsonLd';
@@ -32,7 +32,7 @@ export async function generateMetadata({ params }: PageProps) {
   const decoded = decodeURIComponent(handle);
   const safeName = decoded.replace(/[^a-zA-Z0-9_\-\.]/g, '').slice(0, 64);
   // Don't prefix wallet addresses with @
-  const isWallet = /^(0x[a-fA-F0-9]{40}|[1-9A-HJ-NP-Za-km-z]{32,44})$/.test(safeName);
+  const isWallet = isWalletAddress(safeName);
   const displayName = isWallet ? safeName : `@${safeName}`;
   return {
     title: `${displayName} Unclaimed Creator Fees`,
@@ -131,20 +131,22 @@ export default async function ProfilePage({ params }: PageProps) {
   );
 
   // Build display name for structured data
-  const isWallet = /^(0x[a-fA-F0-9]{40}|[1-9A-HJ-NP-Za-km-z]{32,44})$/.test(decoded);
+  const isWallet = isWalletAddress(decoded);
   const displayName = isWallet ? decoded : `@${decoded}`;
 
   return (
     <div className="space-y-8 sm:space-y-10">
       <SearchBar />
-      <ProfileJsonLd
-        handle={decoded}
-        displayName={displayName}
-        totalEarnedUsd={totalEarnedUsd}
-        platformCount={platformCount}
-        avatarUrl={creator.avatar_url ?? null}
-        walletAddresses={wallets.map((w) => w.address)}
-      />
+      {!isWallet && (
+        <ProfileJsonLd
+          handle={decoded}
+          displayName={displayName}
+          totalEarnedUsd={totalEarnedUsd}
+          platformCount={platformCount}
+          avatarUrl={creator.avatar_url ?? null}
+          walletAddresses={wallets.map((w) => w.address)}
+        />
+      )}
 
       {/* ZONE 1: Profile Hero */}
       <div className="animate-fade-in-up">

app/api/claim/bags/route.ts

@@ -4,6 +4,7 @@ import { createServiceClient } from '@/lib/supabase/service';
 import { generateBatchClaimTransactions } from '@/lib/platforms/bags-claim';
 import { generateConfirmToken } from '@/lib/claim/hmac';
 import { CLAIMSCAN_FEE_BPS, MIN_FEE_LAMPORTS } from '@/lib/constants';
+import { trackClaimEvent, trackPerformance, trackFeeCollection } from '@/lib/monitoring';
 
 /** Vercel Hobby hard limit is 10s. Reduced batch size (10 mints) fits within this budget. */
 export const maxDuration = 60;
@@ -184,7 +185,9 @@ export async function POST(request: Request) {
   }
 
   // Generate claim transactions — wrapped in try/finally to clean up locks on failure
+  trackClaimEvent('initiated', { wallet, platform: 'bags', mintCount: lockedMints.length });
   let results;
+  const txGenStart = performance.now();
   try {
     results = await generateBatchClaimTransactions(wallet, lockedMints);
   } catch (err) {
@@ -201,8 +204,10 @@ export async function POST(request: Request) {
         .in('id', idsToClean);
       if (cleanupErr) console.error('[claim/bags] Lock cleanup after tx failure failed:', cleanupErr.message);
     }
+    trackClaimEvent('failure', { reason: 'tx_generation_error', wallet, platform: 'bags', mintCount: lockedMints.length });
     return NextResponse.json({ error: 'Failed to generate claim transactions' }, { status: 500 });
   }
+  trackPerformance('bags_batch_tx_generation', performance.now() - txGenStart, 8000);
 
   const transactions: Array<{
     tokenMint: string;
@@ -292,6 +297,13 @@ export async function POST(request: Request) {
     }
   }
 
+  // Track fee collection decision
+  const feeCollected = feeLamports !== '0';
+  trackFeeCollection(feeCollected, feeLamports, 0);
+  if (!feeCollected && transactions.length > 0) {
+    trackClaimEvent('fee_skipped', { wallet, platform: 'bags', mintCount: transactions.length });
+  }
+
   return NextResponse.json({
     transactions,
     feeLamports,

app/api/claim/confirm/route.ts

@@ -5,6 +5,7 @@ import { invalidatePositionsCache } from '@/lib/platforms/bags-api';
 import { verifyConfirmToken } from '@/lib/claim/hmac';
 import { CLAIMSCAN_FEE_WALLET } from '@/lib/constants';
 import type { ClaimAttemptStatus } from '@/lib/supabase/types';
+import { trackClaimEvent, trackFeeCollection } from '@/lib/monitoring';
 
 /**
  * Valid forward-only status transitions.
@@ -102,6 +103,7 @@ export async function POST(request: Request) {
       // Actual amount will be reconciled via cron once RPC is available.
       // Never trust client-supplied rawFeeLamports for unverified records.
       console.error(`[claim/confirm] FEE_VERIFICATION_FAILED: sig=${feeSig} wallet=${feeWallet} lamports=${rawFeeLamports} — inserting unverified record with amount=0`);
+      trackClaimEvent('failure', { reason: 'fee_verification_rpc_error', wallet: feeWallet ?? '', feeLamports: rawFeeLamports ?? '0' });
       try {
         const svc = createServiceClient();
         await svc.from('claim_fees').insert({
@@ -130,6 +132,10 @@ export async function POST(request: Request) {
     });
     if (insertError && insertError.code !== '23505') {
       console.error('[claim/confirm] Fee log insert FAILED (revenue loss):', insertError.message, { sig: feeSig, wallet: feeWallet });
+      trackClaimEvent('failure', { reason: 'fee_insert_error', wallet: feeWallet ?? '', feeLamports });
+    } else {
+      trackFeeCollection(true, feeLamports, 0);
+      trackClaimEvent('fee_collected', { wallet: feeWallet ?? '', feeLamports });
     }
     return NextResponse.json({ ok: true });
   }
@@ -242,6 +248,7 @@ export async function POST(request: Request) {
       return NextResponse.json({ error: 'Another active claim exists for this token' }, { status: 409 });
     }
     console.error('[claim/confirm] Update error:', updateError.message);
+    trackClaimEvent('failure', { reason: 'db_update_error', claimAttemptId, wallet: wallet ?? '', status: validatedStatus });
     return NextResponse.json({ error: 'Failed to update claim status' }, { status: 500 });
   }
   if (updateCount === 0) {
@@ -252,6 +259,12 @@ export async function POST(request: Request) {
   // On confirmed: invalidate positions cache
   if (validatedStatus === 'confirmed') {
     invalidatePositionsCache(attempt.wallet_address);
+    trackClaimEvent('success', { claimAttemptId, wallet: wallet ?? '', platform: attempt.platform ?? '', chain: attempt.chain ?? '' });
+  }
+
+  // Track claim failures reported by the client
+  if (validatedStatus === 'failed') {
+    trackClaimEvent('failure', { reason: errorReason ?? 'unknown', claimAttemptId, wallet: wallet ?? '', platform: attempt.platform ?? '' });
   }
 
   return NextResponse.json({ ok: true, status: validatedStatus });

app/components/ClaimDialog.tsx

@@ -49,6 +49,7 @@ export function ClaimDialog({
     && connectedWallet !== bagsRegisteredWallet;
 
   useEffect(() => {
+    if (typeof window === 'undefined') return;
     const mql = window.matchMedia('(max-width: 767px)');
     setIsMobile(mql.matches);
     function onChange(e: MediaQueryListEvent) { setIsMobile(e.matches); }

app/components/HeroReveal.tsx

@@ -5,11 +5,11 @@ import { useState, useEffect, useCallback, startTransition, type ReactNode } fro
 /**
  * Full-screen reveal animation for the homepage hero.
  *
- * Timeline (3 s total):
- *  0.0 s - 0.7 s  Logo scales in with subtle blur clear
- *  0.4 s - 0.8 s  "ClaimScan" text fades in below logo
- *  0.8 s - 2.0 s  Hold (logo + text visible)
- *  2.0 s - 3.0 s  Overlay fades out, content animations begin
+ * Timeline (1.3 s total):
+ *  0.0 s - 0.4 s  Logo scales in with subtle blur clear
+ *  0.2 s - 0.5 s  "ClaimScan" text fades in below logo
+ *  0.0 s - 0.8 s  Hold (logo + text visible, OVERLAY_HOLD_MS)
+ *  0.8 s - 1.3 s  Overlay fades out (OVERLAY_FADE_MS), content animations begin
  *
  * Only plays once per browser session (sessionStorage).
  * Skips entirely when prefers-reduced-motion is enabled.

app/components/JsonLd.tsx

@@ -26,10 +26,7 @@ export function JsonLd() {
         publisher: { '@id': 'https://lwdesigns.art/#org' },
         potentialAction: {
           '@type': 'SearchAction',
-          target: {
-            '@type': 'EntryPoint',
-            urlTemplate: 'https://claimscan.tech/{search_term_string}',
-          },
+          target: 'https://claimscan.tech/{search_term_string}',
           'query-input': 'required name=search_term_string',
         },
       },

app/components/PlatformBreakdown.tsx

@@ -446,7 +446,7 @@ export function PlatformBreakdown({ fees, solPrice = 0, ethPrice = 0, wallets =
       {/* Claim Dialog — wrapped in error boundary for wallet/connection failures */}
       {connectedWallet && claimDialogOpen && (
         <ClaimErrorBoundary fallback={
-          <p className="rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400">
+          <p className="rounded-lg border border-destructive/20 bg-destructive/10 px-3 py-2 text-xs text-destructive">
             Failed to load claim dialog. Please refresh the page and try again.
           </p>
         }>