style(wallet): use nala component for search inputs

components/brave_wallet/browser/brave_wallet_constants.h

@@ -48,6 +48,7 @@ inline constexpr char kSimpleHashBraveProxyUrl[] =
 inline constexpr size_t kSimpleHashMaxBatchSize = 50;
 
 inline constexpr webui::LocalizedString kLocalizedStrings[] = {
+    {"braveWalletSearchNetworks", IDS_BRAVE_WALLET_SEARCH_NETWORKS},
     {"braveWalletPasswordIsRequiredToTakeThisAction",
      IDS_BRAVE_WALLET_PASSWORD_IS_REQUIRED_TO_TAKE_THIS_ACTION},
     {"braveWalletWatchOnly", IDS_BRAVE_WALLET_WATCH_ONLY},

components/brave_wallet_ui/components/buy-send-swap/select-currency/select-currency.tsx

@@ -12,7 +12,7 @@ import { BraveWallet } from '../../../constants/types'
 import { getLocale } from '../../../../common/locale'
 
 // Components
-import { SearchBar } from '../../shared/search-bar/index'
+import { SearchBar } from '../../shared/search_bar/search_bar'
 import Header from '../select-header'
 import { SelectCurrencyItem } from '../select-currency-item/select-currency-item'
 
@@ -24,7 +24,7 @@ import {
 // Styled Components
 import { SelectScrollSearchContainer } from '../shared-styles'
 import { SelectCurrencyWrapper } from './select-currency.style'
-import { VerticalSpace } from '../../shared/style'
+import { Row, VerticalSpace } from '../../shared/style'
 import { LoadingRing } from '../../extension/add-suggested-token-panel/style'
 
 export interface Props {
@@ -60,12 +60,14 @@ export const SelectOnRampFiatCurrency = (props: Props) => {
         onBack={onBack}
         hasAddButton={false}
       />
-      <SearchBar
-        placeholder={getLocale('braveWalletSearchCurrency')}
-        action={(e) => setSearch(e.target.value)}
-        autoFocus={true}
-        isV2={true}
-      />
+      <Row>
+        <SearchBar
+          placeholder={getLocale('braveWalletSearchCurrency')}
+          onChange={setSearch}
+          autoFocus={true}
+          margin='0 0 8px 0'
+        />
+      </Row>
       <VerticalSpace space='16px' />
       <SelectScrollSearchContainer>
         {isLoading ? (

components/brave_wallet_ui/components/desktop/card-headers/activity_page_header.tsx

@@ -13,6 +13,7 @@ import { UISelectors } from '../../../common/selectors'
 
 // Components
 import { DefaultPanelHeader } from './default-panel-header'
+import { SearchBar } from '../../shared/search_bar/search_bar'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
@@ -24,11 +25,10 @@ import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'
 import { SearchBarWrapper } from './activity_page_header.style'
 import { HeaderTitle } from './shared-card-headers.style'
 import { Row } from '../../shared/style'
-import SearchBar from '../../shared/search-bar'
 
 export interface Props {
   searchValue: string
-  onSearchValueChange?: React.ChangeEventHandler<HTMLInputElement> | undefined
+  onSearchValueChange: (value: string) => void
 }
 
 export const ActivityPageHeader = (props: Props) => {
@@ -51,9 +51,8 @@ export const ActivityPageHeader = (props: Props) => {
       <SearchBarWrapper alignItems='flex-start'>
         <SearchBar
           placeholder={getLocale('braveWalletSearchText')}
-          action={onSearchValueChange}
+          onChange={onSearchValueChange}
           value={searchValue}
-          isV2={true}
         />
       </SearchBarWrapper>
     </Row>

components/brave_wallet_ui/components/desktop/hardware-wallet-connect/accounts_list.stories.tsx

@@ -4,44 +4,52 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import { Meta } from '@storybook/react'
+
+// Types & Constants
 import { BraveWallet } from '../../../constants/types'
+import { LedgerDerivationPaths } from '../../../common/hardware/types'
+
+// Mocks
 import {
   mockHardwareAccounts //
 } from '../../../stories/mock-data/mock-wallet-accounts'
 
+// Components
 import {
   WalletPageStory //
 } from '../../../stories/wrappers/wallet-page-story-wrapper'
 import { HardwareWalletAccountsList } from './accounts_list'
-import { Meta } from '@storybook/react'
 
 export const HardwareAccountsList = {
-  render: () => <WalletPageStory>
-    <HardwareWalletAccountsList
-      hardwareWallet={'Ledger'}
-      accounts={mockHardwareAccounts}
-      preAddedHardwareWalletAccounts={[]}
-      onLoadMore={function (): void {
-        throw new Error('Function not implemented.')
-      }}
-      selectedDerivationPaths={[]}
-      setSelectedDerivationPaths={function (paths: string[]): void {
-        throw new Error('Function not implemented.')
-      }}
-      selectedDerivationScheme={''}
-      setSelectedDerivationScheme={function (scheme: string): void {
-        throw new Error('Function not implemented.')
-      }}
-      onAddAccounts={function (): void {
-        throw new Error('Function not implemented.')
-      }}
-      filecoinNetwork={'f'}
-      onChangeFilecoinNetwork={function (network: 'f' | 't'): void {
-        throw new Error('Function not implemented.')
-      }}
-      coin={BraveWallet.CoinType.ETH}
-    />
-  </WalletPageStory>
+  render: () => (
+    <WalletPageStory>
+      <HardwareWalletAccountsList
+        hardwareWallet={'Ledger'}
+        accounts={mockHardwareAccounts}
+        preAddedHardwareWalletAccounts={[]}
+        onLoadMore={function (): void {
+          throw new Error('Function not implemented.')
+        }}
+        selectedDerivationPaths={[]}
+        setSelectedDerivationPaths={function (paths: string[]): void {
+          throw new Error('Function not implemented.')
+        }}
+        selectedDerivationScheme={LedgerDerivationPaths.LedgerLive}
+        setSelectedDerivationScheme={function (scheme: string): void {
+          throw new Error('Function not implemented.')
+        }}
+        onAddAccounts={function (): void {
+          throw new Error('Function not implemented.')
+        }}
+        filecoinNetwork={'f'}
+        onChangeFilecoinNetwork={function (network: 'f' | 't'): void {
+          throw new Error('Function not implemented.')
+        }}
+        coin={BraveWallet.CoinType.ETH}
+      />
+    </WalletPageStory>
+  )
 }
 
 export default {

components/brave_wallet_ui/components/desktop/hardware-wallet-connect/accounts_list.tsx

@@ -42,7 +42,7 @@ import {
 } from '../../../utils/derivation_path_utils'
 
 // Components
-import { SearchBar } from '../../shared/search-bar/index'
+import { SearchBar } from '../../shared/search_bar/search_bar'
 import { NetworkFilterSelector } from '../network-filter-selector'
 import { AccountListItem } from './account_list_item'
 
@@ -148,8 +148,8 @@ export const HardwareWalletAccountsList = ({
       setSelectedDerivationPaths(updatedPaths)
     }
 
-  const filterAccountList = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const search = event?.target?.value || ''
+  const filterAccountList = (value: string) => {
+    const search = value || ''
     if (search === '') {
       setFilteredAccountList(accounts)
     } else {
@@ -326,8 +326,7 @@ export const HardwareWalletAccountsList = ({
       )}
       <SearchBar
         placeholder={getLocale('braveWalletSearchScannedAccounts')}
-        action={filterAccountList}
-        isV2
+        onChange={filterAccountList}
       />
       <HardwareWalletAccountsListContainer>
         {accounts.length === 0 && (

components/brave_wallet_ui/components/desktop/popup-modals/edit-visible-assets-modal/index.tsx

@@ -26,7 +26,7 @@ import { AddAsset } from '../../add-asset/add-asset'
 import {
   SegmentedControl //
 } from '../../../shared/segmented_control/segmented_control'
-import { SearchBar } from '../../../shared/search-bar'
+import { SearchBar } from '../../../shared/search_bar/search_bar'
 import { NetworkFilterSelector } from '../../network-filter-selector'
 
 // Styled Components
@@ -207,13 +207,6 @@ export const EditVisibleAssetsModal = ({ onClose }: Props) => {
   }, [sortedTokenListForSelectedNetworks, searchValue])
 
   // Methods
-  const updateSearchValue = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchValue(event.target.value)
-    },
-    []
-  )
-
   const onCheckWatchlistItem = React.useCallback(
     (token: BraveWallet.BlockchainToken) => {
       setTokensToAdd((prev) => prev.concat(token))
@@ -342,10 +335,9 @@ export const EditVisibleAssetsModal = ({ onClose }: Props) => {
           <PaddedRow marginBottom={8}>
             <SearchBar
               placeholder={getLocale('braveWalletSearchText')}
-              action={updateSearchValue}
+              onChange={setSearchValue}
               autoFocus={true}
               value={searchValue}
-              isV2={true}
             />
             <HorizontalSpace space='16px' />
             <NetworkFilterSelector

components/brave_wallet_ui/components/desktop/views/nfts/components/nfts.tsx

@@ -75,7 +75,7 @@ import {
 } from '../../../../../utils/pagination_utils'
 
 // components
-import SearchBar from '../../../../shared/search-bar'
+import { SearchBar } from '../../../../shared/search_bar/search_bar'
 import { NFTGridViewItem } from '../../portfolio/components/nft-grid-view/nft-grid-view-item'
 import { EnableNftDiscoveryModal } from '../../../popup-modals/enable-nft-discovery-modal/enable-nft-discovery-modal'
 import { AutoDiscoveryEmptyState } from './auto-discovery-empty-state/auto-discovery-empty-state'
@@ -411,8 +411,8 @@ export const Nfts = ({
 
   // methods
   const onSearchValueChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchValue(event.target.value)
+    (value: string) => {
+      setSearchValue(value)
       if (currentPageNumber !== 1) {
         history.push(makePortfolioNftsRoute(selectedTab, 1))
       }
@@ -514,20 +514,23 @@ export const Nfts = ({
         )}
         <Row width={showSearchBar ? '100%' : 'unset'}>
           {showSearchBar ? (
-            <Row width='unset'>
+            <Row>
               <SearchBarWrapper
                 margin='0px 12px 0px 0px'
                 showSearchBar={showSearchBar}
               >
                 <SearchBar
                   placeholder={getLocale('braveWalletSearchText')}
-                  action={onSearchValueChange}
+                  onChange={onSearchValueChange}
                   value={searchValue}
-                  isV2={true}
                   autoFocus={true}
+                  size='small'
                 />
               </SearchBarWrapper>
-              <PortfolioActionButton onClick={onCloseSearchBar}>
+              <PortfolioActionButton
+                disableResize
+                onClick={onCloseSearchBar}
+              >
                 <ButtonIcon name='close' />
               </PortfolioActionButton>
             </Row>

components/brave_wallet_ui/components/desktop/views/portfolio/components/token-lists/token-list.tsx

@@ -69,7 +69,7 @@ import {
 } from '../../../../../../common/hooks/use_local_storage'
 
 // Components
-import SearchBar from '../../../../../shared/search-bar/index'
+import { SearchBar } from '../../../../../shared/search_bar/search_bar'
 import { PortfolioAssetItemLoadingSkeleton } from '../../../../portfolio-asset-item/portfolio-asset-item-loading-skeleton'
 import {
   AssetGroupContainer //
@@ -156,21 +156,11 @@ export const TokenLists = ({
   const [showSearchBar, setShowSearchBar] = React.useState<boolean>(false)
 
   // methods
-
-  // This filters a list of assets when the user types in search bar
-  const onSearchValueChange = React.useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchValue(event.target.value)
-    },
-    []
-  )
-
   const showAddAssetsModal = React.useCallback(() => {
     history.push(WalletRoutes.AddAssetModal)
   }, [history])
 
   // memos
-
   const filteredOutSmallBalanceTokens = React.useMemo(() => {
     if (hideSmallBalances) {
       return userAssetList.filter((token) =>
@@ -660,21 +650,23 @@ export const TokenLists = ({
               showSearchBar={showSearchBar}
             >
               <SearchBar
+                size='small'
                 placeholder={getLocale('braveWalletSearchText')}
-                action={onSearchValueChange}
+                onChange={setSearchValue}
                 value={searchValue}
-                isV2={true}
               />
             </SearchBarWrapper>
           )}
-          {showSearchBar && (
+          {showSearchBar ? (
             <Row width='unset'>
-              <PortfolioActionButton onClick={onCloseSearchBar}>
+              <PortfolioActionButton
+                disableResize
+                onClick={onCloseSearchBar}
+              >
                 <ButtonIcon name='close' />
               </PortfolioActionButton>
             </Row>
-          )}
-          {!showSearchBar && (
+          ) : (
             <Row
               width='unset'
               gap='12px'

components/brave_wallet_ui/components/desktop/views/portfolio/style.ts

@@ -3,6 +3,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this file,
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
+import type * as React from 'react'
 import styled from 'styled-components'
 import * as leo from '@brave/leo/tokens/css/variables'
 import Icon from '@brave/leo/react/icon'
@@ -148,18 +149,14 @@ export const CoinGeckoText = styled.span`
   margin: 15px 0px;
 `
 
-export const FilterTokenRow = styled.div<{
-  horizontalPadding?: number
-  isV2?: boolean
-}>`
+export const FilterTokenRow = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: center;
   flex-wrap: wrap;
   width: 100%;
   gap: 14px;
-  padding: 0px
-    ${(p) => (p.horizontalPadding !== undefined ? p.horizontalPadding : 0)}px;
-  margin-bottom: ${(p) => (p.isV2 ? '16px' : 0)};
+  padding: 0px 12px;
 `
 
 export const SelectTimelineWrapper = styled(Row)`
@@ -208,8 +205,9 @@ export const BalanceAndChangeWrapper = styled(Column)`
   }
 `
 
-export const PortfolioActionButton = styled(WalletButton)`
-  --button-border-color: ${leo.color.divider.interactive};
+export const PortfolioActionButton = styled(WalletButton)<
+  React.ComponentProps<'button'> & { disableResize?: boolean }
+>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -218,12 +216,12 @@ export const PortfolioActionButton = styled(WalletButton)`
   background: none;
   background-color: ${leo.color.container.background};
   border-radius: 8px;
-  border: 1px solid var(--button-border-color);
+  border: 1px solid ${leo.color.divider.interactive};
   height: 36px;
   width: 36px;
   @media screen and (max-width: ${layoutPanelWidth}px) {
-    height: 28px;
-    width: 28px;
+    height: ${(p) => (p.disableResize ? '36' : '28')}px;
+    width: ${(p) => (p.disableResize ? '36' : '28')}px;
   }
 `