release: dev→main 2026-06-11 — Crisp isolation, chunk recovery, card failure states, invite UX, asset overhaul

.gitmodules

@@ -1,6 +1,3 @@
-[submodule "src/assets/animations"]
-	path = src/assets/animations
-	url = https://github.com/peanutprotocol/peanut-animations.git
 [submodule "src/content"]
 	path = src/content
 	url = https://github.com/peanutprotocol/peanut-content.git

package.json

@@ -176,7 +176,7 @@
             "node_modules/(?!(@wagmi|wagmi|viem|@viem|@walletconnect|@justaname\\.id|@zerodev|permissionless)/)"
         ],
         "moduleNameMapper": {
-            "\\.(svg|png|jpg|jpeg|gif)$": "jest-transform-stub",
+            "\\.(svg|png|jpg|jpeg|gif|webp)$": "jest-transform-stub",
             "^@/config/wagmi\\.config$": "<rootDir>/src/utils/__mocks__/wagmi-config.ts",
             "^wagmi/chains$": "<rootDir>/src/utils/__mocks__/wagmi.ts",
             "^@justaname\\.id/react$": "<rootDir>/src/utils/__mocks__/justaname.ts",

src/app/(mobile-ui)/add-money/__tests__/add-money-states.test.tsx

@@ -268,8 +268,9 @@ jest.mock('@/constants/rhino.consts', () => ({
     getSupportedTokens: jest.fn(() => [
         { name: 'USDC', logoUrl: '/usdc.png' },
         { name: 'USDT', logoUrl: '/usdt.png' },
+        { name: 'ETH', logoUrl: '/eth-token.png' },
     ]),
-    TOKEN_LOGOS: { USDC: '/usdc.png', USDT: '/usdt.png' },
+    TOKEN_LOGOS: { USDC: '/usdc.png', USDT: '/usdt.png', ETH: '/eth-token.png' },
 }))
 
 jest.mock('@/constants/zerodev.consts', () => ({

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

@@ -1,14 +1,14 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
 import type { Address, Hex } from 'viem'
 import { Button } from '@/components/0_Bruddle/Button'
 import { Card } from '@/components/0_Bruddle/Card'
 import ErrorAlert from '@/components/Global/ErrorAlert'
 import NavHeader from '@/components/Global/NavHeader'
 import PeanutLoading from '@/components/Global/PeanutLoading'
 import { useKernelClient } from '@/context/kernelClient.context'
+import { useSafeBack } from '@/hooks/useSafeBack'
 import {
     RAIN_WITHDRAW_EIP712_DOMAIN_NAME,
     RAIN_WITHDRAW_EIP712_DOMAIN_VERSION,
@@ -40,13 +40,17 @@ type Step = 'preview' | 'confirm' | 'signing' | 'submitting' | 'done'
  * requires the user's passkey.
  */
 export default function CardRecoveryPage() {
-    const router = useRouter()
+    const onBack = useSafeBack('/home')
     const { getClientForChain } = useKernelClient()
 
     const [step, setStep] = useState<Step>('preview')
     const [preview, setPreview] = useState<RecoverFundsPreviewResponse | null>(null)
     const [error, setError] = useState<string | null>(null)
     const [txHash, setTxHash] = useState<Hex | null>(null)
+    // The amount actually prepared + signed + submitted. The mount-time `preview`
+    // can be stale by the time the user confirms (collateral can change), so the
+    // completion screen must report what was really recovered, not the preview.
+    const [recoveredCents, setRecoveredCents] = useState<string | null>(null)
 
     useEffect(() => {
         let cancelled = false
@@ -71,6 +75,8 @@ export default function CardRecoveryPage() {
             // page were tampered with at runtime, the backend signs over the
             // values it computed itself.
             const prep = await rainApi.prepareRecoverFunds()
+            // Lock in the real prepared amount for the completion screen.
+            setRecoveredCents(prep.amountCents)
 
             const chainIdStr = String(PEANUT_WALLET_CHAIN.id)
             const chainIdNum = Number(prep.chainId)
@@ -120,15 +126,16 @@ export default function CardRecoveryPage() {
 
     return (
         <div className="flex min-h-[inherit] flex-col gap-8">
-            <NavHeader title="Recover card funds" onPrev={() => router.push('/home')} />
+            <NavHeader title="Recover card funds" onPrev={onBack} />
             <div className="my-auto flex flex-col gap-6">
                 {error && <ErrorAlert description={error} />}
 
                 {step === 'done' && txHash ? (
                     <Card className="flex flex-col gap-3 p-6">
                         <h2 className="text-h7 font-bold">Funds sent to your wallet.</h2>
                         <p className="text-sm text-grey-1">
-                            ${formatCents(preview!.amountCents)} USDC has been returned to your peanut wallet.
+                            ${formatCents(recoveredCents ?? preview!.amountCents)} USDC has been returned to your peanut
+                            wallet.
                         </p>
                         <a
                             className="text-black underline"

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

@@ -23,11 +23,12 @@ import PageContainer from '@/components/0_Bruddle/PageContainer'
 import { SumsubKycWrapper } from '@/components/Kyc/SumsubKycWrapper'
 import { rainApi, type ApplyForCardResponse } from '@/services/rain'
 import { useGrantSessionKey } from '@/hooks/wallet/useGrantSessionKey'
+import { useCapabilities } from '@/hooks/useCapabilities'
 import { useModalsContext } from '@/context/ModalsContext'
 import { useSafeBack } from '@/hooks/useSafeBack'
 
-// localStorage key for the one-time celebration gate. Phase 5 will swap
-// this for a BE-persisted `cardWaitlistSkipCelebrationSeenAt` lookup.
+// localStorage key for the one-time celebration gate (per-device by design:
+// re-doing the funnel re-celebrates, see the eligibility-check effect below).
 // v2 (2026-05-25): celebration now fires for ALL hasCardAccess users, not
 // just skip-badge holders. v1's stale `true` values from earlier QA runs
 // would silently skip the celebration — bumping the key invalidates them.
@@ -68,6 +69,7 @@ const CardPage: FC = () => {
 
     const { overview, isLoading: overviewLoading, error: overviewError } = useRainCardOverview()
     const { serializeGrant } = useGrantSessionKey()
+    const { railsForProvider, isLoading: capabilitiesLoading } = useCapabilities()
     const { setIsSupportModalOpen } = useModalsContext()
     const onBack = useSafeBack('/home')
 
@@ -84,8 +86,8 @@ const CardPage: FC = () => {
     const [isIssuing, setIsIssuing] = useState(false)
 
     // Track whether the user has acknowledged the skip-badge celebration.
-    // localStorage for M2; Phase 5 will read this from BE's
-    // cardWaitlistSkipCelebrationSeenAt column.
+    // localStorage on purpose (per-device, replayable via the eligibility
+    // re-hold below) — the celebration is a moment, not durable state.
     const [skipCelebrationSeen, setSkipCelebrationSeen] = useState<boolean>(() => getSkipCelebrationSeen())
 
     // Press-and-hold "see if you qualify" gate. Resets per mount: as long
@@ -96,66 +98,29 @@ const CardPage: FC = () => {
     // exists (see cardState.utils.ts — active-card wins first).
     const [eligibilityCheckDone, setEligibilityCheckDone] = useState<boolean>(false)
 
-    // `?press_door=1` arrives from /shhhhh → /setup → here. It means: the
-    // user clicked "press the door" on /shhhhh while signed out, just
-    // completed signup, and now expects to enter the card flow. We
-    // auto-stamp `flowEarlyAccess` on their behalf so they don't have to
-    // re-press the door. Initial value is read synchronously to gate the
-    // outer-gate redirect on first paint; the param is cleared once the
-    // stamp lands.
-    const [pressDoorMode, setPressDoorMode] = useState<boolean>(() => {
-        if (typeof window === 'undefined') return false
-        return new URL(window.location.href).searchParams.get('press_door') === '1'
-    })
-    const pressDoorFiredRef = useRef(false)
-    useEffect(() => {
-        if (!pressDoorMode) return
-        if (pioneerLoading || !cardInfo) return
-        if (pressDoorFiredRef.current) return
-        pressDoorFiredRef.current = true
-        const finish = (): void => {
-            const url = new URL(window.location.href)
-            url.searchParams.delete('press_door')
-            window.history.replaceState(window.history.state, '', url.toString())
-            setPressDoorMode(false)
-        }
-        if (cardInfo.flowEarlyAccess) {
-            // Already stamped (e.g. quick refresh after stamp landed) — just clean up.
-            finish()
-            return
-        }
-        void (async () => {
-            try {
-                await cardApi.grantFlowEarlyAccess()
-                posthog.capture(ANALYTICS_EVENTS.CARD_FLOW_EARLY_ACCESS_GRANTED)
-                await queryClient.invalidateQueries({ queryKey: ['card-info'] })
-            } catch (err) {
-                console.error('[card] press_door auto-stamp failed:', err)
-            } finally {
-                finish()
-            }
-        })()
-    }, [pressDoorMode, pioneerLoading, cardInfo, queryClient])
+    // The old `?press_door=1` auto-stamp was removed alongside the /shhhhh
+    // door rework: the bare door joins the waitlist and grants nothing, so a
+    // shareable URL that silently stamps flowEarlyAccess would have been the
+    // exact bypass the rework forbids. BE now also reports flowEarlyAccess
+    // true whenever hasCardAccess is (inner gate implies outer).
 
     // Outer gate: pre-public-launch, the card campaign isn't fully online
     // yet. Users without flow early access get a 404 — the page behaves as
     // if it doesn't exist. The only ways in are (a) already holding a card
-    // / being mid-application, or (b) entering through the special /shhhhh
-    // page, which stamps `flowEarlyAccess` via ?press_door=1 before landing
-    // here. BE returns `flowEarlyAccess: false` for everyone else.
+    // / being mid-application, or (b) holding card access (skip badge /
+    // admin grant — BE reports flowEarlyAccess true whenever hasCardAccess
+    // is). Everyone else belongs on /shhhhh, which joins the waitlist
+    // inline and never routes here.
     //
     // IMPORTANT: skip the 404 if the user already has a non-canceled card.
     // Legacy Pioneers + admin-granted users issued cards before /shhhhh
     // existed and have no flowEarlyAccess stamp — they must still reach
     // YourCardScreen. The computeCardState() precedence below mirrors this
-    // rule (active-card before no-flow-access). Also skip while pressDoorMode
-    // is in flight: the stamp is about to land any tick now, and 404-ing
-    // mid-stamp would wrongly bounce a legit /shhhhh entrant.
+    // rule (active-card before no-flow-access).
     //
     // notFound() thrown synchronously inside the effect bubbles to Next's
     // not-found boundary just like a render-time call.
     useEffect(() => {
-        if (pressDoorMode) return
         if (pioneerLoading || pioneerError) return
         if (!cardInfo) return
         if (cardInfo.flowEarlyAccess) return
@@ -167,7 +132,7 @@ const CardPage: FC = () => {
         if (hasIssuedCard) return
         posthog.capture(ANALYTICS_EVENTS.CARD_FLOW_GATED)
         notFound()
-    }, [pioneerLoading, pioneerError, cardInfo, overview, overviewLoading, pressDoorMode])
+    }, [pioneerLoading, pioneerError, cardInfo, overview, overviewLoading])
 
     const state = computeCardState({
         overview,
@@ -546,6 +511,40 @@ const CardPage: FC = () => {
                 return <ApplicationStatusScreen variant="pending" onPrev={onBack} />
             case 'manual-review':
                 return <ApplicationStatusScreen variant="manual-review" onPrev={onBack} />
+            case 'requires-info': {
+                // Surface the structured remediation reason from the
+                // capabilities read-model — `rail.reason.userMessage` is
+                // display-ready and provider-neutral by contract. The card
+                // provider serves exactly one rail, so [0] is the card rail.
+                // Overview and capabilities load independently — wait for
+                // capabilities so the screen never flashes without its reason.
+                if (capabilitiesLoading) {
+                    return (
+                        <div className="flex min-h-[inherit] w-full items-center justify-center">
+                            <Loading />
+                        </div>
+                    )
+                }
+                const cardRailReason = railsForProvider('rain')[0]?.reason?.userMessage
+                return (
+                    <ApplicationStatusScreen
+                        variant="requires-info"
+                        reasonMessage={cardRailReason}
+                        onContactSupport={() => setIsSupportModalOpen(true)}
+                        onPrev={onBack}
+                    />
+                )
+            }
+            case 'requires-support':
+                // Pipeline-side failure — nothing the user can re-submit.
+                // Same support deep-link as 'rejected' below.
+                return (
+                    <ApplicationStatusScreen
+                        variant="requires-support"
+                        onContactSupport={() => setIsSupportModalOpen(true)}
+                        onPrev={onBack}
+                    />
+                )
             case 'rejected':
                 // No retry CTA: Rain denials are terminal on our side. The
                 // only path forward is support reviewing the case manually

src/app/(mobile-ui)/dev/components/page.tsx

@@ -991,9 +991,6 @@ export default function ComponentsPage() {
                             <p>
                                 <span className="font-bold text-n-1">GuestLoginModal</span> — guest auth flow
                             </p>
-                            <p>
-                                <span className="font-bold text-n-1">KycVerifiedOrReviewModal</span> — KYC status
-                            </p>
                             <p>
                                 <span className="font-bold text-n-1">BalanceWarningModal</span> — low balance warning
                             </p>

src/app/(mobile-ui)/dev/ds/patterns/modal/page.tsx

@@ -303,7 +303,6 @@ export default function ModalPage() {
                                 ['InviteFriendsModal', 'Share referral link with copy + social buttons'],
                                 ['ConfirmInviteModal', 'Confirm invitation before sending'],
                                 ['GuestLoginModal', 'Prompt guest users to log in or register'],
-                                ['KycVerifiedOrReviewModal', 'KYC verification status feedback'],
                                 ['BalanceWarningModal', 'Warn about insufficient balance'],
                                 ['TokenAndNetworkConfirmationModal', 'Confirm token + chain before transfer'],
                                 ['TokenSelectorModal', 'Pick token from a list'],

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

@@ -17,6 +17,10 @@ import { buildKycHistoryEntry } from '@/utils/kyc-grouping.utils'
 import { useAuth } from '@/context/authContext'
 import { BadgeStatusItem } from '@/components/Badges/BadgeStatusItem'
 import { isBadgeHistoryItem } from '@/components/Badges/badge.types'
+import CardUnlockHistoryItem from '@/components/Card/CardUnlockHistoryItem'
+import { deriveCardUnlockEntry, isCardUnlockHistoryItem } from '@/components/Card/cardUnlock.types'
+import { useCardInfo } from '@/hooks/useCardInfo'
+import { useRainCardOverview } from '@/hooks/useRainCardOverview'
 import React, { useMemo } from 'react'
 import { useQueryClient, type InfiniteData } from '@tanstack/react-query'
 import { useWebSocket } from '@/hooks/useWebSocket'
@@ -35,6 +39,9 @@ const HistoryPage = () => {
     const { user } = useUserStore()
     const queryClient = useQueryClient()
     const { fetchUser } = useAuth()
+    // Synthetic card-unlock row inputs — same cached queries HomeHistory uses.
+    const { cardInfo } = useCardInfo()
+    const { overview: rainOverview } = useRainCardOverview()
 
     const {
         data: historyData,
@@ -176,22 +183,35 @@ const HistoryPage = () => {
             if (kycEntry) entries.push(kycEntry)
         }
 
+        // add the card-unlock milestone row, placed chronologically. Unlike
+        // the home top-5 (where it ages out), the full page always carries it.
+        if (cardInfo) {
+            const unlock = deriveCardUnlockEntry({
+                hasIssuedCard: (rainOverview?.cards.length ?? 0) > 0,
+                hasCardAccess: cardInfo.hasCardAccess,
+                cardAccessGrantedAt: cardInfo.waitlistReleasedAt,
+                skipBadges: cardInfo.skipBadges,
+                userBadges: user?.user?.badges,
+            })
+            if (unlock) entries.push(unlock)
+        }
+
         entries.sort((a, b) => {
             const dateA = new Date(a.timestamp || 0).getTime()
             const dateB = new Date(b.timestamp || 0).getTime()
             return dateB - dateA
         })
 
         return entries
-    }, [allEntries, user, isLoading])
+    }, [allEntries, user, isLoading, cardInfo, rainOverview])
 
     // Memoize per-row drawer projection so the .map() below doesn't recompute
     // mapTransactionDataForDrawer per row on every parent rerender (websocket
     // tick, infinite-scroll fetch). One Map<uuid, mapped> per visible page.
     const drawerByUuid = useMemo(() => {
         const m = new Map<string, ReturnType<typeof mapTransactionDataForDrawer>>()
         for (const item of combinedAndSortedEntries) {
-            if (isKycStatusItem(item) || isBadgeHistoryItem(item)) continue
+            if (isKycStatusItem(item) || isBadgeHistoryItem(item) || isCardUnlockHistoryItem(item)) continue
             if (!m.has(item.uuid)) m.set(item.uuid, mapTransactionDataForDrawer(item))
         }
         return m
@@ -265,6 +285,13 @@ const HistoryPage = () => {
                                 <KycStatusItem position={position} />
                             ) : isBadgeHistoryItem(item) ? (
                                 <BadgeStatusItem position={position} entry={item} />
+                            ) : isCardUnlockHistoryItem(item) ? (
+                                <CardUnlockHistoryItem
+                                    entry={item}
+                                    position={position}
+                                    username={user?.user?.username ?? undefined}
+                                    badges={user?.user?.badges}
+                                />
                             ) : (
                                 (() => {
                                     const { transactionDetails, transactionCardType } =

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

@@ -24,7 +24,7 @@ import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 import { useNotifications } from '@/hooks/useNotifications'
 import { useCapabilities } from '@/hooks/useCapabilities'
-import { useCardPioneerInfo } from '@/hooks/useCardPioneerInfo'
+import { useCardInfo } from '@/hooks/useCardInfo'
 import HomeCarouselCTA from '@/components/Home/HomeCarouselCTA'
 import EnableAutoBalanceBanner from '@/components/Home/EnableAutoBalanceBanner'
 import InvitesIcon from '@/components/Home/InvitesIcon'
@@ -70,7 +70,7 @@ export default function Home() {
     const { isActivated, activationStep, dismissCardStep } = useActivationStatus()
     // Fire-and-forget: warms the card-info cache so /card mounts fast.
     // Return values intentionally unused — only the fetch side effect matters.
-    useCardPioneerInfo()
+    useCardInfo()
     const username = user?.user.username
 
     const [showBalanceWarningModal, setShowBalanceWarningModal] = useState(false)

src/app/(mobile-ui)/layout.tsx

@@ -15,7 +15,6 @@ import '../../styles/globals.css'
 import QRScannerOverlay from '@/components/Global/QRScannerOverlay'
 import SecurityVerificationOverlay from '@/components/Global/SecurityVerificationOverlay'
 import SupportDrawer from '@/components/Global/SupportDrawer'
-import RainCooldownIntroModal from '@/components/Global/RainCooldown/IntroModal'
 import JoinWaitlistPage from '@/components/Invites/JoinWaitlistPage'
 import { useRouter } from 'next/navigation'
 import { Banner } from '@/components/Global/Banner'
@@ -226,8 +225,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
             <SupportDrawer />
 
-            <RainCooldownIntroModal />
-
             <QRScannerOverlay />
 
             <SecurityVerificationOverlay />