diff --git a/src/app/pages/Send/modals/SelectAsset/index.tsx b/src/app/pages/Send/modals/SelectAsset/index.tsx index 708dd5510..9f304a86e 100644 --- a/src/app/pages/Send/modals/SelectAsset/index.tsx +++ b/src/app/pages/Send/modals/SelectAsset/index.tsx @@ -15,7 +15,9 @@ import { SpinnerSection } from 'app/pages/Send/form/SpinnerSection'; import { useAssetsFilterOptionsSelector } from 'app/store/assets-filter-options/selectors'; import { FilterChain } from 'app/store/assets-filter-options/state'; import { SearchBarField } from 'app/templates/SearchField'; +import { t } from 'lib/i18n'; import Popper, { PopperRenderProps } from 'lib/ui/Popper'; +import { searchNetworksByName } from 'lib/ui/search-networks-by-name'; import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view'; import { OneOfChains, @@ -154,7 +156,7 @@ const FilterNetworkPopper = memo(({ selectedOption, on const allEvmChains = useAllEvmChains(); const selectedOptionName = useMemo(() => { - if (!selectedOption) return ALL_NETWORKS; + if (!selectedOption) return t('allNetworks'); if (selectedOption.kind === TempleChainKind.Tezos) { return allTezosChains[selectedOption.chainId]?.name; @@ -213,7 +215,7 @@ const FilterNetworkDropdown = memo( const filteredNetworks = useMemo( () => searchValueDebounced.length - ? searchAndFilterNetworksByName(networks, searchValueDebounced) + ? searchNetworksByName(networks, searchValueDebounced) : networks, [searchValueDebounced, networks] ); @@ -229,7 +231,7 @@ const FilterNetworkDropdown = memo( {filteredNetworks.map(network => ( (({ network, activeNetwork, attractS )} onClick={handleClick} > - {isAllNetworks ? ALL_NETWORKS : network.name} + {isAllNetworks ? t('allNetworks') : network.name} {Icon} ); }); - -type SearchNetwork = string | { name: string }; - -/** @deprecated // Rely on fuse.js */ -const searchAndFilterNetworksByName = (networks: T[], searchValue: string) => { - const preparedSearchValue = searchValue.trim().toLowerCase(); - - return networks.filter(network => { - if (typeof network === 'string') return network.toLowerCase().includes(preparedSearchValue); - - return network.name.toLowerCase().includes(preparedSearchValue); - }); -}; diff --git a/src/app/templates/NetworkSelectModal.tsx b/src/app/templates/NetworkSelectModal.tsx index 960106efb..a0ce96927 100644 --- a/src/app/templates/NetworkSelectModal.tsx +++ b/src/app/templates/NetworkSelectModal.tsx @@ -16,8 +16,8 @@ import { dispatch } from 'app/store'; import { setAssetsFilterChain } from 'app/store/assets-filter-options/actions'; import { FilterChain } from 'app/store/assets-filter-options/state'; import { SearchBarField } from 'app/templates/SearchField'; -import { T } from 'lib/i18n'; -import { filterNetworksByName } from 'lib/ui/filter-networks-by-name'; +import { T, t } from 'lib/i18n'; +import { searchNetworksByName } from 'lib/ui/search-networks-by-name'; import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view'; import { navigate } from 'lib/woozie'; import { @@ -34,6 +34,8 @@ const ALL_NETWORKS = 'All Networks'; type Network = OneOfChains | string; +const standsForAllNetworks = (network: Network): network is string => typeof network === 'string'; + interface Props { opened: boolean; selectedNetwork: FilterChain; @@ -58,7 +60,7 @@ export const NetworkSelectModal = memo(({ opened, selectedNetwork, onRequ const [attractSelectedNetwork, setAttractSelectedNetwork] = useState(true); const filteredNetworks = useMemo( - () => (searchValueDebounced.length ? filterNetworksByName(networks, searchValueDebounced) : networks), + () => (searchValueDebounced.length ? searchNetworksByName(networks, searchValueDebounced) : networks), [searchValueDebounced, networks] ); @@ -73,7 +75,7 @@ export const NetworkSelectModal = memo(({ opened, selectedNetwork, onRequ const handleNetworkSelect = useCallback( (network: Network) => { - dispatch(setAssetsFilterChain(typeof network === 'string' ? null : network)); + dispatch(setAssetsFilterChain(standsForAllNetworks(network) ? null : network)); onRequestClose(); }, [onRequestClose] @@ -92,7 +94,7 @@ export const NetworkSelectModal = memo(({ opened, selectedNetwork, onRequ {filteredNetworks.map(network => ( = ({ iconSize = 32, onClick }) => { - const isAllNetworks = typeof network === 'string'; + const isAllNetworks = standsForAllNetworks(network); const active = isAllNetworks ? activeNetwork === null : network.chainId === activeNetwork?.chainId; @@ -155,7 +157,7 @@ export const Network: FC = ({
{Icon}
- {isAllNetworks ? ALL_NETWORKS : network.name} + {isAllNetworks ? t('allNetworks') : network.name} {showBalance && ( :{' '} diff --git a/src/app/templates/NetworksSettings/index.tsx b/src/app/templates/NetworksSettings/index.tsx index 86b8fa37e..058681088 100644 --- a/src/app/templates/NetworksSettings/index.tsx +++ b/src/app/templates/NetworksSettings/index.tsx @@ -4,8 +4,8 @@ import { EmptyState } from 'app/atoms/EmptyState'; import { useSearchParamsBoolean } from 'app/hooks/use-search-params-boolean'; import { MAIN_CHAINS_IDS } from 'lib/constants'; import { t } from 'lib/i18n'; -import { filterNetworksByName } from 'lib/ui/filter-networks-by-name'; import { useBooleanState } from 'lib/ui/hooks'; +import { searchNetworksByName } from 'lib/ui/search-networks-by-name'; import { SettingsTabProps } from 'lib/ui/settings-tab-props'; import { useAllEvmChains, useAllTezosChains } from 'temple/front'; import { isPossibleTestnetChain } from 'temple/front/chains'; @@ -36,7 +36,7 @@ export const NetworksSettings = memo(({ setHeaderChildren }) = ), [evmChainsRecord, tezosChainsRecord] ); - const matchingChains = useMemo(() => filterNetworksByName(allChains, searchValue), [allChains, searchValue]); + const matchingChains = useMemo(() => searchNetworksByName(allChains, searchValue), [allChains, searchValue]); const pickChains = useCallback( ({ kind, isDefault }: ChainsFilters) => diff --git a/src/lib/ui/filter-networks-by-name.ts b/src/lib/ui/filter-networks-by-name.ts deleted file mode 100644 index 3efd7feba..000000000 --- a/src/lib/ui/filter-networks-by-name.ts +++ /dev/null @@ -1,11 +0,0 @@ -type SearchNetwork = string | { name: string }; - -export const filterNetworksByName = (networks: T[], searchValue: string) => { - const preparedSearchValue = searchValue.trim().toLowerCase(); - - return networks.filter(network => { - if (typeof network === 'string') return network.toLowerCase().includes(preparedSearchValue); - - return network.name.toLowerCase().includes(preparedSearchValue); - }); -}; diff --git a/src/lib/ui/search-networks-by-name.ts b/src/lib/ui/search-networks-by-name.ts new file mode 100644 index 000000000..b88fefa5c --- /dev/null +++ b/src/lib/ui/search-networks-by-name.ts @@ -0,0 +1,15 @@ +import { searchAndFilterItems } from 'lib/utils/search-items'; + +type SearchNetwork = string | { name: string }; + +export const searchNetworksByName = (networks: T[], searchValue: string) => { + const preparedSearchValue = searchValue.trim().toLowerCase(); + + return preparedSearchValue + ? searchAndFilterItems( + networks.filter(network => typeof network !== 'string'), + preparedSearchValue, + [{ name: 'name', weight: 1 }] + ) + : networks; +};