Trade history copy/explorer links, slippage tolerance tests, session expiry modal, and modal a11y fixes

[Mawuli-tech]

Summary

Resolves four issues: copy-tx-hash buttons on trade history, a slippage tolerance selector with unit tests, a session-expiry warning modal, and accessibility fixes across modal dialogs.

#879 — Copy tx hash + explorer link on trade history rows

Adds a copy-to-clipboard button and an explorer link to each row of the trade history / wallet activity feed.

#877 — Slippage tolerance selector unit tests

Discrepancy found and disclosed: the issue asked to "add unit tests for the slippage tolerance selector," which implies a component and max_price/min_price computation already exist. I searched the repo (slippage, tolerance, max_price/min_price) before writing anything and found no existing slippage tolerance selector or computation logic anywhere in the codebase. The only pre-existing min_price/max_price fields belong to unrelated course-listing price filters (LandingPage.tsx, course.service.ts) — nothing to do with trades. TradeDialog's existing buy/sell price-preview flow has no slippage concept at all.

Since the issue's premise doesn't match what's actually in the repo, this PR adds both the component/utility and its tests, rather than only tests for something that doesn't exist:

• src/utils/slippageTolerance.utils.ts — computeSlippagePriceBounds (max_price for buys, min_price for sells, rounded to avoid float drift) and validateSlippageTolerance (rejects tolerances outside [0, 50]%).
• src/components/common/SlippageToleranceSelector.tsx — preset (0.5% / 1% / 5%) and custom-tolerance UI showing the computed bound, with the confirm button disabled while the custom input is out of range.
• Tests assert exactly the cases the issue specified: 0.5% buy on 100 XLM → 100.5; 5% buy → 105; 1% sell → 99; custom 0% → equals preview price; >50% → validation error + disabled confirm button. Plus additional edge cases (negative/NaN/Infinity tolerance, floating-point rounding).

#878 — Session expiry warning modal

Another premise mismatch, also disclosed here: the issue describes decoding a JWT from an "in-memory token" and renewing via a "wallet challenge-verify flow." Neither exists in this codebase — there's no wallet-based auth anywhere; Web3Provider/wagmi is a separate, unrelated on-chain wallet-connection system used only for trades, with no JWT or backend session concept. The app's actual session is a JWT in a cookie (BaseApiService's access token, set on authService.login/register, and already relied on by the existing response interceptor's silent refresh-on-401 retry via POST /auth/refresh). This PR implements the feature against that real flow:

• src/utils/jwt.utils.ts — dependency-free JWT payload/exp decoding (no JWT library was already in package.json, and we only need one claim).
• src/hooks/useSessionExpiryWarning.ts — reads the current token, decodes exp, and schedules a single setTimeout 5 minutes before expiry (shows immediately if already inside that window, or already expired). Exposes renewSession/logOut plus renewing/error state. Clears its timer on unmount and on logout so no warning can fire after the session is gone.
• src/components/common/SessionExpiryModal.tsx — "Your session expires in 5 minutes. Renew to stay logged in." with Renew Session (calls the existing refresh endpoint, dismisses on success) and Log Out (clears session, navigates to the marketplace listing at /). Escape/outside-click are intentionally disabled — losing a session is a deliberate action, not an accidental-dismiss one — and the now-inapplicable "Esc to close" hint is hidden to match.
• src/components/common/SessionExpiryWatcher.tsx — mounted once at the app root (App.tsx) via router.navigate, since App renders outside the RouterProvider tree where useNavigate isn't available.
• authService.refreshSession() (wraps POST /auth/refresh) and BaseApiService.getAuthToken() (reads the token back out of the cookie) were added to support this.

#876 — Accessibility fixes across modal dialogs

Investigated first, as instructed, since fixing once in the shared component is strongly preferred. Every modal dialog in the app (TradeDialog, BatchBuyModal, ReinvestDividendDialog, PendingTxModal, TransactionFailureDrawer, SetCoCreatorModal, ConnectWalletButton's dialogs, OracleAccessPanel, plus BottomSheet) already builds on the shared DialogContent (src/components/ui/dialog.tsx), itself a wrapper over @radix-ui/react-dialog. Radix already provides, out of the box: role="dialog", aria-labelledby (auto-wired to DialogTitle, and all 8 consumers already use it), a focus trap (Tab/Shift+Tab cycles within the dialog), Escape-to-dismiss, and focus move-in-on-open / restore-on-close.

Two real, concrete gaps were found (confirmed by reading the Radix and react-hot-toast source, not assumed) and fixed at the shared-component level:

• aria-modal was never set. Radix's Dialog.Content does not stamp this attribute itself. Added aria-modal="true" to DialogContent and BottomSheetContent so every modal in the app is now correctly announced as modal.
• toast.custom() bypasses the app's aria-live config. App.tsx configures the Toaster's toastOptions.ariaProps for aria-live="polite", but react-hot-toast renders toast.custom() messages directly, skipping the wrapper that applies ariaProps for every other toast type. The transactionSuccess toast (used on trade confirmations) was silently un-announced to screen readers. Fixed by wrapping its content in an explicit role="status" aria-live="polite" element.

Also added regression tests locking in the full a11y contract (role, aria-modal, aria-labelledby, focus trap, Escape dismissal, focus restore, toast aria-live) at the shared-component level, so a future change to dialog.tsx/bottom-sheet.tsx/toast.util.tsx can't silently regress accessibility app-wide.

Test plan

• npx vitest run — full suite passes with the same pre-existing failures as dev and zero new failures (verified via git stash A/B comparison: 149/150 pre-existing failures present both before and after this branch's changes; one previously-failing integration test now passes, unrelated to these changes and not claimed as a fix here).
• npx eslint . — clean.
• npx tsc -b --noEmit — clean.
• npm run build — succeeds (pre-existing bundle-size and third-party /*#__PURE__*/ comment warnings only, unrelated to this PR).
• New/updated test files: slippageTolerance.utils.test.ts, SlippageToleranceSelector.test.tsx, jwt.utils.test.ts, useSessionExpiryWarning.test.ts, SessionExpiryModal.test.tsx, dialog.test.tsx (a11y additions), toast.util.test.tsx (aria-live additions).

Caveats

• This repo has pre-existing, unrelated test failures on dev (confirmed via git stash comparison before starting): a batch of WagmiProviderNotFoundErrors and localStorage-undefined errors across several integration test files, present before and after this branch. Not touched here.
• Add a session expiry warning modal that appears 5 minutes before the JWT expires with a renew option #878's "renew" flow assumes POST /auth/refresh returns (or the backend rotates) a usable token, matching the assumption already baked into the existing response interceptor's own silent-refresh-on-401 logic; if authService.login/register is never actually wired up to a real login UI yet (it doesn't currently appear to be called from any component), this modal simply won't have a token to watch and stays inert — which is the correct, safe behavior until that UI exists.
• AuthService.clearAuth() only clears localStorage, not the auth cookie itself (unlike BaseApiService.clearAuth(), which it overrides) — a pre-existing inconsistency, left untouched as out of scope for this PR.

closes #879
closes #878
closes #877
closes #876

[drips-wave]

@Mawuli-tech 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