diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx index c9af9c2081cc..45d64b2a0812 100644 --- a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/StakingCard.tsx @@ -4,7 +4,7 @@ import { Button, Card, Icon, variables } from '@trezor/components'; import { spacingsPx } from '@trezor/theme'; import { selectAccountStakeTransactions } from '@suite-common/wallet-core'; import { isPending } from '@suite-common/wallet-utils'; -import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite'; +import { FiatValue, Translation } from 'src/components/suite'; import { useDispatch, useSelector } from 'src/hooks/suite'; import { openModal } from 'src/actions/suite/modalActions'; import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer'; @@ -13,6 +13,7 @@ import { ProgressLabels } from './ProgressLabels/ProgressLabels'; import { useProgressLabelsData } from '../hooks/useProgressLabelsData'; import { useIsTxStatusShown } from '../hooks/useIsTxStatusShown'; import { getAccountEverstakeStakingPool } from 'src/utils/wallet/stakingUtils'; +import { TrimmedCryptoAmount } from './TrimmedCryptoAmount'; const StyledCard = styled(Card)` padding: ${spacingsPx.md}; @@ -38,13 +39,6 @@ const AmountHeading = styled.div` color: ${({ theme }) => theme.textSubdued}; `; -const StyledFormattedCryptoAmount = styled(FormattedCryptoAmount)<{ $isRewards?: boolean }>` - display: block; - margin-top: ${spacingsPx.xs}; - font-size: ${variables.FONT_SIZE.H2}; - color: ${({ $isRewards = false, theme }) => ($isRewards ? theme.textPrimaryDefault : '')}; -`; - const StyledFiatValue = styled(FiatValue)` display: block; font-size: ${variables.FONT_SIZE.SMALL}; @@ -157,8 +151,7 @@ export const StakingCard = ({ - @@ -178,9 +171,8 @@ export const StakingCard = ({ - - @@ -200,10 +192,10 @@ export const StakingCard = ({ - - diff --git a/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/TrimmedCryptoAmount.tsx b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/TrimmedCryptoAmount.tsx new file mode 100644 index 000000000000..6472c7ada78b --- /dev/null +++ b/packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/TrimmedCryptoAmount.tsx @@ -0,0 +1,50 @@ +import { FormattedCryptoAmount } from 'src/components/suite'; +import styled from 'styled-components'; +import { spacingsPx } from '@trezor/theme'; +import { Tooltip, variables } from '@trezor/components'; +import BigNumber from 'bignumber.js'; + +const StyledFormattedCryptoAmount = styled(FormattedCryptoAmount)<{ + $isRewards?: boolean; + $isSmall?: boolean; +}>` + display: block; + margin-top: ${spacingsPx.xs}; + font-size: ${({ $isSmall }) => ($isSmall ? variables.FONT_SIZE.SMALL : variables.FONT_SIZE.H2)}; + color: ${({ $isRewards = false, theme }) => ($isRewards ? theme.textPrimaryDefault : '')}; +`; + +const DEFAULT_MAX_DECIMAL_PLACES = 5; + +interface TrimmedCryptoAmountProps { + value: string | number; + symbol: string; + maxDecimalPlaces?: number; + isRewards?: boolean; +} + +export const TrimmedCryptoAmount = ({ + value, + symbol, + maxDecimalPlaces = DEFAULT_MAX_DECIMAL_PLACES, + isRewards, +}: TrimmedCryptoAmountProps) => { + const hasDecimals = value.toString().includes('.'); + + if (!hasDecimals) { + return ; + } + + const valueBig = new BigNumber(value); + const trimmedAmount = valueBig.toFixed(maxDecimalPlaces, 1); + + return ( + }> + + + ); +};