From d2f87b0256e1ea1bd443b19b9000664d6f2331f0 Mon Sep 17 00:00:00 2001
From: Inokentii Mazhara <keshan3262@gmail.com>
Date: Tue, 5 Nov 2024 09:37:36 +0200
Subject: [PATCH 1/3] TW-1570 Implement hiding 'All Networks' option

---
 .../pages/Send/modals/SelectAsset/index.tsx   | 32 +++++++------------
 src/app/templates/NetworkSelectModal.tsx      | 17 +++++-----
 src/lib/constants.ts                          |  2 ++
 src/lib/ui/filter-networks-by-name.ts         | 14 +++++---
 4 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/app/pages/Send/modals/SelectAsset/index.tsx b/src/app/pages/Send/modals/SelectAsset/index.tsx
index 708dd5510..0bc20a8ae 100644
--- a/src/app/pages/Send/modals/SelectAsset/index.tsx
+++ b/src/app/pages/Send/modals/SelectAsset/index.tsx
@@ -15,6 +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 { ALL_NETWORKS_IDENTIFIER } from 'lib/constants';
+import { t } from 'lib/i18n';
+import { filterNetworksByName } from 'lib/ui/filter-networks-by-name';
 import Popper, { PopperRenderProps } from 'lib/ui/Popper';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
 import {
@@ -142,8 +145,6 @@ export const SelectAssetModal = memo<SelectTokenModalProps>(({ onAssetSelect, op
   );
 });
 
-const ALL_NETWORKS = 'All Networks';
-
 interface FilterNetworkPopperProps {
   selectedOption: FilterChain;
   onOptionSelect: (filterChain: FilterChain) => void;
@@ -154,7 +155,7 @@ const FilterNetworkPopper = memo<FilterNetworkPopperProps>(({ 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;
@@ -206,14 +207,18 @@ const FilterNetworkDropdown = memo<FilterNetworkDropdownProps>(
     }, [opened, searchValueDebounced]);
 
     const networks = useMemo(
-      () => [ALL_NETWORKS, ...(accountTezAddress ? tezosChains : []), ...(accountEvmAddress ? evmChains : [])],
+      () => [
+        ALL_NETWORKS_IDENTIFIER,
+        ...(accountTezAddress ? tezosChains : []),
+        ...(accountEvmAddress ? evmChains : [])
+      ],
       [accountEvmAddress, accountTezAddress, evmChains, tezosChains]
     );
 
     const filteredNetworks = useMemo(
       () =>
         searchValueDebounced.length
-          ? searchAndFilterNetworksByName<string | OneOfChains>(networks, searchValueDebounced)
+          ? filterNetworksByName<string | OneOfChains>(networks, searchValueDebounced)
           : networks,
       [searchValueDebounced, networks]
     );
@@ -229,7 +234,7 @@ const FilterNetworkDropdown = memo<FilterNetworkDropdownProps>(
 
           {filteredNetworks.map(network => (
             <FilterOption
-              key={typeof network === 'string' ? ALL_NETWORKS : network.chainId}
+              key={typeof network === 'string' ? t('allNetworks') : network.chainId}
               network={network}
               activeNetwork={selectedOption}
               attractSelf={attractSelectedNetwork}
@@ -291,21 +296,8 @@ const FilterOption = memo<FilterOptionProps>(({ network, activeNetwork, attractS
       )}
       onClick={handleClick}
     >
-      <span>{isAllNetworks ? ALL_NETWORKS : network.name}</span>
+      <span>{isAllNetworks ? t('allNetworks') : network.name}</span>
       {Icon}
     </div>
   );
 });
-
-type SearchNetwork = string | { name: string };
-
-/** @deprecated // Rely on fuse.js */
-const searchAndFilterNetworksByName = <T extends SearchNetwork>(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..dbc3d3e3b 100644
--- a/src/app/templates/NetworkSelectModal.tsx
+++ b/src/app/templates/NetworkSelectModal.tsx
@@ -16,7 +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 { ALL_NETWORKS_IDENTIFIER } from 'lib/constants';
+import { T, t } from 'lib/i18n';
 import { filterNetworksByName } from 'lib/ui/filter-networks-by-name';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
 import { navigate } from 'lib/woozie';
@@ -30,10 +31,10 @@ import {
 } from 'temple/front';
 import { TempleChainKind } from 'temple/types';
 
-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;
@@ -48,7 +49,7 @@ export const NetworkSelectModal = memo<Props>(({ opened, selectedNetwork, onRequ
   const evmChains = useEnabledEvmChains();
 
   const networks = useMemo(
-    () => [ALL_NETWORKS, ...(accountTezAddress ? tezosChains : []), ...(accountEvmAddress ? evmChains : [])],
+    () => [ALL_NETWORKS_IDENTIFIER, ...(accountTezAddress ? tezosChains : []), ...(accountEvmAddress ? evmChains : [])],
     [accountEvmAddress, accountTezAddress, evmChains, tezosChains]
   );
 
@@ -73,7 +74,7 @@ export const NetworkSelectModal = memo<Props>(({ 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 +93,7 @@ export const NetworkSelectModal = memo<Props>(({ opened, selectedNetwork, onRequ
 
         {filteredNetworks.map(network => (
           <Network
-            key={typeof network === 'string' ? ALL_NETWORKS : network.chainId}
+            key={standsForAllNetworks(network) ? ALL_NETWORKS_IDENTIFIER : network.chainId}
             network={network}
             activeNetwork={selectedNetwork}
             attractSelf={attractSelectedNetwork}
@@ -122,7 +123,7 @@ export const Network: FC<NetworkProps> = ({
   iconSize = 32,
   onClick
 }) => {
-  const isAllNetworks = typeof network === 'string';
+  const isAllNetworks = standsForAllNetworks(network);
 
   const active = isAllNetworks ? activeNetwork === null : network.chainId === activeNetwork?.chainId;
 
@@ -155,7 +156,7 @@ export const Network: FC<NetworkProps> = ({
       <div className="flex items-center gap-x-2">
         {Icon}
         <div className="flex flex-col">
-          <span className="text-font-medium-bold">{isAllNetworks ? ALL_NETWORKS : network.name}</span>
+          <span className="text-font-medium-bold">{isAllNetworks ? t('allNetworks') : network.name}</span>
           {showBalance && (
             <span className="text-grey-1 text-font-description">
               <T id="balance" />:{' '}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index d303a3233..198258d88 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -101,3 +101,5 @@ export const MAIN_CHAINS_IDS = [
   TempleTezosChainId.Ghostnet,
   ETH_SEPOLIA_CHAIN_ID
 ];
+
+export const ALL_NETWORKS_IDENTIFIER = 'ALL_NETWORKS';
diff --git a/src/lib/ui/filter-networks-by-name.ts b/src/lib/ui/filter-networks-by-name.ts
index 3efd7feba..7edb6718a 100644
--- a/src/lib/ui/filter-networks-by-name.ts
+++ b/src/lib/ui/filter-networks-by-name.ts
@@ -1,11 +1,15 @@
+import { searchAndFilterItems } from 'lib/utils/search-items';
+
 type SearchNetwork = string | { name: string };
 
 export const filterNetworksByName = <T extends SearchNetwork>(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);
-  });
+  return preparedSearchValue
+    ? searchAndFilterItems(
+        networks.filter(network => typeof network !== 'string'),
+        preparedSearchValue,
+        [{ name: 'name', weight: 1 }]
+      )
+    : networks;
 };

From 13134012ea3a518ecd95881b93e7589569475f3d Mon Sep 17 00:00:00 2001
From: Inokentii Mazhara <keshan3262@gmail.com>
Date: Tue, 5 Nov 2024 09:46:51 +0200
Subject: [PATCH 2/3] TW-1570 Revert unnecessary changes

---
 src/app/pages/Send/modals/SelectAsset/index.tsx | 9 +++------
 src/app/templates/NetworkSelectModal.tsx        | 7 ++++---
 src/lib/constants.ts                            | 2 --
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/Send/modals/SelectAsset/index.tsx b/src/app/pages/Send/modals/SelectAsset/index.tsx
index 0bc20a8ae..80d735a63 100644
--- a/src/app/pages/Send/modals/SelectAsset/index.tsx
+++ b/src/app/pages/Send/modals/SelectAsset/index.tsx
@@ -15,7 +15,6 @@ 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 { ALL_NETWORKS_IDENTIFIER } from 'lib/constants';
 import { t } from 'lib/i18n';
 import { filterNetworksByName } from 'lib/ui/filter-networks-by-name';
 import Popper, { PopperRenderProps } from 'lib/ui/Popper';
@@ -145,6 +144,8 @@ export const SelectAssetModal = memo<SelectTokenModalProps>(({ onAssetSelect, op
   );
 });
 
+const ALL_NETWORKS = 'All Networks';
+
 interface FilterNetworkPopperProps {
   selectedOption: FilterChain;
   onOptionSelect: (filterChain: FilterChain) => void;
@@ -207,11 +208,7 @@ const FilterNetworkDropdown = memo<FilterNetworkDropdownProps>(
     }, [opened, searchValueDebounced]);
 
     const networks = useMemo(
-      () => [
-        ALL_NETWORKS_IDENTIFIER,
-        ...(accountTezAddress ? tezosChains : []),
-        ...(accountEvmAddress ? evmChains : [])
-      ],
+      () => [ALL_NETWORKS, ...(accountTezAddress ? tezosChains : []), ...(accountEvmAddress ? evmChains : [])],
       [accountEvmAddress, accountTezAddress, evmChains, tezosChains]
     );
 
diff --git a/src/app/templates/NetworkSelectModal.tsx b/src/app/templates/NetworkSelectModal.tsx
index dbc3d3e3b..aa75c3f72 100644
--- a/src/app/templates/NetworkSelectModal.tsx
+++ b/src/app/templates/NetworkSelectModal.tsx
@@ -16,7 +16,6 @@ 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 { ALL_NETWORKS_IDENTIFIER } from 'lib/constants';
 import { T, t } from 'lib/i18n';
 import { filterNetworksByName } from 'lib/ui/filter-networks-by-name';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
@@ -31,6 +30,8 @@ import {
 } from 'temple/front';
 import { TempleChainKind } from 'temple/types';
 
+const ALL_NETWORKS = 'All Networks';
+
 type Network = OneOfChains | string;
 
 const standsForAllNetworks = (network: Network): network is string => typeof network === 'string';
@@ -49,7 +50,7 @@ export const NetworkSelectModal = memo<Props>(({ opened, selectedNetwork, onRequ
   const evmChains = useEnabledEvmChains();
 
   const networks = useMemo(
-    () => [ALL_NETWORKS_IDENTIFIER, ...(accountTezAddress ? tezosChains : []), ...(accountEvmAddress ? evmChains : [])],
+    () => [ALL_NETWORKS, ...(accountTezAddress ? tezosChains : []), ...(accountEvmAddress ? evmChains : [])],
     [accountEvmAddress, accountTezAddress, evmChains, tezosChains]
   );
 
@@ -93,7 +94,7 @@ export const NetworkSelectModal = memo<Props>(({ opened, selectedNetwork, onRequ
 
         {filteredNetworks.map(network => (
           <Network
-            key={standsForAllNetworks(network) ? ALL_NETWORKS_IDENTIFIER : network.chainId}
+            key={standsForAllNetworks(network) ? ALL_NETWORKS : network.chainId}
             network={network}
             activeNetwork={selectedNetwork}
             attractSelf={attractSelectedNetwork}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 198258d88..d303a3233 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -101,5 +101,3 @@ export const MAIN_CHAINS_IDS = [
   TempleTezosChainId.Ghostnet,
   ETH_SEPOLIA_CHAIN_ID
 ];
-
-export const ALL_NETWORKS_IDENTIFIER = 'ALL_NETWORKS';

From 1c7fa31d4b6b63ebbb4ee37d38dbf1a4fc0ce634 Mon Sep 17 00:00:00 2001
From: Inokentii Mazhara <keshan3262@gmail.com>
Date: Tue, 5 Nov 2024 09:50:37 +0200
Subject: [PATCH 3/3] TW-1570 Rename a function

---
 src/app/pages/Send/modals/SelectAsset/index.tsx               | 4 ++--
 src/app/templates/NetworkSelectModal.tsx                      | 4 ++--
 src/app/templates/NetworksSettings/index.tsx                  | 4 ++--
 ...{filter-networks-by-name.ts => search-networks-by-name.ts} | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/lib/ui/{filter-networks-by-name.ts => search-networks-by-name.ts} (87%)

diff --git a/src/app/pages/Send/modals/SelectAsset/index.tsx b/src/app/pages/Send/modals/SelectAsset/index.tsx
index 80d735a63..9f304a86e 100644
--- a/src/app/pages/Send/modals/SelectAsset/index.tsx
+++ b/src/app/pages/Send/modals/SelectAsset/index.tsx
@@ -16,8 +16,8 @@ import { useAssetsFilterOptionsSelector } from 'app/store/assets-filter-options/
 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 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,
@@ -215,7 +215,7 @@ const FilterNetworkDropdown = memo<FilterNetworkDropdownProps>(
     const filteredNetworks = useMemo(
       () =>
         searchValueDebounced.length
-          ? filterNetworksByName<string | OneOfChains>(networks, searchValueDebounced)
+          ? searchNetworksByName<string | OneOfChains>(networks, searchValueDebounced)
           : networks,
       [searchValueDebounced, networks]
     );
diff --git a/src/app/templates/NetworkSelectModal.tsx b/src/app/templates/NetworkSelectModal.tsx
index aa75c3f72..a0ce96927 100644
--- a/src/app/templates/NetworkSelectModal.tsx
+++ b/src/app/templates/NetworkSelectModal.tsx
@@ -17,7 +17,7 @@ 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, t } from 'lib/i18n';
-import { filterNetworksByName } from 'lib/ui/filter-networks-by-name';
+import { searchNetworksByName } from 'lib/ui/search-networks-by-name';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
 import { navigate } from 'lib/woozie';
 import {
@@ -60,7 +60,7 @@ export const NetworkSelectModal = memo<Props>(({ 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]
   );
 
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<SettingsTabProps>(({ 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/search-networks-by-name.ts
similarity index 87%
rename from src/lib/ui/filter-networks-by-name.ts
rename to src/lib/ui/search-networks-by-name.ts
index 7edb6718a..b88fefa5c 100644
--- a/src/lib/ui/filter-networks-by-name.ts
+++ b/src/lib/ui/search-networks-by-name.ts
@@ -2,7 +2,7 @@ import { searchAndFilterItems } from 'lib/utils/search-items';
 
 type SearchNetwork = string | { name: string };
 
-export const filterNetworksByName = <T extends SearchNetwork>(networks: T[], searchValue: string) => {
+export const searchNetworksByName = <T extends SearchNetwork>(networks: T[], searchValue: string) => {
   const preparedSearchValue = searchValue.trim().toLowerCase();
 
   return preparedSearchValue