fix(total stake pending align): added tooltip and trimmed amount

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 = ({
                             <Translation id="TR_STAKE_TOTAL_PENDING" />
                         </AmountHeading>
 
-                        <StyledFormattedCryptoAmount
-                            isBalance
+                        <TrimmedCryptoAmount
                             value={totalPendingStakeBalance}
                             symbol={selectedAccount?.symbol}
                         />
@@ -178,9 +171,8 @@ export const StakingCard = ({
                         <Icon icon="LOCK_SIMPLE" size={16} />
                         <Translation id="TR_STAKE_STAKE" />
                     </AmountHeading>
-
-                    <StyledFormattedCryptoAmount
-                        isBalance
+                    {/* put trimmed value and wrap it with tooltip */}
+                    <TrimmedCryptoAmount
                         value={depositedBalance}
                         symbol={selectedAccount?.symbol}
                     />
@@ -200,10 +192,10 @@ export const StakingCard = ({
                         <Translation id="TR_STAKE_REWARDS" />
                     </AmountHeading>
 
-                    <StyledFormattedCryptoAmount
-                        $isRewards
+                    <TrimmedCryptoAmount
                         value={restakedReward}
                         symbol={selectedAccount?.symbol}
+                        isRewards
                     />
 
                     <StyledFiatValue
@@ -236,7 +228,7 @@ export const StakingCard = ({
                             </span>
                         </AmountHeading>
 
-                        <StyledFormattedCryptoAmount
+                        <TrimmedCryptoAmount
                             value={withdrawTotalAmount}
                             symbol={selectedAccount?.symbol}
                         />

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 <StyledFormattedCryptoAmount value={value} symbol={symbol} $isRewards={isRewards} />;
+    }
+
+    const valueBig = new BigNumber(value);
+    const trimmedAmount = valueBig.toFixed(maxDecimalPlaces, 1);
+
+    return (
+        <Tooltip content={<StyledFormattedCryptoAmount value={value} symbol={symbol} $isSmall />}>
+            <StyledFormattedCryptoAmount
+                value={trimmedAmount}
+                symbol={symbol}
+                $isRewards={isRewards}
+            />
+        </Tooltip>
+    );
+};