fix(suite): fix issues with TokenSelect

trezor · Nov 6, 2024 · 7870870 · 7870870
1 parent d721477
commit 7870870
Show file tree

Hide file tree

Showing 15 changed files with 599 additions and 1,456 deletions.
diff --git a/packages/components/src/components/form/Select/Select.tsx b/packages/components/src/components/form/Select/Select.tsx
@@ -119,7 +119,7 @@ type WrapperProps = TransientProps<
     $isWithPlaceholder: boolean;
     $hasBottomPadding: boolean;
     $elevation: Elevation;
-    $focusEnabled: boolean;
+    $isFocusEnabled: boolean;
 };
 
 const Wrapper = styled.div<WrapperProps>`
@@ -163,8 +163,8 @@ const Wrapper = styled.div<WrapperProps>`
         }
 
         &:focus-within {
-            ${({ $focusEnabled }) =>
-                $focusEnabled
+            ${({ $isFocusEnabled }) =>
+                $isFocusEnabled
                     ? css`
                           .${reactSelectClassNamePrefix}__dropdown-indicator {
                               transform: rotate(180deg);
@@ -278,7 +278,7 @@ interface CommonProps extends Omit<ReactSelectProps<Option>, 'onChange' | 'menuI
      * @description pass `null` if bottom text can be `undefined`
      */
     bottomText?: ReactNode;
-    focusEnabled?: boolean;
+    isFocusEnabled?: boolean;
     hasBottomPadding?: boolean;
     minValueWidth?: string; // TODO: should be probably removed
     inputState?: InputState;
@@ -305,7 +305,7 @@ export const Select = ({
     useKeyPressScroll,
     isSearchable = false,
     minValueWidth = 'initial',
-    focusEnabled = true,
+    isFocusEnabled = true,
     isMenuOpen,
     inputState,
     components,
@@ -368,7 +368,7 @@ export const Select = ({
             $minValueWidth={minValueWidth}
             $isDisabled={isDisabled}
             $isMenuOpen={isMenuOpen}
-            $focusEnabled={focusEnabled}
+            $isFocusEnabled={isFocusEnabled}
             $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
@@ -29,9 +29,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/SelectAssetModal.stories.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.stories.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from 'styled-components';
 import { intermediaryTheme, NewModal } from '@trezor/components';
 import { action } from '@storybook/addon-actions';
 import { IntlProvider } from 'react-intl';
-import { selectAssetModalOptions, selectAssetModalNetworks } from './mockData';
+import { selectAssetModalOptions, selectAssetModalNetworks } from './SelectAssetModal.storiesData';
 import { NetworkFilterCategory } from './SelectAssetModal';
 
 const meta: Meta = {