Skip to content

Commit

Permalink
feat(suite): rewrite asset table with new componen
Browse files Browse the repository at this point in the history
  • Loading branch information
@enjojoy
enjojoy committed Oct 4, 2024
1 parent 9092fbf commit 21955fd
Show file tree
Hide file tree
Showing 8 changed files with 157 additions and 320 deletions.
2 changes: 1 addition & 1 deletion packages/suite/src/views/dashboard/AssetsView/AssetCard/AssetCardInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ type AssetInfoSkeletonProps = {

export const AssetCardInfoSkeleton = ({ animate }: AssetInfoSkeletonProps) => (
<Row>
<AssetCoinLogoSkeleton />
<AssetCoinLogoSkeleton animate={animate} />
<AssetCoinNameSkeleton animate={animate} />
</Row>
);
14 changes: 10 additions & 4 deletions packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ import {
} from '@suite-common/assets';
import { SkeletonCircle, Tooltip } from '@trezor/components';
import { NetworkSymbol } from '@suite-common/wallet-config';
import { spacingsPx } from '@trezor/theme';
import styled from 'styled-components';
import { localizePercentage } from '@suite-common/wallet-utils';
import { selectLanguage } from 'src/reducers/suite/suiteReducer';
import { useSelector } from 'src/hooks/suite';
import { AssetShareIndicator } from '@trezor/product-components';
import { spacingsPx } from '@trezor/theme';

const LogoWrapper = styled.div`
padding-right: ${spacingsPx.sm};
display: flex;
padding-right: ${spacingsPx.md};
align-items: center;
justify-content: center;
`;

type AssetCoinLogoProps = {
Expand Down Expand Up @@ -53,8 +55,12 @@ export const AssetCoinLogo = ({ symbol, assetsFiatBalances, index }: AssetCoinLo
);
};

export const AssetCoinLogoSkeleton = () => (
type AssetCoinLogoSkeletonProps = {
animate?: boolean;
};

export const AssetCoinLogoSkeleton = ({ animate }: AssetCoinLogoSkeletonProps) => (
<LogoWrapper>
<SkeletonCircle size={44} />
<SkeletonCircle animate={animate} size={44} />
</LogoWrapper>
);
256 changes: 60 additions & 196 deletions packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { memo } from 'react';
import styled, { useTheme } from 'styled-components';
import { useTheme } from 'styled-components';
import { Network } from '@suite-common/wallet-config';
import { Icon, variables, SkeletonRectangle } from '@trezor/components';
import { Icon, Table, Row, IconButton, Column } from '@trezor/components';
import {
AmountUnitSwitchWrapper,
CoinBalance,
Expand All @@ -12,119 +12,13 @@ import {
} from 'src/components/suite';
import { isTestnet } from '@suite-common/wallet-utils';
import { goto } from 'src/actions/suite/routerActions';
import { useAccountSearch, useDispatch, useLoadingSkeleton } from 'src/hooks/suite';
import { spacingsPx, typography } from '@trezor/theme';
import { useAccountSearch, useDispatch } from 'src/hooks/suite';
import { spacings } from '@trezor/theme';
import { AssetFiatBalance } from '@suite-common/assets';
import { AssetTableRowGrid } from './AssetTableRowGrid';
import { ArrowIcon } from '../ArrowIcon';
import { AssetCoinLogo, AssetCoinLogoSkeleton } from '../AssetCoinLogo';
import { AssetCoinLogo } from '../AssetCoinLogo';
import { AssetCoinName } from '../AssetCoinName';
import { CoinmarketBuyButton } from '../CoinmarketBuyButton';

const Coin = styled.div`
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
`;

const StyledCol = styled.div<{ $isLastRow?: boolean }>`
display: flex;
align-items: center;
padding: 16px 0;
border-bottom: ${({ $isLastRow, theme }) =>
$isLastRow ? 'none' : `1px solid ${theme.borderElevation2}`};
`;

const CoinLogoWrapper = styled(StyledCol)`
padding-left: 18px;
text-overflow: ellipsis;
border: none;
${variables.SCREEN_QUERY.MOBILE} {
grid-column: 1 / 2;
padding-left: 20px;
border-bottom: none;
}
&:hover {
${Coin} {
text-decoration: underline;
}
}
`;

const CoinNameWrapper = styled(StyledCol)`
${typography.highlight}
overflow: hidden;
text-overflow: ellipsis;
${variables.SCREEN_QUERY.MOBILE} {
grid-column: 1 / 4;
padding-left: 20px;
border-bottom: none;
}
`;

const CoinBalanceContainer = styled.div`
${typography.hint}
color: ${({ theme }) => theme.textSubdued};
`;

const FailedCol = styled(StyledCol)`
color: ${({ theme }) => theme.textAlertRed};
${typography.hint}
${variables.SCREEN_QUERY.MOBILE} {
grid-column: 1 / 3;
margin-left: 20px;
}
`;

const CryptoBalanceWrapper = styled(StyledCol)`
flex: 1;
white-space: nowrap;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: ${spacingsPx.xxxs};
${variables.SCREEN_QUERY.MOBILE} {
grid-column: 1 / 3;
margin-left: 20px;
}
`;

const FiatBalanceWrapper = styled.div``;

const ExchangeRateWrapper = styled(StyledCol)`
font-variant-numeric: tabular-nums;
justify-content: right;
padding-right: ${spacingsPx.xxxl};
`;

const ExchangeRateWrapper7Days = styled(StyledCol)`
font-variant-numeric: tabular-nums;
padding-right: 0;
`;

const BuyButtonWrapper = styled(StyledCol)`
justify-content: right;
`;

const StyledArrowIcon = styled(ArrowIcon)`
margin: 0 ${spacingsPx.md};
`;

// eslint-disable-next-line local-rules/no-override-ds-component
const SkeletonRectangleLast = styled(SkeletonRectangle)`
margin-right: ${spacingsPx.md};
`;

// eslint-disable-next-line local-rules/no-override-ds-component
const StyledIcon = styled(Icon)`
padding-left: 4px;
padding-bottom: 2px;
`;
import { Text } from '@trezor/components';

interface AssetTableProps {
network: Network;
Expand All @@ -135,7 +29,7 @@ interface AssetTableProps {
}

export const AssetRow = memo(
({ network, failed, cryptoValue, isLastRow, assetsFiatBalances }: AssetTableProps) => {
({ network, failed, cryptoValue, assetsFiatBalances }: AssetTableProps) => {
const { symbol } = network;
const dispatch = useDispatch();
const theme = useTheme();
Expand All @@ -157,92 +51,62 @@ export const AssetRow = memo(
};

return (
<AssetTableRowGrid onClick={handleRowClick}>
<CoinLogoWrapper>
<AssetCoinLogo
symbol={network.symbol}
assetsFiatBalances={assetsFiatBalances}
/>
</CoinLogoWrapper>

<CoinNameWrapper $isLastRow={isLastRow}>
<AssetCoinName network={network} />
</CoinNameWrapper>

{!failed ? (
<CryptoBalanceWrapper
$isLastRow={isLastRow}
data-testid={`@asset-card/${symbol}/balance`}
>
<FiatBalanceWrapper>
<Table.Row onClick={handleRowClick}>
<Table.Cell colSpan={3}>
<Row>
<AssetCoinLogo
symbol={network.symbol}
assetsFiatBalances={assetsFiatBalances}
/>
<AssetCoinName network={network} />
</Row>
</Table.Cell>

<Table.Cell>
{!failed ? (
<Column
flex="1"
alignItems="flex-start"
justifyContent="center"
gap={spacings.xxxs}
data-testid={`@asset-card/${symbol}/balance`}
>
<FiatValue amount={cryptoValue} symbol={symbol} />
</FiatBalanceWrapper>

<CoinBalanceContainer>
<AmountUnitSwitchWrapper symbol={symbol}>
<CoinBalance value={cryptoValue} symbol={symbol} />
</AmountUnitSwitchWrapper>
</CoinBalanceContainer>
</CryptoBalanceWrapper>
) : (
<FailedCol $isLastRow={isLastRow}>
<Translation id="TR_DASHBOARD_ASSET_FAILED" />

<StyledIcon
name="warningTriangle"
color={theme.legacy.TYPE_RED}
size={14}
/>
</FailedCol>
)}
<ExchangeRateWrapper $isLastRow={isLastRow}>
{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}
</ExchangeRateWrapper>
<ExchangeRateWrapper7Days $isLastRow={isLastRow}>
{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}
</ExchangeRateWrapper7Days>
<BuyButtonWrapper $isLastRow={isLastRow}>
{!isTestnet(symbol) && (
<CoinmarketBuyButton
symbol={symbol}
data-testid={`@dashboard/assets/table/${symbol}/buy-button`}
/>
<Text typographyStyle="hint" color={theme.textSubdued}>
<AmountUnitSwitchWrapper symbol={symbol}>
<CoinBalance value={cryptoValue} symbol={symbol} />
</AmountUnitSwitchWrapper>
</Text>
</Column>
) : (
<Text variant="destructive" typographyStyle="hint" textWrap="nowrap">
<Row gap={spacings.xxs}>
<Icon
name="warningTriangle"
color={theme.legacy.TYPE_RED}
size={14}
/>
<Translation id="TR_DASHBOARD_ASSET_FAILED" />
</Row>
</Text>
)}
<StyledArrowIcon size={16} name="arrowRight" color={theme.iconSubdued} />
</BuyButtonWrapper>
</AssetTableRowGrid>
</Table.Cell>
<Table.Cell>{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}</Table.Cell>

<Table.Cell>{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}</Table.Cell>
<Table.Cell align="right" colSpan={2}>
<Row gap={16}>
{!isTestnet(symbol) && (
<CoinmarketBuyButton
symbol={symbol}
data-testid={`@dashboard/assets/table/${symbol}/buy-button`}
/>
)}
<IconButton icon="arrowRight" size="small" variant="tertiary" />
</Row>
</Table.Cell>
</Table.Row>
);
},
);

export const AssetRowSkeleton = (props: { animate?: boolean }) => {
const { shouldAnimate } = useLoadingSkeleton();

const animate = props.animate ?? shouldAnimate;

return (
<AssetTableRowGrid>
<CoinLogoWrapper>
<AssetCoinLogoSkeleton />
</CoinLogoWrapper>
<CoinNameWrapper $isLastRow>
<Coin>
<SkeletonRectangle animate={animate} width={150} />
</Coin>
</CoinNameWrapper>
<CryptoBalanceWrapper $isLastRow>
<SkeletonRectangle animate={animate} width={100} />
</CryptoBalanceWrapper>

<ExchangeRateWrapper $isLastRow>
<SkeletonRectangle animate={animate} />
</ExchangeRateWrapper>
<ExchangeRateWrapper $isLastRow>
<SkeletonRectangle animate={animate} width={50} />
</ExchangeRateWrapper>
<BuyButtonWrapper $isLastRow>
<SkeletonRectangleLast animate={animate} width={58} height={38} borderRadius={19} />
</BuyButtonWrapper>
</AssetTableRowGrid>
);
};
39 changes: 39 additions & 0 deletions packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRowSkeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { Row, Table, SkeletonRectangle } from '@trezor/components';
import { AssetCoinLogoSkeleton } from '../AssetCoinLogo';
import { useLoadingSkeleton } from 'src/hooks/suite';

type AssetRowSkeletonProps = {
isAnimating?: boolean;
};

export const AssetRowSkeleton = ({ isAnimating }: AssetRowSkeletonProps) => {
const { shouldAnimate } = useLoadingSkeleton();

const animate = isAnimating ?? shouldAnimate;

return (
<Table.Row>
<Table.Cell colSpan={3}>
<Row>
<AssetCoinLogoSkeleton animate={animate} />
<SkeletonRectangle animate={animate} width={100} />
</Row>
</Table.Cell>
<Table.Cell>
<SkeletonRectangle animate={animate} width={100} />
</Table.Cell>
<Table.Cell>
<SkeletonRectangle animate={animate} />
</Table.Cell>
<Table.Cell>
<SkeletonRectangle animate={animate} width={50} />
</Table.Cell>
<Table.Cell colSpan={2}>
<Row gap={16}>
<SkeletonRectangle animate={animate} width={58} height={38} borderRadius={19} />
<SkeletonRectangle animate={animate} width={38} height={38} borderRadius={25} />
</Row>
</Table.Cell>
</Table.Row>
);
};
Loading

0 comments on commit 21955fd

Please sign in to comment.