refactor(assets): name the mascot a mascot, not a logo

e2e/flows/share-asset-capture.spec.ts

@@ -0,0 +1,147 @@
+/**
+ * Share-asset capture regression — the card face must NOT be blank.
+ *
+ * The launch-day bug: <PixelatedCardFace /> painted its pixelated hand into a
+ * runtime <canvas>, which html-to-image silently dropped when it couldn't
+ * serialise it (toDataURL() returns empty on iOS Safari for an SVG-sourced
+ * canvas) → blank pink card, and the capture SUCCEEDED so nothing reached Sentry.
+ *
+ * The fix renders the hand as a plain pre-pixelated <img> (the same reliable
+ * path the badge stickers take), and still gates Save/Share on PixelatedCardFace's
+ * `onReady` (the hand <img> loading) so a capture can't fire before it's ready.
+ *
+ * This spec proves the guard end-to-end against the real html-to-image path:
+ *   1. /dev/share-builder renders <ShareAssetD3 /> and wires "Save image" to
+ *      captureShareAsset + downloadBlob (the same capture code the in-app
+ *      Share/Save buttons use).
+ *   2. Save stays disabled until the card face signals ready — we wait for it
+ *      to enable (proves the gate releases only after the hand <img> loads).
+ *   3. We click Save, intercept the downloaded PNG, decode it IN-BROWSER (an
+ *      <img> + <canvas>.getImageData — no extra Node dep), and sample a region
+ *      in the CENTRE of the card — the hand's territory, away from the top-left
+ *      logo and bottom-left card number. If that region is ENTIRELY the card
+ *      pink (#FF90E8) the hand never rendered → the blank-card bug. We assert
+ *      it contains non-background pixels (the hand was captured).
+ *
+ * No harness auth needed — /dev/share-builder is a pure client-render dev page.
+ */
+
+import { test, expect } from '@playwright/test'
+import { readFileSync } from 'fs'
+
+// Asset + card geometry — mirror of shareAssetLayout.ts (CANVAS_W/H, CARD_*).
+// Hardcoded (not imported) to match the e2e convention of not pulling app code
+// through the '@/' alias into the Playwright tsconfig.
+const CANVAS_W = 1200
+const CANVAS_H = 900
+
+// Card-pink (PixelatedCardFace background) and asset-blue (ShareAssetD3 bg) as
+// [r,g,b]. "Background" = either of these; the hand is neither.
+const CARD_PINK: [number, number, number] = [0xff, 0x90, 0xe8]
+const ASSET_BLUE: [number, number, number] = [0x90, 0xa8, 0xed]
+const COLOR_TOL = 12
+
+// Central card region in 1200×900 canvas coords. The card is centred
+// (CARD_LEFT 220, CARD_TOP 210, CARD_W 760, CARD_H ≈ 479 → centre ≈ 600,449).
+// This window sits well inside the card and is HAND-ONLY: it excludes the
+// peanut logo (top-left ~248–300 px) and the "????" number (bottom-left,
+// canvas-y ≳ 615). So a blank card → this window is pure pink; the hand
+// present → many non-background pixels. Small enough that the card's -8°
+// final rotation can't rotate any background (blue) into it.
+const REGION = { x0: 430, y0: 330, x1: 770, y1: 570 }
+const SAMPLE_STEP = 6 // sample every 6th canvas-px → a dense grid
+
+test.describe('Share-asset capture (card face is not blank)', () => {
+    test('captured PNG card region contains the hand, not just background', async ({ page }, testInfo) => {
+        await page.goto('/dev/share-builder', { waitUntil: 'domcontentloaded' })
+
+        const saveBtn = page.getByTestId('save-image')
+
+        // The readiness gate: Save is disabled until the card face's hand <img>
+        // loads (onReady). If it never enables, the gate is broken OR the card
+        // never painted — both are failures this spec must catch.
+        await expect(saveBtn, 'Save must enable once the card face signals ready').toBeEnabled({ timeout: 60_000 })
+
+        // Let the card-slide / sticker-drop animations settle to their final
+        // frame so the card sits at its designed (centred, -8°) position before
+        // we capture. The capture itself overrides only the root scale; the
+        // card's own transform is whatever frame it's on.
+        await page.waitForTimeout(2_500)
+
+        // Click Save → captureShareAsset(node) → downloadBlob() fires a real
+        // download of the native-resolution PNG.
+        const downloadPromise = page.waitForEvent('download', { timeout: 30_000 })
+        await saveBtn.click()
+        const download = await downloadPromise
+        const pngPath = testInfo.outputPath('share-asset-capture.png')
+        await download.saveAs(pngPath)
+
+        // Decode + sample IN-BROWSER: load the PNG into an <img>, paint it to a
+        // <canvas>, read it back with getImageData, and count non-background
+        // pixels in the central card window. Done in the page (not Node) so we
+        // need no PNG-decoder dependency.
+        const base64 = readFileSync(pngPath).toString('base64')
+        const result = await page.evaluate(
+            async ({ b64, canvasW, canvasH, region, pink, blue, tol, step }) => {
+                const img = new Image()
+                img.src = `data:image/png;base64,${b64}`
+                await img.decode()
+
+                const cv = document.createElement('canvas')
+                cv.width = img.naturalWidth
+                cv.height = img.naturalHeight
+                const ctx = cv.getContext('2d')
+                if (!ctx) throw new Error('no 2d context')
+                ctx.drawImage(img, 0, 0)
+
+                const width = cv.width
+                const height = cv.height
+                const buf = ctx.getImageData(0, 0, width, height).data
+
+                // Output is captured at pixelRatio 2 (≈2400×1800) — scale canvas
+                // coords into output pixels.
+                const sx = width / canvasW
+                const sy = height / canvasH
+                const near = (r: number, g: number, b: number, c: number[]): boolean =>
+                    Math.abs(r - c[0]) <= tol && Math.abs(g - c[1]) <= tol && Math.abs(b - c[2]) <= tol
+
+                let sampled = 0
+                let nonBackground = 0
+                for (let cy = region.y0; cy <= region.y1; cy += step) {
+                    for (let cx = region.x0; cx <= region.x1; cx += step) {
+                        const px = Math.min(width - 1, Math.round(cx * sx))
+                        const py = Math.min(height - 1, Math.round(cy * sy))
+                        const idx = (py * width + px) * 4
+                        const r = buf[idx]
+                        const g = buf[idx + 1]
+                        const b = buf[idx + 2]
+                        sampled++
+                        if (!(near(r, g, b, pink) || near(r, g, b, blue))) nonBackground++
+                    }
+                }
+                return { width, height, sampled, nonBackground }
+            },
+            {
+                b64: base64,
+                canvasW: CANVAS_W,
+                canvasH: CANVAS_H,
+                region: REGION,
+                pink: CARD_PINK as number[],
+                blue: ASSET_BLUE as number[],
+                tol: COLOR_TOL,
+                step: SAMPLE_STEP,
+            }
+        )
+
+        const fraction = result.nonBackground / result.sampled
+        // Blank card → fraction ≈ 0 (pure pink). Hand present → a large chunk of
+        // the centre is non-pink. A 2% floor cleanly separates the two while
+        // staying far below the hand's real coverage (avoids flake).
+        expect(
+            fraction,
+            `card centre is ${(fraction * 100).toFixed(1)}% non-background ` +
+                `(${result.nonBackground}/${result.sampled} px; output ${result.width}×${result.height}). ` +
+                `≈0% means the pixelated hand never rendered — the blank-card capture bug.`
+        ).toBeGreaterThan(0.02)
+    })
+})

src/app/(mobile-ui)/add-money/[country]/bank/page.tsx

@@ -36,6 +36,7 @@
 import { InitiateKycModal } from '@/components/Kyc/InitiateKycModal'
 import AdvisoryPreemptModal from '@/components/Kyc/AdvisoryPreemptModal'
 import { useAdvisoryPreempt } from '@/hooks/useAdvisoryPreempt'
+import { useEeaUpliftFunnel } from '@/hooks/useEeaUpliftFunnel'
 import posthog from 'posthog-js'
 import { ANALYTICS_EVENTS } from '@/constants/analytics.consts'
 import { addMoneyCountryUrl } from '@/utils/native-routes'
@@ -67,7 +68,7 @@
     // Local UI state (not URL-appropriate - transient)
     const [showWarningModal, setShowWarningModal] = useState<boolean>(false)
     const [showKycModal, setShowKycModal] = useState<boolean>(false)
     const [isRiskAccepted, setIsRiskAccepted] = useState<boolean>(false)
     const { setError, error, setOnrampData, onrampData } = useOnrampFlow()
 
     const { balance } = useWallet()
@@ -78,10 +79,25 @@
     // regionIntent is NOT passed here to avoid creating a backend record on mount.
     // intent is passed at call time, derived from the destination country
     // (e.g. /add-money/usa → NA → bridge-requirements).
+    // EEA-uplift funnel events (PostHog): started on launch, completed on KYC
+    // success. trackCompleted no-ops unless an uplift was started this session.
+    const {
+        trackStarted: trackUpliftStarted,
+        trackCompleted: trackUpliftCompleted,
+        reset: resetUpliftFunnel,
+    } = useEeaUpliftFunnel('deposit')
+
     const sumsubFlow = useMultiPhaseKycFlow({
+        // Fire completed at Sumsub approval (verification submitted), not at
+        // end-of-flow — so it isn't lost if the user drops during the
+        // post-approval ToS / preparing steps.
+        onKycApproved: () => trackUpliftCompleted(),
         onKycSuccess: () => {
             setUrlState({ step: 'inputAmount' })
         },
+        // Abandoned attempt: clear the pending start so a later unrelated KYC
+        // success on this page can't mis-fire eea_uplift_completed.
+        onManualClose: resetUpliftFunnel,
     })
 
     // read country from path params (web) or query params (native/capacitor)
@@ -115,17 +131,21 @@
     const { gateFor } = useCapabilities()
     const bankCountry = useMemo(() => railJurisdictionForBank(selectedCountry?.id), [selectedCountry?.id])
     const gate = useMemo(() => gateFor('deposit', { channel: 'bank', country: bankCountry }), [gateFor, bankCountry])
-    // A ready bank rail can still carry a future-dated requirement (the gate's
-    // `advisory`). Offer it as a skippable pre-empt at the proceed step.
+    // A ready bank rail can still carry a pending Bridge requirement (the gate's
+    // `advisory`). Enforce it as a mandatory, non-skippable pre-empt at the
+    // proceed step — the deposit cannot continue until it's completed.
     const advisory = gate.kind === 'ready' ? gate.advisory : undefined
     const { intercept: advisoryIntercept, modalProps: advisoryModalProps } = useAdvisoryPreempt({
         advisory,
         isLoading: sumsubFlow.isLoading,
         // Route through the self-heal resubmit path (reheal-tagged action) so the
         // completed submission round-trips to Bridge. start-action mints a plain
         // token whose webhook completion has no Bridge relay → answers are dropped.
-        onCompleteNow: () =>
-            advisory ? sumsubFlow.handleSelfHealResubmit('BRIDGE', advisory.requirementKey) : Promise.resolve(),
+        onCompleteNow: () => {
+            if (!advisory) return Promise.resolve()
+            trackUpliftStarted(advisory)
+            return sumsubFlow.handleSelfHealResubmit('BRIDGE', advisory.requirementKey)
+        },
     })
     const { guardWithTos, showBridgeTos, hideTos } = useTosGuard()
     const { setIsSupportModalOpen } = useModalsContext()
@@ -137,7 +157,7 @@
 
     useEffect(() => {
         fetchUser()
     }, [])
 
     const peanutWalletBalance = useMemo(() => {
         return balance !== undefined ? formatAmount(formatUnits(balance, PEANUT_WALLET_TOKEN_DECIMALS)) : ''
@@ -247,10 +267,10 @@
             return
         }
 
-        // ready — offer the skippable advisory pre-empt once; on proceed (now, or
-        // after "Not now") record the amount-entered event and open the
-        // confirmation modal. Firing inside the proceed avoids double-counting if
-        // the user dismisses the advisory and re-clicks.
+        // ready — enforce the mandatory verification pre-empt. The proceed body
+        // (record the amount-entered event, open the confirmation modal) only
+        // runs once there's no pending requirement; while one exists the modal
+        // blocks and this never fires, so the event can't double-count.
         advisoryIntercept(() => {
             posthog.capture(ANALYTICS_EVENTS.DEPOSIT_AMOUNT_ENTERED, {
                 amount_usd: usdEquivalent,

src/app/(mobile-ui)/card/page.tsx

@@ -13,7 +13,6 @@ import AddCardEntryScreen from '@/components/Card/AddCardEntryScreen'
 import ApplicationStatusScreen from '@/components/Card/ApplicationStatusScreen'
 import CardTermsScreen from '@/components/Card/CardTermsScreen'
 import CardRejectionScreen from '@/components/Card/CardRejectionScreen'
-import CardWaitlistJoinedScreen from '@/components/Card/CardWaitlistJoinedScreen'
 import BadgeSkipCelebration from '@/components/Card/BadgeSkipCelebration'
 import CardEligibilityCheckScreen from '@/components/Card/CardEligibilityCheckScreen'
 import YourCardScreen from '@/components/Card/YourCardScreen'
@@ -470,18 +469,17 @@ const CardPage: FC = () => {
                     />
                 )
             case 'waitlist': {
-                // Joined vs not-joined are two distinct screens — keeps each
-                // tight to its own purpose. Not-joined is the Berghain-style
-                // "not tonight" rejection: a shareable door let-down (tags
-                // @joinpeanut) that doubles as the waitlist-join CTA. Once
-                // they join, the state machine flips to the friendly
-                // <CardWaitlistJoinedScreen /> cooldown.
-                if (cardInfo!.waitlistJoinedAt) {
-                    return <CardWaitlistJoinedScreen onPrev={onBack} />
-                }
+                // The Berghain-style "not tonight" rejection is the TERMINAL
+                // waitlist screen — a shareable door let-down (tags @joinpeanut)
+                // that doubles as the waitlist-join CTA. Once they join we keep
+                // them here (`alreadyJoined`) so the asset + "Tweet to appeal"
+                // stay grabbable — no separate cooldown screen to dead-end on.
                 return (
                     <CardRejectionScreen
                         username={user?.user?.username ?? undefined}
+                        waitlistTotal={cardInfo!.waitlistTotal}
+                        admittedTotal={cardInfo!.admittedTotal}
+                        alreadyJoined={!!cardInfo!.waitlistJoinedAt}
                         onPrev={onBack}
                         onJoined={refetchCardInfo}
                     />
@@ -553,19 +551,32 @@ const CardPage: FC = () => {
                         onPrev={onBack}
                     />
                 )
-            case 'rejected':
+            case 'rejected': {
                 // No retry CTA: Rain denials are terminal on our side. The
                 // only path forward is support reviewing the case manually
                 // (PEP / sanctions / fraud-pattern flags need a human in the
                 // loop on Rain's end). Open Crisp directly — sending the user
                 // to /support's FAQ first adds a step for no upside.
+                //
+                // Surface the specific, vetted rejection reason from the
+                // capabilities read-model (`rail.reason.userMessage` — e.g.
+                // "Peanut cards aren't available in your state yet."). Render
+                // immediately rather than spinner-gating: unlike requires-info
+                // (meaningless without its reason), the rejected screen is useful
+                // on its own (reassurance + support CTA), so show it now and let
+                // the reason fill in once capabilities resolve.
+                const cardRailReason = capabilitiesLoading
+                    ? undefined
+                    : railsForProvider('rain')[0]?.reason?.userMessage
                 return (
                     <ApplicationStatusScreen
                         variant="rejected"
+                        reasonMessage={cardRailReason}
                         onContactSupport={() => setIsSupportModalOpen(true)}
                         onPrev={onBack}
                     />
                 )
+            }
             case 'active': {
                 const card = findActiveCard(overview)!
                 return <YourCardScreen overview={overview!} card={card} onPrev={onBack} />