chore(portfolio): moved info filter to portfolio

apps/wallet-mobile/src/features/Send/useCases/ListAmountsToSend/AddToken/SelectTokenFromListScreenV2.tsx

@@ -37,12 +37,14 @@ export const SelectTokenFromListScreen = () => {
   const balances = usePortfolioBalances({wallet})
   const [fungibilityFilter, setFungibilityFilter] = React.useState<keyof typeof balances>('all')
   const [isPending, startTransition] = React.useTransition()
-  const filteredBalancesByFungibility = balances[fungibilityFilter]
   const showOnlyNfts = fungibilityFilter === 'nfts'
-  const amountsSelected = Object.keys(targets[selectedTargetIndex].entry.amounts)
-  const filteredAndSorted = balances.nfts.filter(filterOutSelected(amountsSelected)).sort((a, b) => sortNfts(a.name, b.name))
-  const counter = filteredAndSorted.length
+  const filteredBalancesByFungibility = balances[fungibilityFilter]
+  const withoutSelected = React.useMemo(
+    () => filteredBalancesByFungibility.filter(filterOutSelected(targets[selectedTargetIndex].entry.amounts)),
+    [filteredBalancesByFungibility, selectedTargetIndex, targets],
+  )
 
+  const counter = withoutSelected.length
 
   const {track} = useMetrics()
   useFocusEffect(
@@ -96,7 +98,7 @@ export const SelectTokenFromListScreen = () => {
 
       <List isSearching={isSearching} canAddAmount={canAddAmount} showOnlyNfts={showOnlyNfts} />
 
-      <Counter fungibilityFilter={fungibilityFilter} counter={0} />
+      <Counter fungibilityFilter={fungibilityFilter} counter={counter} />
     </View>
   )
 }
@@ -393,8 +395,9 @@ const useFilteredTokenInfos = ({
 
 const areAllTokensSelected = (selectedTokenIds: Array<string>, tokenInfos: Balance.TokenInfo[]): boolean =>
   tokenInfos.every((tokenInfo) => selectedTokenIds.includes(tokenInfo.id))
-const filterOutSelected = (selectedTokenIds: Array<Portfolio.Token.Id>) => (amount: Portfolio.Token.Amount) =>
-  !selectedTokenIds.includes(amount.info.id)
+const filterOutSelected =
+  (amounts: Record<Portfolio.Token.Id, Portfolio.Token.Amount>) => (amount: Portfolio.Token.Amount) =>
+    !Object.keys(amounts).includes(amount.info.id)
 const sortNfts = (nftNameA: string, nftNameB: string): number => nftNameA.localeCompare(nftNameB)
 
 const useStyles = () => {

packages/portfolio/src/helpers/info-filter-by-name.test.ts

@@ -0,0 +1,22 @@
+import {tokenInfoMocks} from '../adapters/token-info.mocks'
+import {infoFilterByName} from './info-filter-by-name'
+
+describe('infoFilterByName', () => {
+  it('should return a function that filters token info by name or ticker', () => {
+    const filter = infoFilterByName('cRyP')
+
+    expect(filter(tokenInfoMocks.nftCryptoKitty)).toBe(true)
+  })
+
+  it('should return false if the token info does not match the search', () => {
+    const filter = infoFilterByName('ADA')
+
+    expect(filter(tokenInfoMocks.primaryETH)).toBe(false)
+  })
+
+  it('should return true if the search is empty', () => {
+    const filter = infoFilterByName('')
+
+    expect(filter(tokenInfoMocks.primaryETH)).toBe(true)
+  })
+})

packages/portfolio/src/helpers/info-filter-by-name.ts

@@ -0,0 +1,11 @@
+import {Portfolio} from '@yoroi/types'
+
+export function infoFilterByName(search: string) {
+  if (search.length === 0) return () => true
+
+  const searchSanitized = search.toLocaleLowerCase()
+
+  return ({ticker, name}: Portfolio.Token.Info) =>
+    ticker.toLocaleLowerCase().includes(searchSanitized) ||
+    name.toLocaleLowerCase().includes(searchSanitized)
+}