Feat/22838 asset picker input in trading (swap & buy)

packages/product-components/src/components/AssetLogo/AssetLogo.tsx

@@ -265,14 +265,15 @@ export const AssetLogo = ({
                         onLoad={handleOnLoad}
                         onError={handleLoadError}
                     />
-                    {showNetworkIcon && (
-                        <StyledNetworkIcon
-                            networkSymbol={symbol as NetworkSymbol | LegacyNetworkSymbol}
-                            size={size * 0.375}
-                        />
-                    )}
                 </ElevationUp>
             )}
+
+            {showNetworkIcon && (
+                <StyledNetworkIcon
+                    networkSymbol={symbol as NetworkSymbol | LegacyNetworkSymbol}
+                    size={size * 0.375}
+                />
+            )}
         </Container>
     );
 };

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

@@ -71,8 +71,14 @@ export const SearchAsset = ({
                 value={selectedOption}
                 onChange={option => selectConfig.onChange(option.value)}
                 size="small"
-                formatOptionLabel={option => (
-                    <Option>
+                formatOptionLabel={(option, meta) => (
+                    <Option
+                        data-testid={
+                            meta.context === 'menu'
+                                ? `${dataTestId}/select-option/${option.value ?? 'all-networks'}`
+                                : `${dataTestId}/select-option-value/${option.value ?? 'all-networks'}`
+                        }
+                    >
                         {option.value && (
                             <CoinLogo size={20} symbol={option.value} type="network" />
                         )}
@@ -81,7 +87,9 @@ export const SearchAsset = ({
                 )}
                 width="auto"
                 minValueWidth="170px"
+                data-testid={`${dataTestId}/select`}
                 isRenderedInModal
+                openMenuOnFocus={false}
             />
         </SelectWrapper>
     ) : undefined;

packages/product-components/src/components/TopAssets/TopAssets.tsx

@@ -3,16 +3,18 @@ import styled from 'styled-components';
 import { Text } from '@trezor/components';
 import { borders, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
 
-import { AssetLogo, AssetLogoProps } from '../AssetLogo/AssetLogo';
+import { AssetLogo, AssetLogoProps, shouldShowNetworkIcon } from '../AssetLogo/AssetLogo';
 import { CoinLogo } from '../CoinLogo/CoinLogo';
 
 const Container = styled.div<{ $itemsCount: number }>`
     display: grid;
     grid-template-columns: repeat(${({ $itemsCount }) => $itemsCount}, 1fr);
     border: 1px solid ${({ theme }) => mapElevationToBorder({ $elevation: 1, theme })};
-    border-radius: ${borders.radii.sm};
+    border-radius: ${borders.radii.md};
     align-items: center;
     width: 100%;
+    overflow: hidden;
+    position: relative;
 `;
 
 const Item = styled('button')<{ $isLast: boolean }>`
@@ -30,6 +32,11 @@ const Item = styled('button')<{ $isLast: boolean }>`
     gap: ${spacingsPx.xxs};
     flex-direction: column;
     padding: ${spacings.xs * 1.25}px ${spacings.xs * 1.5}px ${spacings.xs * 0.75}px;
+    transition: background-color 150ms ease-in-out;
+
+    &:hover {
+        background-color: ${({ theme }) => theme.backgroundTertiaryPressedOnElevation1};
+    }
 `;
 
 export type Asset = {
@@ -43,12 +50,12 @@ export interface TopAssetsProps {
     assets: Asset[];
     onAssetClick: (asset: Asset) => void;
     logoSize?: AssetLogoProps['size'];
-    className?: string;
+    dataTestId?: string;
 }
 
-export function TopAssets({ assets, logoSize = 40, onAssetClick, className }: TopAssetsProps) {
+export function TopAssets({ assets, logoSize = 40, onAssetClick, dataTestId }: TopAssetsProps) {
     return (
-        <Container $itemsCount={assets.length} className={className}>
+        <Container $itemsCount={assets.length}>
             {assets.map((asset, index) => {
                 const displaySymbol = asset.symbol.toUpperCase();
 
@@ -57,6 +64,7 @@ export function TopAssets({ assets, logoSize = 40, onAssetClick, className }: To
                         key={asset.id}
                         $isLast={index === assets.length - 1}
                         onClick={() => onAssetClick(asset)}
+                        data-testid={`${dataTestId}/${asset.id}`}
                     >
                         {asset.isNativeToken ? (
                             <CoinLogo
@@ -72,6 +80,10 @@ export function TopAssets({ assets, logoSize = 40, onAssetClick, className }: To
                                 symbol={asset.symbol}
                                 contractAddress={asset.contractAddress}
                                 placeholder={displaySymbol}
+                                showNetworkIcon={shouldShowNetworkIcon(
+                                    asset.symbol,
+                                    asset.contractAddress,
+                                )}
                             />
                         )}
 

packages/suite/src/components/suite/Translation.tsx

@@ -8,6 +8,10 @@ import messages from '../../support/messages';
 
 export type TranslationKey = keyof typeof messages;
 
+export function isTranslationKey(key: unknown): key is TranslationKey {
+    return typeof key === 'string' && Object.hasOwn(messages, key);
+}
+
 export const Translation = ({ defaultMessage, id, values }: ExtendedMessageDescriptor) => {
     // prevent runtime errors
     if (!defaultMessage && id !== undefined && !messages[id]) {

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowToken/AssetDetails.tsx → packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetDetails.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { NetworkSymbol, getDisplaySymbol, getNetwork } from '@suite-common/wallet-config';
 import { Badge, Column, Row, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
+import { hasOwn } from '@trezor/utils';
 
 const TextWrapper = styled.div`
     overflow: hidden;
@@ -16,10 +17,20 @@ const BadgeWrapper = styled.div`
 type AssetDetailsProps = {
     name: string;
     symbol: string;
-    networkSymbol: NetworkSymbol;
-};
+} & (
+    | {
+          networkSymbol: NetworkSymbol;
+      }
+    | {
+          networkName: string;
+      }
+);
+
+export function AssetDetails({ name, symbol, ...props }: AssetDetailsProps) {
+    const badge = hasOwn(props, 'networkSymbol')
+        ? getNetwork(props.networkSymbol).name
+        : props.networkName;
 
-export function AssetDetails({ name, symbol, networkSymbol }: AssetDetailsProps) {
     return (
         <Column alignItems="flex-start" justifyContent="flex-start">
             <TextWrapper>
@@ -31,9 +42,11 @@ export function AssetDetails({ name, symbol, networkSymbol }: AssetDetailsProps)
                 <Text typographyStyle="hint" variant="tertiary">
                     {getDisplaySymbol(symbol)}
                 </Text>
-                <BadgeWrapper>
-                    <Badge size="small">{getNetwork(networkSymbol).name}</Badge>
-                </BadgeWrapper>
+                {badge !== name && (
+                    <BadgeWrapper>
+                        <Badge size="small">{badge}</Badge>
+                    </BadgeWrapper>
+                )}
             </Row>
         </Column>
     );

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetGroupLabel.tsx

@@ -3,10 +3,12 @@ import { ReactNode } from 'react';
 import { Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
+import { Translation, TranslationKey, isTranslationKey } from 'src/components/suite/Translation';
+
 export const ASSET_ROW_GROUP_LABEL_HEIGHT = 24;
 
 export type AssetGroupLabelProps = {
-    label: ReactNode;
+    label: ReactNode | TranslationKey;
 };
 
 export function AssetGroupLabel({ label }: AssetGroupLabelProps) {
@@ -17,7 +19,7 @@ export function AssetGroupLabel({ label }: AssetGroupLabelProps) {
             margin={{ bottom: spacings.xxs, left: spacings.md }}
             as="div"
         >
-            {label}
+            {isTranslationKey(label) ? <Translation id={label} /> : label}
         </Text>
     );
 }

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/AssetRowSendFromAccount.tsx → packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/AssetRowAccountWithBalance.tsx

@@ -7,20 +7,24 @@ import { spacings } from '@trezor/theme';
 import { ItemClickableContainer } from '../ItemClickableContainer';
 import { AccountAmount } from './AccountAmount';
 
-export type AssetRowSendFromAccountProps = {
+export type AssetRowAccountWithBalanceProps = {
     account: Account;
-    'data-testid'?: string;
+    dataTestId?: string;
     onClick: (account: Account) => void;
 };
 
-export function AssetRowSendFromAccount({
-    'data-testid': dataTestId,
+export function AssetRowAccountWithBalance({
+    dataTestId,
     account,
     onClick,
-}: AssetRowSendFromAccountProps) {
+}: AssetRowAccountWithBalanceProps) {
     return (
         <ItemClickableContainer onClick={() => onClick(account)}>
-            <Row data-testid={dataTestId} gap={spacings.sm} alignItems="center">
+            <Row
+                data-testid={`${dataTestId}/${account.symbol}`}
+                gap={spacings.sm}
+                alignItems="center"
+            >
                 <CoinLogo symbol={account.symbol} size={40} type="tokenWithNetwork" />
 
                 <Column alignItems="flex-start" justifyContent="flex-start">

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/AssetRowReceiveToAccount.tsx

@@ -13,12 +13,12 @@ import { ItemClickableContainer } from '../ItemClickableContainer';
 
 export type AssetRowReceiveToAccountProps = {
     account: Account;
-    'data-testid'?: string;
+    dataTestId?: string;
     onClick: (account: Account) => void;
 };
 
 export function AssetRowReceiveToAccount({
-    'data-testid': dataTestId,
+    dataTestId,
     account,
     onClick,
 }: AssetRowReceiveToAccountProps) {

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAccount/index.ts

@@ -1,3 +1,3 @@
 export * from './constants';
 export * from './AssetRowReceiveToAccount';
-export * from './AssetRowSendFromAccount';
+export * from './AssetRowAccountWithBalance';

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowAsset/AssetRowAsset.tsx

@@ -0,0 +1,48 @@
+import { TradingAssetOption } from '@suite-common/trading';
+import { Row } from '@trezor/components';
+import { AssetLogo, CoinLogo, shouldShowNetworkIcon } from '@trezor/product-components';
+import { spacings } from '@trezor/theme';
+
+import { AssetDetails } from '../AssetDetails';
+import { ItemClickableContainer } from '../ItemClickableContainer';
+
+export const ASSET_ROW_ASSET_HEIGHT = 68;
+
+export type AssetRowAssetProps = {
+    asset: TradingAssetOption;
+    onClick: (asset: TradingAssetOption) => void;
+    dataTestId?: string;
+};
+
+export function AssetRowAsset({ asset, dataTestId, onClick }: AssetRowAssetProps) {
+    return (
+        <ItemClickableContainer
+            onClick={() => {
+                onClick(asset);
+            }}
+        >
+            <Row data-testid={`${dataTestId}/${asset.id}`} gap={spacings.sm}>
+                {asset.isNativeToken ? (
+                    <CoinLogo size={40} symbol={asset.symbol} type="tokenWithNetwork" />
+                ) : (
+                    <AssetLogo
+                        size={40}
+                        coingeckoId={asset.coingeckoId}
+                        symbol={asset.networkSymbol}
+                        contractAddress={asset.contractAddress}
+                        placeholder={asset.displaySymbol}
+                        showNetworkIcon={shouldShowNetworkIcon(
+                            asset.networkSymbol,
+                            asset.contractAddress,
+                        )}
+                    />
+                )}
+                <AssetDetails
+                    name={asset.name}
+                    symbol={asset.symbol}
+                    networkName={asset.networkName}
+                />
+            </Row>
+        </ItemClickableContainer>
+    );
+}

packages/suite/src/components/suite/asset-picker/components/AssetRow/AssetRowToken/AssetRowToken.tsx

@@ -2,43 +2,39 @@ import { getCoingeckoId, getDisplaySymbol } from '@suite-common/wallet-config';
 import { Account } from '@suite-common/wallet-types';
 import { asBaseCurrencyAmount } from '@suite-common/wallet-utils';
 import { Row } from '@trezor/components';
-import { AssetLogo } from '@trezor/product-components';
+import { AssetLogo, shouldShowNetworkIcon } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 
 import { TokensWithRates } from 'src/utils/wallet/tokenUtils';
 
 import { ItemClickableContainer } from '../ItemClickableContainer';
 import { AssetAmount } from './AssetAmount';
-import { AssetDetails } from './AssetDetails';
+import { AssetDetails } from '../AssetDetails';
 
 export const ASSET_ROW_TOKEN_HEIGHT = 68;
 
 export type AssetRowTokenProps = {
     token: TokensWithRates;
     account: Account;
     onClick: (token: TokensWithRates, account: Account) => void;
-    'data-testid'?: string;
+    dataTestId?: string;
 };
 
-export function AssetRowToken({
-    token,
-    account,
-    'data-testid': dataTestId,
-    onClick,
-}: AssetRowTokenProps) {
+export function AssetRowToken({ token, account, dataTestId, onClick }: AssetRowTokenProps) {
     return (
         <ItemClickableContainer
             onClick={() => {
                 onClick(token, account);
             }}
         >
-            <Row data-testid={dataTestId} gap={spacings.sm}>
+            <Row data-testid={`${dataTestId}/${account.symbol}/${token.symbol}`} gap={spacings.sm}>
                 <AssetLogo
                     size={40}
-                    coingeckoId={getCoingeckoId(account.symbol) ?? account.networkType}
+                    coingeckoId={getCoingeckoId(account.symbol)!}
                     symbol={account.symbol}
                     contractAddress={token.contract}
                     placeholder={getDisplaySymbol(token.symbol!, token.contract)}
+                    showNetworkIcon={shouldShowNetworkIcon(account.symbol, token.contract)}
                 />
                 <AssetDetails
                     name={token.name!}

packages/suite/src/components/suite/asset-picker/components/AssetsList/AssetsList.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject, useCallback, useState } from 'react';
+import { ReactNode, RefObject, memo, useCallback, useState } from 'react';
 
 import { BaseItemProps, VirtualizedList, useScrollShadow } from '@trezor/components';
 import { mapElevationToBackgroundToken } from '@trezor/theme';
@@ -14,7 +14,7 @@ export interface AssetsListProps<T> {
 
 export const LIST_MIN_HEIGHT = 200;
 
-export function AssetsList<T extends BaseItemProps>({
+function AssetsListInner<T extends BaseItemProps>({
     items,
     itemsFingerprint,
     renderItem,
@@ -49,3 +49,5 @@ export function AssetsList<T extends BaseItemProps>({
         </ShadowContainer>
     );
 }
+
+export const AssetsList = memo(AssetsListInner) as typeof AssetsListInner;

packages/suite/src/components/suite/asset-picker/components/index.ts

@@ -1,8 +1,8 @@
 export * from './AssetsList/AssetsList';
 export * from './AssetsListEmpty/AssetsListEmpty';
-export * from './AssetSearchWithNetworkFilter/AssetSearchWithNetworkFilter';
 export * from './AssetsModal/AssetsModal';
 export * from './AssetRow/AssetRowAccount';
 export * from './AssetRow/AssetGroupLabel';
 export * from './AssetRow/AssetGroupSpace';
 export * from './AssetRow/AssetRowToken/AssetRowToken';
+export * from './AssetRow/AssetRowAsset/AssetRowAsset';