Skip to content

Commit 6553624

Browse files
tomasklimtomasklim
committed
fix(suite): fix issues with TokenSelect
1 parent 5d020bd commit 6553624

File tree

30 files changed

+1313
-2256
lines changed

30 files changed

+1313
-2256
lines changed

‎packages/components/src/components/VirtualizedList/VirtualizedList.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const calculateItemHeight = <T extends { height: number }>(item: T): number => {
5454
type VirtualizedListProps<T> = {
5555
items: Array<T & { height: number }>;
5656
onScroll?: (e: Event) => void;
57-
onScrollEnd: () => void;
57+
onScrollEnd?: () => void;
5858
listHeight: number | string;
5959
listMinHeight: number | string;
6060
renderItem: (item: T, index: number) => React.ReactNode;
@@ -79,7 +79,7 @@ export const VirtualizedList = forwardRef<HTMLDivElement, VirtualizedListProps<a
7979
const [endIndex, setEndIndex] = useState(DEFAULT_VISIBLE_ITEMS_COUNT);
8080
const [itemHeights, setItemHeights] = useState<number[]>([]);
8181
const [totalHeight, setTotalHeight] = useState(0);
82-
const debouncedOnScrollEnd = debounce(onScrollEnd, 1000);
82+
const debouncedOnScrollEnd = onScrollEnd && debounce(onScrollEnd, 1000);
8383

8484
const resetScroll = useCallback(() => {
8585
if (!containerRef.current) return;
@@ -134,7 +134,7 @@ export const VirtualizedList = forwardRef<HTMLDivElement, VirtualizedListProps<a
134134
setStartIndex(newStartIndex);
135135
setEndIndex(newEndIndex);
136136

137-
if (newEndIndex >= items.length - LOAD_MORE_BUFFER_COUNT) {
137+
if (debouncedOnScrollEnd && newEndIndex >= items.length - LOAD_MORE_BUFFER_COUNT) {
138138
debouncedOnScrollEnd();
139139
}
140140
onScroll?.(e);

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

+3-14
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ type WrapperProps = TransientProps<
121121
$isWithPlaceholder: boolean;
122122
$hasBottomPadding: boolean;
123123
$elevation: Elevation;
124-
$focusEnabled: boolean;
125124
};
126125

127126
const Wrapper = styled.div<WrapperProps>`
@@ -165,16 +164,9 @@ const Wrapper = styled.div<WrapperProps>`
165164
}
166165
167166
&:focus-within {
168-
${({ $focusEnabled }) =>
169-
$focusEnabled
170-
? css`
171-
.${reactSelectClassNamePrefix}__dropdown-indicator {
172-
transform: rotate(180deg);
173-
}
174-
`
175-
: css`
176-
border-color: transparent;
177-
`}
167+
.${reactSelectClassNamePrefix}__dropdown-indicator {
168+
transform: rotate(180deg);
169+
}
178170
}
179171
}
180172
@@ -280,7 +272,6 @@ interface CommonProps extends Omit<ReactSelectProps<Option>, 'onChange' | 'menuI
280272
* @description pass `null` if bottom text can be `undefined`
281273
*/
282274
bottomText?: ReactNode;
283-
focusEnabled?: boolean;
284275
hasBottomPadding?: boolean;
285276
minValueWidth?: string; // TODO: should be probably removed
286277
inputState?: InputState;
@@ -307,7 +298,6 @@ export const Select = ({
307298
useKeyPressScroll,
308299
isSearchable = false,
309300
minValueWidth = 'initial',
310-
focusEnabled = true,
311301
isMenuOpen,
312302
inputState,
313303
components,
@@ -370,7 +360,6 @@ export const Select = ({
370360
$minValueWidth={minValueWidth}
371361
$isDisabled={isDisabled}
372362
$isMenuOpen={isMenuOpen}
373-
$focusEnabled={focusEnabled}
374363
$isWithLabel={!!label}
375364
$isWithPlaceholder={!!placeholder}
376365
$hasBottomPadding={hasBottomPadding === true && bottomText === null}

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

+63-74
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import styled, { useTheme } from 'styled-components';
1+
import { ReactNode } from 'react';
2+
3+
import styled from 'styled-components';
24

35
import { spacings, spacingsPx } from '@trezor/theme';
4-
import { Badge, Column, Icon, Row, Text } from '@trezor/components';
5-
import styled, { useTheme } from 'styled-components';
6+
import { AssetLogo, Badge, Column, Row, Text } from '@trezor/components';
67
import { NetworkSymbol } from '@suite-common/wallet-config';
7-
import { SelectAssetOptionCurrencyProps } from './SelectAssetModal';
8+
import { getContractAddressForNetwork } from '@suite-common/wallet-utils';
9+
10+
import { CoinLogo } from '../CoinLogo/CoinLogo';
11+
import { AssetProps } from './SelectAssetModal';
812

913
const ClickableContainer = styled.div`
1014
cursor: pointer;
@@ -16,10 +20,6 @@ const ClickableContainer = styled.div`
1620
}
1721
`;
1822

19-
const IconWrapper = styled.div`
20-
cursor: pointer;
21-
`;
22-
2323
const TextWrapper = styled.div`
2424
overflow: hidden;
2525
text-overflow: ellipsis;
@@ -31,15 +31,13 @@ const BadgeWrapper = styled.div`
3131

3232
type AssetItemProps = {
3333
name?: string;
34-
symbol: NetworkSymbol;
35-
badge: string | undefined;
36-
networkSymbol: NetworkSymbol;
37-
coingeckoId: string;
38-
logo: JSX.Element;
39-
isFavorite?: boolean;
34+
symbol: string;
35+
badge: string | ReactNode | undefined;
36+
networkSymbol: NetworkSymbol | ({} & string);
37+
coingeckoId?: string;
38+
shouldTryToFetch?: boolean;
4039
contractAddress: string | null;
41-
handleClick: (selectedAsset: SelectAssetOptionCurrencyProps) => void;
42-
onFavoriteClick?: (isFavorite: boolean) => void;
40+
handleClick: (selectedAsset: Omit<AssetProps, 'height'>) => void;
4341
};
4442

4543
export const AssetItem = ({
@@ -48,63 +46,54 @@ export const AssetItem = ({
4846
badge,
4947
networkSymbol,
5048
coingeckoId,
51-
logo,
52-
isFavorite = false,
49+
shouldTryToFetch,
5350
contractAddress,
5451
handleClick,
55-
onFavoriteClick,
56-
}: AssetItemProps) => {
57-
const theme = useTheme();
58-
59-
const handleFavoriteClick = onFavoriteClick ? () => onFavoriteClick(isFavorite) : undefined;
60-
61-
return (
62-
<ClickableContainer
63-
onClick={() =>
64-
handleClick({
65-
symbol,
66-
contractAddress: contractAddress ?? null,
67-
type: 'currency',
68-
networkSymbol,
69-
coingeckoId,
70-
cryptoName: undefined,
71-
})
72-
}
73-
>
74-
<Row gap={spacings.sm}>
75-
{logo}
76-
<Column flex="1" alignItems="stretch">
77-
<Row gap={spacings.xs} alignItems="center">
78-
<TextWrapper>
79-
<Text typographyStyle="body" textWrap="nowrap">
80-
{name}
81-
</Text>
82-
</TextWrapper>
83-
{badge && (
84-
<BadgeWrapper>
85-
<Badge>{badge}</Badge>
86-
</BadgeWrapper>
87-
)}
88-
</Row>
89-
<Text typographyStyle="hint" variant="tertiary">
90-
{symbol.toUpperCase()}
91-
</Text>
92-
</Column>
93-
94-
{handleFavoriteClick && (
95-
<IconWrapper>
96-
{isFavorite ? (
97-
<Icon
98-
name="starFilled"
99-
color={theme.backgroundAlertYellowBoldAlt}
100-
onClick={handleFavoriteClick}
101-
/>
102-
) : (
103-
<Icon name="star" onClick={handleFavoriteClick} />
104-
)}
105-
</IconWrapper>
106-
)}
107-
</Row>
108-
</ClickableContainer>
109-
);
110-
};
52+
}: AssetItemProps) => (
53+
<ClickableContainer
54+
onClick={() =>
55+
handleClick({
56+
symbol,
57+
contractAddress: contractAddress ?? null,
58+
networkSymbol,
59+
coingeckoId,
60+
cryptoName: name,
61+
})
62+
}
63+
>
64+
<Row gap={spacings.sm}>
65+
{coingeckoId ? (
66+
<AssetLogo
67+
size={24}
68+
coingeckoId={coingeckoId}
69+
contractAddress={
70+
networkSymbol && contractAddress
71+
? getContractAddressForNetwork(networkSymbol, contractAddress)
72+
: undefined
73+
}
74+
placeholder={symbol.toUpperCase()}
75+
shouldTryToFetch={shouldTryToFetch}
76+
/>
77+
) : (
78+
<CoinLogo size={24} symbol={networkSymbol as NetworkSymbol} />
79+
)}
80+
<Column flex="1" alignItems="stretch">
81+
<Row gap={spacings.xs} alignItems="center">
82+
<TextWrapper>
83+
<Text typographyStyle="body" textWrap="nowrap">
84+
{name}
85+
</Text>
86+
</TextWrapper>
87+
{badge && (
88+
<BadgeWrapper>
89+
<Badge>{badge}</Badge>
90+
</BadgeWrapper>
91+
)}
92+
</Row>
93+
<Text typographyStyle="hint" variant="tertiary">
94+
{symbol.toUpperCase()}
95+
</Text>
96+
</Column>
97+
</Row>
98+
</ClickableContainer>
99+
);

‎packages/product-components/src/components/SelectAssetModal/AssetItemNotFound.tsx

+16-61
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,27 @@
1-
import { FormattedMessage } from 'react-intl';
1+
import { ReactNode } from 'react';
22

33
import { Column, Paragraph, Text } from '@trezor/components';
44
import { spacings } from '@trezor/theme';
55

6-
import {
7-
SelectAssetSearchCategory,
8-
NetworkFilterCategories,
9-
TokenFilterCategories,
10-
NetworkFilterCategory,
11-
SelectAssetNetworkProps, SelectAssetSearchCategoryType } from './SelectAssetModal';
12-
13-
146
interface AssetItemNotFoundProps {
15-
searchCategory: SelectAssetSearchCategory;
16-
filterCategories: NetworkFilterCategories | TokenFilterCategories;
7+
noItemsAvailablePlaceholder: { heading: string | ReactNode; body?: string | ReactNode };
178
listHeight: string;
189
listMinHeight: number;
1910
}
2011

2112
export const AssetItemNotFound = ({
22-
searchCategory,
23-
filterCategories,
13+
noItemsAvailablePlaceholder,
2414
listHeight,
2515
listMinHeight,
26-
}: AssetItemNotFoundProps) => {
27-
// TODO: resolve messages sharing https://github.com/trezor/trezor-suite/issues/5325
28-
29-
const isNetworkCategory = filterCategories?.categoriesType === 'networks';
30-
31-
const translations =
32-
searchCategory && isNetworkCategory
33-
? {
34-
heading: {
35-
id: 'TR_TOKEN_NOT_FOUND_ON_NETWORK',
36-
defaultMessage: 'Token not found on the {networkName} network',
37-
values: {
38-
networkName: filterCategories.categories.find(
39-
(category: NetworkFilterCategory) =>
40-
category.coingeckoId === searchCategory.coingeckoId,
41-
)?.name,
42-
},
43-
},
44-
paragraph: {
45-
id: 'TR_TOKEN_TRY_DIFFERENT_SEARCH_OR_SWITCH',
46-
defaultMessage: 'Please try a different search or switch to another network.',
47-
},
48-
}
49-
: {
50-
heading: {
51-
id: 'TR_TOKEN_NOT_FOUND',
52-
defaultMessage: 'Token not found',
53-
},
54-
paragraph: {
55-
id: 'TR_TOKEN_TRY_DIFFERENT_SEARCH',
56-
defaultMessage: 'Please try a different search.',
57-
},
58-
};
59-
60-
return (
61-
<Column
62-
alignItems="center"
63-
justifyContent="center"
64-
height={listHeight}
65-
minHeight={listMinHeight}
66-
>
67-
<Text typographyStyle="body">
68-
<FormattedMessage {...translations.heading} />
69-
</Text>
16+
}: AssetItemNotFoundProps) => (
17+
<Column
18+
alignItems="center"
19+
justifyContent="center"
20+
height={listHeight}
21+
minHeight={listMinHeight}
22+
>
23+
<Text typographyStyle="body">{noItemsAvailablePlaceholder.heading}</Text>
24+
{noItemsAvailablePlaceholder.body && (
7025
<Paragraph
7126
align="center"
7227
maxWidth={280}
@@ -77,9 +32,9 @@ export const AssetItemNotFound = ({
7732
}}
7833
>
7934
<Text variant="tertiary" typographyStyle="hint">
80-
<FormattedMessage {...translations.paragraph} />
35+
{noItemsAvailablePlaceholder.body}
8136
</Text>
8237
</Paragraph>
83-
</Column>
84-
);
85-
};
38+
)}
39+
</Column>
40+
);

0 commit comments

Comments
 (0)