Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(suite): send form token select #14799

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat(suite): send form token select #14799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
01e10b6
chore(product-components): SelectAssetModal independent of coinmarket
enjojoy Oct 16, 2024
955bf24
feat(suite): new token select component in send form
enjojoy Oct 30, 2024
5e54abc
fix(suite): fix issues with TokenSelect
tomasklim Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/components/src/components/VirtualizedList/VirtualizedList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -79,7 +79,7 @@ export const VirtualizedList = forwardRef<HTMLDivElement, VirtualizedListProps<a
const [endIndex, setEndIndex] = useState(DEFAULT_VISIBLE_ITEMS_COUNT);
const [itemHeights, setItemHeights] = useState<number[]>([]);
const [totalHeight, setTotalHeight] = useState(0);
const debouncedOnScrollEnd = debounce(onScrollEnd, 1000);
const debouncedOnScrollEnd = onScrollEnd && debounce(onScrollEnd, 1000);

const resetScroll = useCallback(() => {
if (!containerRef.current) return;
Expand Down
125 changes: 64 additions & 61 deletions packages/product-components/src/components/SelectAssetModal/AssetItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import styled, { useTheme } from 'styled-components';
import { ReactNode } from 'react';

import styled from 'styled-components';

import { spacings, spacingsPx } from '@trezor/theme';
import { Badge, Column, Icon, Row, Text } from '@trezor/components';
import { AssetLogo, Badge, Column, Row, Text } from '@trezor/components';
import { NetworkSymbol } from '@suite-common/wallet-config';
import { getContractAddressForNetwork } from '@suite-common/wallet-utils';

import { SelectAssetOptionCurrencyProps } from './SelectAssetModal';

const ClickableContainer = styled.div`
cursor: pointer;
Expand All @@ -13,10 +19,6 @@ const ClickableContainer = styled.div`
}
`;

const IconWrapper = styled.div`
cursor: pointer;
`;

const TextWrapper = styled.div`
overflow: hidden;
text-overflow: ellipsis;
Expand All @@ -27,66 +29,67 @@ const BadgeWrapper = styled.div`
`;

type AssetItemProps = {
cryptoId: string;
name: string;
name?: string;
symbol: string;
badge: string | undefined;
logo: JSX.Element;
isFavorite?: boolean;
handleClick: (selectedAsset: string) => void;
onFavoriteClick?: (isFavorite: boolean) => void;
badge: string | ReactNode | undefined;
networkSymbol: NetworkSymbol | ({} & string);
coingeckoId: string;
shouldTryToFetch?: boolean;
contractAddress: string | null;
handleClick: (selectedAsset: SelectAssetOptionCurrencyProps) => void;
};

export const AssetItem = ({
cryptoId,
name,
symbol,
badge,
logo,
isFavorite = false,
networkSymbol,
coingeckoId,
shouldTryToFetch,
contractAddress,
handleClick,
onFavoriteClick,
}: AssetItemProps) => {
const theme = useTheme();

const handleFavoriteClick = onFavoriteClick ? () => onFavoriteClick(isFavorite) : undefined;

return (
<ClickableContainer onClick={() => handleClick(cryptoId)}>
<Row gap={spacings.sm}>
{logo}
<Column flex="1" alignItems="stretch">
<Row gap={spacings.xs} alignItems="center">
<TextWrapper>
<Text typographyStyle="body" textWrap="nowrap">
{name}
</Text>
</TextWrapper>
{badge && (
<BadgeWrapper>
<Badge>{badge}</Badge>
</BadgeWrapper>
)}
</Row>
<Text typographyStyle="hint" variant="tertiary">
{symbol}
</Text>
</Column>

{handleFavoriteClick && (
<IconWrapper>
{isFavorite ? (
<Icon
name="starFilled"
color={theme.backgroundAlertYellowBoldAlt}
onClick={handleFavoriteClick}
/>
) : (
<Icon name="star" onClick={handleFavoriteClick} />
)}
</IconWrapper>
)}
</Row>
</ClickableContainer>
);
};
}: AssetItemProps) => (
<ClickableContainer
onClick={() =>
handleClick({
symbol,
contractAddress: contractAddress ?? null,
type: 'currency',
networkSymbol,
coingeckoId,
cryptoName: undefined,
})
}
>
<Row gap={spacings.sm}>
<AssetLogo
size={24}
coingeckoId={coingeckoId}
contractAddress={
networkSymbol && contractAddress
? getContractAddressForNetwork(networkSymbol, contractAddress)
: undefined
}
placeholder={symbol.toUpperCase()}
shouldTryToFetch={shouldTryToFetch}
/>
<Column flex="1" alignItems="stretch">
<Row gap={spacings.xs} alignItems="center">
<TextWrapper>
<Text typographyStyle="body" textWrap="nowrap">
{name}
</Text>
</TextWrapper>
{badge && (
<BadgeWrapper>
<Badge>{badge}</Badge>
</BadgeWrapper>
)}
</Row>
<Text typographyStyle="hint" variant="tertiary">
{symbol.toUpperCase()}
</Text>
</Column>
</Row>
</ClickableContainer>
);
66 changes: 16 additions & 50 deletions packages/product-components/src/components/SelectAssetModal/AssetItemNotFound.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,27 @@
import { FormattedMessage } from 'react-intl';
import { ReactNode } from 'react';

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

import { SelectAssetNetworkProps, SelectAssetSearchCategoryType } from './SelectAssetModal';

interface AssetItemNotFoundProps {
searchCategory: SelectAssetSearchCategoryType;
networkCategories: SelectAssetNetworkProps[];
noItemsAvailablePlaceholder: { heading: string | ReactNode; body?: string | ReactNode };
listHeight: string;
listMinHeight: number;
}

export const AssetItemNotFound = ({
searchCategory,
networkCategories,
noItemsAvailablePlaceholder,
listHeight,
listMinHeight,
}: AssetItemNotFoundProps) => {
// TODO: resolve messages sharing https://github.com/trezor/trezor-suite/issues/5325
const translations = searchCategory
? {
heading: {
id: 'TR_TOKEN_NOT_FOUND_ON_NETWORK',
defaultMessage: 'Token not found on the {networkName} network',
values: {
networkName: networkCategories.find(
category => 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">{noItemsAvailablePlaceholder.heading}</Text>
{noItemsAvailablePlaceholder.body && (
<Paragraph
align="center"
maxWidth={280}
Expand All @@ -66,9 +32,9 @@ export const AssetItemNotFound = ({
}}
>
<Text variant="tertiary" typographyStyle="hint">
<FormattedMessage {...translations.paragraph} />
{noItemsAvailablePlaceholder.body}
</Text>
</Paragraph>
</Column>
);
};
)}
</Column>
);
51 changes: 26 additions & 25 deletions packages/product-components/src/components/SelectAssetModal/NetworkTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,38 @@ import styled from 'styled-components';

import { AssetLogo, Row, Tooltip, useElevation } from '@trezor/components';
import { Elevation, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
import { Network } from '@suite-common/wallet-config';

import { SelectAssetNetworkProps, SelectAssetSearchCategoryType } from './SelectAssetModal';
import { CheckableTag } from './CheckableTag';

interface NetworkTabsWrapperProps {
$elevation: Elevation;
}

const NetworkTabsWrapper = styled.div<NetworkTabsWrapperProps>`
const NetworkTabsWrapper = styled.div<{ $elevation: Elevation }>`
margin-left: -${spacingsPx.md};
width: calc(100% + ${spacings.md * 2}px);
padding: ${spacings.zero} ${spacingsPx.md} ${spacingsPx.lg};
border-bottom: 1px solid
${({ theme, $elevation }) => mapElevationToBorder({ $elevation, theme })};
`;

export type NetworkFilterCategory = {
name: Network['name'];
symbol: Network['symbol'];
coingeckoId: Network['coingeckoId'];
coingeckoNativeId?: Network['coingeckoNativeId'];
};

export type SelectAssetSearchCategory = {
coingeckoId: string;
coingeckoNativeId?: string;
} | null;

interface NetworkTabsProps {
networkCategories: SelectAssetNetworkProps[];
tabs: NetworkFilterCategory[];
activeTab: SelectAssetSearchCategory;
setActiveTab: (value: SelectAssetSearchCategory) => void;
networkCount: number;
searchCategory: SelectAssetSearchCategoryType;
setSearchCategory: (value: SelectAssetSearchCategoryType) => void;
}

export const NetworkTabs = ({
networkCategories,
networkCount,
searchCategory,
setSearchCategory,
}: NetworkTabsProps) => {
export const NetworkTabs = ({ tabs, activeTab, setActiveTab, networkCount }: NetworkTabsProps) => {
const { elevation } = useElevation();

// TODO: FormattedMessage - resolve messages sharing https://github.com/trezor/trezor-suite/issues/5325}
Expand All @@ -41,9 +44,9 @@ export const NetworkTabs = ({
<Row gap={spacings.xs} flexWrap="wrap">
<CheckableTag
$elevation={elevation}
$variant={searchCategory === null ? 'primary' : 'tertiary'}
$variant={activeTab === null ? 'primary' : 'tertiary'}
onClick={() => {
setSearchCategory(null);
setActiveTab(null);
}}
>
<Tooltip
Expand All @@ -62,26 +65,24 @@ export const NetworkTabs = ({
/>
</Tooltip>
</CheckableTag>
{networkCategories.map(network => (
{tabs.map(network => (
<CheckableTag
$elevation={elevation}
$variant={
searchCategory?.coingeckoId === network.coingeckoId
? 'primary'
: 'tertiary'
activeTab?.coingeckoId === network.coingeckoId ? 'primary' : 'tertiary'
}
onClick={() => {
if (
searchCategory?.coingeckoId === network.coingeckoId &&
searchCategory?.coingeckoNativeId === network.coingeckoNativeId
activeTab?.coingeckoId === network.coingeckoId &&
activeTab?.coingeckoNativeId === network.coingeckoNativeId
) {
setSearchCategory(null);
setActiveTab(null);

return;
}

if (network.coingeckoId) {
setSearchCategory({
setActiveTab({
coingeckoId: network.coingeckoId,
coingeckoNativeId: network.coingeckoNativeId,
});
Expand Down
20 changes: 20 additions & 0 deletions packages/product-components/src/components/SelectAssetModal/SearchAsset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
/>
);
Loading
Loading