fix: update z-index for AnimatedModal and standardize messaging

[Dprof-in-tech]

Description

This pull request includes several minor improvements and fixes related to wording consistency, UI theming, and modal behavior. The most notable changes are grouped below:

Wording Consistency:

• Updated all instances of "onchain" to "on-chain" in user-facing text and image alt attributes across WalletMigrationBanner.tsx and WalletMigrationModal.tsx for improved clarity and professionalism. [1] [2] [3] [4]

UI/UX Improvements:

• Changed the z-index class of the Dialog component in AnimatedComponents.tsx from z-50 to z-[55] to resolve potential stacking context issues with modals.

State Management:

• Added an effect in NetworkSelectionModal.tsx to reset the hasCheckedStorage state whenever the user’s wallet address changes (including logout and login as a different user), ensuring correct modal behavior for different users.

References

Testing

• This change adds test coverage for new/changed/fixed functionality

Checklist

• I have added documentation and tests for new/changed functionality in this PR
• All active GitHub checks for tests, formatting, and security are passing
• The correct base branch is being used, if not main

By submitting a PR, I agree to Paycrest's Contributor Code of Conduct and Contribution Guide.

Summary by CodeRabbit

• Bug Fixes

  • Fixed modal state persistence issue when switching between wallet accounts.

• Style

  • Corrected terminology in wallet migration UI text ("on-chain" instead of "onchain").
  • Adjusted dialog layer stacking order for improved visual layering.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3ed97a8 and 43ef49c.

📒 Files selected for processing (4)

• app/components/AnimatedComponents.tsx
• app/components/NetworkSelectionModal.tsx
• app/components/WalletMigrationBanner.tsx
• app/components/WalletMigrationModal.tsx

---

📝 Walkthrough

Walkthrough

The PR makes targeted refinements across four components: adjusts the AnimatedModal z-index for stacking order, introduces wallet address change detection to reset modal state in NetworkSelectionModal, and standardizes hyphenation in migration-related components ("onchain" to "on-chain").

Changes

Cohort / File(s)	Summary
Styling Layer Adjustment app/components/AnimatedComponents.tsx	Modified Dialog z-index from 50 to 55 to adjust stacking order.
Modal State Management app/components/NetworkSelectionModal.tsx	Added effect to reset hasCheckedStorage flag when wallet address changes, enabling modal visibility re-check on user wallet switch.
Migration Component Text Updates app/components/WalletMigration*.tsx	Standardized terminology by updating "onchain apps" to "on-chain apps" in WalletMigrationBanner and WalletMigrationModal components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: standardize localStorage key handling for network modal visibility #384: Modifies NetworkSelectionModal per-wallet modal visibility logic with standardized localStorage key handling and networkModalStore integration.
• feat: enhance wallet migration modals and context for improved user e… #363: Updates presentation and text in WalletMigrationBanner and WalletMigrationModal components.

Suggested reviewers

• chibie
• 5ran6
• onahprosper

Poem

🐰 A tiny hop through modals bright,
Hyphenated words now perfectly right,
Wallets dance as z-indices soar,
Storage resets, fresh as before!

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-little-text-change-and-button-click-noblocks-mobile

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}