feat(wallet): Enable Bridging in UI

components/brave_wallet/browser/brave_wallet_constants.h

@@ -257,6 +257,16 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletOwned", IDS_BRAVE_WALLET_OWNED},
     {"braveWalletNotOwned", IDS_BRAVE_WALLET_NOT_OWNED},
     {"braveWalletAmount24H", IDS_BRAVE_WALLET_AMOUNT_24H},
+    {"braveWalletChooseAssetToBridge", IDS_BRAVE_WALLET_CHOOSE_ASSET_TO_BRIDGE},
+    {"braveWalletBridgingVia", IDS_BRAVE_WALLET_BRIDGING_VIA},
+    {"braveWalletSwappingVia", IDS_BRAVE_WALLET_SWAPPING_VIA},
+    {"braveWalletReviewSwap", IDS_BRAVE_WALLET_REVIEW_SWAP},
+    {"braveWalletEstFees", IDS_BRAVE_WALLET_EST_FEES},
+    {"braveWalletEstTime", IDS_BRAVE_WALLET_EST_TIME},
+    {"braveWalletExchangeRate", IDS_BRAVE_WALLET_EXCHANGE_RATE},
+    {"braveWalletExchangeFor", IDS_BRAVE_WALLET_EXCHANGE_FOR},
+    {"braveWalletRecipient", IDS_BRAVE_WALLET_RECIPIENT},
+    {"braveWalletReviewBridge", IDS_BRAVE_WALLET_REVIEW_BRIDGE},
     {"braveWalletSlippageToleranceWarning",
      IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_WARNING},
     {"braveWalletSlippageToleranceExplanation",
@@ -1291,7 +1301,6 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
 
     // Brave Swap
     {"braveSwap", IDS_BRAVE_SWAP},
-    {"braveSwapReviewOrder", IDS_BRAVE_SWAP_REVIEW_ORDER},
     {"braveSwapApproveToken", IDS_BRAVE_SWAP_APPROVE_TOKEN},
     {"braveSwapInsufficientBalance", IDS_BRAVE_SWAP_INSUFFICIENT_BALANCE},
     {"braveSwapInsufficientLiquidity", IDS_BRAVE_SWAP_INSUFFICIENT_LIQUIDITY},
@@ -1311,14 +1320,12 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_SWAP_HIDE_TOKENS_WITH_ZERO_BALANCES},
     {"braveSwapSearchToken", IDS_BRAVE_SWAP_SEARCH_TOKEN},
     {"braveSwapOption", IDS_BRAVE_SWAP_OPTION},
-    {"braveSwapRate", IDS_BRAVE_SWAP_RATE},
     {"braveSwapPriceImpact", IDS_BRAVE_SWAP_PRICE_IMPACT},
     {"braveSwapMinimumReceivedAfterSlippage",
      IDS_BRAVE_SWAP_MINIMUM_RECEIVED_AFTER_SLIPPAGE},
     {"braveSwapNetworkFee", IDS_BRAVE_SWAP_NETWORK_FEE},
     {"braveSwapBraveFee", IDS_BRAVE_SWAP_BRAVE_FEE},
     {"braveSwapFree", IDS_BRAVE_SWAP_FREE},
-    {"braveSwapLiquidityProvider", IDS_BRAVE_SWAP_LIQUIDITY_PROVIDER},
     {"braveSwapSwapAndSend", IDS_BRAVE_SWAP_SWAP_AND_SEND},
     {"braveSwapNoExtraFees", IDS_BRAVE_SWAP_NO_EXTRA_FEES},
     {"braveSwapConfirmAddress", IDS_BRAVE_SWAP_CONFIRM_ADDRESS},

components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx

@@ -27,7 +27,7 @@ import {
   makeDepositFundsRoute,
   makeFundWalletRoute,
   makeSendRoute,
-  makeSwapRoute
+  makeSwapOrBridgeRoute
 } from '../../../utils/routes-utils'
 import { getAssetIdKey } from '../../../utils/asset-utils'
 
@@ -115,7 +115,13 @@ export const AssetItemMenu = (props: Props) => {
 
   const onClickSwap = React.useCallback(() => {
     if (account) {
-      history.push(makeSwapRoute({ fromToken: asset, fromAccount: account }))
+      history.push(
+        makeSwapOrBridgeRoute({
+          fromToken: asset,
+          fromAccount: account,
+          routeType: 'swap'
+        })
+      )
     }
   }, [account, history, asset])
 

components/brave_wallet_ui/options/nav-options.ts

@@ -42,6 +42,13 @@ export const isValidPanelNavigationOption = (
   )
 }
 
+const BridgeOption: NavOption = {
+  id: 'bridge',
+  name: 'braveWalletBridge',
+  icon: 'web3-bridge',
+  route: WalletRoutes.Bridge
+}
+
 export const BuySendSwapDepositOptions: NavOption[] = [
   {
     id: 'buy',
@@ -61,6 +68,7 @@ export const BuySendSwapDepositOptions: NavOption[] = [
     icon: 'currency-exchange',
     route: WalletRoutes.Swap
   },
+  BridgeOption,
   {
     id: 'deposit',
     name: 'braveWalletDepositCryptoButton',
@@ -212,25 +220,3 @@ export const AccountDetailsOptions: NavOption[] = [
     route: AccountPageTabs.AccountTransactionsSub
   }
 ]
-
-export const SendSwapBridgeOptions: NavOption[] = [
-  {
-    id: 'send',
-    name: 'braveWalletSend',
-    icon: 'send',
-    route: WalletRoutes.Send
-  },
-  {
-    id: 'swap',
-    name: 'braveWalletSwap',
-    icon: 'currency-exchange',
-    route: WalletRoutes.Swap
-  }
-  // Bridge is not yet implemented
-  // {
-  //   id: 'bridge',
-  //   name: 'braveWalletBridge',
-  //   icon: 'bridge',
-  //   route: WalletRoutes.Bridge
-  // }
-]

components/brave_wallet_ui/page/container.tsx

@@ -182,6 +182,15 @@ export const Container = () => {
         <Swap />
       </ProtectedRoute>
 
+      <ProtectedRoute
+        path={WalletRoutes.Bridge}
+        requirement={!isWalletLocked && !walletNotYetCreated}
+        redirectRoute={defaultRedirect}
+        exact={true}
+      >
+        <Swap />
+      </ProtectedRoute>
+
       <ProtectedRoute
         path={WalletRoutes.Send}
         requirement={!isWalletLocked && !walletNotYetCreated}

components/brave_wallet_ui/page/screens/composer_ui/composer_controls/composer_controls.style.ts

@@ -25,40 +25,10 @@ export const Button = styled(WalletButton)`
   cursor: pointer;
 `
 
-export const ComposerButtonMenu = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  background-color: ${leo.color.container.background};
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
-  position: absolute;
-  z-index: 10;
-  top: -23.5px;
-`
-
-export const ComposerButton = styled(Button)`
-  justify-content: flex-start;
-  font-family: Poppins;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 21px;
-  color: ${leo.color.text.interactive};
-  letter-spacing: 0.39px;
-  padding: 12px 16px;
-  box-shadow: none;
-  position: unset;
-  z-index: unset;
-  width: 100%;
-`
-
 export const FlipButton = styled(Button)`
   padding: 10px;
   border-radius: 100%;
-  left: 48px;
+  left: 24px;
   :disabled {
     cursor: not-allowed;
   }
@@ -70,22 +40,12 @@ export const FlipButton = styled(Button)`
 export const SettingsButton = styled(Button)`
   padding: 10px;
   border-radius: 100%;
-  right: 48px;
+  right: 24px;
   @media screen and (max-width: ${layoutSmallWidth}px) {
     right: 16px;
   }
 `
 
-export const CaratIcon = styled(Icon).attrs({
-  name: 'carat-down'
-})<{ isOpen: boolean }>`
-  --leo-icon-size: 20px;
-  color: ${leo.color.icon.interactive};
-  margin-left: 8px;
-  transition-duration: 0.3s;
-  transform: ${(p) => (p.isOpen ? 'rotate(180deg)' : 'unset')};
-`
-
 export const SettingsIcon = styled(Icon).attrs({
   name: 'settings'
 })`

components/brave_wallet_ui/page/screens/composer_ui/composer_controls/composer_controls.tsx

@@ -4,29 +4,16 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
 
 // Hooks
 import { useOnClickOutside } from '../../../../common/hooks/useOnClickOutside'
 
-// Utils
-import { getLocale } from '../../../../../common/locale'
-
-// Types
-import { NavOption } from '../../../../constants/types'
-
-// Options
-import { SendSwapBridgeOptions } from '../../../../options/nav-options'
-
 // Styled Components
 import {
-  ComposerButton,
-  ComposerButtonMenu,
   FlipButton,
   FlipIcon,
   SettingsButton,
-  SettingsIcon,
-  CaratIcon
+  SettingsIcon
 } from './composer_controls.style'
 import { Row } from '../../../../components/shared/style'
 
@@ -39,10 +26,6 @@ interface Props {
 export const ComposerControls = (props: Props) => {
   const { onFlipAssets, onOpenSettings, flipAssetsDisabled } = props
 
-  // Routing
-  const history = useHistory()
-  const { pathname: walletLocation } = useLocation()
-
   // State
   const [showComposerMenu, setShowComposerMenu] = React.useState<boolean>(false)
 
@@ -56,31 +39,6 @@ export const ComposerControls = (props: Props) => {
     showComposerMenu
   )
 
-  // Methods
-  const onChange = (option?: NavOption) => {
-    if (showComposerMenu && option) {
-      history.push(option.route)
-    }
-    setShowComposerMenu((prev) => !prev)
-  }
-
-  // Computed
-  const selectedOption = SendSwapBridgeOptions.find((option) =>
-    walletLocation.includes(option.route)
-  )
-
-  // Moves the selectedOption to the front of the list.
-  const buttonOptions = showComposerMenu
-    ? [
-        SendSwapBridgeOptions.find(
-          (option) => option.id === selectedOption?.id
-        ),
-        ...SendSwapBridgeOptions.filter(
-          (option) => option.id !== selectedOption?.id
-        )
-      ]
-    : [selectedOption]
-
   return (
     <Row>
       {onFlipAssets && (
@@ -91,19 +49,6 @@ export const ComposerControls = (props: Props) => {
           <FlipIcon />
         </FlipButton>
       )}
-      {buttonOptions ? (
-        <ComposerButtonMenu ref={buttonMenuRef}>
-          {buttonOptions.map((option, i) => (
-            <ComposerButton
-              key={option?.id}
-              onClick={() => onChange(option)}
-            >
-              {getLocale(option?.name ?? '')}
-              {i === 0 && <CaratIcon isOpen={showComposerMenu} />}
-            </ComposerButton>
-          ))}
-        </ComposerButtonMenu>
-      ) : null}
       {onOpenSettings && (
         <SettingsButton onClick={onOpenSettings}>
           <SettingsIcon />

components/brave_wallet_ui/page/screens/composer_ui/from_asset/from_asset.style.ts

@@ -14,22 +14,19 @@ import {
 import { Column, Text, Row } from '../../../../components/shared/style'
 
 export const Wrapper = styled(Column)`
-  padding: 32px 32px 0px 32px;
+  padding: 24px 24px 0px 24px;
   @media screen and (max-width: ${layoutPanelWidth}px) {
-    padding: 16px 0px 0px 0px;
+    padding: 16px 16px 0px 16px;
   }
 `
 
-export const FromText = styled(Text)`
-  line-height: 26px;
-  color: ${leo.color.text.tertiary};
+export const BalanceText = styled(Text)`
+  line-height: 22px;
   margin-right: 4px;
 `
 
-export const BalanceText = styled(Text)`
-  line-height: 26px;
-  color: ${leo.color.text.primary};
-  margin-right: 4px;
+export const FromText = styled(BalanceText)`
+  color: ${leo.color.text.tertiary};
 `
 
 export const NetworkText = styled(Text)`