Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(unstaking): instant unstake forecasting fix
Browse files Browse the repository at this point in the history
EvgeniiVoznyuk authored and dev-pvl committed Oct 2, 2024
1 parent b18c593 commit f0507c1
Showing 4 changed files with 45 additions and 8 deletions.
1 change: 0 additions & 1 deletion packages/suite-data/files/translations/en.json
Original file line number Diff line number Diff line change
@@ -1797,7 +1797,6 @@
"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_PROCESS": "Unstaking process",
"TR_STAKE_UNSTAKING_TAKES": "Unstaking currently takes {count, plural, one {# day} other {# days}}. Once completed, you can trade or send your funds.",
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from 'styled-components';
import { Button, Divider, Icon, Paragraph, Tooltip, Banner } from '@trezor/components';
import { spacingsPx } from '@trezor/theme';
import { FormattedCryptoAmount, Translation } from 'src/components/suite';
import { 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';
@@ -12,6 +12,7 @@ import UnstakeFees from './Fees';
import { selectValidatorsQueueData } from '@suite-common/wallet-core';
import { getAccountEverstakeStakingPool } from '@suite-common/wallet-utils';
import { useMessageSystemStaking } from 'src/hooks/suite/useMessageSystemStaking';
import { ApproximateEthAmount } from 'src/views/wallet/staking/components/EthStakingDashboard/components/ApproximateEthAmount';

// eslint-disable-next-line local-rules/no-override-ds-component
const GreyP = styled(Paragraph)`
@@ -140,7 +141,12 @@ export const UnstakeEthForm = () => {
<ApproximateEthWrapper>
<ApproximateEthTitleWrapper>
<GreyP>
<Translation id="TR_STAKE_UNSTAKING_APPROXIMATE" />
<Translation
id="TR_STAKE_UNSTAKING_APPROXIMATE"
values={{
symbol: symbol.toUpperCase(),
}}
/>
</GreyP>

<Tooltip
@@ -154,11 +160,9 @@ export const UnstakeEthForm = () => {
</ApproximateEthTitleWrapper>

{approximatedEthAmount && (
<FormattedCryptoAmount
disableHiddenPlaceholder
<ApproximateEthAmount
value={approximatedEthAmount}
symbol={symbol}
isBalance
symbol={symbol.toUpperCase()}
/>
)}
</ApproximateEthWrapper>
3 changes: 2 additions & 1 deletion packages/suite/src/support/messages.ts
Original file line number Diff line number Diff line change
@@ -8819,8 +8819,9 @@ export default defineMessages({
},
TR_STAKE_UNSTAKING_APPROXIMATE: {
id: 'TR_STAKE_UNSTAKING_APPROXIMATE',
defaultMessage: 'Approximate ETH available instantly',
defaultMessage: 'Approximate {symbol} available instantly',
},

TR_STAKE_UNSTAKING_APPROXIMATE_DESCRIPTION: {
id: 'TR_STAKE_UNSTAKING_APPROXIMATE_DESCRIPTION',
defaultMessage:
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { FormattedCryptoAmount } from 'src/components/suite';
import styled from 'styled-components';
import { Tooltip, variables } from '@trezor/components';
import BigNumber from 'bignumber.js';

Check failure on line 4 in packages/suite/src/views/wallet/staking/components/EthStakingDashboard/components/ApproximateEthAmount.tsx

GitHub Actions / Linting and formatting

'bignumber.js' should be listed in the project's dependencies. Run 'npm i -S bignumber.js' to add it

const StyledFormattedCryptoAmount = styled(FormattedCryptoAmount)`
display: block;
font-size: ${variables.FONT_SIZE.NORMAL};
`;

interface ApproximateEthAmountProps {
value: string | number;
symbol: string;
}

const DEFAULT_MAX_DECIMAL_PLACES = 5;

export const ApproximateEthAmount = ({ value, symbol }: ApproximateEthAmountProps) => {
const hasDecimals = value.toString().includes('.');

if (!hasDecimals) {
return <StyledFormattedCryptoAmount value={value} symbol={symbol} />;
}

const valueBig = new BigNumber(value);
const trimmedAmount = valueBig.toFixed(DEFAULT_MAX_DECIMAL_PLACES, 1);

return (
<Tooltip content={<StyledFormattedCryptoAmount value={value} symbol={symbol} />}>
<StyledFormattedCryptoAmount value={trimmedAmount} symbol={symbol} />
</Tooltip>
);
};

0 comments on commit f0507c1

Please sign in to comment.