Skip to content

fix(web): portal global modals above wallet - #1528

Open
lrk1314 wants to merge 1 commit into
NoFxAiOS:devfrom
lrk1314:fix/modal-portal-layering
Open

fix(web): portal global modals above wallet#1528
lrk1314 wants to merge 1 commit into
NoFxAiOS:devfrom
lrk1314:fix/modal-portal-layering

Conversation

@lrk1314

@lrk1314 lrk1314 commented Jul 22, 2026

Copy link
Copy Markdown

Pull Request - Frontend

Description

Global configuration modals could render below the Hyperliquid Wallet panel because they were mounted inside page stacking contexts. This change portals global overlays to document.body and gives modal types an explicit layer contract.

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Code style update
  • Refactoring
  • Performance improvement

Related Issues

No linked issue. Reproduced from the Settings and Traders configuration flows.

Changes Made

  • add shared ModalPortal and layer constants: primary 100, nested 110, critical 120
  • migrate model, exchange, Telegram, trader, trader-view, two-stage-key, alert-dialog, and fullscreen chart overlays
  • remove redundant Settings wrappers around portal-based modals
  • add focused portal ownership and layer-contract tests

No exchange API, model API, credential persistence, or trading logic is changed.

Screenshots / Demo

Manual verification confirmed that model and exchange overlays cover the Hyperliquid Wallet panel. The overlay is a direct document.body child with computed z-index: 100.

Testing

Test Environment

  • OS: Windows 10
  • Node Version: 20.20.2
  • Browser: Chrome

Manual Testing

  • Tested in development mode
  • Tested production build
  • Tested on multiple browsers
  • Tested responsive design
  • Verified the affected Settings and Traders flows

Automated verification:

  • npx tsc --noEmit
  • ESLint rules passed on all changed files with the repository Prettier rule disabled to avoid unrelated whole-file legacy formatting churn
  • npm test: 9 test files, 130 tests passed
  • npm run build: 2917 modules transformed successfully
  • browser console: 0 application errors

Internationalization

  • N/A (no user-facing text added)

Checklist

Code Quality

  • Change is scoped to modal ownership and layering
  • Self-review completed
  • Code builds successfully
  • Ran the full npm run lint gate without baseline formatting exclusions
  • No application console errors

Testing

  • Component tests added
  • Tests pass locally

Documentation

  • N/A

Git

  • Commit follows conventional format
  • Based on latest dev
  • No merge conflicts

Additional Notes

The local pre-commit formatter rewrites several complete legacy TSX files. This PR intentionally keeps a surgical 11-file, 131-addition/51-deletion diff and records the formatting limitation above.

By submitting this PR, I confirm:

  • I have read the Contributing Guidelines
  • I agree to the Code of Conduct
  • My contribution is licensed under AGPL-3.0

@cla-assistant

cla-assistant Bot commented Jul 22, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant