Frontend UX: add transaction-detail slide-over with stepwise lifecycle timeline

[CMI-James]

Background

Users need a clearer way to inspect transaction progress and failure context without leaving the current surface or losing page context.

Feature Focus

Add a transaction-detail slide-over with a stepwise lifecycle timeline.

Where to Implement (Exact Targets)

• apps/web/src/components/transactions/*
• apps/web/src/pages/*
• apps/web/src/styles/*
• apps/web/src/tests/*

What to Implement

• Add a slide-over panel that opens from transaction lists and summary cards.
• Render a lifecycle timeline showing submission, confirmation, indexing, and any failure or retry steps.
• Include compact metadata such as network, hash, timestamps, and retry state.
• Preserve keyboard support, focus trapping, and close behavior.

Interface / Endpoint / Method Details

• Reuse existing transaction models and route state where available.
• Support both successful and failed transaction histories.
• Keep the component resilient to partially available backend data.

Acceptance Criteria

• Users can inspect transaction details without navigating away from the current page.
• The timeline meaningfully distinguishes happy-path and failure-path states.
• The slide-over is responsive and accessible.

Required Tests

• Interaction tests for open, close, and focus-return behavior.
• Rendering tests for successful, failed, and partially populated transaction records.

Definition of Done

• Transaction detail slide-over is implemented and wired into at least one transaction surface.
• Timeline behavior and accessibility are covered by tests.

[cypriannwokolo2-creator]

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

I HAVE FIXED ISSUES LIKE THIS IN THE PAST. CAN I WORK ON THIS ISSUE AS SOON AS POSSIBLE?

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

[UgoxyFavour]

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

can i work on this

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