Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Submit feedback
    • Contribute to GitLab
  • Sign in
F
finwise-miniapp-fe
  • Project
    • Project
    • Details
    • Activity
    • Releases
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 0
    • Issues 0
    • List
    • Board
    • Labels
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • ThinhNC
  • finwise-miniapp-fe
  • Merge Requests
  • !43

Merged
Opened Sep 13, 2026 by ThinhNC@ThinhNC
  • Report abuse
Report abuse

fix(fe): resolve full-project audit findings, enforce type safety, and harden a11y & resilience

Summary of Changes

This PR resolves all findings from a comprehensive frontend code audit across finwise-miniapp-fe, adhering to the strict TypeScript guidelines in @AGENTS.md and standardizing security, accessibility, storage resiliency, and cache invalidation.


Key Improvements

1. Security & PII Protection

  • Redacted PII in Client Logs: Removed console.log statements in use-zalo-login.ts that exposed sensitive user details (zaloId, user name, avatar, and raw SDK responses) in the client console.
  • SDK Typing: Replaced any SDK payload castings with typed objects and unknown error catch blocks.

2. Strict Type Safety (Zero any Policy)

  • Eliminated any across Services and Stores:
    • auth.ts: Refactored ApiResponse<T = unknown>, typed errors?: unknown[], hoisted missing imports, and declared RegisterRequest, UpdatePasswordRequest (supporting both oldPassword and currentPassword), and ResetPasswordRequest.
    • auth.service.ts: Replaced data: any signatures with dedicated request types.
    • ai-assistant.service.ts: Updated handleAIError(error: unknown) with safe axios.isAxiosError(error) narrowing.
    • admin-settings.service.ts & use-admin-settings.ts: Replaced arbitrary value: any with value: unknown.
    • transactions/index.tsx: Replaced const q: any = {} with TransactionQuery and typed filter state as TransactionType | "".
    • api-client.ts: Introduced strongly typed QueuedRequest interface for refresh queue handling.

3. Error Handling & Storage Resiliency

  • Crash-Proof safeStorage Wrapper: Added src/lib/storage.ts with an in-memory fallback mechanism to prevent fatal SecurityError exceptions when localStorage is blocked in restricted webviews or incognito browsing.
  • Synchronized across Core Modules: Replaced raw localStorage calls across auth-store.ts, theme-store.ts, i18n/index.ts, login.tsx, api-client.ts, and use-notification-sse.ts.
  • Safe Admin Error Catches: Migrated untyped catch (err: any) blocks to catch (err: unknown) utilizing getErrorMessage(err, fallback) in Admin settings, notifications, and AI management pages.

4. Accessibility (a11y) & UX Enhancements

  • Interactive Card Accessibility: Interactive cards with onClick automatically gain role="button", tabIndex={0}, and Enter/Space keyboard handlers with event.preventDefault() to avoid unintentional page scrolling.
  • WAI-ARIA Tab Semantics: Added type="button", role="tablist", role="tab", and aria-selected to Tabs.tsx to prevent unintended form submissions and improve screen-reader support.
  • Accessible Form Controls: Upgraded Select.tsx with deterministic React.useId() and ARIA error binding (aria-invalid, aria-describedby).
  • Consistent Date Formatting: Replaced unlocalized .toLocaleString() calls in Admin tables with application-standard formatDate from useI18n().

5. Cache Invalidation Completeness

  • Transfer Query Invalidation: Added reportKeys.all invalidation to transfer mutations in use-transfers.ts so cash flow figures and financial reports update immediately upon fund transfers.

Check out, review, and merge locally

Step 1. Fetch and check out the branch for this merge request

git fetch origin
git checkout -b fix/frontend-audit-quality-remediation origin/fix/frontend-audit-quality-remediation

Step 2. Review the changes locally

Step 3. Merge the branch and fix any conflicts that come up

git fetch origin
git checkout origin/develop
git merge --no-ff fix/frontend-audit-quality-remediation

Step 4. Push the result of the merge to GitLab

git push origin develop

Note that pushing to GitLab requires write access to this repository.

Tip: You can also checkout merge requests locally by following these guidelines.

  • Discussion 0
  • Commits 1
  • Changes 51
Assignee
No assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
0
Labels
None
Assign labels
  • View project labels
Reference: ThinhNC/finwise-miniapp-fe!43

Revert this merge request

This will create a new commit in order to revert the existing changes.

Switch branch
Cancel
A new branch will be created in your fork and a new merge request will be started.

Cherry-pick this merge request

Switch branch
Cancel
A new branch will be created in your fork and a new merge request will be started.