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"