MetaMask / MetaMask/metamask-mobile
Build efficient way of showing multiple modals
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
### What is this about?
After importing SRP as an example, when going to the wallet view for the first time, users will see:
* Automatic Security update modal
* Solana new feature
* Onboarding wizard
If they are creating a new wallet they will also see the "secure now" "remind me later" modal if they didn't save their SRP
The goal of this issue is to create an efficient way of rendering this modals. After talking with the team, it seems that probably the most efficient way is use the pattern that already exists, is navigate back an forward between modals. But if that shows to be slow, we can create a queue for rendering those in the respective order
### Scenario
_No response_
### Design
_No response_
### Technical Details
- Create an efficient way for rendering modals in a consecutive order
### Threat Modeling Framework
_No response_
### Acceptance Criteria
- Modals are not rendering in the UI and just hiding other modals behind them
- Efficient system if needed to remove, add, update a modal to the existing order
### Stakeholder review needed before the work gets merged
- [ ] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)
### References
_No response_
Contributor guide
Research direction
Start by tracing the existing flows for the Automatic Security update, Solana feature, onboarding wizard, and secure-now modals in the mobile app. Compare navigating between modals with a queued approach, then verify that only one modal renders at a time and that adding, removing, or updating a modal preserves the intended order.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100