Frontend platform: add reusable status-pill component for contract, wallet, and queue states

[CMI-James]

Background

Multiple pages need compact visual badges for status reporting, but current implementations are inconsistent in spacing, tone, and semantic color usage.

Feature Focus

Add a shared status-pill component for contract, wallet, and queue states.

Where to Implement (Exact Targets)

• apps/web/src/components/ui/*
• apps/web/src/lib/*
• apps/web/src/styles/*
• apps/web/src/tests/*

What to Implement

• Build a reusable status-pill component with variants for success, pending, warning, error, and neutral states.
• Support optional iconography, accessible labels, and compact or default sizing.
• Replace at least a few obvious one-off status chips with the shared component where practical.
• Ensure contrast and focus behavior meet accessibility expectations.

Interface / Endpoint / Method Details

• Expose a simple prop API for tone, size, icon, and content.
• Avoid introducing styling patterns that fight the existing design system.
• Provide a fallback neutral rendering for unknown statuses.

Acceptance Criteria

• Shared status pills can be consumed across wallet, contract, and queue-related UI.
• Existing one-off status indicators can be progressively migrated without regressions.
• Accessibility and contrast expectations are met.

Required Tests

• Component tests covering variant rendering, icon support, and unknown state fallback.
• Accessibility assertions for semantic labels and contrast-safe usage.

Definition of Done

• The shared component is added, documented in code, and tested.
• At least a representative set of consuming views uses the new component.

[chiemezie1]

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

Give me this issue make i work on nah

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

[Mawuli-tech]

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

Can I work on this issue?

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

[shogun444]

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

I'd love to work on this.

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