feat(wallet) Implement Meld Buy Flow in the FE

[muliswilliam]

Description

Introduces a new Buy Crypto flow using Meld API's in the Brave Wallet.
User are now able to get realtime Quotes from multiple providers with more assets to choose from.

Resolves brave/brave-browser#38985

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• 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 wiki
  • npm run presubmit wiki, 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/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

1. Open the Wallet and navigate to the Buy screen
2. Ethereum should be automatically pre-selected and should fetch quotes
3. Test selecting other tokens, changing account and changing currencies
4. Test filtering by different Payment Methods
5. Go back to the Portfolio page and click the More Menu for a token, if Buy is available for that token you should see a Buy button and it should pre populate the Token and proper Account after clicking.

Screen.Recording.6.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

[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

[yrliou]

core++

[onyb]

++

[brave-builds]

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

[github-actions]

[puLL-Merge] - brave/brave-core@25088

Description

This PR introduces significant changes to the Brave Wallet UI, particularly focusing on the Fund Wallet feature. It adds new components, refactors existing ones, and introduces integration with Meld.io for crypto transactions.

Possible Issues

1. The PR introduces a large number of new files and components, which may increase the complexity of the codebase and make it harder to maintain.
2. There might be performance implications due to the addition of new API calls and state management.

Security Hotspots

1. The PR introduces integration with a third-party service (Meld.io) for crypto transactions. Ensure that all data sharing and API interactions are secure and comply with privacy standards.
2. The new createMeldBuyWidget function opens a new tab with a URL received from an external API. Verify that this URL is properly sanitized to prevent potential security vulnerabilities.

Changes

Changes

1. android_wallet_page_ui.cc:

   • Updated content security policy to include chrome://image.

2. android_page_appearing_browsertest.cc:

   • Added new error patterns to ignore in tests.

3. brave_wallet_constants.h:

   • Added new localized strings for the updated UI.

4. local-storage-keys.ts:

   • Added a new key for storing partner terms acceptance status.

5. mocks.ts:

   • Added mock data for Meld-related types and functions.

6. use-multi-chain-buy-assets.ts:

   • Refactored to use new Meld-related functions and types.

7. api.slice.ts:

   • Added new API endpoints for Meld integration.

8. api-base.slice.ts:

   • Added new tagged types for Meld-related data.

9. meld_integration.endpoints.ts:

   • New file with endpoints for Meld integration.

10. market/index.tsx, market_asset.tsx, portfolio-fungible-asset.tsx:

    • Updated to use new Meld-related functions and components.

11. fund_wallet_v2.tsx:

    • New file implementing the updated Fund Wallet screen with Meld integration.

12. Various new components in components/desktop/popup-modals/partners_consent_modal/ and components/desktop/views/portfolio/components/:

    • New UI components for the updated Fund Wallet feature.

13. unlocked_wallet_routes.tsx:

    • Added logic to handle partner terms acceptance before accessing the Fund Wallet feature.

14. wallet_strings.grdp:

    • Added new localized strings for the updated UI.

This PR represents a significant update to the Brave Wallet UI, particularly in the Fund Wallet feature, with new integrations and UI components.