From 5896c8ea7233ad562cc09044a6fb973b207483a6 Mon Sep 17 00:00:00 2001
From: Fielding Johnston <fielding@justfielding.com>
Date: Sat, 25 Apr 2026 14:33:56 -0500
Subject: [PATCH] feat(landing): chain chip row under hero proof line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a row of clickable chain chips below the hero's proof-line stats
showing every chain RipGuard runs on. Each chip links to that chain's
Sablier Lockup contract on its native explorer — verification is one
click away, in line with the trust pitch.

The row filters the registry by the deployment's testnet flag, so the
mainnet site shows the 7 EVM chains (Base, Ethereum, Arbitrum, Optimism,
Polygon, Avalanche, BNB) and the testnet site shows only Base Sepolia.
No additional config to maintain — adding a chain to the registry adds
it to the chip row automatically.

Casino-voice eyebrow ("Live across"), OKLCH cyan-tinted styling,
touch-target compliant (min-h 2.5rem), no entrance animation so it
doesn't compete with the hero choreography.

Refs: RG-213ce7

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .tix/issues.jsonl             |  1 +
 packages/app/src/app/page.tsx | 36 ++++++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/.tix/issues.jsonl b/.tix/issues.jsonl
index 00282b9..7483fb3 100644
--- a/.tix/issues.jsonl
+++ b/.tix/issues.jsonl
@@ -41,3 +41,4 @@
 {"type":"issue","id":"RG-9430aa","title":"Refactor create + vaults pages to useChainId() lookups","body":"","status":"in_progress","priority":2,"assignee":"","created_at":1777031317780,"updated_at":1777083286869,"tags":["multichain","evm"]}
 {"type":"issue","id":"RG-42e939","title":"Per-chain USDC decimals (BNB=18, others=6)","body":"","status":"in_progress","priority":2,"assignee":"","created_at":1777031317799,"updated_at":1777083286894,"tags":["multichain","evm"]}
 {"type":"issue","id":"RG-b53952","title":"Update wagmi config for multi-chain array + wrong-chain guard on /create","body":"","status":"in_progress","priority":2,"assignee":"","created_at":1777031317760,"updated_at":1777083687610,"tags":["multichain","evm"]}
+{"type":"issue","id":"RG-213ce7","title":"Landing page chain chip row + cross-chain hints","body":"","status":"in_progress","priority":3,"assignee":"","created_at":1777031317819,"updated_at":1777145636239,"tags":["multichain","evm"]}
diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx
index 3372749..37bedac 100644
--- a/packages/app/src/app/page.tsx
+++ b/packages/app/src/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { PRESETS, IS_TESTNET } from "@/config/contracts";
-import { getChainConfig, isSupportedDeploymentChain, DEFAULT_CHAIN_ID } from "@/config/chains";
+import { CHAINS, getChainConfig, isSupportedDeploymentChain, DEFAULT_CHAIN_ID } from "@/config/chains";
 import { useChainId } from "wagmi";
 import Link from "next/link";
 import { Header } from "@/components/Header";
@@ -91,6 +91,35 @@ const LIMITS = [
   "Send funds anywhere except your wallet",
 ];
 
+function ChainChipRow() {
+  // Show only the chains live on this deployment (mainnet vs. testnet).
+  const chains = Object.values(CHAINS).filter((c) => c.isTestnet === IS_TESTNET);
+
+  return (
+    <div className="mt-12 sm:mt-14">
+      <div className="eyebrow mb-5 flex items-center gap-3">
+        <span className="h-px w-8 bg-cyan/40" />
+        Live across
+      </div>
+      <ul className="flex flex-wrap gap-2">
+        {chains.map((c) => (
+          <li key={c.chainId}>
+            <a
+              href={`${c.explorerUrl}/address/${c.sablierLockup}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={`Verify the Sablier Lockup contract on ${c.name}`}
+              className="inline-flex items-center px-3.5 py-2 text-[13px] tracking-wide rounded-full bg-surface border border-line text-muted hover:border-cyan/50 hover:text-cyan hover:bg-surface-strong transition-colors min-h-[2.5rem]"
+            >
+              {c.shortName}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 function FAQItem({
   question,
   children,
@@ -257,6 +286,11 @@ export default function Home() {
                 </li>
               </ul>
             </div>
+
+            {/* Chain chip row — quietly tells users we're on every casino-relevant
+                chain. Each chip links to that chain's Sablier Lockup contract on
+                its native explorer so verification is one click away. */}
+            <ChainChipRow />
           </div>
         </section>