Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TW-1570 Implement hiding 'All Networks' option #1220

Open
wants to merge 3 commits into
base: development-2
Choose a base branch
from
Open

TW-1570 Implement hiding 'All Networks' option #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d2f87b0
TW-1570 Implement hiding 'All Networks' option
keshan3262 Nov 5, 2024
1313401
TW-1570 Revert unnecessary changes
keshan3262 Nov 5, 2024
1c7fa31
TW-1570 Rename a function
keshan3262 Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 6 additions & 17 deletions src/app/pages/Send/modals/SelectAsset/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -154,7 +156,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;
Expand Down Expand Up @@ -213,7 +215,7 @@ const FilterNetworkDropdown = memo<FilterNetworkDropdownProps>(
const filteredNetworks = useMemo(
() =>
searchValueDebounced.length
? searchAndFilterNetworksByName<string | OneOfChains>(networks, searchValueDebounced)
? searchNetworksByName<string | OneOfChains>(networks, searchValueDebounced)
: networks,
[searchValueDebounced, networks]
);
Expand All @@ -229,7 +231,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}
Expand Down Expand Up @@ -291,21 +293,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);
});
};
16 changes: 9 additions & 7 deletions src/app/templates/NetworkSelectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -58,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]
);

Expand All @@ -73,7 +75,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]
Expand All @@ -92,7 +94,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 : network.chainId}
network={network}
activeNetwork={selectedNetwork}
attractSelf={attractSelectedNetwork}
Expand Down Expand Up @@ -122,7 +124,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;

Expand Down Expand Up @@ -155,7 +157,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" />:{' '}
Expand Down
4 changes: 2 additions & 2 deletions src/app/templates/NetworksSettings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) =>
Expand Down
11 changes: 0 additions & 11 deletions src/lib/ui/filter-networks-by-name.ts
View file
Open in desktop

This file was deleted.

15 changes: 15 additions & 0 deletions src/lib/ui/search-networks-by-name.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { searchAndFilterItems } from 'lib/utils/search-items';

type SearchNetwork = string | { name: string };

export const searchNetworksByName = <T extends SearchNetwork>(networks: T[], searchValue: string) => {
const preparedSearchValue = searchValue.trim().toLowerCase();

return preparedSearchValue
? searchAndFilterItems(
networks.filter(network => typeof network !== 'string'),
preparedSearchValue,
[{ name: 'name', weight: 1 }]
)
: networks;
};
Comment on lines +3 to +15
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to search by that 'all networks' string, as dictated by the task requirements.

+ I18N:

export function searchAndFilterChains(networks: OneOfChains[], searchValue: string) {
  return searchAndFilterItems(
    networks,
    searchValue.trim(),
    [
      { name: 'name', weight: 1 },
      { name: 'nameI18n', weight: 1 }
    ],
    ({ name, nameI18nKey }) => ({
      name,
      nameI18n: nameI18nKey ? t(nameI18nKey) : undefined
    })
  );
}

See implementation here: https://github.com/madfish-solutions/templewallet-extension/blob/TW-1479-evm-transactions-history/src/lib/ui/search-networks.ts

Loading