fix: Warn users when connecting to a website on the eth-phishing-detect list on mobile

[blackdevelopa]

Description

Currently users don't see any warning when connecting to a site on the eth-phishing-detect list using wallet connect. This PR checks if the url is flagged in the phishing controller and shows a warning banner when connecting to such site.

Manual testing steps

1. Setup WC locally using npx create-wc-dapp@latest web3modal-quickstart -id <PRPOJECT_ID> -y
2. Run your local server
3. In line 36 of src/pages/_app.tsx, change the default url in to a flagged url from the phishing controller
4. Connect to the server on your device and connect to wallet.
5. If url in the phishing list, it should show the warning banner on the connect modal else no warning banner.

Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/44a67e4f-4e42-4959-8cba-a9f25c45401b

Screenshots/Recordings

Before

RPReplay_Final1697220297.MP4

After

RPReplay_Final1697220988.MP4

Related issues

_Fixes https://github.com/MetaMask/MetaMask-planning/issues/1327

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.

[codecov-commenter]

Codecov Report

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

Comparison is base (dc0314d) 34.95% compared to head (5a5046c) 35.09%.
Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7491      +/-   ##
==========================================
+ Coverage   34.95%   35.09%   +0.14%     
==========================================
  Files        1030     1032       +2     
  Lines       27363    27446      +83     
  Branches     2253     2263      +10     
==========================================
+ Hits         9564     9632      +68     
- Misses      17289    17303      +14     
- Partials      510      511       +1     

Files	Coverage Δ
app/components/UI/AccountApproval/index.js	45.90% <100.00%> (+38.35%)	⬆️
app/constants/urls.ts	100.00% <100.00%> (ø)
app/components/UI/AccountApproval/styles.ts	66.66% <66.66%> (ø)
...omponents/UI/AccountApproval/showWarningBanner.tsx	77.77% <77.77%> (ø)

... and 20 files with indirect coverage changes

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

[jpuri]

Changes look good, I left some small feedbacks.

[digiwand]

I think the caveat comment is a non-blocker. It would be interesting to investigate this further.

The rest of the code lgtm 🚀

[jpuri]

🚀

[seaona]

@blackdevelopa the PR looks good from QA. I can see the deceptive warning for malicious sites, and no warning for benign sites.

deceptive-warning-wc.mp4

no-warning-bening-site.mp4

About the website icon, I am seeing a different icon from the one suggested in the dapp. I see that your icon is the expected one. We can investigate this further, as a separate issue though.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

90.3% Coverage
0.0% Duplication