[solaawojobi00-bit]

Closes #1200

Acceptance criteria

• Badges section with a grid: WalletBadgeShowcase renders a "Badges" section with a responsive grid, placed on ProfilePage between the portfolio summary and the tabs.
• Card shows icon, name, earn date: earned cards render the catalog icon, badge name, and format(parseISO(earnedAt), 'MMM d, yyyy') (falls back to "Date unavailable" for an invalid date).
• Tooltip explains criteria: every earned and locked card is wrapped in <Tooltip content={criteria}> and is focusable (tabIndex={0}), so it shows on hover and focus.
• Locked placeholders with criteria: unearned badges render muted/grayscale with a Lock icon, name, visible criteria text, and a "Locked" label.
• Empty state: when no badges are earned, an empty-state block ("No badges earned yet. Complete the activities below to earn your first badge.") appears above the locked grid.
• All five badge types render with correct icons: BADGE_CATALOG in walletBadges.utils.ts maps each type to its icon (Key, Coins, Droplets, Vote, Users).

Notes

• The issue doesn't name the five badge types, so the catalog (First Key, Staker, Liquidity Provider, Governance Voter, Referrer) is an assumption. Maintainers can rename it in src/utils/walletBadges.utils.ts.
• The client expects GET /wallets/:address/badges returning [{ type, earnedAt }] (a bare array or { badges } is accepted) and treats a 404 as no badges. Earn logic stays server-side.
• Loading shows skeleton cards; an error shows a message with a Retry button.

[drips-wave]

@solaawojobi00-bit 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