feat(wallet): Initial Composer UI Setup

[Douglashdaniel]

Description

• Introduces the initial Composer UI layout
• Adds a Send like experience to the Swap screen

Follow up work

Do to the complexity and amount of refactoring necessary, I have broken the Composer UI implementation out into individual issues.

• Center Wallet Navigation and Body Together brave-browser#34471
• Build out Composer UI Select Address Modal brave-browser#34581
• Build out Composer UI Advanced Settings Modal brave-browser#34582
• Build out New Quote Countdown brave-browser#34583
• Implement Network Fee Estimate in new Composer UI brave-browser#34585
• Add Route Params to Swap Screen brave-browser#34725

Resolves brave/brave-browser#34305
Resolves brave/brave-browser#28720

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 lint, 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/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

Test Plan:

1. Go to the Send and Swap pages in the Wallet Page view to see the new Composer UI
2. Test all functionality and make sure there are no regressions.
3. Go to the Send and Swap pages in the Wallet Panel to see the new Composer UI
4. Test all functionality and make sure there are no regressions.

Screen.Recording.13.mov

[mkarolin]

strings++

[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

[github-actions]

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

Description

This PR introduces changes to multiple files in the Brave Wallet core and UI components with a primary focus on testing, adding new constant definitions, refining existing features, and improving translations.

Changes

Here's a summary of the main changes organized by file:

components/brave_wallet/browser/android_page_appearing_browsertest.cc

• Added a new ignore pattern to the list of expected exceptions "Cannot read properties of undefined (reading 'location')".

components/brave_wallet/browser/brave_wallet_constants.h

• Removed commented code and unused localized string keys to reflect updated UI texts and interactions.
• Added new keys for wallet bridge feature and asset selection process.

components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx

• Refactored to support opening different wallet routes dynamically with expandRoute prop.

components/brave_wallet_ui/components/desktop/network-filter-with-search/index.tsx

• Introduced new props for customizable network filtering and searching functionality.

components/brave_wallet_ui/components/desktop/select-network-dropdown/index.tsx

• Enhanced logic for reducing network display names and added new prop for customization.
• Also added disabled prop to handle enabled/disabled states.

components/brave_wallet_ui/components/desktop/views/portfolio/components/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav.tsx

• Simplified redirection logic for buy page.

components/brave_wallet_ui/components/shared/nft-icon/decorated-nft-icon.tsx

• Adjusted imports to follow restructured directories.

components/brave_wallet_ui/components/shared/select-network/index.tsx

• Now skips query based on useSwapNetworks prop.

components/brave_wallet_ui/constants/types.ts

• Added new route enum for Bridge feature.

components/brave_wallet_ui/options/nav-options.ts

• Defined navigation options for Send, Swap, and Bridge features.

components/brave_wallet_ui/page/container.tsx

• Updated container arrangement for the Swap view.

components/brave_wallet_ui/page/screens/composer_ui/*

• Added a set of components and styles for the "composer" UI pattern.

components/resources/wallet_strings.grdp

• Localization updated to match the new constants and messages in the UI.

ui/webui/resources/BUILD.gn

• Included new "swap-vertical.svg" icon.

Security Hotspots

• The main security concerns may relate to dynamic content rendering, query operations, and user-triggered actions. Since this change mostly touches the frontend and does not involve sensitive logic changes, the risks are minimal.
• Attention should be given to the handling of new routes, ensuring they do not introduce open redirects or other endpoint vulnerabilities (Order by risk: Medium).

(Note: The review does not touch upon detailed syntax correctness or logic verification, which are assumed to be addressed prior to submitting the PR, considering it's at the Pull Request stage.)

[yrliou]

core++

[brave-builds]

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