fix: fake native tokens need better UX error handling

[salimtb]

Description

In response to recent scam incidents we're adding mitigations to help prevent users from adding malicious networks and being shown inaccurate token values.

Implementation of this ticket will:

Show N/A for a native token value, when the native token symbol does not match the chain ID as publicly known Show a tooltip that when tapped shows a bottom sheet explainer The explainer directs the user to update their Network details for the network the token balance is requested for User story

As a user I want to be informed that a token balance might be inaccurate, so that I don't make decisions to transfer or buy assets based on this information As a user I want to be informed when a custom network might be trying to scam me

Related issues

Fixes: #1354

Manual testing steps

1. Go to edit network page and choose Polygon 2.change the symbol from MATIC to ETH
2. Go to the wallet page

Screenshots/Recordings

Before

https://github.com/MetaMask/metamask-mobile/assets/26223211/af65f12b-0430-443a-9631-7b8beb188ee8

After

https://drive.google.com/drive/folders/1lcKOyC7U1r9OW2qt7BjsReGdG-02EysJ?usp=sharing

Pre-merge author checklist

• [x] I’ve followed MetaMask Coding Standards.
• [x] I've clearly explained what problem this PR is solving and how it is solved.
• [x] I've linked related issues
• [x] I've included manual testing steps
• [x] I've included screenshots/recordings if applicable
• [x] I’ve included tests if applicable
• [x] I’ve documented my code using JSDoc format if applicable
• [x] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• [x] I’ve properly set the pull request status:
  • [ ] In case it's not yet "ready for review", I've set it to "draft".
  • [x] 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[bot]]

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.

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5ea75708-64bf-49ba-b246-cd5de618b4b6 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 32.06107% with 89 lines in your changes are missing coverage. Please review.

Project coverage is 41.39%. Comparing base (371cb5f) to head (bf5977c).

Files	Patch %	Lines
...Settings/NetworksSettings/NetworkSettings/index.js	0.00%	60 Missing :warning:
app/components/UI/Tokens/index.tsx	48.27%	10 Missing and 5 partials :warning:
...tings/NetworkSettings/withIsOriginalNativeToken.js	44.44%	5 Missing :warning:
app/core/Engine.ts	16.66%	5 Missing :warning:
app/components/UI/DrawerView/index.js	0.00%	3 Missing :warning:
...omponents/Views/Settings/NetworksSettings/index.js	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8572      +/-   ##
==========================================
- Coverage   41.42%   41.39%   -0.03%     
==========================================
  Files        1270     1272       +2     
  Lines       30832    30950     +118     
  Branches     3046     3062      +16     
==========================================
+ Hits        12772    12812      +40     
- Misses      17296    17369      +73     
- Partials      764      769       +5     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[salimtb]

figma : https://www.figma.com/file/T0z1ZJ81y8YlaKzoLGraTt/Verify-and-pre-populate-network-details-(mobile)?node-id=9%3A48702&mode=dev

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/7ce984a8-9156-4ef2-847b-8375d17bf34d You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/de4c3b67-2d82-4d4e-8206-bf4052529ea8 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/87f00cac-4f7b-49be-856f-60fde6e0e166 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/a54c3574-ff99-4a78-8f70-bdbb5fb6e869 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/8b8d8f57-6430-40e5-96d5-177aec3f7bf1 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/19137355-2923-4cfc-9951-fecbeaaa9bf7 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[cortisiko]

@salimtb We should double-check the logic when it comes to infura supported networks. I noticed that when on mainnet I see the warning next to ETH. See here. This is what the network overview for mainnet shows

[salimtb]

@salimtb We should double-check the logic when it comes to infura supported networks. I noticed that when on mainnet I see the warning next to ETH. See here. This is what the network overview for mainnet shows

hello @cortisiko , thank you for your comment, the issue has now been resolved.

just to clarify a few things, at the bottom of the name you see a message that suggests using ETH as the name, this must be Ethereum mainnet, so thanks for reporting that, it's now fixed.

you shouldn't also see the red border in the filed name, so I've fixed that too. the suggested network name came from here, you can also see the design here

[github-actions[bot]]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/7e47e7c0-0d8c-4cf7-ba3b-80b828b85006 You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[github-actions[bot]]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: f9df61fb0d27a766db90f9055d1c20f18c88b190 Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ceb7f2d2-0bb8-4109-ba1e-e9a93c99ab78

[!NOTE]

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud[bot]]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
32.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[wachunei]

Hey @salimtb I just realized there were additions to the Ramp folder, to be exact the files:

• app/components/UI/Ramp/hooks/useIsOriginalNativeTokenSymbol.test.ts
• app/components/UI/Ramp/hooks/useIsOriginalNativeTokenSymbol.ts

These must have been added before our CODEOWNERS folders were listed so I was not aware of this change. I want to kindly ask for these two files to be moved to the corresponding code domain since these are not used within our feature.

cc: @Cal-L @cortisiko

[salimtb]

• app/components/UI/Ramp/hooks/useIsOriginalNativeTokenSymbol.test.ts

hey @wachunei , hooks now moved on this PR , can i have a review pls