fix(suite): fix issues with TokenSelect

trezor · Nov 7, 2024 · 64d6148 · 64d6148
1 parent b85a935
commit 64d6148
Show file tree

Hide file tree

Showing 26 changed files with 1,198 additions and 2,025 deletions.
diff --git a/packages/components/src/components/VirtualizedList/VirtualizedList.tsx b/packages/components/src/components/VirtualizedList/VirtualizedList.tsx
@@ -54,7 +54,7 @@ const calculateItemHeight = <T extends { height: number }>(item: T): number => {
 type VirtualizedListProps<T> = {
     items: Array<T & { height: number }>;
     onScroll?: (e: Event) => void;
-    onScrollEnd: () => void;
+    onScrollEnd?: () => void;
     listHeight: number | string;
     listMinHeight: number | string;
     renderItem: (item: T, index: number) => React.ReactNode;

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
@@ -1,72 +1,27 @@
-import { FormattedMessage } from 'react-intl';
+import { ReactNode } from 'react';
 
 import { Column, Paragraph, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
-import {
-    SelectAssetSearchCategory,
-    NetworkFilterCategories,
-    TokenFilterCategories,
-    NetworkFilterCategory,
- SelectAssetNetworkProps, SelectAssetSearchCategoryType } from './SelectAssetModal';
-
-
 interface AssetItemNotFoundProps {
-    searchCategory: SelectAssetSearchCategory;
-    filterCategories: NetworkFilterCategories | TokenFilterCategories;
+    noItemFoundPlaceholder: { heading: string | ReactNode; body?: string | ReactNode };
     listHeight: string;
     listMinHeight: number;
 }
 
 export const AssetItemNotFound = ({
-    searchCategory,
-    filterCategories,
+    noItemFoundPlaceholder,
     listHeight,
     listMinHeight,
-}: AssetItemNotFoundProps) => {
-    // TODO: resolve messages sharing https://github.com/trezor/trezor-suite/issues/5325
-
-    const isNetworkCategory = filterCategories?.categoriesType === 'networks';
-
-    const translations =
-        searchCategory && isNetworkCategory
-            ? {
-                  heading: {
-                      id: 'TR_TOKEN_NOT_FOUND_ON_NETWORK',
-                      defaultMessage: 'Token not found on the {networkName} network',
-                      values: {
-                          networkName: filterCategories.categories.find(
-                              (category: NetworkFilterCategory) =>
-                                  category.coingeckoId === searchCategory.coingeckoId,
-                          )?.name,
-                      },
-                  },
-                  paragraph: {
-                      id: 'TR_TOKEN_TRY_DIFFERENT_SEARCH_OR_SWITCH',
-                      defaultMessage: 'Please try a different search or switch to another network.',
-                  },
-              }
-            : {
-                  heading: {
-                      id: 'TR_TOKEN_NOT_FOUND',
-                      defaultMessage: 'Token not found',
-                  },
-                  paragraph: {
-                      id: 'TR_TOKEN_TRY_DIFFERENT_SEARCH',
-                      defaultMessage: 'Please try a different search.',
-                  },
-              };
-
-    return (
-        <Column
-            alignItems="center"
-            justifyContent="center"
-            height={listHeight}
-            minHeight={listMinHeight}
-        >
-            <Text typographyStyle="body">
-                <FormattedMessage {...translations.heading} />
-            </Text>
+}: AssetItemNotFoundProps) => (
+    <Column
+        alignItems="center"
+        justifyContent="center"
+        height={listHeight}
+        minHeight={listMinHeight}
+    >
+        <Text typographyStyle="body">{noItemFoundPlaceholder.heading}</Text>
+        {noItemFoundPlaceholder.body && (
             <Paragraph
                 align="center"
                 maxWidth={280}
@@ -77,9 +32,9 @@ export const AssetItemNotFound = ({
                 }}
             >
                 <Text variant="tertiary" typographyStyle="hint">
-                    <FormattedMessage {...translations.paragraph} />
+                    {noItemFoundPlaceholder.body}
                 </Text>
             </Paragraph>
-        </Column>
-    );
-};
+        )}
+    </Column>
+);
diff --git a/packages/product-components/src/components/SelectAssetModal/SearchAsset.tsx b/packages/product-components/src/components/SelectAssetModal/SearchAsset.tsx
@@ -0,0 +1,20 @@
+import { Icon, Input } from '@trezor/components';
+
+interface SearchAssetProps {
+    searchPlaceholder: string;
+    search: string;
+    setSearch: (value: string) => void;
+}
+
+export const SearchAsset = ({ searchPlaceholder, search, setSearch }: SearchAssetProps) => (
+    <Input
+        placeholder={searchPlaceholder}
+        value={search}
+        onChange={event => setSearch(event.target.value)}
+        autoFocus
+        onClear={() => setSearch('')}
+        showClearButton="always"
+        innerAddon={<Icon name="search" variant="tertiary" size="medium" />}
+        innerAddonAlign="left"
+    />
+);
diff --git a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.stories.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.stories.tsx
@@ -6,9 +6,12 @@ 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 { NetworkFilterCategory } from './SelectAssetModal';
+import { selectAssetModalOptions, selectAssetModalNetworks } from './SelectAssetModal.storiesData';
+import {
+    NetworkFilterCategory,
+    SelectAssetModalProps,
+    SelectAssetModal as SelectAssetModalComponent,
+} from './SelectAssetModal';
 
 const meta: Meta = {
     title: 'SelectAssetModal',