diff --git a/package.json b/package.json index 109e72d88c..a293011eea 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@safe-global/protocol-kit": "^4.1.0", "@safe-global/safe-apps-sdk": "^9.1.0", "@safe-global/safe-deployments": "^1.37.8", - "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.13", + "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.15", "@safe-global/safe-modules-deployments": "^2.2.1", "@sentry/react": "^7.91.0", "@spindl-xyz/attribution-lite": "^1.4.0", diff --git a/src/components/common/Table/DataRow.tsx b/src/components/common/Table/DataRow.tsx index be49473c6d..67a8886d45 100644 --- a/src/components/common/Table/DataRow.tsx +++ b/src/components/common/Table/DataRow.tsx @@ -1,6 +1,5 @@ import type { ReactElement, ReactNode } from 'react' -import { Typography } from '@mui/material' -import css from './styles.module.css' +import FieldsGrid from '@/components/tx/FieldsGrid' type DataRowProps = { datatestid?: String @@ -10,19 +9,10 @@ type DataRowProps = { export const DataRow = ({ datatestid, title, children }: DataRowProps): ReactElement | null => { if (children == undefined) return null - return ( -
-
- {title} -
- {typeof children === 'string' ? ( - - {children} - - ) : ( - children - )} -
+ return ( + + {children} + ) } diff --git a/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap b/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap index bf3739bfc5..712ad5636a 100644 --- a/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap +++ b/src/components/transactions/HexEncodedData/__snapshots__/HexEncodedData.test.tsx.snap @@ -6,7 +6,8 @@ exports[`HexEncodedData should not cut the text in case the limit option is high class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root" >

+ return } if (isStakingTxWithdrawInfo(txDetails.txInfo)) { diff --git a/src/components/tx/FieldsGrid/index.tsx b/src/components/tx/FieldsGrid/index.tsx index ba0a4785db..987df7cf6a 100644 --- a/src/components/tx/FieldsGrid/index.tsx +++ b/src/components/tx/FieldsGrid/index.tsx @@ -1,19 +1,19 @@ import { type ReactNode } from 'react' import { Grid, Typography } from '@mui/material' -const minWidth = { xl: '25%', lg: '100px' } +const minWidth = { xl: '25%', lg: '200px' } const wrap = { flexWrap: { xl: 'nowrap' } } const FieldsGrid = ({ title, children }: { title: string | ReactNode; children: ReactNode }) => { return ( - + {title} - + {children} diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx index bf523741c3..f90a5e7d72 100644 --- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx +++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx @@ -4,10 +4,9 @@ import type { StakingTxDepositInfo } from '@safe-global/safe-gateway-typescript- import { ConfirmationViewTypes, type NativeStakingDepositConfirmationView, - NativeStakingStatus, } from '@safe-global/safe-gateway-typescript-sdk' import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader' -import { formatDurationFromSeconds, formatVisualAmount } from '@/utils/formatters' +import { formatDurationFromMilliseconds, formatVisualAmount } from '@/utils/formatters' import { formatCurrency } from '@/utils/formatNumber' import StakingStatus from '@/features/stake/components/StakingStatus' import { InfoTooltip } from '@/features/stake/components/InfoTooltip' @@ -33,7 +32,7 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro }, { value: order.annualNrr.toFixed(3) + '%', - label: 'Earn (after fees)', + label: 'Rewards rate (after fees)', }, ]} /> @@ -79,14 +78,12 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro {order.numValidators} )} - {!isOrder && order.status === NativeStakingStatus.VALIDATION_STARTED ? null : ( - {formatDurationFromSeconds(order.estimatedEntryTime)} - )} + {formatDurationFromMilliseconds(order.estimatedEntryTime)} Approx. every 5 days after activation {!isOrder && ( - + )} diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx index d05f3c6c59..03a8012da2 100644 --- a/src/features/stake/components/StakingConfirmationTx/Exit.tsx +++ b/src/features/stake/components/StakingConfirmationTx/Exit.tsx @@ -1,17 +1,16 @@ import { Alert, Stack, Typography } from '@mui/material' import FieldsGrid from '@/components/tx/FieldsGrid' -import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk' -import { formatDurationFromSeconds } from '@/utils/formatters' +import { formatDurationFromMilliseconds } from '@/utils/formatters' import { type NativeStakingValidatorsExitConfirmationView } from '@safe-global/safe-gateway-typescript-sdk/dist/types/decoded-data' import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader' import { InfoTooltip } from '@/features/stake/components/InfoTooltip' type StakingOrderConfirmationViewProps = { - order: NativeStakingValidatorsExitConfirmationView | StakingTxExitInfo + order: NativeStakingValidatorsExitConfirmationView } const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps) => { - const withdrawIn = formatDurationFromSeconds(order.estimatedExitTime + order.estimatedWithdrawalTime, [ + const withdrawIn = formatDurationFromMilliseconds(order.estimatedExitTime + order.estimatedWithdrawalTime, [ 'days', 'hours', ]) diff --git a/src/features/stake/components/StakingStatus/index.tsx b/src/features/stake/components/StakingStatus/index.tsx index d8ae9ab853..9efc1f6678 100644 --- a/src/features/stake/components/StakingStatus/index.tsx +++ b/src/features/stake/components/StakingStatus/index.tsx @@ -1,12 +1,13 @@ -import { NativeStakingExitStatus, NativeStakingStatus } from '@safe-global/safe-gateway-typescript-sdk' +import { NativeStakingStatus } from '@safe-global/safe-gateway-typescript-sdk' import { SvgIcon } from '@mui/material' import CheckIcon from '@/public/images/common/circle-check.svg' import ClockIcon from '@/public/images/common/clock.svg' +import SlashShield from '@/public/images/common/shield-off.svg' import SignatureIcon from '@/public/images/common/document_signature.svg' import TxStatusChip, { type TxStatusChipProps } from '@/components/transactions/TxStatusChip' const ColorIcons: Record< - NativeStakingStatus | NativeStakingExitStatus, + NativeStakingStatus, | { color: TxStatusChipProps['color'] icon?: React.ComponentType @@ -14,47 +15,46 @@ const ColorIcons: Record< } | undefined > = { - [NativeStakingStatus.AWAITING_ENTRY]: { + [NativeStakingStatus.NOT_STAKED]: { + color: 'warning', + icon: SignatureIcon, + text: 'Inactive', + }, + [NativeStakingStatus.ACTIVATING]: { color: 'info', icon: ClockIcon, text: 'Activating', }, - [NativeStakingStatus.REQUESTED_EXIT]: { + [NativeStakingStatus.DEPOSIT_IN_PROGRESS]: { color: 'info', icon: ClockIcon, - text: 'Requested exit', + text: 'Awaiting entry', }, - [NativeStakingStatus.SIGNATURE_NEEDED]: { - color: 'warning', - icon: SignatureIcon, - text: 'Signature needed', + [NativeStakingStatus.ACTIVE]: { + color: 'success', + icon: CheckIcon, + text: 'Validating', }, - [NativeStakingStatus.AWAITING_EXECUTION]: { - color: 'warning', + [NativeStakingStatus.EXIT_REQUESTED]: { + color: 'info', icon: ClockIcon, - text: 'Awaiting execution', + text: 'Requested exit', }, - [NativeStakingStatus.VALIDATION_STARTED]: { - color: 'success', - icon: CheckIcon, - text: 'Validation started', + [NativeStakingStatus.EXITING]: { + color: 'info', + icon: ClockIcon, + text: 'Request pending', }, - [NativeStakingStatus.WITHDRAWN]: { + [NativeStakingStatus.EXITED]: { color: 'success', icon: CheckIcon, text: 'Withdrawn', }, - [NativeStakingExitStatus.READY_TO_WITHDRAW]: { - color: 'success', - icon: CheckIcon, - text: 'Ready to withdraw', - }, - [NativeStakingExitStatus.REQUEST_PENDING]: { - color: 'info', - icon: ClockIcon, - text: 'Request pending', + [NativeStakingStatus.SLASHED]: { + color: 'warning', + icon: SlashShield, + text: 'Slashed', }, - [NativeStakingStatus.UNKNOWN]: undefined, } const capitalizedStatus = (status: string) => @@ -63,7 +63,7 @@ const capitalizedStatus = (status: string) => .replace(/_/g, ' ') .replace(/^\w/g, (l) => l.toUpperCase()) -const StakingStatus = ({ status }: { status: NativeStakingStatus | NativeStakingExitStatus }) => { +const StakingStatus = ({ status }: { status: NativeStakingStatus }) => { const config = ColorIcons[status] return ( diff --git a/src/features/stake/components/StakingTxDepositInfo/index.tsx b/src/features/stake/components/StakingTxDepositInfo/index.tsx index 3ac5774bcc..ef18cb93dd 100644 --- a/src/features/stake/components/StakingTxDepositInfo/index.tsx +++ b/src/features/stake/components/StakingTxDepositInfo/index.tsx @@ -1,7 +1,7 @@ -import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk' +import type { StakingTxDepositInfo as StakingTxDepositInfoType } from '@safe-global/safe-gateway-typescript-sdk' import TokenAmount from '@/components/common/TokenAmount' -export const StakingTxDepositInfo = ({ info }: { info: StakingTxInfo }) => { +export const StakingTxDepositInfo = ({ info }: { info: StakingTxDepositInfoType }) => { return ( <> { - const withdrawIn = formatDurationFromSeconds(info.estimatedExitTime + info.estimatedWithdrawalTime, ['days', 'hours']) - return ( - - - - +const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => { + const withdrawIn = formatDurationFromMilliseconds(info.estimatedExitTime + info.estimatedWithdrawalTime, [ + 'days', + 'hours', + ]) + return ( + - {info.numValidators} Validator{info.numValidators > 1 ? 's' : ''} + {info.validators.map((validator: string, index: number) => { + return ( + <> + + {index < info.validators.length - 1 && ' | '} + + ) + })} + {info.status !== NativeStakingStatus.EXITED && Up to {withdrawIn}} - {info.status !== NativeStakingExitStatus.READY_TO_WITHDRAW && ( - Up to {withdrawIn} - )} - - + ) } +export const BeaconChainLink = ({ validator, name }: { validator: string; name: string }) => { + const chainId = useChainId() + return ( + + {name} + + ) +} export default StakingTxExitDetails diff --git a/src/features/stake/components/StakingTxExitInfo/index.tsx b/src/features/stake/components/StakingTxExitInfo/index.tsx index 60fa8ca9e0..989bb04d34 100644 --- a/src/features/stake/components/StakingTxExitInfo/index.tsx +++ b/src/features/stake/components/StakingTxExitInfo/index.tsx @@ -1,15 +1,9 @@ -import type { StakingTxInfo } from '@safe-global/safe-gateway-typescript-sdk' -import TokenAmount from '@/components/common/TokenAmount' +import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk' -const StakingTxExitInfo = ({ info }: { info: StakingTxInfo }) => { +const StakingTxExitInfo = ({ info }: { info: StakingTxExitInfo }) => { return ( <> - + {info.numValidators} Validator{info.numValidators > 1 ? 's' : ''} ) } diff --git a/src/features/stake/components/StakingTxWithdrawInfo/index.tsx b/src/features/stake/components/StakingTxWithdrawInfo/index.tsx index 19b30b8119..13fee40c85 100644 --- a/src/features/stake/components/StakingTxWithdrawInfo/index.tsx +++ b/src/features/stake/components/StakingTxWithdrawInfo/index.tsx @@ -5,7 +5,7 @@ const StakingTxWithdrawInfo = ({ info }: { info: StakingTxWithdrawInfo }) => { return ( <> { return ` ${capitalize(reason)}` } -export const formatDurationFromSeconds = ( +export const formatDurationFromMilliseconds = ( seconds: number, format: Array<'years' | 'months' | 'days' | 'hours' | 'minutes' | 'seconds'> = ['hours', 'minutes'], ) => { - const duration = intervalToDuration({ start: 0, end: seconds * 1000 }) + const duration = intervalToDuration({ start: 0, end: seconds }) return formatDuration(duration, { format }) } diff --git a/yarn.lock b/yarn.lock index d424149a6f..c6ed0ae5c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4286,10 +4286,10 @@ dependencies: semver "^7.6.2" -"@safe-global/safe-gateway-typescript-sdk@3.22.3-beta.13": - version "3.22.3-beta.13" - resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.13.tgz#e6feaf93b16788ec6237c7f73f0d57f8514dde0c" - integrity sha512-VAoil8BbAsG14cDFG/sSFmCBIGQpJbyQeI7O7LFkPGwCVOFhHhE7SiurDiSkw13QLLxnIqB/Hq6jse+wa7Ny9g== +"@safe-global/safe-gateway-typescript-sdk@3.22.3-beta.15": + version "3.22.3-beta.15" + resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.15.tgz#83c7e784b7ee0d08104c2f1b7dc99f6cdc950683" + integrity sha512-6vAKyGualYDde0zpNaigDY9H7EMpccWPov9hw/itBwY+7JReWGYO2DC0yma48bqDyeipsAkrhvHBNx5TF2zY4Q== "@safe-global/safe-gateway-typescript-sdk@^3.5.3": version "3.21.2"