diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetCoinLogo.tsx index a4a32706f6ab..543494d87130 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 = { @@ -53,8 +55,12 @@ export const AssetCoinLogo = ({ symbol, assetsFiatBalances, index }: AssetCoinLo ); }; -export const AssetCoinLogoSkeleton = () => ( +type AssetCoinLogoSkeletonProps = { + animate: boolean; +}; + +export const AssetCoinLogoSkeleton = ({ animate }: AssetCoinLogoSkeletonProps) => ( - + ); diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRow.tsx index 9cf0617f2d02..e53b7f5d89a3 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 { 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, @@ -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; @@ -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(); @@ -157,92 +51,62 @@ export const AssetRow = memo( }; return ( - - - - - - - - - - {!failed ? ( - - + + + + + + + + + + {!failed ? ( + - - - - - - - - ) : ( - - - - - - )} - - {!isTestnet(symbol) && } - - - {!isTestnet(symbol) && } - - - {!isTestnet(symbol) && ( - + + + + + + + ) : ( + + + + + + )} - - - + + {!isTestnet(symbol) && } + + {!isTestnet(symbol) && } + + + {!isTestnet(symbol) && ( + + )} + + + + ); }, ); - -export const AssetRowSkeleton = (props: { animate?: boolean }) => { - const { shouldAnimate } = useLoadingSkeleton(); - - const animate = props.animate ?? shouldAnimate; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRowSkeleton.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRowSkeleton.tsx new file mode 100644 index 000000000000..144931ace3d6 --- /dev/null +++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetRowSkeleton.tsx @@ -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 ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx index cc7d228fc12a..82ba9734c3e5 100644 --- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx +++ b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTable.tsx @@ -1,17 +1,12 @@ import { AssetFiatBalance } from '@suite-common/assets'; -import { AssetRow, AssetRowSkeleton } from './AssetRow'; -import { AssetTableHeader } from './AssetTableHeader'; +import { AssetRow } from './AssetRow'; +import { AssetRowSkeleton } from './AssetRowSkeleton'; 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'; +import { Translation } from 'src/components/suite'; export interface AssetTableRowType { symbol: string; @@ -31,18 +26,35 @@ 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 deleted file mode 100644 index 2fc928a4edd1..000000000000 --- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableHeader.tsx +++ /dev/null @@ -1,43 +0,0 @@ -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}; -`; - -export const AssetTableHeader = () => ( - -
{/* Logo */} -
- -
-
- -
- - - -
- -
-
{/* Buy Button */} - -); diff --git a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableRowGrid.tsx b/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableRowGrid.tsx deleted file mode 100644 index 95b330b5454c..000000000000 --- a/packages/suite/src/views/dashboard/AssetsView/AssetTable/AssetTableRowGrid.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import styled, { css } from 'styled-components'; -import { borders, mapElevationToBackground } from '@trezor/theme'; -import { styledHoverOnParentOfArrowIcon } from '../ArrowIcon'; -import { Elevation, nextElevation } from '@trezor/theme/src/elevation'; -import { useElevation } from '@trezor/components'; -import { HTMLAttributes } from 'react'; - -const StyledAssetTableRowGrid = styled.div<{ $elevation: Elevation }>` - display: grid; - overflow: hidden; - grid-template-columns: 1fr 2fr 2fr 1fr 1fr 1fr; - border-radius: ${borders.radii.xs}; - - ${({ theme, $elevation, onClick }) => - onClick !== undefined - ? css` - cursor: pointer; - - ${styledHoverOnParentOfArrowIcon} - - &:hover { - background: ${mapElevationToBackground({ - theme, - $elevation: nextElevation[$elevation], - })}; - } - ` - : ''}; -`; - -export const AssetTableRowGrid = ({ children, ...props }: HTMLAttributes) => { - const { elevation } = useElevation(); - - return ( - - {children} - - ); -}; 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 && ( + + + + + )} )}