fix: 1273 duplicate contact addresses

[frankvonhoven]

Description

• Adds a warning icon to contact addresses that are associated with more than 1 chainId (ambiguous)
• Tapping icon opens bottom sheet with info that the address is associated to more than one chain
• When selecting an ambiguous address in the Send To flow, an analytics event is fired

Related issues

_Fixes #1273

E2E Tests

✅ Pass: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/df69caa4-66f3-44cd-ad41-a097a6491ed7

Manual testing steps

1. Install v7.6 of the app - checkout release/7.6.0 branch
2. Add Ethereum classic via chainlist.org
3. Add a contact on Mainnet
4. Switch to Ethereum classic
5. Notice that the same added contact shows on ethereum classic chain
6. Checkout this branch.
7. The app at this point should be able to identify ambiguous addresses and display a warning icon in the contacts list for:
   a. Settings > Contacts
   b. Send To --> Contacts
8. In the send to flow:
   a. If an ambiguous address is selected, you should see a warning message on the Send To screen

Screenshots/Recordings

Contacts Ambiguous Addresses

Contacts.Ambiguous.mp4

Dark Mode

Send To Ambiguous Addresses

SelectAmbiguous.mp4

Dark Mode

Select Ambiguous Addresses to Send To

Send.To.Ambiguous.mp4

Warning Dark Mode

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: 18 lines in your changes are missing coverage. Please review.

Comparison is base (c31c17d) 34.72% compared to head (f614e51) 34.72%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7482      +/-   ##
==========================================
- Coverage   34.72%   34.72%   -0.01%     
==========================================
  Files        1020     1022       +2     
  Lines       27252    27279      +27     
  Branches     2229     2232       +3     
==========================================
+ Hits         9463     9472       +9     
- Misses      17292    17309      +17     
- Partials      497      498       +1     

Files	Coverage Δ
app/components/Nav/App/index.js	5.83% <ø> (ø)
...s/SendFlow/AddressElement/AddressElement.styles.ts	100.00% <ø> (ø)
app/components/Views/SendFlow/SendTo/styles.ts	50.00% <ø> (ø)
...components/Views/SendFlow/WarningMessage/index.tsx	40.00% <100.00%> (ø)
...iguousAddressSheet/AmbiguousAddressSheet.styles.ts	100.00% <100.00%> (ø)
app/constants/navigation/Routes.ts	100.00% <ø> (ø)
app/core/Analytics/MetaMetrics.events.ts	100.00% <ø> (ø)
...s/Views/SendFlow/AddressElement/AddressElement.tsx	77.77% <0.00%> (-4.58%)	⬇️
...ts/AmbiguousAddressSheet/AmbiguousAddressSheet.tsx	85.71% <85.71%> (ø)
...ponents/Views/SendFlow/AddressList/AddressList.tsx	51.85% <50.00%> (-0.78%)	⬇️
... and 2 more

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

[tommasini]

Hey @frankvonhoven amazing work!

Left some comment, let me know your thoughts!!

Also, it seems that it is some UI issues on the warning on the SendTo screen? Comparatively to the other, at least doesn't seem right the margin between the two warnings for me

[frankvonhoven]

re: the warning message spacing... I did notice that but didn't know if it would be a real use case, since a user probably wouldn't want to send funds without having any funds. But perhaps I could refactor the warning component to only have a top margin?

[cortisiko]

@frankvonhoven can you test this in dark mode as well? The caution icons look a bit dark and it would be interesting to see if it is visible in dark mode.

Can you confirm that the translations are in for this feature? Confirm by showing recordings of the translated text for the new this is a ambitious address sheet

In terms of analytics, can you confirm that the analytic events are appearing correctly?

[frankvonhoven]

@cortisiko

• The caution icons in dark mode.
  A: Updated screenshots in PR description

• Translations in for this feature
  A: Translations completed

  • Waiting on confirmation for translation integration into main

• Analytic events appearing correctly

  • 

[frankvonhoven]

@cortisiko with translations in I checked the modal in German and copied the string 3x to test long translations:

[frankvonhoven]

@tommasini I fixed the padding for the warning component

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
7 Code Smells

29.5% Coverage
0.0% Duplication

[sethkfman]

LGTM

[tommasini]

LGTM!