Unify asset-change sections as anchored rows#25
Conversation
Native Token Change and Token Movements (Address + Chronological) now share full-width anchored rows: Phosphor ArrowCircle direction icons, asset chips, addresses left, formatted amounts pinned right. - formatDisplayAmount: round float tails, add thousands separators, keep full value in title - formatMovementAmount: fix chronological view showing raw base-units instead of the human amount - drop the now-dead <table> CSS from both stylesheets
- formatDisplayAmount: parse the decimal string directly instead of via Number(), preserving precision on large amounts and avoiding scientific notation on tiny ones - formatMovementAmount: use cached decimals only, matching aggregateBalanceChanges (movement.decimals is never populated) - stable row keys so a row's icon-error state can't stick to the wrong token after tab/filter changes - NFT chronological row keeps asset type alongside the token id - aria-hidden on decorative fallback bullets
- extract shared .tm-* / .token-symbol into styles/asset-rows.css, imported by both TokenMovementsPanel and ExecutionStackTrace — removes the cross-component CSS coupling - role=list/listitem + sr-only direction labels (Outgoing/Incoming/Transfer) so non-visual users get row semantics and direction without relying on color - keyboard-focusable highlightable values (tabIndex + onFocus/onBlur mirroring hover) - ellipsis truncation for long token names
Local-only benchmark files (tasks/architecture-deepening/**) shouldn't be committed, same as the existing *.spec.* and *test* ignores.
Ignore tasks/ (scratch benches/reports — catches -bench.ts the *.bench.* glob missed), .codegraph/ (index DB), .vercel/ (CLI linkage), and starknet-sim/ (separate nested repo). None are part of the app source.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 891c868721
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| idx === orderedAssetChanges.outgoingCount && | ||
| orderedAssetChanges.outgoingCount > 0 && | ||
| orderedAssetChanges.incomingCount > 0; | ||
| const f = formatDisplayAmount(change.amount || change.rawAmount); |
There was a problem hiding this comment.
When a server-provided asset change has direction: "out" plus only an unsigned rawAmount/value and no formatted amount (a shape normalized by utils/edbTraceConverter.ts), this passes the unsigned raw value directly to formatDisplayAmount. That formatter treats unsigned input as positive, so the outgoing native-token row renders with a red/outgoing indicator but a +... amount; prefix the raw fallback based on direction or format it before calling the display formatter.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR restyles the simulation results “Native Token Change” and “Token Movements” sections to use a shared, full-width “anchored row” layout, and adds precision-safe amount formatting so chronological token movements render human amounts instead of raw base units.
Changes:
- Replaces table-based layouts with shared
.tm-*anchored rows and extracts common styling intosrc/styles/asset-rows.css. - Adds
formatMovementAmount()(base-units → human decimal) andformatDisplayAmount()(compact display + full-value tooltip). - Updates highlighting/a11y behavior to support focus-based cross-highlighting and screen-reader direction labels.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/tokenMovements.ts | Adds a helper to format movement amounts using cached token decimals. |
| src/components/TokenMovementsPanel.tsx | Switches address/chronological views to anchored rows; uses new amount formatting and focus highlighting. |
| src/components/simulation-results/formatters.ts | Adds formatDisplayAmount for precision-safe compact display with full-value retention. |
| src/components/ExecutionStackTrace.tsx | Restyles native token change section to anchored rows and uses formatDisplayAmount. |
| src/styles/asset-rows.css | Introduces shared anchored-row styles for both sections. |
| src/styles/TokenMovementsPanel.css | Removes obsolete table CSS and leaves panel-specific styles + highlighting rules. |
| src/styles/SimulationResultsPage.css | Removes obsolete native balance-change table CSS. |
| .gitignore | Adds bench file patterns and local scratch/tool cache directories. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .tm-addr { | ||
| color: #22d3ee; | ||
| font-family: "Fira Code", "Consolas", monospace; | ||
| font-size: 13px; | ||
| white-space: nowrap; | ||
| } |
| // Anchored asset-change rows share the .tm-* classes defined in TokenMovementsPanel.css | ||
| // (always bundled — this module imports TokenMovementsPanel below). |
| color: var(--sim-error); | ||
| font-weight: 500; | ||
| } | ||
| /* Native Token Change now uses the shared .tm-* anchored rows (TokenMovementsPanel.css) */ |
Restyles the Native Token Change and Token Movements (Address + Chronological) sections of the simulation results into shared full-width anchored rows.
ArrowCircledirection icons, asset chips, address on the left, formatted amount pinned rightrole=list/listitem,sr-onlydirection labels (not color-only), keyboard-focusable cross-highlightasset-rows.css(imported by both components); dead<table>CSS removed5 commits. tsc + production build green.