[assumptaamara]

• closes Implement key holder badge achievement notification system #1222

Summary

Adds an in-app celebration for newly earned key holder badges. When a connected
wallet earns a badge, an animated toast shows the badge, its name and the
criteria that were met, with a View Badges CTA that deep-links to the
wallet's badge showcase on the profile page.

What changed

• src/services/badgeEvents.service.ts (new) — wallet-scoped realtime channel
  (wallet:<address> topic) with backoff reconnects, plus a tolerant
  normalizeBadgeMintedEvent that accepts flat payloads, {type,data}
  envelopes and field aliases. Unknown badge types are ignored.
• src/utils/badgeAchievementToast.tsx (new) — the custom toast: animated badge
  icon reveal, badge name, "Criteria met: …", a View Badges CTA and a manual
  dismiss. Persists for 10 seconds.
• src/hooks/useBadgeAchievements.ts (new) — detects achievements from the
  realtime event and from a polled snapshot, celebrates each badge exactly once,
  and refreshes the badge showcase in place.
• src/components/common/BadgeAchievementListener.tsx (new) — app-root listener
  that watches the connected wallet and wires the toast CTA to the router.
• src/App.tsx — mounts the listener app-wide.
• src/hooks/useWallet.ts — useWalletBadges polls every 30s, which is the
  fallback that keeps the feature working without the realtime feed.
• src/components/common/WalletBadgeShowcase.tsx — gained the wallet-badges
  anchor the CTA targets.
• src/pages/ProfilePage.tsx — scrolls the badge showcase into view on arrival.
• src/utils/confetti.utils.ts, src/index.css — celebration burst and the
  badge reveal animation (with a prefers-reduced-motion guard).

Behaviour

• The toast fires once per badge, only for the connected wallet, and only for
  badges that were not already earned when the wallet was first seen.
• The badge is written into the cached book on the event, so the profile
  showcase updates immediately without a page reload; the refetch confirms it.
• "View Badges" navigates to /profile/<wallet>#wallet-badges and scrolls the
  showcase into view.
• The toast auto-dismisses after 10 seconds, or immediately via the X button.

Tests

Added coverage: badgeEvents.service.test.ts, badgeAchievementToast.test.tsx,
useBadgeAchievements.test.tsx and BadgeAchievementListener.test.tsx.

Note for review

The realtime path expects the backend to publish a BadgeMinted frame on the
wallet:<address> topic. When it does not — or when VITE_WEBSOCKET_URL is
unset — the 30s poll of GET /wallets/:address/badges carries the feature, at
the cost of up to 30s of latency.

[drips-wave]

@assumptaamara Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits