fix(suite): fix issues with TokenSelect

trezor · Nov 6, 2024 · ac24167 · ac24167
1 parent 9fddd5c
commit ac24167
Show file tree

Hide file tree

Showing 21 changed files with 955 additions and 1,833 deletions.
diff --git a/packages/components/src/components/form/Select/Select.tsx b/packages/components/src/components/form/Select/Select.tsx
@@ -121,7 +121,6 @@ type WrapperProps = TransientProps<
     $isWithPlaceholder: boolean;
     $hasBottomPadding: boolean;
     $elevation: Elevation;
-    $focusEnabled: boolean;
 };
 
 const Wrapper = styled.div<WrapperProps>`
@@ -165,16 +164,9 @@ const Wrapper = styled.div<WrapperProps>`
         }
 
         &:focus-within {
-            ${({ $focusEnabled }) =>
-                $focusEnabled
-                    ? css`
-                          .${reactSelectClassNamePrefix}__dropdown-indicator {
-                              transform: rotate(180deg);
-                          }
-                      `
-                    : css`
-                          border-color: transparent;
-                      `}
+            .${reactSelectClassNamePrefix}__dropdown-indicator {
+                transform: rotate(180deg);
+            }
         }
     }
 
@@ -280,7 +272,6 @@ 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;
@@ -307,7 +298,6 @@ export const Select = ({
     useKeyPressScroll,
     isSearchable = false,
     minValueWidth = 'initial',
-    focusEnabled = true,
     isMenuOpen,
     inputState,
     components,
@@ -370,7 +360,6 @@ export const Select = ({
             $minValueWidth={minValueWidth}
             $isDisabled={isDisabled}
             $isMenuOpen={isMenuOpen}
-            $focusEnabled={focusEnabled}
             $isWithLabel={!!label}
             $isWithPlaceholder={!!placeholder}
             $hasBottomPadding={hasBottomPadding === true && bottomText === null}

diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx
@@ -2,8 +2,8 @@ import styled, { useTheme } from 'styled-components';
 
 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`
@@ -31,9 +31,9 @@ const BadgeWrapper = styled.div`
 
 type AssetItemProps = {
     name?: string;
-    symbol: NetworkSymbol;
+    symbol: string;
     badge: string | undefined;
-    networkSymbol: NetworkSymbol;
+    networkSymbol: NetworkSymbol | ({} & string);
     coingeckoId: string;
     logo: JSX.Element;
     isFavorite?: boolean;

diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItemNotFound.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItemNotFound.tsx
@@ -8,8 +8,7 @@ import {
     NetworkFilterCategories,
     TokenFilterCategories,
     NetworkFilterCategory,
- SelectAssetNetworkProps, SelectAssetSearchCategoryType } from './SelectAssetModal';
-
+} from './SelectAssetModal';
 
 interface AssetItemNotFoundProps {
     searchCategory: SelectAssetSearchCategory;

diff --git a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.stories.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.stories.tsx
@@ -6,8 +6,7 @@ import { action } from '@storybook/addon-actions';
 
 import { intermediaryTheme, NewModal } from '@trezor/components';
 
-import { SelectAssetModal as SelectAssetModalComponent, SelectAssetModalProps } from '../../index';
-import { selectAssetModalOptions, selectAssetModalNetworks } from './mockData';
+import { selectAssetModalOptions, selectAssetModalNetworks } from './SelectAssetModal.storiesData';
 import { NetworkFilterCategory } from './SelectAssetModal';
 
 const meta: Meta = {