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 Sep 30, 2024
1 parent f025956 commit 910cf23
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 176 deletions.
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
5 changes: 3 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,17 @@ 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';

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

type AssetCoinLogoProps = {
Expand Down
163 changes: 63 additions & 100 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 } 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,10 +70,6 @@ const ExchangeRateWrapper7Days = styled(StyledCol)`
padding-right: 0;
`;

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

const StyledArrowIcon = styled(ArrowIcon)`
margin: 0 ${spacingsPx.md};
`;
Expand Down Expand Up @@ -157,60 +116,64 @@ export const AssetRow = memo(
};

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

<CoinNameWrapper $isLastRow={isLastRow}>
</Table.Cell>
<Table.Cell colSpan={2}>
<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}
/>
</FailedCol>
)}
<ExchangeRateWrapper $isLastRow={isLastRow}>
{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}
</ExchangeRateWrapper>
<ExchangeRateWrapper7Days $isLastRow={isLastRow}>
{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}
</ExchangeRateWrapper7Days>
<BuyButtonWrapper $isLastRow={isLastRow}>
</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>
{!isTestnet(symbol) && (
<CoinmarketBuyButton
symbol={symbol}
data-testid={`@dashboard/assets/table/${symbol}/buy-button`}
/>
)}
</Table.Cell>
<Table.Cell>
<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>
<Table.Row>
<Table.Cell>
<AssetCoinLogoSkeleton />
</CoinLogoWrapper>
<CoinNameWrapper $isLastRow>
</Table.Cell>
<Table.Cell colSpan={2}>
<Coin>
<SkeletonRectangle animate={animate} width={150} />
</Coin>
</CoinNameWrapper>
<CryptoBalanceWrapper $isLastRow>
</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>
);
58 changes: 20 additions & 38 deletions packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,25 @@
import styled from 'styled-components';

import { spacingsPx, typography } from '@trezor/theme';

import { Translation } from 'src/components/suite';
import { AssetTableRowGrid } from './AssetTableRowGrid';

const Header = styled.div`
display: flex;
${typography.hint}
color: ${({ theme }) => theme.textSubdued};
align-items: center;
padding: ${spacingsPx.sm} 0;
border-bottom: 1px solid ${({ theme }) => theme.borderElevation2};
&:last-child {
padding-right: ${spacingsPx.md};
}
`;

const HeaderRight = styled(Header)`
justify-content: right;
padding-right: ${spacingsPx.xxxl};
`;
import { Table } from '@trezor/components';

export const AssetTableHeader = () => (
<AssetTableRowGrid>
<Header /> {/* Logo */}
<Header>
<Translation id="TR_ASSETS" />
</Header>
<Header>
<Translation id="TR_VALUES" />
</Header>
<HeaderRight>
<Translation id="TR_EXCHANGE_RATE" />
</HeaderRight>
<Header>
<Translation id="TR_7D_CHANGE" />
</Header>
<Header /> {/* Buy Button */}
</AssetTableRowGrid>
<Table.Header>
<Table.Row>
<Table.Cell>{/* Logo */}</Table.Cell>
<Table.Cell colSpan={2}>
<Translation id="TR_ASSETS" />
</Table.Cell>
<Table.Cell>
<Translation id="TR_VALUES" />
</Table.Cell>
<Table.Cell>
<Translation id="TR_EXCHANGE_RATE" />
</Table.Cell>
<Table.Cell>
<Translation id="TR_7D_CHANGE" />
</Table.Cell>
<Table.Cell>{' ' /* Buy Button */}</Table.Cell>
<Table.Cell>{' ' /* Arrow */}</Table.Cell>
</Table.Row>
</Table.Header>
);
Loading

0 comments on commit 910cf23

Please sign in to comment.