diff --git a/packages/suite-data/files/translations/en.json b/packages/suite-data/files/translations/en.json index 9875fec7e657..ae49bc865f58 100644 --- a/packages/suite-data/files/translations/en.json +++ b/packages/suite-data/files/translations/en.json @@ -1740,6 +1740,7 @@ "TR_STAKE_UNSTAKED_AND_READY_TO_CLAIM": "Unstaked and ready to claim", "TR_STAKE_UNSTAKE_TO_CLAIM": "Unstake to claim", "TR_STAKE_UNSTAKING": "Unstaking", + "TR_STAKE_UNSTAKING_APPROXIMATE": "Approximate ETH available instantly", "TR_STAKE_UNSTAKING_PERIOD": "Unstaking period", "TR_STAKE_UNSTAKING_TAKES": "Unstaking usually takes about 3 days. Once completed, you can trade or send it.", "TR_STAKE_WAITING_TO_BE_ADDED": "Your {symbol} is waiting to be added {br} to the staking pool.", diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Options.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Options.tsx index 0911e60a0de9..eb0864624d01 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Options.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/Options.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import styled from 'styled-components'; import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite'; import { Paragraph, Radio } from '@trezor/components'; @@ -61,16 +60,14 @@ const InputsWrapper = styled.div<{ $isShown: boolean }>` display: ${({ $isShown }) => ($isShown ? 'block' : 'none')}; `; -type UnstakeOptions = 'all' | 'rewards' | 'other'; - interface OptionsProps { symbol: NetworkSymbol; } export const Options = ({ symbol }: OptionsProps) => { const selectedAccount = useSelector(selectSelectedAccount); + const { unstakeOption, setUnstakeOption } = useUnstakeEthFormContext(); - const [unstakeOption, setUnstakeOption] = useState('all'); const isRewardsSelected = unstakeOption === 'rewards'; const isAllSelected = unstakeOption === 'all'; const isOtherAmountSelected = unstakeOption === 'other'; diff --git a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx index 8b303020b3f9..f8a68bc154f3 100644 --- a/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx +++ b/packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; -import { Button, Divider, Paragraph, Warning } from '@trezor/components'; +import { Button, Divider, Icon, Paragraph, Tooltip, Warning } from '@trezor/components'; import { spacingsPx } from '@trezor/theme'; -import { Translation } from 'src/components/suite'; +import { FormattedCryptoAmount, Translation } from 'src/components/suite'; import { useDevice, useSelector } from 'src/hooks/suite'; import { useUnstakeEthFormContext } from 'src/hooks/wallet/useUnstakeEthForm'; import { selectSelectedAccount } from 'src/reducers/wallet/selectedAccountReducer'; @@ -44,6 +44,19 @@ const UpToDaysWrapper = styled.div` border-top: 1px solid ${({ theme }) => theme.borderElevation2}; `; +const ApproximateEthWrapper = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + padding: ${spacingsPx.xxs} 0 ${spacingsPx.md}; +`; + +const ApproximateEthTitleWrapper = styled.div` + display: flex; + gap: ${spacingsPx.xxs}; + align-items: center; +`; + export const UnstakeEthForm = () => { const { device, isLocked } = useDevice(); const selectedAccount = useSelector(selectSelectedAccount); @@ -55,6 +68,8 @@ export const UnstakeEthForm = () => { handleSubmit, watch, signTx, + approximatedEthAmount, + unstakeOption, } = useUnstakeEthFormContext(); const { symbol } = account; @@ -66,6 +81,7 @@ export const UnstakeEthForm = () => { const hasValues = Boolean(watch(FIAT_INPUT) || watch(CRYPTO_INPUT)); // used instead of formState.isValid, which is sometimes returning false even if there are no errors const formIsValid = Object.keys(errors).length === 0; + const isUnstakeOptionOther = unstakeOption === 'other'; const { canClaim = false, claimableAmount = '0' } = getAccountEverstakeStakingPool(selectedAccount) ?? {}; @@ -115,6 +131,34 @@ export const UnstakeEthForm = () => { /> + {isUnstakeOptionOther && ( + + + + + + + + } + > + + + + + {approximatedEthAmount && ( + + )} + + )} +