refactor(product-components): clean NetworkTabs

trezor · Jan 15, 2025 · 35d1e12 · 35d1e12
1 parent 649bf4e
commit 35d1e12
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 43 deletions.
diff --git a/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx b/packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx
@@ -4,7 +4,12 @@ import styled from 'styled-components';
 
 import { Row, Tooltip, useElevation } from '@trezor/components';
 import { Elevation, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
-import { type NetworkSymbol, type Network } from '@suite-common/wallet-config';
+import {
+    getNetwork,
+    NetworkSymbol,
+    networkSymbolCollection,
+    type Network,
+} from '@suite-common/wallet-config';
 
 import { CheckableTag } from './CheckableTag';
 import { CoinLogo } from '../CoinLogo/CoinLogo';
@@ -17,17 +22,10 @@ const NetworkTabsWrapper = styled.div<{ $elevation: Elevation }>`
         ${({ theme, $elevation }) => mapElevationToBorder({ $elevation, theme })};
 `;
 
-export type NetworkFilterCategory = {
-    name: Network['name'];
-    symbol: NetworkSymbol;
-    coingeckoId: Network['coingeckoId'];
-    coingeckoNativeId?: Network['coingeckoNativeId'];
-};
-
-export type SelectAssetSearchCategory = NetworkFilterCategory | null;
+export type SelectAssetSearchCategory = Network | null;
 
 interface NetworkTabsProps {
-    tabs: NetworkFilterCategory[];
+    tabs: NetworkSymbol[];
     activeTab: SelectAssetSearchCategory;
     setActiveTab: (value: SelectAssetSearchCategory) => void;
     networkCount: number;
@@ -42,6 +40,9 @@ export const NetworkTabs = ({
     'data-testid': dataTestId,
 }: NetworkTabsProps) => {
     const { elevation } = useElevation();
+    // sort according to networks
+    const networkKeys = networkSymbolCollection.filter(item => tabs.includes(item));
+    const networkTabs = networkKeys.map(key => getNetwork(key));
 
     // TODO: FormattedMessage - resolve messages sharing https://github.com/trezor/trezor-suite/issues/5325}
     return (
@@ -71,7 +72,7 @@ export const NetworkTabs = ({
                         />
                     </Tooltip>
                 </CheckableTag>
-                {tabs.map(network => (
+                {networkTabs.map(network => (
                     <CheckableTag
                         data-testid={`${dataTestId}/${network.symbol}`}
                         $elevation={elevation}

diff --git a/.../coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx b/.../coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx
@@ -7,19 +7,12 @@ import { Badge, Row, Select, Text } from '@trezor/components';
 import {
     SearchAsset,
     SelectAssetModal,
-    NetworkFilterCategory,
     NetworkTabs,
-    SelectAssetSearchCategory,
     AssetProps,
     ITEM_HEIGHT,
     AssetOptionBaseProps,
 } from '@trezor/product-components';
-import {
-    type NetworkSymbol,
-    getNetworkByCoingeckoId,
-    getNetwork,
-    networkSymbolCollection,
-} from '@suite-common/wallet-config';
+import { getNetworkByCoingeckoId, Network, NetworkSymbol } from '@suite-common/wallet-config';
 import { spacings } from '@trezor/theme';
 
 import {
@@ -101,7 +94,7 @@ export const CoinmarketFormInputCryptoSelect = <
     const { buildCryptoOptions, cryptoIdToPlatformName } = useCoinmarketInfo();
     const { control } = methods;
     const [isModalActive, setIsModalActive] = useState(false);
-    const [activeTab, setActiveTab] = useState<SelectAssetSearchCategory>(null); // coingeckoNativeId as fallback for ex. polygon
+    const [activeTab, setActiveTab] = useState<Network | null>(null);
     const [search, setSearch] = useState('');
     const { translationString } = useTranslation();
 
@@ -171,23 +164,6 @@ export const CoinmarketFormInputCryptoSelect = <
         setIsModalActive(false);
     };
 
-    const getNetworks = () => {
-        const networksToSelect: NetworkSymbol[] = ['eth', 'sol', 'pol', 'bsc', 'base', 'op', 'arb'];
-        const networkKeys = networkSymbolCollection.filter(item => networksToSelect.includes(item));
-        const networksSelected: NetworkFilterCategory[] = networkKeys.map(networkKey => {
-            const network = getNetwork(networkKey);
-
-            return {
-                name: network.name,
-                symbol: network.symbol,
-                coingeckoId: network.coingeckoId,
-                coingeckoNativeId: network.coingeckoNativeId,
-            };
-        });
-
-        return networksSelected;
-    };
-
     const data = useMemo(() => getData(modalOptions), [modalOptions]);
 
     const filteredData = data.filter(item => {
@@ -212,7 +188,7 @@ export const CoinmarketFormInputCryptoSelect = <
         );
     });
 
-    const tabs = getNetworks();
+    const quickTabs: NetworkSymbol[] = ['eth', 'sol', 'pol', 'bsc', 'base', 'op', 'arb'];
 
     return (
         <>
@@ -235,10 +211,7 @@ export const CoinmarketFormInputCryptoSelect = <
                             <Translation
                                 id="TR_TOKEN_NOT_FOUND_ON_NETWORK"
                                 values={{
-                                    networkName: tabs.find(
-                                        (category: NetworkFilterCategory) =>
-                                            category.coingeckoId === activeTab?.coingeckoId,
-                                    )?.name,
+                                    networkName: activeTab?.name ?? '',
                                 }}
                             />
                         ),
@@ -247,7 +220,7 @@ export const CoinmarketFormInputCryptoSelect = <
                     filterTabs={
                         <NetworkTabs
                             data-testid="@coinmarket/form/select-crypto/network-tab"
-                            tabs={tabs}
+                            tabs={quickTabs}
                             networkCount={getNetworkCount(modalOptions)}
                             activeTab={activeTab}
                             setActiveTab={setActiveTab}