diff --git a/packages/components/src/components/Table/Table.tsx b/packages/components/src/components/Table/Table.tsx
index 1bf4303411af..55091617be7c 100644
--- a/packages/components/src/components/Table/Table.tsx
+++ b/packages/components/src/components/Table/Table.tsx
@@ -52,6 +52,9 @@ export const Table = ({ children, margin, colWidths }: TableProps) => {
);
diff --git a/packages/components/src/components/Table/TableCell.tsx b/packages/components/src/components/Table/TableCell.tsx
index 1022b7a5c970..7f47f04c5bb2 100644
--- a/packages/components/src/components/Table/TableCell.tsx
+++ b/packages/components/src/components/Table/TableCell.tsx
@@ -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;
}
`;
diff --git a/packages/components/src/components/Table/TableRow.tsx b/packages/components/src/components/Table/TableRow.tsx
index 8e547eb80a98..a51f2e1e2bab 100644
--- a/packages/components/src/components/Table/TableRow.tsx
+++ b/packages/components/src/components/Table/TableRow.tsx
@@ -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 (
-
+
{children}
);
diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx
index a4a32706f6ab..dfcf32fe33ef 100644
--- a/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx
+++ b/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx
@@ -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 = {
diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx
index 9cf0617f2d02..9bdbaea129bc 100644
--- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx
+++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx
@@ -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,
@@ -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';
@@ -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}
@@ -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
@@ -157,51 +117,54 @@ export const AssetRow = memo(
};
return (
-
-
-
-
-
-
-
-
-
- {!failed ? (
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
-
-
-
+
+
+
-
- )}
-
- {!isTestnet(symbol) && }
-
-
- {!isTestnet(symbol) && }
-
-
+
+
+
+
+
+ {!failed ? (
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+ )}
+
+
+
+ {!isTestnet(symbol) && }
+
+
+
+
+
+ {!isTestnet(symbol) && }
+
+
+
{!isTestnet(symbol) && (
)}
-
-
+
+
);
},
);
@@ -221,28 +184,28 @@ export const AssetRowSkeleton = (props: { animate?: boolean }) => {
const animate = props.animate ?? shouldAnimate;
return (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+ {/* Arrow */}
+
);
};
diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx
index cc7d228fc12a..93e08ac6b1a0 100644
--- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx
+++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx
@@ -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;
@@ -31,18 +25,20 @@ export const AssetTable = ({
assetsData,
assetsFiatBalances,
}: AssetTableProps) => (
-
+
- {assetsData.map((asset, i) => (
-
- ))}
- {discoveryInProgress && }
+
+ {assetsData.map((asset, i) => (
+
+ ))}
+ {discoveryInProgress && }
+
);
diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx
index 2fc928a4edd1..684fd56cbd18 100644
--- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx
+++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx
@@ -1,43 +1,22 @@
-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 = () => (
-
- {/* Logo */}
-
-
-
-
-
-
- {/* Buy Button */}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx
index 0e5dfc4c0458..91e036164889 100644
--- a/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx
+++ b/packages/suite/src/views/dashboard/AssetsView/AssetsView.tsx
@@ -1,7 +1,7 @@
import styled, { useTheme } from 'styled-components';
import { BigNumber } from '@trezor/utils/src/bigNumber';
-import { Icon, Button, LoadingContent, Card, Column } from '@trezor/components';
+import { Icon, Button, LoadingContent, Card } from '@trezor/components';
import { selectCurrentFiatRates, selectDeviceSupportedNetworks } from '@suite-common/wallet-core';
import { DashboardSection } from 'src/components/dashboard';
@@ -203,19 +203,17 @@ export const AssetsView = () => {
>
) : (
-
-
- {isError && (
-
-
-
-
- )}
-
+
+ {isError && (
+
+
+
+
+ )}
)}