Wallet & Fintech

Pending transactions

Pending row remains in the ledger with a spinner until settlement, then transitions to posted.

User story

As a finance user, I want to see pending transactions distinct from posted ones so I know what's still in flight.

Acceptance criteria

Pending row has a clock icon + 'Pending' chip
On settlement, chip flips to 'Posted' with a green dot
Failed transactions show 'Failed' + a Retry CTA
Pending rows are sorted newest-first

Manual test steps

1.Open /wallet
2.Submit a deposit of 250
3.Watch the row transition from Pending → Posted

Expected result

Pending row appears, then posts after the simulated delay.

Possible bug risks

Transition skips Pending state on fast networks
Retry button does not idempotency-key the request
Sort order resets after settlement

Reference Playwright spec

pending-transactions.spec.ts

import { test, expect } from '@playwright/test';

test('pending row settles to posted', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/wallet');

  await page.getByLabel(/^deposit$/i).fill('250');
  await page.getByRole('button', { name: /deposit funds/i }).click();

  const row = page.getByTestId('ledger-row').first();
  await expect(row).toContainText(/pending/i);
  await expect(row).toContainText(/posted/i, { timeout: 8_000 });
});