Skip to content

Commit

Permalink
feat(staking): total stake pending align
Browse files Browse the repository at this point in the history
  • Loading branch information
EvgeniiVoznyuk committed Apr 24, 2024
1 parent 621a147 commit 7ef4a6b
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 66 deletions.
2 changes: 1 addition & 1 deletion packages/suite/src/support/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')};
}
`;

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -171,52 +145,42 @@ export const StakingCard = ({
<StyledCard>
{(isStakeConfirming || isTxStatusShown) && (
<InfoBox>
<EnteringAmountInfo>
<Translation
id="TR_STAKE_WAITING_TO_BE_ADDED"
values={{ symbol: selectedAccount?.symbol?.toUpperCase(), br: <br /> }}
/>

<EnteringAmountsWrapper>
<NoMarginInfo>
<Icon icon="CLOCK" size={12} />
<Translation id="TR_STAKE_TOTAL_PENDING" />
</NoMarginInfo>

<div>
<FormattedCryptoAmount
value={totalPendingStakeBalance}
symbol={selectedAccount?.symbol}
/>{' '}
<EnteringFiatValueWrapper>
<FiatValue
amount={totalPendingStakeBalance}
symbol={selectedAccount?.symbol}
showApproximationIndicator
>
{({ value }) => value && <span>({value})</span>}
</FiatValue>
</EnteringFiatValueWrapper>
</div>
</EnteringAmountsWrapper>
</EnteringAmountInfo>

<SmMarginInfo>
<Icon icon="INFO" size={12} />
<Translation id="TR_STAKE_LAST_STAKE_REQUEST_STATE" />
</SmMarginInfo>
<ProgressLabels labels={progressLabelsData} />
</InfoBox>
)}

<AmountsWrapper $isUnstakePending={isPendingUnstakeShown}>
<AmountsWrapper $isStakeOrUnstakePending={isPendingUnstakeShown || isStakePending}>
{isStakePending && (
<div>
<AmountHeading>
<Icon icon="SPINNER" size={16} />
<Translation id="TR_STAKE_TOTAL_PENDING" />
</AmountHeading>

<StyledFormattedCryptoAmount
isBalance
value={totalPendingStakeBalance}
symbol={selectedAccount?.symbol}
/>

<StyledFiatValue
amount={totalPendingStakeBalance}
symbol={selectedAccount?.symbol}
showApproximationIndicator
>
{({ value }) => (value ? <span>{value}</span> : null)}
</StyledFiatValue>
</div>
)}

<div>
<AmountHeading>
<Icon icon="LOCK_SIMPLE" size={16} />
<Translation id="TR_STAKE_STAKE" />
</AmountHeading>

<StyledFormattedCryptoAmount
isBalance
value={depositedBalance}
symbol={selectedAccount?.symbol}
/>
Expand Down

0 comments on commit 7ef4a6b

Please sign in to comment.