feat(wallet): Initial Composer UI Setup

brave · Dec 7, 2023 · 10e5fd7 · 10e5fd7
1 parent 020f09c
commit 10e5fd7
Show file tree

Hide file tree

Showing 80 changed files with 2,183 additions and 3,575 deletions.
diff --git a/components/brave_wallet/browser/android_page_appearing_browsertest.cc b/components/brave_wallet/browser/android_page_appearing_browsertest.cc
@@ -359,8 +359,10 @@ IN_PROC_BROWSER_TEST_F(AndroidPageAppearingBrowserTest, TestSwapPageAppearing) {
   const std::vector<std::string> ignore_patterns = {
       "TypeError: Cannot read properties of undefined (reading 'forEach')",
       "Error calling jsonRpcService.getERC20TokenBalances",
-      "Error querying balance:", "Error: An internal error has occurred",
-      "Unable to fetch getTokenBalancesForChainId"};
+      "Error querying balance:",
+      "Error: An internal error has occurred",
+      "Unable to fetch getTokenBalancesForChainId",
+      "Cannot read properties of undefined (reading 'location')"};
   VerifyPage(url, ignore_patterns);
 }
 

diff --git a/components/brave_wallet/browser/brave_wallet_constants.h b/components/brave_wallet/browser/brave_wallet_constants.h
@@ -190,17 +190,12 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletBuy", IDS_BRAVE_WALLET_BUY},
     {"braveWalletSend", IDS_BRAVE_WALLET_SEND},
     {"braveWalletSwap", IDS_BRAVE_WALLET_SWAP},
+    {"braveWalletBridge", IDS_BRAVE_WALLET_BRIDGE},
     {"braveWalletReset", IDS_BRAVE_WALLET_RESET},
     {"braveWalletSell", IDS_BRAVE_WALLET_SELL},
     {"braveWalletNotEnoughBalance", IDS_BRAVE_WALLET_NOT_ENOUGH_BALANCE},
-    {"braveWalletSendToken", IDS_BRAVE_WALLET_SEND_TOKEN},
-    {"braveWalletSendNFT", IDS_BRAVE_WALLET_SEND_NFT},
-    {"braveWalletSelectToken", IDS_BRAVE_WALLET_SELECT_TOKEN},
-    {"braveWalletSelectNFT", IDS_BRAVE_WALLET_SELECT_NFT},
-    {"braveWalletSendTabSelectTokenTitle",
-     IDS_BRAVE_WALLET_SEND_TAB_SELECT_TOKEN_TITLE},
-    {"braveWalletSendTabSelectNFTTitle",
-     IDS_BRAVE_WALLET_SEND_TAB_SELECT_NFT_TITLE},
+    {"braveWalletChooseAssetToSend", IDS_BRAVE_WALLET_CHOOSE_ASSET_TO_SEND},
+    {"braveWalletChooseAssetToSwap", IDS_BRAVE_WALLET_CHOOSE_ASSET_TO_SWAP},
     {"braveWalletEnterRecipientAddress",
      IDS_BRAVE_WALLET_ENTER_RECIPIENT_ADDRESS},
     {"braveWalletNotEnoughFunds", IDS_BRAVE_WALLET_NOT_ENOUGH_FUNDS},
@@ -211,6 +206,7 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveWalletNoAvailableTokens", IDS_BRAVE_WALLET_NO_AVAILIBLE_TOKENS},
     {"braveWalletSearchTokens", IDS_BRAVE_WALLET_SEARCH_TOKENS},
     {"braveWalletSearchNFTs", IDS_BRAVE_WALLET_SEARCH_NFTS},
+    {"braveWalletChooseAsset", IDS_BRAVE_WALLET_CHOOSE_ASSET},
     {"braveWalletSlippageToleranceWarning",
      IDS_BRAVE_WALLET_SLIPPAGE_TOLERANCE_WARNING},
     {"braveWalletSlippageToleranceTitle",
@@ -1200,6 +1196,9 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
     {"braveSwapMax", IDS_BRAVE_SWAP_MAX},
     {"braveSwapEnterAnAmount", IDS_BRAVE_SWAP_ENTER_AN_AMOUNT},
     {"braveSwapFindingPrice", IDS_BRAVE_SWAP_FINDING_PRICE},
+    {"braveWalletReceiveEstimate", IDS_BRAVE_WALLET_RECEIVE_ESTIMATE},
+    {"braveWalletFromToken", IDS_BRAVE_WALLET_FROM_TOKEN},
+    {"braveWalletToToken", IDS_BRAVE_WALLET_TO_TOKEN},
     {"braveSwapBalance", IDS_BRAVE_SWAP_BALANCE},
     {"braveSwapSelectAToken", IDS_BRAVE_SWAP_SELECT_A_TOKEN},
     {"braveSwapShowTokensWithZeroBalances",

diff --git a/components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx
@@ -5,9 +5,15 @@
 
 import * as React from 'react'
 
+// Types
+import { WalletRoutes } from '../../../constants/types'
+
 // Hooks
 import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
 
+// Utils
+import { openWalletRouteTab } from '../../../utils/routes-utils'
+
 // Components
 import { DefaultPanelMenu } from '../wallet-menus/default-panel-menu'
 import {
@@ -26,10 +32,11 @@ import { Row } from '../../shared/style'
 
 interface Props {
   title: string
+  expandRoute?: WalletRoutes
 }
 
 export const DefaultPanelHeader = (props: Props) => {
-  const { title } = props
+  const { title, expandRoute } = props
 
   // State
   const [showSettingsMenu, setShowSettingsMenu] = React.useState<boolean>(false)
@@ -46,12 +53,12 @@ export const DefaultPanelHeader = (props: Props) => {
 
   // Methods
   const onClickExpand = React.useCallback(() => {
-    chrome.tabs.create({ url: 'chrome://wallet/crypto' }, () => {
-      if (chrome.runtime.lastError) {
-        console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
-      }
-    })
-  }, [])
+    if (expandRoute) {
+      openWalletRouteTab(expandRoute)
+      return
+    }
+    openWalletRouteTab(WalletRoutes.PortfolioAssets)
+  }, [expandRoute])
 
   return (
     <Row

diff --git a/components/brave_wallet_ui/components/desktop/network-filter-with-search/index.tsx b/components/brave_wallet_ui/components/desktop/network-filter-with-search/index.tsx
@@ -27,6 +27,8 @@ interface Props {
   searchAction?: (event: any) => void | undefined
   searchAutoFocus?: boolean
   searchValue?: string
+  networkSelectorDisabled?: boolean
+  useSwapNetworks?: boolean
 }
 
 export const NetworkFilterWithSearch = (props: Props) => {
@@ -38,7 +40,9 @@ export const NetworkFilterWithSearch = (props: Props) => {
     searchPlaceholder,
     searchAction,
     searchAutoFocus,
-    searchValue
+    searchValue,
+    networkSelectorDisabled,
+    useSwapNetworks
   } = props
 
   return (
@@ -49,6 +53,7 @@ export const NetworkFilterWithSearch = (props: Props) => {
         autoFocus={searchAutoFocus}
         value={searchValue}
         useWithFilter={true}
+        isV2={true}
       />
       <HorizontalDivider />
       <SelectNetworkDropdown
@@ -58,6 +63,9 @@ export const NetworkFilterWithSearch = (props: Props) => {
         showNetworkDropDown={showNetworkDropDown}
         useWithSearch={true}
         customNetwork={AllNetworksOption}
+        useSwapNetworks={useSwapNetworks}
+        disabled={networkSelectorDisabled}
+        reduceDisplayName={true}
       />
     </StyledWrapper>
   )

diff --git a/components/brave_wallet_ui/components/desktop/network-filter-with-search/style.ts b/components/brave_wallet_ui/components/desktop/network-filter-with-search/style.ts
@@ -4,20 +4,21 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import styled from 'styled-components'
+import * as leo from '@brave/leo/tokens/css'
 
 export const StyledWrapper = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  border: ${(p) => `1px solid ${p.theme.color.interactive08}`};
-  border-radius: 4px;
+  border-radius: 8px;
+  background-color: ${leo.color.container.highlight};
 `
 
 export const HorizontalDivider = styled.div`
   display: flex;
   width: 1px;
   height: 24px;
-  background-color: ${(p) => p.theme.color.interactive08};
+  background-color: ${leo.color.divider.subtle};
 `
diff --git a/components/brave_wallet_ui/components/desktop/select-network-dropdown/index.tsx b/components/brave_wallet_ui/components/desktop/select-network-dropdown/index.tsx
@@ -5,6 +5,9 @@
 
 import * as React from 'react'
 
+// Utils
+import { reduceNetworkDisplayName } from '../../../utils/network-utils'
+
 // Options
 import { AllNetworksOption } from '../../../options/network-filter-options'
 
@@ -32,7 +35,10 @@ interface Props {
   onClick: () => void
   onSelectCustomNetwork: (network: BraveWallet.NetworkInfo) => void
   useWithSearch?: boolean
+  useSwapNetworks?: boolean
   customNetwork?: BraveWallet.NetworkInfo | undefined
+  disabled?: boolean
+  reduceDisplayName?: boolean
 }
 
 export const SelectNetworkDropdown = (props: Props) => {
@@ -42,14 +48,24 @@ export const SelectNetworkDropdown = (props: Props) => {
     showNetworkDropDown,
     onSelectCustomNetwork,
     useWithSearch,
-    customNetwork
+    useSwapNetworks,
+    customNetwork,
+    disabled,
+    reduceDisplayName
   } = props
 
+  const networkDisplayName = selectedNetwork?.chainName
+    ? reduceDisplayName && selectedNetwork.chainId !== AllNetworksOption.chainId
+      ? reduceNetworkDisplayName(selectedNetwork.chainName)
+      : selectedNetwork.chainName
+    : getLocale('braveWalletSelectNetwork')
+
   return (
     <StyledWrapper useWithSearch={useWithSearch}>
       <NetworkButton
         onClick={onClick}
         useWithSearch={useWithSearch}
+        disabled={disabled}
       >
         <LeftSide>
           {selectedNetwork &&
@@ -60,10 +76,7 @@ export const SelectNetworkDropdown = (props: Props) => {
                 size='big'
               />
             )}
-          <NetworkText>
-            {selectedNetwork?.chainName ||
-              getLocale('braveWalletSelectNetwork')}
-          </NetworkText>
+          <NetworkText>{networkDisplayName}</NetworkText>
         </LeftSide>
         <DropDownIcon isOpen={showNetworkDropDown} />
       </NetworkButton>
@@ -73,6 +86,7 @@ export const SelectNetworkDropdown = (props: Props) => {
             onSelectCustomNetwork={onSelectCustomNetwork}
             selectedNetwork={selectedNetwork}
             customNetwork={customNetwork}
+            useSwapNetworks={useSwapNetworks}
           />
         </DropDown>
       )}

diff --git a/components/brave_wallet_ui/components/desktop/select-network-dropdown/style.ts b/components/brave_wallet_ui/components/desktop/select-network-dropdown/style.ts
@@ -35,6 +35,10 @@ export const NetworkButton = styled(WalletButton)<{ useWithSearch?: boolean }>`
   padding: 10px;
   padding-left: 12px;
   margin-bottom: ${(p) => (p.useWithSearch ? '0px' : '8px')};
+  :disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 `
 
 export const DropDownIcon = styled(CaratStrongDownIcon)<{ isOpen: boolean }>`

diff --git a/...esktop/views/portfolio/components/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav.tsx b/...esktop/views/portfolio/components/buy-send-swap-deposit-nav/buy-send-swap-deposit-nav.tsx
@@ -40,13 +40,9 @@ export const BuySendSwapDepositNav = () => {
   // methods
   const onClick = React.useCallback(
     (option: NavOption) => {
-      // Redirect to full page view for buy and swap page
-      // until we have a panel view for those pages
-      if (
-        (option.route === WalletRoutes.FundWalletPageStart ||
-          option.route === WalletRoutes.Swap) &&
-        isPanel
-      ) {
+      // Redirect to full page view for buy page
+      // until we have a panel view for that page.
+      if (option.route === WalletRoutes.FundWalletPageStart && isPanel) {
         chrome.tabs.create({
           url: `brave://wallet${option.route}`
         })

diff --git a/components/brave_wallet_ui/components/shared/nft-icon/decorated-nft-icon.tsx b/components/brave_wallet_ui/components/shared/nft-icon/decorated-nft-icon.tsx
@@ -14,7 +14,9 @@ import CreateNetworkIcon from '../create-network-icon'
 import { NftIcon, NftIconProps } from './nft-icon'
 
 // styles
-import { NetworkIconWrapper } from '../../../page/screens/send/components/token-list-item/token-list-item.style'
+import {
+  NetworkIconWrapper //
+} from '../../../page/screens/composer_ui/token_list_item/token_list_item.style'
 import { IconWrapper } from './nft-icon-styles'
 import { useGetNetworkQuery } from '../../../common/slices/api.slice'
 

diff --git a/components/brave_wallet_ui/components/shared/select-network/index.tsx b/components/brave_wallet_ui/components/shared/select-network/index.tsx
@@ -9,7 +9,10 @@ import * as React from 'react'
 import { BraveWallet } from '../../../constants/types'
 
 // hooks
-import { useGetVisibleNetworksQuery } from '../../../common/slices/api.slice'
+import {
+  useGetSwapSupportedNetworksQuery,
+  useGetVisibleNetworksQuery
+} from '../../../common/slices/api.slice'
 
 // components
 import { SelectNetworkItem } from '../select-network-item/index'
@@ -18,15 +21,28 @@ interface Props {
   onSelectCustomNetwork: (network: BraveWallet.NetworkInfo) => void
   selectedNetwork: BraveWallet.NetworkInfo | undefined | null
   customNetwork?: BraveWallet.NetworkInfo
+  useSwapNetworks?: boolean
 }
 
 export function SelectNetwork({
   onSelectCustomNetwork,
   selectedNetwork,
-  customNetwork
+  customNetwork,
+  useSwapNetworks
 }: Props) {
   // queries
-  const { data: networks = [] } = useGetVisibleNetworksQuery()
+  const { data: visibleNetworks = [] } = useGetVisibleNetworksQuery(undefined, {
+    skip: useSwapNetworks
+  })
+  const { data: swapNetworks = [] } = useGetSwapSupportedNetworksQuery(
+    undefined,
+    {
+      skip: !useSwapNetworks
+    }
+  )
+
+  // Computed
+  const networks = useSwapNetworks ? swapNetworks : visibleNetworks
 
   // memos
   const networksList = React.useMemo(() => {

diff --git a/components/brave_wallet_ui/constants/types.ts b/components/brave_wallet_ui/constants/types.ts
@@ -684,6 +684,8 @@ export enum WalletRoutes {
   // send
   Send = '/send',
 
+  Bridge = '/bridge',
+
   // dev bitcoin screen
   DevBitcoin = '/dev-bitcoin',
 
@@ -964,6 +966,7 @@ export type NavIDTypes =
   | 'transactions'
   | 'my_assets'
   | 'available_assets'
+  | 'bridge'
 
 export type AccountPageTabs =
   (typeof AccountPageTabs)[keyof typeof AccountPageTabs]

diff --git a/components/brave_wallet_ui/options/nav-options.ts b/components/brave_wallet_ui/options/nav-options.ts
@@ -221,3 +221,25 @@ 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
+  // }
+]
diff --git a/components/brave_wallet_ui/page/container.tsx b/components/brave_wallet_ui/page/container.tsx
@@ -54,9 +54,6 @@ import {
   ProtectedRoute //
 } from '../components/shared/protected-routing/protected-route'
 import { UnlockedWalletRoutes } from './router/unlocked_wallet_routes'
-import {
-  PageTitleHeader //
-} from '../components/desktop/card-headers/page-title-header'
 import { Swap } from './screens/swap/swap'
 import { SendScreen } from './screens/send/send_screen/send_screen'
 
@@ -167,13 +164,7 @@ export const Container = () => {
         redirectRoute={defaultRedirect}
         exact={true}
       >
-        <WalletPageWrapper
-          hideHeader={true}
-          hideBackground={true}
-          cardHeader={<PageTitleHeader title={'braveWalletSwap'} />}
-        >
-          <Swap />
-        </WalletPageWrapper>
+        <Swap />
       </ProtectedRoute>
 
       <ProtectedRoute