feat: hide alert when navigating to protect wallet

[tommasini]

Description

This PR aims to solve a bug on the backup alert, when navigating to the protect your wallet screen the alert kept being visible.

This PR contains BackupAlert converted to typescript and functional component.

Manual testing steps

_1. Step1: Create a new wallet
_2. Step2: Do not protect your wallet pressing (remember later)
_3. Step3: Press protect your wallet on the backup alert
_4. Step4: The protect your wallet should not be there

Screenshots/Recordings

https://recordit.co/skV2sxdzil

new Bell Icon:

Before

[screenshot]

After

[screenshot]

Related issues

_Fixes #4400

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained:
  • What problem this PR is solving.
  • How this problem was solved.
  • How reviewers can test my changes.
• I’ve indicated what issue this PR is linked to: Fixes #???
• I’ve included tests if applicable.
• I’ve documented any added code.
• I’ve applied the right labels on the PR (see labeling guidelines).
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@types/react-native-elevated-view@0.0.4	None	+5	1.74 MB	types

View full report↗︎

[codecov-commenter]

Codecov Report

Attention: 8 lines in your changes are missing coverage. Please review.

Comparison is base (6d26e45) 40.33% compared to head (23e1a15) 40.50%.
Report is 28 commits behind head on main.

Files	Patch %	Lines
app/components/UI/BackupAlert/BackupAlert.tsx	80.00%	5 Missing and 1 partial ⚠️
...pp/components/UI/BackupAlert/BackupAlert.styles.ts	66.66%	0 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7534      +/-   ##
==========================================
+ Coverage   40.33%   40.50%   +0.17%     
==========================================
  Files        1235     1241       +6     
  Lines       29949    29980      +31     
  Branches     2875     2881       +6     
==========================================
+ Hits        12079    12144      +65     
+ Misses      17175    17136      -39     
- Partials      695      700       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

74.1% Coverage
0.0% Duplication

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/cdfda616-4a73-4878-be99-1441696980e4
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/983ce1bd-ef0f-4581-b1ff-7928ddb7061d
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[plasmacorral]

Had a chance to take a quick look here and am confident that this addresses the issue reported. Specifically, tested with the SRP backup demand flow and was pleased with the result.

Tested commit 55d3aee on Samsung a515f with Android 12.

Manual testing steps for SRP backup demand

1. Create a new wallet
2. Do not protect your wallet pressing (remember later)
3. Import a PK for an account with assets present to trigger backup demand
4. App is unusable for anything but SRP backup
5. Warning is also not presented overtop the SRP backup flow in this condition

[tommasini]

Actually there is a new Bell Icon already, will ask for design-qa, updated the final result on the description

[sonarcloud]

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

1 New issue
0 Security Hotspots
81.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[yanrong-chen]

@tommasini Looks good to me for now! Thank you for checking with me. Later we can also update this to use our DS banner alert component

[MarioAslau]

Codewise it looks great Tomas! I dm'd you a couple of questions regarding the context of some choices

[jpcloureiro]

LGTM

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/51d64361-f28e-47b5-914a-0c8ab7dda971
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label