feat(wallet): Display Custom Chain and Token Icons

[Douglashdaniel]

Description

Display Custom Chain and Token Icons in Wallet UI

1. Adding a Icon URL to a custom network will now display that icon for the base asset.
2. There is now a Icon URL field in the EditVisibleAssets modal under the Advanced section.
3. Added an additional safety check to make sure that the URL ends with a valid icon extension (.png, .jpg, etc..)

Resolves brave/brave-browser#20687
Resolves brave/brave-browser#20000
Resolves brave/brave-browser#20256

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Custom Network Icon Demo:

Screen.Recording.2022-01-26.at.7.58.13.AM.mov

Custom Token Icon Demo:

Screen.Recording.2022-01-26.at.8.08.52.AM.mov

Adding a Custom Token from Coingecko:

Screen.Recording.2022-01-26.at.1.49.28.PM.mov

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[onyb]

Sweet! 🚀

[onyb]

This also closes brave/brave-browser#20256.

[yrliou]

I suppose this will also solve brave/brave-browser#20000?

[brave-builds]

A Storybook has been deployed to preview UI for the latest push

[Douglashdaniel]

I suppose this will also solve brave/brave-browser#20000?

Thanks for mentioning this, updated to work there too! 😎

[Douglashdaniel]

This also closes brave/brave-browser#20256.

Maybe we should keep open for Android and IOS?

[brave-builds]

A Storybook has been deployed to preview UI for the latest push