feat(ui): add click-to-expand detail panels to TransactionTimeline steps - #841
Merged
Haroldwonder merged 2 commits intoJul 1, 2026
Conversation
- Add rawApiResponse and error fields to TxEvent interface - Add expandedStep state (TxStatus | null) to track open panel - Wrap each step header in a clickable div that toggles expansion - Render detail panel showing ISO timestamp, error message, and pretty-printed raw API response when a step is expanded - Add chevron indicator that rotates 180deg when panel is open - Apply same expand/collapse to failed and refunded terminal nodes - Update story fixtures with sample rawApiResponse and error data Closes Haroldwonder#680
Owner
|
Hi @onlywiseone |
|
@onlywiseone 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! 🚀 |
Contributor
Author
|
thanks |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #680
TransactionTimeline steps were rendered as a flat, read-only list with no way for users to inspect the underlying data for each step. This PR adds click-to-expand detail panels that reveal the raw API response, timestamp, and error (if any) for each step.
Changes
TransactionTimeline.tsxTxEventinterface — added two optional fields:rawApiResponse?: unknown— the raw anchor API response payload for that steperror?: string— a human-readable error message if this step erroredexpandedStepstate (TxStatus | null) — tracks which step's detail panel is currently open; only one can be open at a timedivwithonClickthat togglesexpandedStep; a chevron (▾) rotates 180° when the panel is openerroris setrawApiResponsein a scrollable<pre>block (max-height 200px)failednode has the same expand/collapse behaviour, includingrawApiResponseanderrorsupport; therefundednode retains its existing appearance (no interactive data typically available)txHashlink —e.stopPropagation()added so clicking the Stellar explorer link doesn't toggle the panelTransactionTimeline.stories.tsxPENDING_EVENTSfixtures updated with realisticrawApiResponsepayloads (SEP-24 transaction objects) for the initiated, awaiting_user, and pending stepsFAILED_EVENTSfixture updated with anerrorstring andrawApiResponseon the failed event to demonstrate the error panelBehaviour
Testing
No test changes — existing tests cover component rendering and are unaffected by the new optional fields and conditional UI.