feat(suite): send form token select

packages/components/src/components/AssetLogo/AssetLogo.tsx

@@ -63,7 +63,6 @@ export const AssetLogo = ({
     const [isPlaceholder, setIsPlaceholder] = useState(!shouldTryToFetch);
     const fileName = contractAddress ? `${coingeckoId}--${contractAddress}` : coingeckoId;
     const logoUrl = getAssetLogoUrl(fileName);
-
     const frameProps = pickAndPrepareFrameProps(rest, allowedAssetLogoFrameProps);
 
     const handleLoad = () => {
@@ -73,8 +72,10 @@ export const AssetLogo = ({
         setIsPlaceholder(true);
     };
     useEffect(() => {
-        setIsPlaceholder(!shouldTryToFetch);
-    }, [shouldTryToFetch]);
+        if (shouldTryToFetch) {
+            setIsPlaceholder(false);
+        }
+    }, [shouldTryToFetch, fileName]);
 
     return (
         <Container $size={size} {...frameProps}>

packages/components/src/components/form/Select/Select.tsx

@@ -109,6 +109,7 @@ type WrapperProps = TransientProps<
     $isWithPlaceholder: boolean;
     $hasBottomPadding: boolean;
     $elevation: Elevation;
+    $focusEnabled: boolean;
 };
 
 const Wrapper = styled.div<WrapperProps>`
@@ -152,9 +153,16 @@ const Wrapper = styled.div<WrapperProps>`
         }
 
         &:focus-within {
-            .${reactSelectClassNamePrefix}__dropdown-indicator {
-                transform: rotate(180deg);
-            }
+            ${({ $focusEnabled }) =>
+                $focusEnabled
+                    ? css`
+                          .${reactSelectClassNamePrefix}__dropdown-indicator {
+                              transform: rotate(180deg);
+                          }
+                      `
+                    : css`
+                          border-color: transparent;
+                      `}
         }
     }
 
@@ -258,6 +266,7 @@ interface CommonProps extends Omit<ReactSelectProps<Option>, 'onChange' | 'menuI
      * @description pass `null` if bottom text can be `undefined`
      */
     bottomText?: ReactNode;
+    focusEnabled?: boolean;
     hasBottomPadding?: boolean;
     minValueWidth?: string; // TODO: should be probably removed
     inputState?: InputState;
@@ -284,6 +293,7 @@ export const Select = ({
     useKeyPressScroll,
     isSearchable = false,
     minValueWidth = 'initial',
+    focusEnabled = true,
     isMenuOpen,
     inputState,
     components,
@@ -345,6 +355,7 @@ export const Select = ({
             $minValueWidth={minValueWidth}
             $isDisabled={isDisabled}
             $isMenuOpen={isMenuOpen}
+            $focusEnabled={focusEnabled}
             $isWithLabel={!!label}
             $isWithPlaceholder={!!placeholder}
             $hasBottomPadding={hasBottomPadding === true && bottomText === null}

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

@@ -1,6 +1,8 @@
 import { spacings, spacingsPx } from '@trezor/theme';
 import { Badge, Column, Icon, Row, Text } from '@trezor/components';
 import styled, { useTheme } from 'styled-components';
+import { NetworkSymbol } from '@suite-common/wallet-config';
+import { SelectAssetOptionCurrencyProps } from './SelectAssetModal';
 
 const ClickableContainer = styled.div`
     cursor: pointer;
@@ -26,23 +28,27 @@ const BadgeWrapper = styled.div`
 `;
 
 type AssetItemProps = {
-    cryptoId: string;
-    name: string;
-    symbol: string;
+    name?: string;
+    symbol: NetworkSymbol;
     badge: string | undefined;
+    networkSymbol: NetworkSymbol;
+    coingeckoId: string;
     logo: JSX.Element;
     isFavorite?: boolean;
-    handleClick: (selectedAsset: string) => void;
+    contractAddress: string | null;
+    handleClick: (selectedAsset: SelectAssetOptionCurrencyProps) => void;
     onFavoriteClick?: (isFavorite: boolean) => void;
 };
 
 export const AssetItem = ({
-    cryptoId,
     name,
     symbol,
     badge,
+    networkSymbol,
+    coingeckoId,
     logo,
     isFavorite = false,
+    contractAddress,
     handleClick,
     onFavoriteClick,
 }: AssetItemProps) => {
@@ -51,7 +57,17 @@ export const AssetItem = ({
     const handleFavoriteClick = onFavoriteClick ? () => onFavoriteClick(isFavorite) : undefined;
 
     return (
-        <ClickableContainer onClick={() => handleClick(cryptoId)}>
+        <ClickableContainer
+            onClick={() =>
+                handleClick({
+                    symbol,
+                    contractAddress: contractAddress ?? null,
+                    type: 'currency',
+                    networkSymbol,
+                    coingeckoId,
+                })
+            }
+        >
             <Row gap={spacings.sm}>
                 {logo}
                 <Column flex="1" alignItems="stretch">
@@ -68,7 +84,7 @@ export const AssetItem = ({
                         )}
                     </Row>
                     <Text typographyStyle="hint" variant="tertiary">
-                        {symbol}
+                        {symbol.toUpperCase()}
                     </Text>
                 </Column>