Frontend feature: add portfolio empty-state variants for wallet, rewards, and collectibles

[CMI-James]

Background

The app currently needs more intentional first-run and low-activity empty states so new users are not dropped into sparse surfaces without guidance.

Feature Focus

Add portfolio empty-state variants tailored to wallet balance, rewards, and collectibles sections.

Where to Implement (Exact Targets)

• apps/web/src/pages/Portfolio.tsx
• apps/web/src/components/portfolio/*
• apps/web/src/styles/*
• apps/web/src/tests/*

What to Implement

• Design and implement differentiated empty states for zero balance, no rewards history, and no collectibles owned.
• Include concise next-step guidance and relevant calls to action for each state.
• Ensure copy and layout scale cleanly across desktop and mobile widths.
• Keep the visual language aligned with existing app styling.

Interface / Endpoint / Method Details

• Reuse existing section components where possible instead of branching deeply inside the page container.
• Support loading and error states without collapsing into the empty-state UI incorrectly.
• Keep CTA behaviors wired to existing routes or action handlers.

Acceptance Criteria

• Each portfolio section presents a distinct empty-state treatment when no data exists.
• Empty-state variants do not appear during loading or partial data fetches.
• Layout remains accessible and responsive.

Required Tests

• Component or page tests for each empty-state variant.
• Assertions that loading, error, and populated states still render correctly.

Definition of Done

• New empty-state variants are implemented and covered by tests.
• Visual behavior is verified across major viewport sizes.

[Ogstevyn]

@Ogstevyn has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

i would love to resolve this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Ogstevyn to this issue.

[OluwapelumiElisha]

@OluwapelumiElisha has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hello,

I would like to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluwapelumiElisha to this issue.