Skip to content

Commit

Permalink
feat(suite): rewtite assets table with Table comp
Browse files Browse the repository at this point in the history
  • Loading branch information
@enjojoy
enjojoy committed Oct 1, 2024
1 parent 88fb641 commit 5e55b21
Show file tree
Hide file tree
Showing 8 changed files with 127 additions and 184 deletions.
3 changes: 3 additions & 0 deletions packages/components/src/components/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ export const Table = ({ children, margin, colWidths }: TableProps) => {
</ScrollContainer>
<ShadowRight
backgroundColor={mapElevationToBackgroundToken({ $elevation: parentElevation })}
style={{
borderRadius: '16px',
}}
/>
</ShadowContainer>
);
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/Table/TableCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const Cell = styled.td<{ $isHeader: boolean; $elevation: Elevation }>`
left: 0;
z-index: 2;
background: linear-gradient(to right, ${mapElevationToBackground} 90%, rgba(0 0 0 / 0%));
border-radius: 16px;
}
`;

Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/components/Table/TableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ export const Row = styled.tr<{ $elevation: Elevation; $isCollapsed: boolean }>`
export interface TableRowProps {
children: ReactNode;
isCollapsed?: boolean;
onClick?: () => void;
}

export const TableRow = ({ children, isCollapsed = false }: TableRowProps) => {
export const TableRow = ({ children, isCollapsed = false, onClick }: TableRowProps) => {
const { elevation } = useElevation();

return (
<Row $elevation={elevation} $isCollapsed={isCollapsed}>
<Row $elevation={elevation} $isCollapsed={isCollapsed} onClick={onClick}>
{children}
</Row>
);
Expand Down
6 changes: 4 additions & 2 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
179 changes: 71 additions & 108 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 { Network } from '@suite-common/wallet-config';
import { Icon, variables, SkeletonRectangle } from '@trezor/components';
import { Icon, variables, SkeletonRectangle, Table, Row } from '@trezor/components';
import {
AmountUnitSwitchWrapper,
CoinBalance,
Expand All @@ -15,7 +15,6 @@ import { goto } from 'src/actions/suite/routerActions';
import { useAccountSearch, useDispatch, useLoadingSkeleton } from 'src/hooks/suite';
import { spacingsPx, typography } from '@trezor/theme';
import { AssetFiatBalance } from '@suite-common/assets';
import { AssetTableRowGrid } from './AssetTableRowGrid';
import { ArrowIcon } from '../ArrowIcon';
import { AssetCoinLogo, AssetCoinLogoSkeleton } from '../AssetCoinLogo';
import { AssetCoinName } from '../AssetCoinName';
Expand All @@ -27,43 +26,7 @@ const Coin = styled.div`
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 StyledCol = styled.div<{ $isLastRow?: boolean }>``;

const CoinBalanceContainer = styled.div`
${typography.hint}
Expand Down Expand Up @@ -107,12 +70,9 @@ const ExchangeRateWrapper7Days = styled(StyledCol)`
padding-right: 0;
`;

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

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

// eslint-disable-next-line local-rules/no-override-ds-component
Expand Down Expand Up @@ -157,60 +117,63 @@ 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>
<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}
<Table.Row onClick={handleRowClick}>
<Table.Cell colSpan={3}>
<Row>
<AssetCoinLogo
symbol={network.symbol}
assetsFiatBalances={assetsFiatBalances}
/>
</FailedCol>
)}
<ExchangeRateWrapper $isLastRow={isLastRow}>
{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}
</ExchangeRateWrapper>
<ExchangeRateWrapper7Days $isLastRow={isLastRow}>
{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}
</ExchangeRateWrapper7Days>
<BuyButtonWrapper $isLastRow={isLastRow}>
<AssetCoinName network={network} />
</Row>
</Table.Cell>

<Table.Cell>
{!failed ? (
<CryptoBalanceWrapper data-testid={`@asset-card/${symbol}/balance`}>
<FiatBalanceWrapper>
<FiatValue amount={cryptoValue} symbol={symbol} />
</FiatBalanceWrapper>

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

<StyledIcon
name="warningTriangle"
color={theme.legacy.TYPE_RED}
size={14}
/>
</FailedCol>
)}
</Table.Cell>
<Table.Cell>
<ExchangeRateWrapper $isLastRow={isLastRow}>
{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}
</ExchangeRateWrapper>
</Table.Cell>

<Table.Cell>
<ExchangeRateWrapper7Days $isLastRow={isLastRow}>
{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}
</ExchangeRateWrapper7Days>
</Table.Cell>
<Table.Cell align="right" colSpan={2}>
{!isTestnet(symbol) && (
<CoinmarketBuyButton
symbol={symbol}
data-testid={`@dashboard/assets/table/${symbol}/buy-button`}
/>
)}
<StyledArrowIcon size={16} name="arrowRight" color={theme.iconSubdued} />
</BuyButtonWrapper>
</AssetTableRowGrid>
</Table.Cell>
</Table.Row>
);
},
);
Expand All @@ -221,28 +184,28 @@ export const AssetRowSkeleton = (props: { animate?: boolean }) => {
const animate = props.animate ?? shouldAnimate;

return (
<AssetTableRowGrid>
<CoinLogoWrapper>
<AssetCoinLogoSkeleton />
</CoinLogoWrapper>
<CoinNameWrapper $isLastRow>
<Coin>
<SkeletonRectangle animate={animate} width={150} />
</Coin>
</CoinNameWrapper>
<CryptoBalanceWrapper $isLastRow>
<Table.Row>
<Table.Cell colSpan={3}>
<Row>
<AssetCoinLogoSkeleton />
<Coin>
<SkeletonRectangle animate={animate} width={100} />
</Coin>
</Row>
</Table.Cell>
<Table.Cell>
<SkeletonRectangle animate={animate} width={100} />
</CryptoBalanceWrapper>

<ExchangeRateWrapper $isLastRow>
</Table.Cell>
<Table.Cell>
<SkeletonRectangle animate={animate} />
</ExchangeRateWrapper>
<ExchangeRateWrapper $isLastRow>
</Table.Cell>
<Table.Cell>
<SkeletonRectangle animate={animate} width={50} />
</ExchangeRateWrapper>
<BuyButtonWrapper $isLastRow>
</Table.Cell>
<Table.Cell>
<SkeletonRectangleLast animate={animate} width={58} height={38} borderRadius={19} />
</BuyButtonWrapper>
</AssetTableRowGrid>
</Table.Cell>
<Table.Cell>{/* Arrow */}</Table.Cell>
</Table.Row>
);
};
36 changes: 16 additions & 20 deletions packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,9 @@ import { AssetRow, AssetRowSkeleton } from './AssetRow';
import { AssetTableHeader } from './AssetTableHeader';
import { Network } from '@suite-common/wallet-config';
import { BigNumber } from '@trezor/utils/src/bigNumber';
import styled from 'styled-components';
import { spacingsPx } from '@trezor/theme';

const Table = styled.div`
padding-left: ${spacingsPx.xxs};
padding-right: ${spacingsPx.xxs};
padding-bottom: ${spacingsPx.xxs};
width: 100%;
`;
import { Table } from '@trezor/components';
import { spacings } from '@trezor/theme';

export interface AssetTableRowType {
symbol: string;
Expand All @@ -31,18 +25,20 @@ export const AssetTable = ({
assetsData,
assetsFiatBalances,
}: AssetTableProps) => (
<Table>
<Table margin={{ top: spacings.xs, bottom: spacings.xs }}>
<AssetTableHeader />
{assetsData.map((asset, i) => (
<AssetRow
key={asset.symbol}
network={asset.network}
failed={asset.assetFailed}
cryptoValue={asset.assetBalance.toFixed()}
isLastRow={i === assetsData.length - 1 && !discoveryInProgress}
assetsFiatBalances={assetsFiatBalances}
/>
))}
{discoveryInProgress && <AssetRowSkeleton />}
<Table.Body>
{assetsData.map((asset, i) => (
<AssetRow
key={asset.symbol}
network={asset.network}
failed={asset.assetFailed}
cryptoValue={asset.assetBalance.toFixed()}
isLastRow={i === assetsData.length - 1 && !discoveryInProgress}
assetsFiatBalances={assetsFiatBalances}
/>
))}
{discoveryInProgress && <AssetRowSkeleton />}
</Table.Body>
</Table>
);
Loading

0 comments on commit 5e55b21

Please sign in to comment.