Test: Implement Component: Transaction History (Grid View) Data Formatting

[AdaBliss]

closes #506

Summary

Adds the cross-border transaction history grid view and tests for how it formats currency amounts and escrow statuses in the cards.

A note on scope: the repository has no transaction history component. types/transaction.ts covers Stellar transaction tracking, and DeliveryList / ExpandableDeliveryRow cover deliveries, but there is nothing that renders a user's cross-border transfer history as cards. Since the issue asks to test formatting in the grid cards, this PR adds the presentational component under test alongside the suite. Happy to rework it if you already have a design or a data contract in mind for this surface.

Changes

types/transactionHistory.ts - CrossBorderTransaction shape, reusing the existing EscrowStatus union from types/status.ts.

lib/transactionFormatters.ts - the single source of truth for how history data reads, so a card and a list row can never disagree:

• Amounts are a locale-grouped number plus the ISO asset or currency code, not a localised symbol. Corridor currencies collide on symbols (several use the dollar sign), and Intl currency symbol output varies with the host ICU build, so a symbol-based format would differ between a developer machine and CI.
• Settlement amounts keep Stellar's 7 decimal places and pad to 2, so 0.0000001 and 1250.5 both render correctly.
• Direction signing (- for sent, + for received) so a card reads like a ledger entry.
• Escrow statuses map to sentence-case labels, so the raw wire value NOT_LOCKED never reaches the user, plus distinct badge styles per status.
• Missing or non-finite values render as an em dash, so a bad feed cannot print NaN or Infinity into a card.

features/transactions/components/TransactionHistoryGrid.tsx - responsive card grid; every displayed value goes through the formatters above. Cards carry stable data-testid hooks and the escrow badge has an accessible label.

Test coverage

features/transactions/components/__tests__/TransactionHistoryGrid.test.tsx (24 tests). Pure presentational component, so no API, socket or wallet mocking is needed.

• Currency amount formatting: thousands grouped and padded to two decimals; outgoing signed - and incoming +; the asset code (XLM vs USDC) shown alongside the amount; sub-cent Stellar precision preserved (+0.0000001 XLM); a large amount rendered without scientific notation (+12,345,678.90 XLM); the local-currency leg with its ISO code (1,234,567.80 NGN); an em-dash placeholder when no fiat quote is attached; NaN from the feed never printed; a zero-value transfer rendered as a real amount rather than blank.
• Escrow status formatting: each of LOCKED, RELEASED, DISPUTED, NOT_LOCKED renders its readable label; the underscored wire value never appears in the card; the badge carries an accessible label; the four statuses are styled distinctly so they are visually separable.
• Card content: one card per transaction in order, reference/corridor/date rendered, an em dash for an unparseable timestamp, an accessible grid label, the details handler receiving the selected transaction, and the action omitted without a handler.
• Empty state: an empty state renders instead of a bare grid, with no list role emitted.

lib/__tests__/transactionFormatters.test.ts (25 tests) pins the formatters directly, including rounding past 7 decimals, negative and zero amounts, non-finite guards, the Unknown fallback for an unrecognised status, and badge-style uniqueness.

Verification

• npx jest features/transactions lib/__tests__/transactionFormatters.test.ts - 49 tests passing.
• Full suite: no new failures; the failing suites on this branch are exactly those already failing on main.
• npx eslint on the new files - clean. npx tsc --noEmit - no errors from this change.

types/transactionHistory.ts and lib/transactionFormatters.ts are shared with the list-view PR for #505 and are byte-identical in both branches, so the two merge cleanly in either order (verified locally with a trial merge).

Note for the maintainer

main currently fails the CI Type Check and Build Verification steps for an unrelated reason: components/mobile/MobileFooter.tsx landed with its string quotes stripped (line 1 is a backtick-quoted use client, and imports read import React from react), which trips TS1160: Unterminated template literal. It came in with #318 and is present on main independently of this PR, so it will show red here and on every other open PR until it is fixed. I left it alone to keep this PR scoped to the issue; happy to open a separate fix PR if that would help.

[drips-wave]

@AdaBliss 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! 🚀

Learn more about application limits