feat(wallet): Enable Bridging in UI

[Douglashdaniel]

Description

• Enables Bridging with Li.Fi in the Wallet!
• Updates the Send, Swap and Bridge UI styling
• Removes the Composer UI nav controls

Follow up PR's for more design and support after this lands:

• Bridge Transactions are not Parsed Correctly in Activity Tab brave-browser#38552
• Build out Swap and Bridge Route Selection brave-browser#38648
• Build out New Swap Settings Modal brave-browser#38474
• Build out New Quote Countdown brave-browser#34583

Resolves brave/brave-browser#38527

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 Bridge screen.
2. Select a Token to bridge from.
3. Select a Token to bridge to. note:(The from tokens Symbol should be pre-filled in the search bar when selecting a token to bridge to.)
4. Enter an Amount to get a quote.
5. Test the Recipient button and change the Receiving account
6. Submit a your Bridge transaction. (Recommend BNBChain to Polygon for a cheaper transaction for testing)

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

[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

[yrliou]

core++

[muliswilliam]

frontend ++

[github-actions]

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

Description

This PR adds support for cross-chain bridging in the Brave Wallet Swap UI. It introduces a new "Bridge" route and tab for bridging assets between different blockchains. The UI has been updated to accommodate both swapping and bridging, with some shared components between the two flows.

Changes

Changes

brave_wallet_constants.h:

• Added new string constants for the bridging UI, such as "Bridging via", "Recipient", "Review bridge", etc.

nav-options.ts:

• Added a new "Bridge" navigation option with corresponding icon and route
• Removed the unused SendSwapBridgeOptions array

container.tsx:

• Added a new ProtectedRoute for the Bridge route

composer_controls.style.ts, composer_controls.tsx:

• Removed the ComposerButtonMenu and related styles and components
• Simplified the FlipButton and SettingsButton styles

select_address_button.style.ts, select_address_button.tsx:

• Refactored the Button style to use a shared Button style from shared_composer.style.ts
• Removed unused styled components

select_button.style.ts, select_button.tsx:

• Refactored to use shared Button, CaratIcon, and ButtonText styles from shared_composer.style.ts

shared_composer.style.ts:

• Added shared Button, CaratIcon, and ButtonText styled components

from_asset.style.ts, from_asset.tsx, to_asset.style.ts, to_asset.tsx:

• Minor style tweaks and refactoring

select_token_modal.tsx:

• Added logic to handle token selection for bridging, such as filtering networks based on the selected "from" or "to" token
• Added SelectAccount component for selecting the recipient account when bridging

virtualized_tokens_list.tsx:

• Changed condition for showing "owned" and "not-owned" grouping labels to include all modal types except "send"

send_screen.tsx:

• Removed the ComposerControls component
• Minor style tweaks

LpMetadata.ts:

• Added new liquidity provider icons for Jupiter, Li.Fi, and PancakeSwap V3

quote-info.style.ts, quote-info.tsx:

• Major refactoring of the QuoteInfo component to support both swapping and bridging
• Added more information and details for swaps and bridges, such as the liquidity sources, estimated time, and recipient selection
• Added ExpandButton to toggle showing advanced swap/bridge details
• Added SelectAccount modal for changing the recipient when bridging

swap.utils.ts:

• Added provider field to the quote option types returned by the getZeroExQuoteOptions, getJupiterQuoteOptions, and getLiFiQuoteOptions functions

useSwap.ts:

• Updated onClickFlipSwapTokens, onSelectToToken, and onSelectFromToken handlers to support bridging
• Added isBridge flag and toAccount variable
• Added onChangeRecipient handler for changing the recipient account when bridging

swap.tsx:

• Pass isBridge flag and toAccount to child components
• Show "Review bridge" or "Review swap" text on the submit button based on isBridge
• Pass "bridge" or "swap" as the modalType to SelectTokenModal based on isBridge

locale.ts:

• Added new locale strings for the bridging UI

wallet_strings.grdp:

• Added new wallet strings for bridging in Brave's GRD format

Overall, this is a significant change that adds cross-chain bridging functionality to the Brave Wallet Swap UI. The code changes look reasonable, with efforts made to reuse existing components and styles where possible.

Security Hotspots

There don't appear to be any major security vulnerabilities introduced in this change. However, a few areas to double check:

1. When filtering networks and accounts for bridging, ensure that the logic is correct and doesn't allow selecting invalid networks or accounts.

2. Verify that the SelectAccount modal cannot be used to select accounts that don't match the selected "to" token when bridging.

3. Ensure that the expanded swap/bridge details do not expose any sensitive information.

But overall, the security risk for this UI change seems low. The backend bridging functionality would need to be carefully reviewed separately.

[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