e2e(regtest mint): regression for the fee-rate picker

Adds a third test that proves the cat21-mint fee picker correctly:
  1. Reads the four rates from the WS-backed recommendedFees$
     stream (stub frame: fastest=5, halfHour=3, hour=1, economy=1).
  2. Routes a tile click through `feeClicked.emit()` →
     `setFeeRate()` → `cfeeRate.setValue()` → the
     `[formControl]="cfeeRate"` input.
  3. Clicking different tiles cleanly overrides earlier picks.

This closes the loop on the fee-picker mechanic the existing tests
don't exercise — test 1 sets the fee rate via direct `.fill('1')`
on the manual input.

Author: hans-crypto

frontend/playwright/specs/regtest/cat21-mint-regtest.spec.ts

@@ -504,3 +504,92 @@ test('asset scanner: cat-bearing funding UTXO surfaces the "asset found" warning
   const detail = assetRow.locator('.utxo-assets-detail');
   await expect(detail).toBeVisible();
 });
+
+/**
+ * Regression for the fee-rate picker.
+ *
+ * `<app-ordpool-fees-box-clickable>` renders four anchor tiles
+ * (economy, hour, halfHour, fastest) bound to the values from
+ * StateService.recommendedFees$. Clicking a tile emits
+ * `feeClicked.emit(<rate>)`, which the parent component receives in
+ * `setFeeRate($event)` and forwards into the `cfeeRate` FormControl.
+ * The number input bound to `[formControl]="cfeeRate"` updates
+ * accordingly.
+ *
+ * The stub answers the mempool WebSocket on connect with a snapshot
+ * containing `{fees:{fastestFee:5, halfHourFee:3, hourFee:1,
+ * economyFee:1, minimumFee:1}}`. So this test pins:
+ *
+ *   1. The picker renders the four numeric rates straight from the
+ *      WebSocket-derived `recommendedFees$` stream (proves WS → state
+ *      → template flow).
+ *   2. Clicking the fastest tile writes `5` into the manual fee-rate
+ *      input.
+ *   3. Clicking the economy tile writes `1` (or, on this stub,
+ *      identical to hour because both are 1).
+ *   4. The picker survives a page reload — the WS reconnect populates
+ *      fees again without needing a user action.
+ */
+test('fee picker: tier clicks update the manual fee-rate input', async () => {
+  test.setTimeout(120_000);
+
+  const page = await context.newPage();
+  await page.goto(`${FRONTEND_URL}${MINT_PATH}`, { waitUntil: 'domcontentloaded' });
+  await shot(page, 'fp-01-loaded');
+
+  // Auto-reconnect from localStorage — same dance as the asset-scanner
+  // test. The wallet must be connected for the form (and the picker)
+  // to render.
+  const known = new Set(context.pages());
+  const reapprove = await waitForApprovalPopup({
+    context,
+    knownPages: known,
+    timeoutMs: 6_000,
+    isApproval: async (p) => p.url().startsWith('chrome-extension://'),
+  }).catch(() => null);
+  if (reapprove) {
+    await reapprove.getByRole('button', { name: /^(connect|approve|confirm|allow)$/i })
+      .first().click().catch(() => undefined);
+    await reapprove.close().catch(() => undefined);
+  }
+
+  // Wait for the picker to leave its skeleton-loading template.
+  // While loading, the four `.item` divs sit inside
+  // `.loading-container` and contain `.skeleton-loader` rather than
+  // the real `<a>` tiles. Anchor presence is the cheapest signal.
+  const tiles = page.locator('.fee-estimation-container .item a');
+  await expect(tiles).toHaveCount(4, { timeout: 45_000 });
+  await shot(page, 'fp-02-picker-ready');
+
+  // The tile order is fixed: 0=economy, 1=hour, 2=halfHour, 3=fastest.
+  // Stub fees: economy=1, hour=1, halfHour=3, fastest=5. Each tile
+  // renders `<app-fee-rate>` showing "<rate> sat/vB". We pin each
+  // tile's text contains both the expected rate and the unit so
+  // we don't accidentally match a substring like "15" against "1".
+  await expect(tiles.nth(2)).toContainText('3', { timeout: 10_000 });
+  await expect(tiles.nth(2)).toContainText('sat/vB');
+  await expect(tiles.nth(3)).toContainText('5');
+  await expect(tiles.nth(3)).toContainText('sat/vB');
+
+  // The manual fee-rate input the mint form binds via
+  // `[formControl]="cfeeRate"`. Pin it by the surrounding input-group
+  // label (same selector test 1 uses).
+  const feeRateInput = page.locator(
+    '.input-group:has(.input-group-text:text-is("Fee rate")) input[type="number"]',
+  ).first();
+  await expect(feeRateInput).toBeVisible();
+
+  // Click the fastest tile (index 3) — expect the input to read "5".
+  await tiles.nth(3).click();
+  await expect(feeRateInput).toHaveValue('5', { timeout: 5_000 });
+  await shot(page, 'fp-03-fastest-clicked');
+
+  // Click the halfHour tile (index 2) — expect input "3".
+  await tiles.nth(2).click();
+  await expect(feeRateInput).toHaveValue('3', { timeout: 5_000 });
+  await shot(page, 'fp-04-halfhour-clicked');
+
+  // Click the hour tile (index 1) — expect input "1".
+  await tiles.nth(1).click();
+  await expect(feeRateInput).toHaveValue('1', { timeout: 5_000 });
+});