-
-
{selectedBadge && (
-
-
+
+
-
+
+
+ setIsDetailOpen(false)}
+ title={displayName}
+ description={badge.description || ''}
+ logo={getBadgeIcon(badge.code)}
+ />
+
)
}
diff --git a/src/components/Badges/__tests__/BadgeEarnToast.test.tsx b/src/components/Badges/__tests__/BadgeEarnToast.test.tsx
new file mode 100644
index 000000000..f4e10bbb6
--- /dev/null
+++ b/src/components/Badges/__tests__/BadgeEarnToast.test.tsx
@@ -0,0 +1,115 @@
+import { render, screen, act } from '@testing-library/react'
+import type { ComponentProps } from 'react'
+import BadgeEarnToast from '@/components/Badges/BadgeEarnToast'
+
+// next/navigation — mutable pathname so we can exercise the /home gate; stable
+// router object so the effect doesn't re-fire on the tap-triggered re-render.
+let mockPathname = '/home'
+const mockRouterPush = jest.fn()
+const mockRouter = { push: mockRouterPush }
+jest.mock('next/navigation', () => ({
+ usePathname: () => mockPathname,
+ useRouter: () => mockRouter,
+}))
+
+jest.mock('next/image', () => ({
+ __esModule: true,
+ default: ({ unoptimized, fill, ...rest }: ComponentProps<'img'> & { unoptimized?: boolean; fill?: boolean }) => (
+ ![]()
+ ),
+}))
+
+jest.mock('posthog-js', () => ({ __esModule: true, default: { capture: jest.fn() } }))
+
+const mockToast = jest.fn()
+const mockDismissToast = jest.fn()
+jest.mock('@/components/0_Bruddle/Toast', () => ({
+ useToast: () => ({ toast: mockToast, dismiss: mockDismissToast }),
+}))
+
+const mockMarkSeen = jest.fn()
+let mockPending: Array<{ code: string; name: string; description: string | null; earnedAt: string }> = []
+jest.mock('@/components/Badges/useBadgeEarnToast', () => ({
+ useBadgeEarnToast: () => ({ pending: mockPending, markSeen: mockMarkSeen }),
+}))
+
+// Minimal stub: surface the title so we can assert the detail modal opened.
+jest.mock('@/components/Badges/BadgeDetailModal', () => ({
+ BadgeDetailModal: ({ isOpen, title }: { isOpen: boolean; title: string }) =>
+ isOpen ? & { code: string; earnedAt: string | Date }): CelebrationBadge {
+ return { name: over.code, description: null, ...over }
+}
+
+describe('badgeCelebration.utils', () => {
+ describe('isFresh', () => {
+ it('true for a badge earned just now', () => {
+ expect(isFresh(iso(0), NOW)).toBe(true)
+ })
+ it('true just inside the window', () => {
+ expect(isFresh(iso(FRESHNESS_WINDOW_MS - 1000), NOW)).toBe(true)
+ })
+ it('false just past the window', () => {
+ expect(isFresh(iso(FRESHNESS_WINDOW_MS + 1000), NOW)).toBe(false)
+ })
+ it('true for a future timestamp (clock skew)', () => {
+ expect(isFresh(new Date(NOW + 60_000).toISOString(), NOW)).toBe(true)
+ })
+ it('false for an invalid date', () => {
+ expect(isFresh('not-a-date', NOW)).toBe(false)
+ })
+ })
+
+ describe('pickCelebrationBadges', () => {
+ it('returns [] for empty/undefined input', () => {
+ expect(pickCelebrationBadges(undefined, new Set(), NOW)).toEqual([])
+ expect(pickCelebrationBadges([], new Set(), NOW)).toEqual([])
+ })
+ it('returns all fresh, unseen, visible badges newest-first', () => {
+ const badges = [badge({ code: 'OLDER', earnedAt: iso(1000) }), badge({ code: 'NEWER', earnedAt: iso(100) })]
+ expect(pickCelebrationBadges(badges, new Set(), NOW).map((b) => b.code)).toEqual(['NEWER', 'OLDER'])
+ })
+ it('excludes WAITLIST_SKIP (card celebration) and BETA_TESTER (universal)', () => {
+ const badges = [
+ badge({ code: 'WAITLIST_SKIP', earnedAt: iso(0) }),
+ badge({ code: 'BETA_TESTER', earnedAt: iso(0) }),
+ badge({ code: 'SHHHHH', earnedAt: iso(0) }),
+ ]
+ expect(pickCelebrationBadges(badges, new Set(), NOW).map((b) => b.code)).toEqual(['SHHHHH'])
+ })
+ it('excludes already-seen, stale, and invisible badges', () => {
+ const badges = [
+ badge({ code: 'SEEN', earnedAt: iso(0) }),
+ badge({ code: 'STALE', earnedAt: iso(FRESHNESS_WINDOW_MS + 1) }),
+ badge({ code: 'HIDDEN', earnedAt: iso(0), isVisible: false }),
+ badge({ code: 'GOOD', earnedAt: iso(0) }),
+ ]
+ expect(pickCelebrationBadges(badges, new Set(['SEEN']), NOW).map((b) => b.code)).toEqual(['GOOD'])
+ })
+ })
+
+ describe('seen-set persistence (per user)', () => {
+ beforeEach(() => window.localStorage.clear())
+
+ it('round-trips codes under a per-user key', () => {
+ persistSeenCodes('user-a', new Set(['OG_2025_10_12', 'BETA_TESTER']))
+ expect(window.localStorage.getItem(celebrationStorageKey('user-a'))).toContain('OG_2025_10_12')
+ expect(loadSeenCodes('user-a')).toEqual(new Set(['OG_2025_10_12', 'BETA_TESTER']))
+ })
+ it('isolates users on the same device', () => {
+ persistSeenCodes('user-a', new Set(['OG_2025_10_12']))
+ expect(loadSeenCodes('user-b')).toEqual(new Set())
+ })
+ it('returns an empty set on corrupt JSON', () => {
+ window.localStorage.setItem(celebrationStorageKey('user-a'), '{not json')
+ expect(loadSeenCodes('user-a')).toEqual(new Set())
+ })
+ })
+
+ describe('localStorage-failure fallback (private mode)', () => {
+ afterEach(() => jest.restoreAllMocks())
+
+ it('holds the seen-set in memory when writes throw, so it does not re-nag', () => {
+ jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+ throw new Error('QuotaExceeded')
+ })
+ persistSeenCodes('pm-user', new Set(['SHHHHH']))
+ // The localStorage write failed, but the in-memory fallback keeps the
+ // badge seen for the session so the toast doesn't re-fire every visit.
+ expect(loadSeenCodes('pm-user')).toEqual(new Set(['SHHHHH']))
+ })
+ })
+})
diff --git a/src/components/Badges/__tests__/useBadgeEarnToast.test.ts b/src/components/Badges/__tests__/useBadgeEarnToast.test.ts
new file mode 100644
index 000000000..8a4b7f7e2
--- /dev/null
+++ b/src/components/Badges/__tests__/useBadgeEarnToast.test.ts
@@ -0,0 +1,81 @@
+import { renderHook, act } from '@testing-library/react'
+import { useUserStore } from '@/redux/hooks'
+import { useBadgeEarnToast } from '@/components/Badges/useBadgeEarnToast'
+import { celebrationStorageKey } from '@/components/Badges/badgeCelebration.utils'
+
+jest.mock('@/redux/hooks', () => ({ useUserStore: jest.fn() }))
+const mockUseUserStore = useUserStore as jest.Mock
+
+type TestBadge = { code: string; name: string; description: string | null; earnedAt: string; isVisible?: boolean }
+const freshIso = () => new Date().toISOString()
+
+function setUser(userId: string | undefined, badges: TestBadge[]): void {
+ mockUseUserStore.mockReturnValue({ user: userId ? { user: { userId, badges } } : null })
+}
+
+describe('useBadgeEarnToast', () => {
+ beforeEach(() => {
+ window.localStorage.clear()
+ jest.clearAllMocks()
+ })
+
+ it('returns no pending badges when signed out', () => {
+ setUser(undefined, [])
+ const { result } = renderHook(() => useBadgeEarnToast())
+ expect(result.current.pending).toEqual([])
+ })
+
+ it('reads seen synchronously when the user resolves after mount (no cold-start re-fire)', () => {
+ window.localStorage.setItem(celebrationStorageKey('user-a'), JSON.stringify(['SHHHHH']))
+ setUser(undefined, [])
+ const { result, rerender } = renderHook(() => useBadgeEarnToast())
+ expect(result.current.pending).toEqual([])
+ // user loads async: on the first render with a userId, seen must already
+ // reflect localStorage — not lag a render behind (which re-fired the toast).
+ setUser('user-a', [{ code: 'SHHHHH', name: 'Shhh', description: null, earnedAt: freshIso() }])
+ rerender()
+ expect(result.current.pending).toEqual([])
+ })
+
+ it('surfaces all freshly-earned badges, newest first', () => {
+ setUser('user-a', [
+ {
+ code: 'EVENT_ALUMNI',
+ name: 'Alumni',
+ description: null,
+ earnedAt: new Date(Date.now() - 1000).toISOString(),
+ },
+ { code: 'SHHHHH', name: 'Shhh', description: null, earnedAt: freshIso() },
+ ])
+ const { result } = renderHook(() => useBadgeEarnToast())
+ expect(result.current.pending.map((b) => b.code)).toEqual(['SHHHHH', 'EVENT_ALUMNI'])
+ })
+
+ it('excludes universal/bespoke badges (BETA_TESTER, WAITLIST_SKIP)', () => {
+ setUser('user-a', [
+ { code: 'BETA_TESTER', name: 'Beta', description: null, earnedAt: freshIso() },
+ { code: 'WAITLIST_SKIP', name: 'Skip', description: null, earnedAt: freshIso() },
+ { code: 'SHHHHH', name: 'Shhh', description: null, earnedAt: freshIso() },
+ ])
+ const { result } = renderHook(() => useBadgeEarnToast())
+ expect(result.current.pending.map((b) => b.code)).toEqual(['SHHHHH'])
+ })
+
+ it('markSeen persists the codes and clears them from pending', () => {
+ setUser('user-a', [
+ { code: 'SHHHHH', name: 'Shhh', description: null, earnedAt: freshIso() },
+ { code: 'EVENT_ALUMNI', name: 'Alumni', description: null, earnedAt: freshIso() },
+ ])
+ const { result } = renderHook(() => useBadgeEarnToast())
+ act(() => result.current.markSeen(['SHHHHH', 'EVENT_ALUMNI']))
+ expect(result.current.pending).toEqual([])
+ expect(window.localStorage.getItem(celebrationStorageKey('user-a'))).toContain('SHHHHH')
+ })
+
+ it('does not resurface badges already in the seen-set', () => {
+ window.localStorage.setItem(celebrationStorageKey('user-a'), JSON.stringify(['SHHHHH']))
+ setUser('user-a', [{ code: 'SHHHHH', name: 'Shhh', description: null, earnedAt: freshIso() }])
+ const { result } = renderHook(() => useBadgeEarnToast())
+ expect(result.current.pending).toEqual([])
+ })
+})
diff --git a/src/components/Badges/badge.utils.ts b/src/components/Badges/badge.utils.ts
index 3417b01c9..a8e442e02 100644
--- a/src/components/Badges/badge.utils.ts
+++ b/src/components/Badges/badge.utils.ts
@@ -180,6 +180,11 @@ export const BADGES: Record = {
description: 'IYKYK. They were testing the card before you knew it existed.',
displayName: 'Closed Beta',
},
+ CARD_ALPHA: {
+ path: '/badges/card_alpha.svg',
+ description: 'You tested the Card while it was still held together with tape and hope.',
+ displayName: 'Closed Alpha Tester',
+ },
// ── community (link-granted) ────────────────────────────────────────────
ARBITRUM: {
path: '/badges/arbitrum.svg',
@@ -193,6 +198,11 @@ export const BADGES: Record = {
path: '/badges/token_nation_2026.svg',
description: 'São Paulo, baby. They came, they claimed, they tagged the wall.',
},
+ FESTA_JUNINA_2026: {
+ path: '/badges/festa_junina_2026.svg',
+ description: 'You danced the quadrilha with us. Arraiá unlocked.',
+ displayName: 'Arraiá Approved',
+ },
TOUCHED_GRASS: {
path: '/badges/touched_grass.svg',
description: 'You logged off and touched real grass with Peanut.',
diff --git a/src/components/Badges/badgeCelebration.utils.ts b/src/components/Badges/badgeCelebration.utils.ts
new file mode 100644
index 000000000..83f100bd2
--- /dev/null
+++ b/src/components/Badges/badgeCelebration.utils.ts
@@ -0,0 +1,102 @@
+// Pure helpers for the badge-earn toast (TASK-19791).
+//
+// "Surface it once, while fresh, without interrupting." When a user lands on
+// /home with a freshly-earned badge they haven't seen yet, we show a single
+// non-blocking toast (tap to inspect) — never a fullscreen takeover, which
+// collided with onboarding (a /shhhhh card signup awards BETA_TESTER + SHHHHH
+// at once → stacked popups). See BadgeEarnToast.tsx.
+//
+// Persistence is a per-user localStorage seen-set + a 7-day freshness window —
+// same house pattern as the card skip celebration (card/page.tsx). The window
+// is what makes that safe: an old badge is never "fresh", so it can't re-toast
+// on a new device or on the day this ships. No backend column, no migration.
+
+export type CelebrationBadge = {
+ code: string
+ name: string
+ description: string | null
+ earnedAt: string | Date
+ isVisible?: boolean
+}
+
+// 7 days: generous enough that nearly everyone opens the app within a week of
+// earning (covers badges granted by async webhooks), short enough that an old
+// badge never re-toasts on a new device.
+export const FRESHNESS_WINDOW_MS = 7 * 24 * 60 * 60 * 1000
+
+// Badges that should NOT trigger the toast:
+// - WAITLIST_SKIP keeps its bespoke card-flow celebration (BadgeSkipCelebration).
+// - BETA_TESTER is awarded to every signup — too universal to be worth surfacing.
+// Other card-access "skip" badges (OG/Devconnect/Arbiverse) are historical, so
+// the freshness window already keeps them out.
+const EXCLUDED_CODES = new Set(['WAITLIST_SKIP', 'BETA_TESTER'])
+
+const STORAGE_PREFIX = 'badge_earn_toast_seen'
+
+// In-memory fallback for environments where localStorage can't persist
+// (Safari/iOS private mode, quota exhausted). Without it, a swallowed write
+// meant the seen-set re-hydrated empty every launch and the toast re-fired on
+// EVERY /home visit for the whole freshness window. Memory keeps it alive for
+// the session (lost on reload — one re-show per session, not an infinite nag).
+// Only consulted when the localStorage read misses, so a working localStorage
+// stays the source of truth.
+const memoryFallback = new Map>()
+
+// Per-user key so a shared browser doesn't leak one account's seen-set onto another.
+export function celebrationStorageKey(userId: string): string {
+ return `${STORAGE_PREFIX}:${userId}`
+}
+
+export function loadSeenCodes(userId: string): Set {
+ if (typeof window !== 'undefined') {
+ try {
+ const raw = window.localStorage.getItem(celebrationStorageKey(userId))
+ if (raw) {
+ const parsed: unknown = JSON.parse(raw)
+ if (Array.isArray(parsed)) return new Set(parsed.filter((c): c is string => typeof c === 'string'))
+ }
+ } catch {
+ // fall through to the in-memory fallback
+ }
+ }
+ return new Set(memoryFallback.get(userId))
+}
+
+export function persistSeenCodes(userId: string, codes: ReadonlySet): void {
+ try {
+ if (typeof window === 'undefined') throw new Error('no window')
+ window.localStorage.setItem(celebrationStorageKey(userId), JSON.stringify([...codes]))
+ // localStorage is the source of truth when it works — drop any stale
+ // in-memory copy so it can't shadow a later real read.
+ memoryFallback.delete(userId)
+ } catch {
+ // localStorage unavailable (private mode / quota / SSR) — hold the
+ // seen-set in memory so the toast doesn't re-nag this session.
+ memoryFallback.set(userId, new Set(codes))
+ }
+}
+
+// Fresh = earned within the last window (future timestamps from clock skew
+// count as fresh too; only genuinely-old badges are excluded).
+export function isFresh(earnedAt: string | Date, now: number): boolean {
+ const earned = new Date(earnedAt).getTime()
+ if (!Number.isFinite(earned)) return false
+ return earned >= now - FRESHNESS_WINDOW_MS
+}
+
+// All visible, fresh, not-yet-seen, non-excluded badges, newest first. Returned
+// as a list so the toast can coalesce ("You unlocked 2 badges") instead of
+// stacking one toast per badge.
+export function pickCelebrationBadges(
+ badges: readonly CelebrationBadge[] | undefined,
+ seen: ReadonlySet,
+ now: number
+): CelebrationBadge[] {
+ if (!badges?.length) return []
+ return badges
+ .filter((b) => b.isVisible !== false)
+ .filter((b) => !EXCLUDED_CODES.has(b.code))
+ .filter((b) => !seen.has(b.code))
+ .filter((b) => isFresh(b.earnedAt, now))
+ .sort((a, b) => new Date(b.earnedAt).getTime() - new Date(a.earnedAt).getTime())
+}
diff --git a/src/components/Badges/index.tsx b/src/components/Badges/index.tsx
index 372b68489..ac8f810c5 100644
--- a/src/components/Badges/index.tsx
+++ b/src/components/Badges/index.tsx
@@ -8,7 +8,7 @@ import { getBadgeDisplayName, getBadgeIcon } from './badge.utils'
import { getCardPosition } from '../Global/Card/card.utils'
import EmptyState from '../Global/EmptyStates/EmptyState'
import { Icon } from '../Global/Icons/Icon'
-import ActionModal from '../Global/ActionModal'
+import { BadgeDetailModal } from './BadgeDetailModal'
import { useMemo, useState, useEffect } from 'react'
import { useUserStore } from '@/redux/hooks'
import { ActionListCard } from '../ActionListCard'
@@ -95,36 +95,15 @@ export const Badges = () => {
-
+ <>
+
+ {
+ onClose()
+ setIsDetailOpen(true)
+ }}
+ >
+
+
-
-
+
+
-
-
+
-
+
-
-
- - Badge unlocked! -
-{displayName}
+
+
+ Badge unlocked! +
+{displayName}
+
-
- Promise.resolve(
- `I earned ${displayName} badge on Peanut!\n\nJoin Peanut now and start earning points, unlocking achievements and moving money worldwide\n\n${profileLink}`
- )
- }
- >
- Share Achievement
-
+
-
+
+ Promise.resolve(
+ `I earned ${displayName} badge on Peanut!\n\nJoin Peanut now and start earning points, unlocking achievements and moving money worldwide\n\n${profileLink}`
+ )
+ }
+ >
+ Share Achievement
+
+
{title}
: null,
+}))
+
+import posthog from 'posthog-js'
+const captureMock = (posthog as unknown as { capture: jest.Mock }).capture
+
+const badge = (code: string, name: string) => ({
+ code,
+ name,
+ description: null,
+ earnedAt: new Date().toISOString(),
+})
+
+beforeEach(() => {
+ jest.clearAllMocks()
+ mockPathname = '/home'
+ mockPending = []
+})
+
+describe('BadgeEarnToast', () => {
+ it('does nothing when not on /home', () => {
+ mockPathname = '/setup'
+ mockPending = [badge('PRODUCT_HUNT', 'Product Hunt')]
+ render(