Test: Implement Component: Transaction History (List View) Empty States

[AdaBliss]

closes #505

Summary

Adds the cross-border transaction history list view and its component tests, with the empty states as the focus.

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. Since the issue asks to verify that a friendly empty state renders when the user has no cross-border transactions, 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 (reference, direction, counterparty, settlement amount and asset code, optional local-fiat quote, corridor countries, escrow status, timestamp), reusing the existing EscrowStatus union from types/status.ts.

lib/transactionFormatters.ts - shared display formatting for amounts, escrow status labels and badge styles, corridors and dates. Amounts are rendered as a grouped number plus the ISO asset or currency code rather than a localised symbol: corridor currencies collide on symbols (several use the dollar sign) and Intl currency symbols vary with the host ICU build, which would make output differ between a developer machine and CI. Missing or non-finite values render as an em dash, so a bad feed cannot print NaN into the UI.

features/transactions/components/TransactionHistoryList.tsx - chronological list view rendering four mutually exclusive states: loading, error, empty, populated.

The empty state is deliberately split in two. A first-time user with no transfers needs an invitation to send one; a user whose filters happen to exclude everything needs to be told it is the filters and given a way back to the full history. Collapsing both into one message would tell the second user their account is empty, which is wrong and actively confusing.

Test coverage

features/transactions/components/__tests__/TransactionHistoryList.test.tsx (20 tests). Pure presentational component, so no mocking of APIs, sockets or wallets is required; callbacks are asserted with jest.fn() via userEvent.

• Empty, no transactions at all: friendly message and description render instead of a bare list, no list role is emitted, the call to action fires the create-transfer handler, the action is omitted when no handler is passed, and the filtered copy is not shown.
• Empty, filters exclude everything: the distinct filtered message renders instead of the first-time copy, Clear filters fires its handler, and the filtered variant disappears once results exist again.
• Loading: skeleton placeholders render, the region is announced via role="status" with an aria-label and aria-live, and loading takes precedence over an error so states never stack.
• Error: the failure surfaces as an alert, retry fires its handler, the retry button is hidden without a handler, and the error still wins over cached rows.
• Populated: one row per transaction in order, accessible list label, reference/corridor/escrow status rendered, amounts signed by direction (-1,250.50 XLM vs +800.00 XLM), an em-dash placeholder when a corridor has no fiat quote, and a single-item history that does not fall back to the empty state.

Verification

• npx jest features/transactions - 20 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 grid-view PR for #506 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