fix(suite): staking fraction buttons tooltip

trezor · Oct 17, 2024 · 24931a9 · 24931a9
1 parent 67ebaa5
commit 24931a9
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 49 deletions.
diff --git a/packages/suite/src/components/suite/FormFractionButtons.tsx b/packages/suite/src/components/suite/FormFractionButtons.tsx
@@ -53,67 +53,71 @@ export const FormFractionButtons = ({
         <Flex>
             <Tooltip
                 content={
-                    <Translation
-                        id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
-                        values={{
-                            amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                            symbol: symbol.toUpperCase(),
-                        }}
-                    />
+                    is10PercentDisabled && (
+                        <Translation
+                            id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
+                            values={{
+                                amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
+                                symbol: symbol.toUpperCase(),
+                            }}
+                        />
+                    )
                 }
                 cursor="pointer"
-                disabled={!is10PercentDisabled}
             >
                 <TinyButton isDisabled={is10PercentDisabled} onClick={() => setRatioAmount(10)}>
                     10%
                 </TinyButton>
             </Tooltip>
             <Tooltip
                 content={
-                    <Translation
-                        id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
-                        values={{
-                            amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                            symbol: symbol.toUpperCase(),
-                        }}
-                    />
+                    is25PercentDisabled && (
+                        <Translation
+                            id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
+                            values={{
+                                amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
+                                symbol: symbol.toUpperCase(),
+                            }}
+                        />
+                    )
                 }
                 cursor="pointer"
-                disabled={!is25PercentDisabled}
             >
                 <TinyButton isDisabled={is25PercentDisabled} onClick={() => setRatioAmount(4)}>
                     25%
                 </TinyButton>
             </Tooltip>
             <Tooltip
                 content={
-                    <Translation
-                        id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
-                        values={{
-                            amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                            symbol: symbol.toUpperCase(),
-                        }}
-                    />
+                    is50PercentDisabled && (
+                        <Translation
+                            id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
+                            values={{
+                                amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
+                                symbol: symbol.toUpperCase(),
+                            }}
+                        />
+                    )
                 }
                 cursor="pointer"
-                disabled={!is50PercentDisabled}
             >
                 <TinyButton isDisabled={is50PercentDisabled} onClick={() => setRatioAmount(2)}>
                     50%
                 </TinyButton>
             </Tooltip>
             <Tooltip
                 content={
-                    <Translation
-                        id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
-                        values={{
-                            amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
-                            symbol: symbol.toUpperCase(),
-                        }}
-                    />
+                    isMaxDisabled && (
+                        <Translation
+                            id="TR_STAKE_MIN_AMOUNT_TOOLTIP"
+                            values={{
+                                amount: MIN_ETH_AMOUNT_FOR_STAKING.toString(),
+                                symbol: symbol.toUpperCase(),
+                            }}
+                        />
+                    )
                 }
                 cursor="pointer"
-                disabled={!is50PercentDisabled}
             >
                 <TinyButton isDisabled={isDisabled || isMaxDisabled} onClick={setMax}>
                     <Translation id="TR_STAKE_MAX" />

diff --git a/...rc/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx b/...rc/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/Inputs.tsx
@@ -69,22 +69,6 @@ export const Inputs = () => {
 
     const shouldShowAmountForWithdrawalWarning =
         isLessAmountForWithdrawalWarningShown || isAmountForWithdrawalWarningShown;
-    const amountForWithdrawalTranslation = isLessAmountForWithdrawalWarningShown ? (
-        <Translation
-            id="TR_STAKE_LEFT_SMALL_AMOUNT_FOR_WITHDRAWAL"
-            values={{
-                symbol: account.symbol.toUpperCase(),
-            }}
-        />
-    ) : (
-        <Translation
-            id="TR_STAKE_LEFT_AMOUNT_FOR_WITHDRAWAL"
-            values={{
-                amount: MIN_ETH_FOR_WITHDRAWALS.toString(),
-                symbol: account.symbol.toUpperCase(),
-            }}
-        />
-    );
 
     return (
         <Column>
@@ -123,7 +107,19 @@ export const Inputs = () => {
             )}
 
             {shouldShowAmountForWithdrawalWarning && (
-                <Banner variant="info">{amountForWithdrawalTranslation}</Banner>
+                <Banner variant="info">
+                    <Translation
+                        id={
+                            isLessAmountForWithdrawalWarningShown
+                                ? 'TR_STAKE_LEFT_SMALL_AMOUNT_FOR_WITHDRAWAL'
+                                : 'TR_STAKE_LEFT_AMOUNT_FOR_WITHDRAWAL'
+                        }
+                        values={{
+                            amount: MIN_ETH_FOR_WITHDRAWALS.toString(),
+                            symbol: account.symbol.toUpperCase(),
+                        }}
+                    />
+                </Banner>
             )}
 
             {isAdviceForWithdrawalWarningShown && (