Skip to content

Commit d24bb9a

Browse files
enjojoyenjojoy
committed
feat(suite): rewrite asset table with new componen
1 parent 7f799f4 commit d24bb9a

File tree

6 files changed

+127
-302
lines changed

6 files changed

+127
-302
lines changed

Diff for: ‎packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ import {
55
} from '@suite-common/assets';
66
import { SkeletonCircle, Tooltip } from '@trezor/components';
77
import { NetworkSymbol } from '@suite-common/wallet-config';
8-
import { spacingsPx } from '@trezor/theme';
98
import styled from 'styled-components';
109
import { localizePercentage } from '@suite-common/wallet-utils';
1110
import { selectLanguage } from 'src/reducers/suite/suiteReducer';
1211
import { useSelector } from 'src/hooks/suite';
1312
import { AssetShareIndicator } from '@trezor/product-components';
13+
import { spacingsPx } from '@trezor/theme';
1414

1515
const LogoWrapper = styled.div`
16-
padding-right: ${spacingsPx.sm};
16+
display: flex;
17+
padding-right: ${spacingsPx.md};
1718
align-items: center;
19+
justify-content: center;
1820
`;
1921

2022
type AssetCoinLogoProps = {

Diff for: ‎packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx

+78-182
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { memo } from 'react';
2-
import styled, { useTheme } from 'styled-components';
2+
import { useTheme } from 'styled-components';
33
import { Network } from '@suite-common/wallet-config';
4-
import { Icon, variables, SkeletonRectangle } from '@trezor/components';
4+
import { Icon, SkeletonRectangle, Table, Row, IconButton, Column } from '@trezor/components';
55
import {
66
AmountUnitSwitchWrapper,
77
CoinBalance,
@@ -13,118 +13,12 @@ import {
1313
import { isTestnet } from '@suite-common/wallet-utils';
1414
import { goto } from 'src/actions/suite/routerActions';
1515
import { useAccountSearch, useDispatch, useLoadingSkeleton } from 'src/hooks/suite';
16-
import { spacingsPx, typography } from '@trezor/theme';
16+
import { spacings } from '@trezor/theme';
1717
import { AssetFiatBalance } from '@suite-common/assets';
18-
import { AssetTableRowGrid } from './AssetTableRowGrid';
19-
import { ArrowIcon } from '../ArrowIcon';
2018
import { AssetCoinLogo, AssetCoinLogoSkeleton } from '../AssetCoinLogo';
2119
import { AssetCoinName } from '../AssetCoinName';
2220
import { CoinmarketBuyButton } from '../CoinmarketBuyButton';
23-
24-
const Coin = styled.div`
25-
white-space: nowrap;
26-
text-overflow: ellipsis;
27-
overflow: hidden;
28-
`;
29-
30-
const StyledCol = styled.div<{ $isLastRow?: boolean }>`
31-
display: flex;
32-
align-items: center;
33-
padding: 16px 0;
34-
border-bottom: ${({ $isLastRow, theme }) =>
35-
$isLastRow ? 'none' : `1px solid ${theme.borderElevation2}`};
36-
`;
37-
38-
const CoinLogoWrapper = styled(StyledCol)`
39-
padding-left: 18px;
40-
text-overflow: ellipsis;
41-
border: none;
42-
43-
${variables.SCREEN_QUERY.MOBILE} {
44-
grid-column: 1 / 2;
45-
padding-left: 20px;
46-
border-bottom: none;
47-
}
48-
49-
&:hover {
50-
${Coin} {
51-
text-decoration: underline;
52-
}
53-
}
54-
`;
55-
56-
const CoinNameWrapper = styled(StyledCol)`
57-
${typography.highlight}
58-
overflow: hidden;
59-
text-overflow: ellipsis;
60-
61-
${variables.SCREEN_QUERY.MOBILE} {
62-
grid-column: 1 / 4;
63-
padding-left: 20px;
64-
border-bottom: none;
65-
}
66-
`;
67-
68-
const CoinBalanceContainer = styled.div`
69-
${typography.hint}
70-
color: ${({ theme }) => theme.textSubdued};
71-
`;
72-
73-
const FailedCol = styled(StyledCol)`
74-
color: ${({ theme }) => theme.textAlertRed};
75-
${typography.hint}
76-
77-
${variables.SCREEN_QUERY.MOBILE} {
78-
grid-column: 1 / 3;
79-
margin-left: 20px;
80-
}
81-
`;
82-
83-
const CryptoBalanceWrapper = styled(StyledCol)`
84-
flex: 1;
85-
white-space: nowrap;
86-
flex-direction: column;
87-
align-items: flex-start;
88-
justify-content: center;
89-
gap: ${spacingsPx.xxxs};
90-
91-
${variables.SCREEN_QUERY.MOBILE} {
92-
grid-column: 1 / 3;
93-
margin-left: 20px;
94-
}
95-
`;
96-
97-
const FiatBalanceWrapper = styled.div``;
98-
99-
const ExchangeRateWrapper = styled(StyledCol)`
100-
font-variant-numeric: tabular-nums;
101-
justify-content: right;
102-
padding-right: ${spacingsPx.xxxl};
103-
`;
104-
105-
const ExchangeRateWrapper7Days = styled(StyledCol)`
106-
font-variant-numeric: tabular-nums;
107-
padding-right: 0;
108-
`;
109-
110-
const BuyButtonWrapper = styled(StyledCol)`
111-
justify-content: right;
112-
`;
113-
114-
const StyledArrowIcon = styled(ArrowIcon)`
115-
margin: 0 ${spacingsPx.md};
116-
`;
117-
118-
// eslint-disable-next-line local-rules/no-override-ds-component
119-
const SkeletonRectangleLast = styled(SkeletonRectangle)`
120-
margin-right: ${spacingsPx.md};
121-
`;
122-
123-
// eslint-disable-next-line local-rules/no-override-ds-component
124-
const StyledIcon = styled(Icon)`
125-
padding-left: 4px;
126-
padding-bottom: 2px;
127-
`;
21+
import { Text } from '@trezor/components';
12822

12923
interface AssetTableProps {
13024
network: Network;
@@ -135,7 +29,7 @@ interface AssetTableProps {
13529
}
13630

13731
export const AssetRow = memo(
138-
({ network, failed, cryptoValue, isLastRow, assetsFiatBalances }: AssetTableProps) => {
32+
({ network, failed, cryptoValue, assetsFiatBalances }: AssetTableProps) => {
13933
const { symbol } = network;
14034
const dispatch = useDispatch();
14135
const theme = useTheme();
@@ -157,60 +51,62 @@ export const AssetRow = memo(
15751
};
15852

15953
return (
160-
<AssetTableRowGrid onClick={handleRowClick}>
161-
<CoinLogoWrapper>
162-
<AssetCoinLogo
163-
symbol={network.symbol}
164-
assetsFiatBalances={assetsFiatBalances}
165-
/>
166-
</CoinLogoWrapper>
167-
168-
<CoinNameWrapper $isLastRow={isLastRow}>
169-
<AssetCoinName network={network} />
170-
</CoinNameWrapper>
171-
172-
{!failed ? (
173-
<CryptoBalanceWrapper
174-
$isLastRow={isLastRow}
175-
data-testid={`@asset-card/${symbol}/balance`}
176-
>
177-
<FiatBalanceWrapper>
54+
<Table.Row onClick={handleRowClick}>
55+
<Table.Cell colSpan={3}>
56+
<Row>
57+
<AssetCoinLogo
58+
symbol={network.symbol}
59+
assetsFiatBalances={assetsFiatBalances}
60+
/>
61+
<AssetCoinName network={network} />
62+
</Row>
63+
</Table.Cell>
64+
65+
<Table.Cell>
66+
{!failed ? (
67+
<Column
68+
flex="1"
69+
alignItems="flex-start"
70+
justifyContent="center"
71+
gap={spacings.xxxs}
72+
data-testid={`@asset-card/${symbol}/balance`}
73+
>
17874
<FiatValue amount={cryptoValue} symbol={symbol} />
179-
</FiatBalanceWrapper>
180-
181-
<CoinBalanceContainer>
182-
<AmountUnitSwitchWrapper symbol={symbol}>
183-
<CoinBalance value={cryptoValue} symbol={symbol} />
184-
</AmountUnitSwitchWrapper>
185-
</CoinBalanceContainer>
186-
</CryptoBalanceWrapper>
187-
) : (
188-
<FailedCol $isLastRow={isLastRow}>
189-
<Translation id="TR_DASHBOARD_ASSET_FAILED" />
19075

191-
<StyledIcon
192-
name="warningTriangle"
193-
color={theme.legacy.TYPE_RED}
194-
size={14}
195-
/>
196-
</FailedCol>
197-
)}
198-
<ExchangeRateWrapper $isLastRow={isLastRow}>
199-
{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}
200-
</ExchangeRateWrapper>
201-
<ExchangeRateWrapper7Days $isLastRow={isLastRow}>
202-
{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}
203-
</ExchangeRateWrapper7Days>
204-
<BuyButtonWrapper $isLastRow={isLastRow}>
205-
{!isTestnet(symbol) && (
206-
<CoinmarketBuyButton
207-
symbol={symbol}
208-
data-testid={`@dashboard/assets/table/${symbol}/buy-button`}
209-
/>
76+
<Text typographyStyle="hint" color={theme.textSubdued}>
77+
<AmountUnitSwitchWrapper symbol={symbol}>
78+
<CoinBalance value={cryptoValue} symbol={symbol} />
79+
</AmountUnitSwitchWrapper>
80+
</Text>
81+
</Column>
82+
) : (
83+
<Text variant="destructive" typographyStyle="hint" textWrap="nowrap">
84+
<Row gap={spacings.xxs}>
85+
<Icon
86+
name="warningTriangle"
87+
color={theme.legacy.TYPE_RED}
88+
size={14}
89+
/>
90+
<Translation id="TR_DASHBOARD_ASSET_FAILED" />
91+
</Row>
92+
</Text>
21093
)}
211-
<StyledArrowIcon size={16} name="arrowRight" color={theme.iconSubdued} />
212-
</BuyButtonWrapper>
213-
</AssetTableRowGrid>
94+
</Table.Cell>
95+
<Table.Cell>{!isTestnet(symbol) && <PriceTicker symbol={symbol} />}</Table.Cell>
96+
97+
<Table.Cell>{!isTestnet(symbol) && <TrendTicker symbol={symbol} />}</Table.Cell>
98+
<Table.Cell align="right" colSpan={2}>
99+
<Row gap={16}>
100+
{!isTestnet(symbol) && (
101+
<CoinmarketBuyButton
102+
symbol={symbol}
103+
data-testid={`@dashboard/assets/table/${symbol}/buy-button`}
104+
/>
105+
)}
106+
<IconButton icon="arrowRight" size="small" variant="tertiary" />
107+
</Row>
108+
</Table.Cell>
109+
</Table.Row>
214110
);
215111
},
216112
);
@@ -221,28 +117,28 @@ export const AssetRowSkeleton = (props: { animate?: boolean }) => {
221117
const animate = props.animate ?? shouldAnimate;
222118

223119
return (
224-
<AssetTableRowGrid>
225-
<CoinLogoWrapper>
226-
<AssetCoinLogoSkeleton />
227-
</CoinLogoWrapper>
228-
<CoinNameWrapper $isLastRow>
229-
<Coin>
230-
<SkeletonRectangle animate={animate} width={150} />
231-
</Coin>
232-
</CoinNameWrapper>
233-
<CryptoBalanceWrapper $isLastRow>
120+
<Table.Row>
121+
<Table.Cell colSpan={3}>
122+
<Row>
123+
<AssetCoinLogoSkeleton />
124+
<SkeletonRectangle animate={animate} width={100} />
125+
</Row>
126+
</Table.Cell>
127+
<Table.Cell>
234128
<SkeletonRectangle animate={animate} width={100} />
235-
</CryptoBalanceWrapper>
236-
237-
<ExchangeRateWrapper $isLastRow>
129+
</Table.Cell>
130+
<Table.Cell>
238131
<SkeletonRectangle animate={animate} />
239-
</ExchangeRateWrapper>
240-
<ExchangeRateWrapper $isLastRow>
132+
</Table.Cell>
133+
<Table.Cell>
241134
<SkeletonRectangle animate={animate} width={50} />
242-
</ExchangeRateWrapper>
243-
<BuyButtonWrapper $isLastRow>
244-
<SkeletonRectangleLast animate={animate} width={58} height={38} borderRadius={19} />
245-
</BuyButtonWrapper>
246-
</AssetTableRowGrid>
135+
</Table.Cell>
136+
<Table.Cell colSpan={2}>
137+
<Row gap={16}>
138+
<SkeletonRectangle animate={animate} width={58} height={38} borderRadius={19} />
139+
<SkeletonRectangle animate={animate} width={38} height={38} borderRadius={25} />
140+
</Row>
141+
</Table.Cell>
142+
</Table.Row>
247143
);
248144
};

Diff for: ‎packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx

+33-22
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import { AssetFiatBalance } from '@suite-common/assets';
22
import { AssetRow, AssetRowSkeleton } from './AssetRow';
3-
import { AssetTableHeader } from './AssetTableHeader';
43
import { Network } from '@suite-common/wallet-config';
54
import { BigNumber } from '@trezor/utils/src/bigNumber';
6-
import styled from 'styled-components';
7-
import { spacingsPx } from '@trezor/theme';
85

9-
const Table = styled.div`
10-
padding-left: ${spacingsPx.xxs};
11-
padding-right: ${spacingsPx.xxs};
12-
padding-bottom: ${spacingsPx.xxs};
13-
width: 100%;
14-
`;
6+
import { Table } from '@trezor/components';
7+
import { spacings } from '@trezor/theme';
8+
import { Translation } from 'src/components/suite';
159

1610
export interface AssetTableRowType {
1711
symbol: string;
@@ -31,18 +25,35 @@ export const AssetTable = ({
3125
assetsData,
3226
assetsFiatBalances,
3327
}: AssetTableProps) => (
34-
<Table>
35-
<AssetTableHeader />
36-
{assetsData.map((asset, i) => (
37-
<AssetRow
38-
key={asset.symbol}
39-
network={asset.network}
40-
failed={asset.assetFailed}
41-
cryptoValue={asset.assetBalance.toFixed()}
42-
isLastRow={i === assetsData.length - 1 && !discoveryInProgress}
43-
assetsFiatBalances={assetsFiatBalances}
44-
/>
45-
))}
46-
{discoveryInProgress && <AssetRowSkeleton />}
28+
<Table highlightRowOnHover={true} margin={{ top: spacings.md, bottom: spacings.md }}>
29+
<Table.Header>
30+
<Table.Row>
31+
<Table.Cell colSpan={3}>
32+
<Translation id="TR_ASSETS" />
33+
</Table.Cell>
34+
<Table.Cell>
35+
<Translation id="TR_VALUES" />
36+
</Table.Cell>
37+
<Table.Cell>
38+
<Translation id="TR_EXCHANGE_RATE" />
39+
</Table.Cell>
40+
<Table.Cell colSpan={3}>
41+
<Translation id="TR_7D_CHANGE" />
42+
</Table.Cell>
43+
</Table.Row>
44+
</Table.Header>
45+
<Table.Body>
46+
{assetsData.map((asset, i) => (
47+
<AssetRow
48+
key={asset.symbol}
49+
network={asset.network}
50+
failed={asset.assetFailed}
51+
cryptoValue={asset.assetBalance.toFixed()}
52+
isLastRow={i === assetsData.length - 1 && !discoveryInProgress}
53+
assetsFiatBalances={assetsFiatBalances}
54+
/>
55+
))}
56+
{discoveryInProgress && <AssetRowSkeleton />}
57+
</Table.Body>
4758
</Table>
4859
);

0 commit comments

Comments
 (0)