fix: address #496, #497, #498, #499

[kerenaugustine79]

Summary

fix: address #496, #497, #498, #499

What was solved

#496 — [High] Add right-to-left (RTL) layout support with logical CSS properties and an Arabic/Hebrew smoke locale

Add RTL layout support by converting physical Tailwind direction utilities to logical ones across components/pages, mirroring direction-sensitive UI with rtl: variants, isolating mixed-direction content (addresses/hashes/amounts) via bdi/dir=ltr, adding an Arabic smoke locale with dir on , and providing a codemod script plus RTL checklist. Out of scope: full professional Arabic/Hebrew translations.

Addressed:

• Changed: src/app/globals.css, tailwind.config.ts, src/lib/i18n/index.ts, src/lib/textSafety.ts
• Convert directional Tailwind utilities (pl-, pr-, ml-, mr-, left-, right-, text-left/right) to logical equivalents (ps-, pe-, ms-, me-, start-, end-, text-start/end) across src/components/** and src/app/**
• Use Tailwind rtl: variants to flip direction-sensitive icons, chevrons, sparklines, and timeline connectors
• Wrap mixed-direction content (addresses, hashes, amounts, code) in /dir="ltr" with unicode-bidi: isolate

#497 — [High] Build a locale-aware number, currency, date and relative-time formatting layer including decimal-separator-aware amount input

Add an Intl-backed, locale-aware formatting layer (useFormatters hook + server equivalent) with cached Intl instances and safe fallbacks, migrate amount/USD/percent/timestamp UI to it, and make the SwapCard amount input locale-aware (decimal separators, grouping, paste disambiguation, IME-safe, inputmode=decimal, accessible label).

Addressed:

• Changed: src/lib/format.ts, src/lib/time.ts, src/lib/decimal.ts
• Provide useFormatters() hook plus a server-side equivalent exposing formatNumber, formatCompact, formatUsd, formatTokenAmount(amount, decimals), formatDate, formatRelative.
• Memoize Intl instances per locale in a Map with no global mutable state and safe fallbacks (including Intl.RelativeTimeFormat availability).
• Format big values from decimal strings without float conversion.

#498 — [High] Establish Core Web Vitals budgets with Lighthouse CI and fix the top regressions

Add a Lighthouse CI performance gate (desktop + mobile emulation) with Core Web Vitals and bundle-size budgets for at least four routes, wire it into CI to run against a production build and comment results on PRs with trend artifacts, land at least three concrete optimisations with measured before/after, audit and fix layout shifts (reserved dimensions for feeds, skeletons, banners like ConnectivityBanner and onboarding hints), and document budgets plus a local npm run perf workflow.

Addressed:

• Changed: lighthouserc.json, .github/workflows/ci.yml, src/app/layout.tsx, lighthouserc.json
• Create lighthouserc.json with budgets (LCP < 2.5s, CLS < 0.1, TBT < 200ms on emulated mid-tier mobile) covering at least four routes including /, /explore, /solve.
• Add/update a CI workflow that runs Lighthouse CI against a production build, comments results on PRs, and stores trend results as artifacts.
• Ensure deterministic runs: throttling profile, median of 3 runs, and mocked backend via MSW/fixtures so results are not network-dependent.

#499 — [High] Cut initial JavaScript with route-level code splitting, lazy Stellar SDK and LazyMotion

Reduce first-load JavaScript by introducing route-level code splitting, a memoised dynamic Stellar SDK loader used at signing/verification time, framer-motion LazyMotion with domAnimation, and per-route bundle budgets enforced in scripts/check-bundle-size.mjs, with a documented baseline in docs/performance.md.

Addressed:

• Changed: src/lib/xdrReview.ts, scripts/check-bundle-size.mjs, next.config.mjs, docs/performance.md
• Analyse bundles with @next/bundle-analyzer and record a per-route baseline in docs/performance.md
• Load xdrReview, wallet adapters and contract specs via dynamic import() at first use, with prefetch on intent (hover/focus of submit or connect)
• Provide a memoised, typed loadStellar() dynamic importer with retry on chunk load failure and non-blocking loading states with user feedback

Changes

• src/app/globals.css (modify)
• tailwind.config.ts (modify)
• src/lib/i18n/index.ts (modify)
• src/lib/textSafety.ts (modify)
• src/lib/format.ts (modify)
• src/lib/time.ts (modify)
• src/lib/decimal.ts (create)
• lighthouserc.json (create)
• .github/workflows/ci.yml (modify)
• src/app/layout.tsx (modify)
• README.md (modify)
• src/lib/xdrReview.ts (modify)
• scripts/check-bundle-size.mjs (modify)
• next.config.mjs (modify)
• docs/performance.md (create)

Approach

1. [High] Add right-to-left (RTL) layout support with logical CSS properties and an Arabic/Hebrew smoke locale #496 — [High] Add right-to-left (RTL) layout support with logical CSS properties and an Arabic/Hebrew smoke locale (Changed: src/app/globals.css, tailwind.config.ts, src/lib/i18n/index.ts, src/lib/textSafety.ts)
2. [High] Build a locale-aware number, currency, date and relative-time formatting layer including decimal-separator-aware amount input #497 — [High] Build a locale-aware number, currency, date and relative-time formatting layer including decimal-separator-aware amount input (Changed: src/lib/format.ts, src/lib/time.ts, src/lib/decimal.ts)
3. [High] Establish Core Web Vitals budgets with Lighthouse CI and fix the top regressions #498 — [High] Establish Core Web Vitals budgets with Lighthouse CI and fix the top regressions (Changed: lighthouserc.json, .github/workflows/ci.yml, src/app/layout.tsx, lighthouserc.json)
4. [High] Cut initial JavaScript with route-level code splitting, lazy Stellar SDK and LazyMotion #499 — [High] Cut initial JavaScript with route-level code splitting, lazy Stellar SDK and LazyMotion (Changed: src/lib/xdrReview.ts, scripts/check-bundle-size.mjs, next.config.mjs, docs/performance.md)

Issues

Closes #496
Closes #497
Closes #498
Closes #498
Closes #499
Closes #499

[drips-wave]

@kerenaugustine79 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