feat(trade): extended swap network tabs

Author: adderpositive

packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx

@@ -2,15 +2,12 @@ import { FormattedMessage } from 'react-intl';
 
 import styled from 'styled-components';
 
-import { AssetLogo, Row, Tooltip, useElevation } from '@trezor/components';
+import { Row, Tooltip, useElevation } from '@trezor/components';
 import { Elevation, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
-import {
-    getNetworkDisplaySymbol,
-    type NetworkSymbol,
-    type Network,
-} from '@suite-common/wallet-config';
+import { type NetworkSymbol, type Network } from '@suite-common/wallet-config';
 
 import { CheckableTag } from './CheckableTag';
+import { CoinLogo } from '../CoinLogo/CoinLogo';
 
 const NetworkTabsWrapper = styled.div<{ $elevation: Elevation }>`
     margin-left: -${spacingsPx.md};
@@ -27,10 +24,7 @@ export type NetworkFilterCategory = {
     coingeckoNativeId?: Network['coingeckoNativeId'];
 };
 
-export type SelectAssetSearchCategory = {
-    coingeckoId: string;
-    coingeckoNativeId?: string;
-} | null;
+export type SelectAssetSearchCategory = NetworkFilterCategory | null;
 
 interface NetworkTabsProps {
     tabs: NetworkFilterCategory[];
@@ -95,21 +89,14 @@ export const NetworkTabs = ({
                             }
 
                             if (network.coingeckoId) {
-                                setActiveTab({
-                                    coingeckoId: network.coingeckoId,
-                                    coingeckoNativeId: network.coingeckoNativeId,
-                                });
+                                setActiveTab(network);
                             }
                         }}
                         key={network.coingeckoId}
                     >
                         <Row gap={spacings.xxs}>
                             {network.coingeckoNativeId && (
-                                <AssetLogo
-                                    size={20}
-                                    coingeckoId={network.coingeckoNativeId}
-                                    placeholder={getNetworkDisplaySymbol(network.symbol)}
-                                />
+                                <CoinLogo size={20} symbol={network.symbol} />
                             )}
                             {network.name}
                         </Row>

packages/product-components/src/components/SelectAssetModal/SelectAssetModal.storiesData.ts

@@ -478,4 +478,10 @@ export const selectAssetModalNetworks: NetworkFilterCategory[] = [
         coingeckoId: 'binance-smart-chain',
         coingeckoNativeId: 'binancecoin',
     },
+    {
+        name: 'Base',
+        symbol: 'base',
+        coingeckoId: 'base',
+        coingeckoNativeId: 'ethereum',
+    },
 ];

packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx

@@ -155,7 +155,7 @@ export const CoinmarketFormInputCryptoSelect = <
     };
 
     const getNetworks = () => {
-        const networksToSelect: NetworkSymbol[] = ['eth', 'sol', 'pol', 'bsc'];
+        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);
@@ -177,7 +177,7 @@ export const CoinmarketFormInputCryptoSelect = <
         if (
             activeTab &&
             item.coingeckoId !== activeTab.coingeckoId &&
-            item.coingeckoId !== activeTab.coingeckoNativeId
+            item.symbol !== activeTab.symbol
         ) {
             return false;
         }