-
Notifications
You must be signed in to change notification settings - Fork 404
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix(staking): display stake statuses & exit & claim "values" (#4249)
* fix: wrong stake statuses * fix: small UI discrepancies with the figma designs * fix: change to format duration to milliseconds * fix: incorrect status displayed * refactor: validator exit * chore: update @safe-global/safe-gateway-typescript-sdk
- Loading branch information
Showing
15 changed files
with
109 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 37 additions & 23 deletions
60
src/features/stake/components/StakingTxExitDetails/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,51 @@ | ||
| import { Box } from '@mui/material' | ||
| import type { StakingTxExitInfo, TransactionData } from '@safe-global/safe-gateway-typescript-sdk' | ||
| import { NativeStakingExitStatus } from '@safe-global/safe-gateway-typescript-sdk' | ||
| import { Box, Link } from '@mui/material' | ||
| import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk' | ||
| import { NativeStakingStatus } from '@safe-global/safe-gateway-typescript-sdk' | ||
| import FieldsGrid from '@/components/tx/FieldsGrid' | ||
| import TokenAmount from '@/components/common/TokenAmount' | ||
| import StakingStatus from '@/features/stake/components/StakingStatus' | ||
| import { formatDurationFromSeconds } from '@/utils/formatters' | ||
| import { formatDurationFromMilliseconds } from '@/utils/formatters' | ||
| import { BEACON_CHAIN_EXPLORERS } from '@/features/stake/constants' | ||
| import useChainId from '@/hooks/useChainId' | ||
|
|
||
| const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo; txData?: TransactionData }) => { | ||
| const withdrawIn = formatDurationFromSeconds(info.estimatedExitTime + info.estimatedWithdrawalTime, ['days', 'hours']) | ||
| return ( | ||
| <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}> | ||
| <FieldsGrid title="Receive"> | ||
| <TokenAmount | ||
| value={info.value} | ||
| tokenSymbol={info.tokenInfo.symbol} | ||
| decimals={info.tokenInfo.decimals} | ||
| logoUri={info.tokenInfo.logoUri} | ||
| /> | ||
| </FieldsGrid> | ||
| const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => { | ||
| const withdrawIn = formatDurationFromMilliseconds(info.estimatedExitTime + info.estimatedWithdrawalTime, [ | ||
| 'days', | ||
| 'hours', | ||
| ]) | ||
|
|
||
| return ( | ||
| <Box pr={5} display="flex" flexDirection="column" gap={1}> | ||
| <FieldsGrid title="Exit"> | ||
| {info.numValidators} Validator{info.numValidators > 1 ? 's' : ''} | ||
| {info.validators.map((validator: string, index: number) => { | ||
| return ( | ||
| <> | ||
| <BeaconChainLink name={`Validator ${index + 1}`} validator={validator} key={index} /> | ||
| {index < info.validators.length - 1 && ' | '} | ||
| </> | ||
| ) | ||
| })} | ||
| </FieldsGrid> | ||
| {info.status !== NativeStakingStatus.EXITED && <FieldsGrid title="Est. exit time">Up to {withdrawIn}</FieldsGrid>} | ||
|
|
||
| {info.status !== NativeStakingExitStatus.READY_TO_WITHDRAW && ( | ||
| <FieldsGrid title="Est. exit time">Up to {withdrawIn}</FieldsGrid> | ||
| )} | ||
|
|
||
| <FieldsGrid title="Exit"> | ||
| <FieldsGrid title="Validator status"> | ||
| <StakingStatus status={info.status} /> | ||
| </FieldsGrid> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export const BeaconChainLink = ({ validator, name }: { validator: string; name: string }) => { | ||
| const chainId = useChainId() | ||
| return ( | ||
| <Link | ||
| variant="body1" | ||
| target="_blank" | ||
| href={`${ | ||
| BEACON_CHAIN_EXPLORERS[chainId as keyof typeof BEACON_CHAIN_EXPLORERS] ?? 'https://beaconcha.in' | ||
| }/validator/${validator}`} | ||
| > | ||
| {name} | ||
| </Link> | ||
| ) | ||
| } | ||
| export default StakingTxExitDetails |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.