From 7ef4a6b11dce7dfa198e277af6c35b8b74fd0ec9 Mon Sep 17 00:00:00 2001 From: Evgenii Voznyuk Date: Wed, 24 Apr 2024 13:40:46 +0300 Subject: [PATCH 1/2] feat(staking): total stake pending align --- packages/suite/src/support/messages.ts | 2 +- .../components/StakingCard.tsx | 94 ++++++------------- 2 files changed, 30 insertions(+), 66 deletions(-) diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts index 389bf3355fc..7362dc5d2f5 100644 --- a/packages/suite/src/support/messages.ts +++ b/packages/suite/src/support/messages.ts @@ -8783,7 +8783,7 @@ export default defineMessages({ }, TR_STAKE_TOTAL_PENDING: { id: 'TR_STAKE_TOTAL_PENDING', - defaultMessage: 'Total stake pending:', + defaultMessage: 'Total stake pending', }, TR_STAKE_LAST_STAKE_REQUEST_STATE: { id: 'TR_STAKE_LAST_STAKE_REQUEST_STATE', 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 5f3db6eb8ca..c9af9c2081c 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 @@ -18,33 +18,15 @@ const StyledCard = styled(Card)` padding: ${spacingsPx.md}; `; -const EnteringAmountInfo = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - gap: ${spacingsPx.xxs}; - flex-wrap: wrap; - padding: ${spacingsPx.xxxs} ${spacingsPx.xs} ${spacingsPx.sm} ${spacingsPx.xs}; - font-size: ${variables.FONT_SIZE.SMALL}; -`; - -const EnteringAmountsWrapper = styled.div` - font-size: ${variables.FONT_SIZE.NORMAL}; -`; - -const EnteringFiatValueWrapper = styled.span` - color: ${({ theme }) => theme.textSubdued}; -`; - -const AmountsWrapper = styled.div<{ $isUnstakePending: boolean }>` +const AmountsWrapper = styled.div<{ $isStakeOrUnstakePending: boolean }>` display: flex; gap: ${spacingsPx.sm} ${spacingsPx.xs}; flex-wrap: wrap; - justify-content: ${({ $isUnstakePending }) => - $isUnstakePending ? 'space-between' : 'flex-start'}; + justify-content: ${({ $isStakeOrUnstakePending }) => + $isStakeOrUnstakePending ? 'space-between' : 'flex-start'}; & > div { - flex: ${({ $isUnstakePending }) => ($isUnstakePending ? '' : '1 0 300px')}; + flex: ${({ $isStakeOrUnstakePending }) => ($isStakeOrUnstakePending ? '' : '1 0 300px')}; } `; @@ -82,14 +64,6 @@ const Info = styled.div` color: ${({ theme }) => theme.textSubdued}; `; -const NoMarginInfo = styled(Info)` - margin: 0; -`; - -const SmMarginInfo = styled(Info)` - margin: 0 0 ${spacingsPx.xxxs} ${spacingsPx.xs}; -`; - const ButtonsWrapper = styled.div` margin-top: 66px; display: flex; @@ -171,45 +145,34 @@ export const StakingCard = ({ {(isStakeConfirming || isTxStatusShown) && ( - - }} - /> - - - - - - - -
- {' '} - - - {({ value }) => value && ({value})} - - -
- - - - - - - )} - + + {isStakePending && ( +
+ + + + + + + + + {({ value }) => (value ? {value} : null)} + +
+ )} +
@@ -217,6 +180,7 @@ export const StakingCard = ({ From 4e9ccd75d46b8329c5362f95ba2bdcc0d65a3dca Mon Sep 17 00:00:00 2001 From: Evgenii Voznyuk Date: Sun, 28 Apr 2024 19:31:22 +0300 Subject: [PATCH 2/2] fix(total stake pending align): added tooltip and trimmed amount --- .../components/StakingCard.tsx | 22 +++----- .../components/TrimmedCryptoAmount.tsx | 50 +++++++++++++++++++ 2 files changed, 57 insertions(+), 15 deletions(-) create mode 100644 packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/TrimmedCryptoAmount.tsx 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 c9af9c2081c..6dc9cf086d9 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 = ({ - @@ -179,8 +172,7 @@ 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 00000000000..6472c7ada78 --- /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 ( + }> + + + ); +};