Merge branch 'dev' into lazy-find-wallets

Author: wackerow

CLAUDE.md

@@ -192,6 +192,62 @@ pnpm events-import         # Import community events
 - `wagmi` - React hooks for Ethereum
 - `@rainbow-me/rainbowkit` - Wallet connection
 
+## A/B Testing
+
+### Overview
+
+The site uses a GDPR-compliant, cookie-less A/B testing system integrated with Matomo. Tests are configured entirely through the Matomo dashboard with no code changes required.
+
+### Key Features
+
+- **Matomo API Integration** - Experiments configured in Matomo dashboard
+- **Cookie-less Variant Persistence** - Uses deterministic IP + User-Agent fingerprinting for variant assignment
+- **Server-side Rendering** - No layout shifts, consistent variants on first load
+- **Real-time Updates** - Change weights instantly via Matomo (no deployments)
+- **Preview Mode** - Debug panel available in development and preview environments
+- **Automatic Fallbacks** - Graceful degradation when API fails (shows original variant)
+
+### Adding a New A/B Test
+
+1. **Create experiment in Matomo dashboard**:
+   - Go to Experiments → Manage Experiments
+   - Create new experiment with desired name (e.g., "HomepageHero")
+   - Add variations with weights (original is implicit)
+   - Set status to "running"
+
+2. **Implement in component**:
+   ```tsx
+   import ABTestWrapper from "@/components/AB/TestWrapper"
+   
+   <ABTestWrapper
+     testKey="HomepageHero"  // Must match Matomo experiment name exactly
+     variants={[
+       <OriginalComponent key="current-hero" />,     // Index 0: Original
+       <NewComponent key="redesigned-hero" />        // Index 1: Variation
+     ]}
+     fallback={<OriginalComponent />}
+   />
+   ```
+
+**Important**:
+- Variants matched by **array index**, not names
+- Array order must match Matomo experiment order exactly
+- JSX `key` props become debug panel labels: `"redesigned-hero"` → `"Redesigned Hero"`
+- No TypeScript changes required - system fetches configuration from Matomo
+
+### Architecture
+
+- **`/api/ab-config`** - Fetches experiment data from Matomo API
+- **`src/lib/ab-testing/`** - Core logic for assignment and tracking
+- **`src/components/AB/`** - React components for testing and debugging
+
+### Environment Variables
+
+Required for Matomo integration:
+- `NEXT_PUBLIC_MATOMO_URL` - Matomo instance URL
+- `NEXT_PUBLIC_MATOMO_SITE_ID` - Site ID in Matomo
+- `MATOMO_API_TOKEN` - API token with experiments access
+
 ## Deployment
 
 - **Platform**: Netlify (config in `netlify.toml`)

app/[locale]/get-eth/page.tsx

@@ -100,6 +100,7 @@ export default async function Page({
 }) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: "page-get-eth" })
+  const tCommon = await getTranslations({ locale, namespace: "common" })
 
   const tokenSwaps: CardListCardProps[] = [
     {
@@ -241,7 +242,7 @@ export default async function Page({
         <Stack className="gap-16">
           <p>
             <em>
-              {t("common:listing-policy-disclaimer")}{" "}
+              {tCommon("listing-policy-disclaimer")}{" "}
               <InlineLink href="https://github.com/ethereum/ethereum-org-website/issues/new/choose">
                 {t("listing-policy-raise-issue-link")}
               </InlineLink>

app/[locale]/stablecoins/page.tsx

@@ -8,6 +8,7 @@ import {
 
 import { Lang } from "@/lib/types"
 
+import ABTestWrapper from "@/components/AB/TestWrapper"
 import CalloutBannerSSR from "@/components/CalloutBannerSSR"
 import DataProductCard from "@/components/DataProductCard"
 import Emoji from "@/components/Emoji"
@@ -102,7 +103,7 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
   const requiredNamespaces = getRequiredNamespacesForPage("/stablecoins")
   const messages = pick(allMessages, requiredNamespaces)
 
-  let marketsHasError = false
+  let marketsHasError = false // TODO: Implement error handling
   const coinDetails: CoinDetails[] = []
 
   try {
@@ -131,7 +132,7 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
     coinDetails.push(...ethereumStablecoinData)
   } catch (error) {
     console.error(error)
-    marketsHasError = true
+    marketsHasError = true // TODO: Handle error state
   }
 
   const heroContent = {
@@ -590,19 +591,29 @@ async function Page({ params }: { params: Promise<{ locale: Lang }> }) {
             imageWidth={600}
             alt={t("page-stablecoins-stablecoins-dapp-callout-image-alt")}
           >
-            <div className="flex flex-wrap gap-4">
-              <ButtonLink href="/dapps/">
-                {t("page-stablecoins-explore-dapps")}
-              </ButtonLink>
-              <ButtonLink
-                variant="outline"
-                href="/defi/"
-                className="whitespace-normal"
-                isSecondary
-              >
-                {t("page-stablecoins-more-defi-button")}
-              </ButtonLink>
-            </div>
+            <ABTestWrapper
+              testKey="AppTest"
+              variants={[
+                <div key="two-buttons" className="flex flex-wrap gap-4">
+                  <ButtonLink href="/dapps/">
+                    {t("page-stablecoins-explore-dapps")}
+                  </ButtonLink>
+                  <ButtonLink
+                    variant="outline"
+                    href="/defi/"
+                    className="whitespace-normal"
+                    isSecondary
+                  >
+                    {t("page-stablecoins-more-defi-button")}
+                  </ButtonLink>
+                </div>,
+                <div key="single-button" className="flex flex-wrap gap-4">
+                  <ButtonLink href="/dapps/">
+                    {t("page-stablecoins-explore-apps")}
+                  </ButtonLink>
+                </div>,
+              ]}
+            />
           </CalloutBannerSSR>
           <h2>{t("page-stablecoins-save-stablecoins")}</h2>
           <Flex className="mb-8 me-8 w-full flex-col items-start lg:flex-row">

app/api/ab-config/route.ts

@@ -0,0 +1,127 @@
+import { NextResponse } from "next/server"
+
+import { IS_PREVIEW_DEPLOY } from "@/lib/utils/env"
+
+import type { ABTestConfig, MatomoExperiment } from "@/lib/ab-testing/types"
+
+const isExperimentActive = (experiment: MatomoExperiment): boolean => {
+  const now = new Date()
+
+  // Check start date - if scheduled for future, not active yet
+  if (experiment.start_date) {
+    const startDate = new Date(experiment.start_date)
+    if (now < startDate) return false
+  }
+
+  // Check end date - if past end date, not active anymore
+  if (experiment.end_date) {
+    const endDate = new Date(experiment.end_date)
+    if (now > endDate) return false
+  }
+
+  // If no scheduling constraints, enabled if created or running
+  return ["created", "running"].includes(experiment.status)
+}
+
+const getPreviewConfig = () => ({
+  AppTest: {
+    id: "preview",
+    enabled: true,
+    variants: [{ name: "Original", weight: 100 }],
+  },
+})
+
+export async function GET() {
+  // Preview mode: Show menu with original default
+  if (IS_PREVIEW_DEPLOY) return NextResponse.json(getPreviewConfig())
+
+  try {
+    const matomoUrl = process.env.NEXT_PUBLIC_MATOMO_URL
+    const apiToken = process.env.MATOMO_API_TOKEN
+
+    if (!matomoUrl || !apiToken) {
+      return NextResponse.json(
+        { error: "Matomo configuration missing" },
+        { status: 500 }
+      )
+    }
+
+    const siteId = process.env.NEXT_PUBLIC_MATOMO_SITE_ID || "4"
+
+    // Add cache busting for development
+    const cacheBuster =
+      process.env.NODE_ENV === "development" ? `&cb=${Date.now()}` : ""
+    const matomoApiUrl = `${matomoUrl}/index.php?module=API&method=AbTesting.getAllExperiments&idSite=${siteId}&format=json&token_auth=${apiToken}${cacheBuster}`
+
+    const response = await fetch(matomoApiUrl, {
+      next: { revalidate: process.env.NODE_ENV === "development" ? 0 : 3600 },
+      headers: { "User-Agent": "ethereum.org-ab-testing/1.0" },
+    })
+
+    const data = await response.json()
+
+    if (data.result === "error" || !Array.isArray(data)) {
+      console.error(
+        "[AB Config] Matomo API error:",
+        data.message || "Invalid response"
+      )
+      return NextResponse.json(
+        {},
+        {
+          headers: {
+            "Cache-Control": "s-max-age=300, stale-while-revalidate=600",
+          },
+        }
+      )
+    }
+
+    const experiments: MatomoExperiment[] = data
+
+    // Transform Matomo experiments to our config format
+    const config: Record<string, ABTestConfig> = {}
+
+    experiments
+      .filter((exp) => exp.variations && exp.variations.length > 0)
+      .forEach((exp) => {
+        // Calculate Original variant weight (100% - sum of all variations)
+        const variationsTotalWeight = exp.variations.reduce(
+          (sum, variation) => sum + (variation.percentage || 0),
+          0
+        )
+        const originalWeight = 100 - variationsTotalWeight
+
+        // Build variants array starting with "Original"
+        const variants = [
+          { name: "Original", weight: originalWeight },
+          ...exp.variations.map((variation) => ({
+            name: variation.name,
+            weight: variation.percentage || 0,
+          })),
+        ]
+
+        config[exp.name] = {
+          name: exp.name,
+          id: exp.idexperiment,
+          enabled: isExperimentActive(exp),
+          variants,
+        }
+      })
+
+    return NextResponse.json(config, {
+      headers: {
+        "Cache-Control": "s-max-age=3600, stale-while-revalidate=7200",
+      },
+    })
+  } catch (error) {
+    console.error("[AB Config] Failed to fetch AB test configuration:", error)
+
+    return NextResponse.json(
+      {},
+      {
+        headers: {
+          "Cache-Control": "no-cache",
+        },
+      }
+    )
+  }
+}