From 655525ed9931116d37146f8220f3d71422dc119f Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Wed, 25 Sep 2024 12:37:02 +0200
Subject: [PATCH 1/6] fix: wrong stake statuses

---
 .../StakingConfirmationTx/Deposit.tsx         |  5 +-
 .../stake/components/StakingStatus/index.tsx  | 56 +++++++++----------
 .../components/StakingTxExitDetails/index.tsx | 10 ++--
 3 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index bf523741c3..5c63d41a40 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -4,7 +4,6 @@ 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'
@@ -79,9 +78,7 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
           <FieldsGrid title="Validators">{order.numValidators}</FieldsGrid>
         )}
 
-        {!isOrder && order.status === NativeStakingStatus.VALIDATION_STARTED ? null : (
-          <FieldsGrid title="Active in">{formatDurationFromSeconds(order.estimatedEntryTime)}</FieldsGrid>
-        )}
+        <FieldsGrid title="Activation time">{formatDurationFromSeconds(order.estimatedEntryTime)}</FieldsGrid>
 
         <FieldsGrid title="Rewards">Approx. every 5 days after activation</FieldsGrid>
 
diff --git a/src/features/stake/components/StakingStatus/index.tsx b/src/features/stake/components/StakingStatus/index.tsx
index d8ae9ab853..bac1b457ca 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: 'Signature needed',
+  },
+  [NativeStakingStatus.ACTIVATING]: {
     color: 'info',
     icon: ClockIcon,
     text: 'Activating',
   },
-  [NativeStakingStatus.REQUESTED_EXIT]: {
+  [NativeStakingStatus.DEPOSIT_IN_PROGRESS]: {
     color: 'info',
     icon: ClockIcon,
-    text: 'Requested exit',
-  },
-  [NativeStakingStatus.SIGNATURE_NEEDED]: {
-    color: 'warning',
-    icon: SignatureIcon,
-    text: 'Signature needed',
-  },
-  [NativeStakingStatus.AWAITING_EXECUTION]: {
-    color: 'warning',
-    icon: ClockIcon,
-    text: 'Awaiting execution',
+    text: 'Awaiting entry',
   },
-  [NativeStakingStatus.VALIDATION_STARTED]: {
+  [NativeStakingStatus.ACTIVE]: {
     color: 'success',
     icon: CheckIcon,
     text: 'Validation started',
   },
-  [NativeStakingStatus.WITHDRAWN]: {
-    color: 'success',
-    icon: CheckIcon,
-    text: 'Withdrawn',
-  },
-  [NativeStakingExitStatus.READY_TO_WITHDRAW]: {
-    color: 'success',
-    icon: CheckIcon,
-    text: 'Ready to withdraw',
+  [NativeStakingStatus.EXIT_REQUESTED]: {
+    color: 'info',
+    icon: ClockIcon,
+    text: 'Requested exit',
   },
-  [NativeStakingExitStatus.REQUEST_PENDING]: {
+  [NativeStakingStatus.EXITING]: {
     color: 'info',
     icon: ClockIcon,
     text: 'Request pending',
   },
-  [NativeStakingStatus.UNKNOWN]: undefined,
+  [NativeStakingStatus.EXITED]: {
+    color: 'success',
+    icon: CheckIcon,
+    text: 'Withdrawn',
+  },
+  [NativeStakingStatus.SLASHED]: {
+    color: 'warning',
+    icon: SlashShield,
+    text: 'Slashed',
+  },
 }
 
 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/StakingTxExitDetails/index.tsx b/src/features/stake/components/StakingTxExitDetails/index.tsx
index 16d3f6563e..6046dfd2b4 100644
--- a/src/features/stake/components/StakingTxExitDetails/index.tsx
+++ b/src/features/stake/components/StakingTxExitDetails/index.tsx
@@ -1,6 +1,6 @@
 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 { 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'
@@ -8,6 +8,8 @@ import { formatDurationFromSeconds } from '@/utils/formatters'
 
 const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo; txData?: TransactionData }) => {
   const withdrawIn = formatDurationFromSeconds(info.estimatedExitTime + info.estimatedWithdrawalTime, ['days', 'hours'])
+
+  console.log('staking tx exit details', info.status, NativeStakingStatus.EXITED)
   return (
     <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}>
       <FieldsGrid title="Receive">
@@ -23,11 +25,9 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo; txData?: Tran
         {info.numValidators} Validator{info.numValidators > 1 ? 's' : ''}
       </FieldsGrid>
 
-      {info.status !== NativeStakingExitStatus.READY_TO_WITHDRAW && (
-        <FieldsGrid title="Est. exit time">Up to {withdrawIn}</FieldsGrid>
-      )}
+      {info.status !== NativeStakingStatus.EXITED && <FieldsGrid title="Est. exit time">Up to {withdrawIn}</FieldsGrid>}
 
-      <FieldsGrid title="Exit">
+      <FieldsGrid title="Validator status">
         <StakingStatus status={info.status} />
       </FieldsGrid>
     </Box>

From 2b8e525f95a33304ac89585bc5bedb89f760c6e9 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Wed, 25 Sep 2024 12:37:20 +0200
Subject: [PATCH 2/6] fix: small UI discrepancies with the figma designs

Revert "fix: small UI discrepancies with the figma designs"

This reverts commit 1efbf952c130cdfa856988952ed1489fe079626a.
---
 src/components/common/Table/DataRow.tsx       | 20 +++++--------------
 .../HexEncodedData.test.tsx.snap              | 12 ++++++++---
 src/components/tx/FieldsGrid/index.tsx        |  6 +++---
 .../StakingConfirmationTx/Deposit.tsx         |  2 +-
 4 files changed, 18 insertions(+), 22 deletions(-)

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 (
-    <div data-testid={datatestid} className={css.gridRow}>
-      <div data-testid="tx-row-title" className={css.title}>
-        {title}
-      </div>
 
-      {typeof children === 'string' ? (
-        <Typography component="div" data-testid="tx-data-row">
-          {children}
-        </Typography>
-      ) : (
-        children
-      )}
-    </div>
+  return (
+    <FieldsGrid data-testid={datatestid} title={title}>
+      {children}
+    </FieldsGrid>
   )
 }
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"
   >
     <div
-      class="MuiGrid-root MuiGrid-item css-f2z333-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-item css-658w1k-MuiGrid-root"
+      data-testid="tx-row-title"
     >
       <p
         class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-s5yue5-MuiTypography-root"
@@ -16,6 +17,7 @@ exports[`HexEncodedData should not cut the text in case the limit option is high
     </div>
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+      data-testid="tx-data-row"
     >
       <div
         class="encodedData MuiBox-root css-0"
@@ -65,7 +67,8 @@ exports[`HexEncodedData should not highlight the data if highlight option is fal
     class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item css-f2z333-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-item css-658w1k-MuiGrid-root"
+      data-testid="tx-row-title"
     >
       <p
         class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-s5yue5-MuiTypography-root"
@@ -75,6 +78,7 @@ exports[`HexEncodedData should not highlight the data if highlight option is fal
     </div>
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+      data-testid="tx-data-row"
     >
       <div
         class="encodedData MuiBox-root css-0"
@@ -125,7 +129,8 @@ exports[`HexEncodedData should render the default component markup 1`] = `
     class="MuiGrid-root MuiGrid-container css-1d1otxt-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item css-f2z333-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-item css-658w1k-MuiGrid-root"
+      data-testid="tx-row-title"
     >
       <p
         class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-s5yue5-MuiTypography-root"
@@ -135,6 +140,7 @@ exports[`HexEncodedData should render the default component markup 1`] = `
     </div>
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true css-1vd824g-MuiGrid-root"
+      data-testid="tx-data-row"
     >
       <div
         class="encodedData MuiBox-root css-0"
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 (
     <Grid container alignItems="center" gap={1} sx={wrap}>
-      <Grid item minWidth={minWidth}>
+      <Grid item minWidth={minWidth} data-testid="tx-row-title">
         <Typography color="primary.light" noWrap>
           {title}
         </Typography>
       </Grid>
 
-      <Grid item xs>
+      <Grid item xs data-testid="tx-data-row">
         {children}
       </Grid>
     </Grid>
diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index 5c63d41a40..82b892ae6d 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -32,7 +32,7 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
             },
             {
               value: order.annualNrr.toFixed(3) + '%',
-              label: 'Earn (after fees)',
+              label: 'Rewards rate (after fees)',
             },
           ]}
         />

From cc7f278f2be36671fe50b04d2504ba91f524027d Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Thu, 26 Sep 2024 16:53:57 +0200
Subject: [PATCH 3/6] fix: change to format duration to milliseconds

The gateway now returns the time in milliseconds.
---
 .../stake/components/StakingConfirmationTx/Deposit.tsx   | 4 ++--
 .../stake/components/StakingConfirmationTx/Exit.tsx      | 4 ++--
 .../stake/components/StakingTxExitDetails/index.tsx      | 9 ++++++---
 src/utils/formatters.ts                                  | 4 ++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index 82b892ae6d..7ce71ea4af 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -6,7 +6,7 @@ import {
   type NativeStakingDepositConfirmationView,
 } 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'
@@ -78,7 +78,7 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
           <FieldsGrid title="Validators">{order.numValidators}</FieldsGrid>
         )}
 
-        <FieldsGrid title="Activation time">{formatDurationFromSeconds(order.estimatedEntryTime)}</FieldsGrid>
+        <FieldsGrid title="Activation time">{formatDurationFromMilliseconds(order.estimatedEntryTime)}</FieldsGrid>
 
         <FieldsGrid title="Rewards">Approx. every 5 days after activation</FieldsGrid>
 
diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
index d05f3c6c59..3d19dddc1d 100644
--- a/src/features/stake/components/StakingConfirmationTx/Exit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
@@ -1,7 +1,7 @@
 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'
@@ -11,7 +11,7 @@ type StakingOrderConfirmationViewProps = {
 }
 
 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/StakingTxExitDetails/index.tsx b/src/features/stake/components/StakingTxExitDetails/index.tsx
index 6046dfd2b4..a0dcf08ab0 100644
--- a/src/features/stake/components/StakingTxExitDetails/index.tsx
+++ b/src/features/stake/components/StakingTxExitDetails/index.tsx
@@ -4,10 +4,13 @@ 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'
 
-const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo; txData?: TransactionData }) => {
-  const withdrawIn = formatDurationFromSeconds(info.estimatedExitTime + info.estimatedWithdrawalTime, ['days', 'hours'])
+const StakingTxExitDetails = ({ info, txData }: { info: StakingTxExitInfo; txData?: TransactionData }) => {
+  const withdrawIn = formatDurationFromMilliseconds(info.estimatedExitTime + info.estimatedWithdrawalTime, [
+    'days',
+    'hours',
+  ])
 
   console.log('staking tx exit details', info.status, NativeStakingStatus.EXITED)
   return (
diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts
index 60c5fbea41..af5c88079c 100644
--- a/src/utils/formatters.ts
+++ b/src/utils/formatters.ts
@@ -96,10 +96,10 @@ export const formatError = (error: Error & { reason?: string }): string => {
   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 })
 }

From cea76a74d68e308dfa8321390b8232aaafa822e9 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Thu, 26 Sep 2024 16:54:46 +0200
Subject: [PATCH 4/6] fix: incorrect status displayed

---
 .../stake/components/StakingConfirmationTx/Deposit.tsx        | 2 +-
 src/features/stake/components/StakingStatus/index.tsx         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
index 7ce71ea4af..f90a5e7d72 100644
--- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx
@@ -83,7 +83,7 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro
         <FieldsGrid title="Rewards">Approx. every 5 days after activation</FieldsGrid>
 
         {!isOrder && (
-          <FieldsGrid title="Status">
+          <FieldsGrid title="Validator status">
             <StakingStatus status={order.status} />
           </FieldsGrid>
         )}
diff --git a/src/features/stake/components/StakingStatus/index.tsx b/src/features/stake/components/StakingStatus/index.tsx
index bac1b457ca..9efc1f6678 100644
--- a/src/features/stake/components/StakingStatus/index.tsx
+++ b/src/features/stake/components/StakingStatus/index.tsx
@@ -18,7 +18,7 @@ const ColorIcons: Record<
   [NativeStakingStatus.NOT_STAKED]: {
     color: 'warning',
     icon: SignatureIcon,
-    text: 'Signature needed',
+    text: 'Inactive',
   },
   [NativeStakingStatus.ACTIVATING]: {
     color: 'info',
@@ -33,7 +33,7 @@ const ColorIcons: Record<
   [NativeStakingStatus.ACTIVE]: {
     color: 'success',
     icon: CheckIcon,
-    text: 'Validation started',
+    text: 'Validating',
   },
   [NativeStakingStatus.EXIT_REQUESTED]: {
     color: 'info',

From b55d1ad6033d69fff523eb832a19701e0098e227 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Thu, 26 Sep 2024 17:13:31 +0200
Subject: [PATCH 5/6] refactor: validator exit

Instead of displaying the value for exiting a validator, we now display
the validator amount that we are exiting.
---
 .../transactions/TxDetails/TxData/index.tsx   |  2 +-
 .../components/StakingConfirmationTx/Exit.tsx |  3 +-
 .../components/StakingTxDepositInfo/index.tsx |  4 +-
 .../components/StakingTxExitDetails/index.tsx | 45 ++++++++++++-------
 .../components/StakingTxExitInfo/index.tsx    | 12 ++---
 .../StakingTxWithdrawInfo/index.tsx           |  2 +-
 src/features/stake/constants.ts               |  6 +++
 7 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/transactions/TxDetails/TxData/index.tsx b/src/components/transactions/TxDetails/TxData/index.tsx
index 2026fa11b2..000f56357f 100644
--- a/src/components/transactions/TxDetails/TxData/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/index.tsx
@@ -47,7 +47,7 @@ const TxData = ({
   }
 
   if (isStakingTxExitInfo(txDetails.txInfo)) {
-    return <StakingTxExitDetails txData={txDetails.txData} info={txDetails.txInfo} />
+    return <StakingTxExitDetails info={txDetails.txInfo} />
   }
 
   if (isStakingTxWithdrawInfo(txDetails.txInfo)) {
diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
index 3d19dddc1d..03a8012da2 100644
--- a/src/features/stake/components/StakingConfirmationTx/Exit.tsx
+++ b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
@@ -1,13 +1,12 @@
 import { Alert, Stack, Typography } from '@mui/material'
 import FieldsGrid from '@/components/tx/FieldsGrid'
-import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk'
 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) => {
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 (
     <>
       <TokenAmount
diff --git a/src/features/stake/components/StakingTxExitDetails/index.tsx b/src/features/stake/components/StakingTxExitDetails/index.tsx
index a0dcf08ab0..d4cdb80722 100644
--- a/src/features/stake/components/StakingTxExitDetails/index.tsx
+++ b/src/features/stake/components/StakingTxExitDetails/index.tsx
@@ -1,33 +1,30 @@
-import { Box } from '@mui/material'
-import type { StakingTxExitInfo, TransactionData } 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 { formatDurationFromMilliseconds } from '@/utils/formatters'
+import { BEACON_CHAIN_EXPLORERS } from '@/features/stake/constants'
+import useChainId from '@/hooks/useChainId'
 
-const StakingTxExitDetails = ({ info, txData }: { info: StakingTxExitInfo; txData?: TransactionData }) => {
+const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
   const withdrawIn = formatDurationFromMilliseconds(info.estimatedExitTime + info.estimatedWithdrawalTime, [
     'days',
     'hours',
   ])
 
-  console.log('staking tx exit details', info.status, NativeStakingStatus.EXITED)
   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>
-
+    <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>}
 
       <FieldsGrid title="Validator status">
@@ -37,4 +34,18 @@ const StakingTxExitDetails = ({ info, txData }: { info: StakingTxExitInfo; txDat
   )
 }
 
+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
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 (
     <>
-      <TokenAmount
-        value={info.value}
-        tokenSymbol={info.tokenInfo.symbol}
-        decimals={info.tokenInfo.decimals}
-        logoUri={info.tokenInfo.logoUri}
-      />
+      {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 (
     <>
       <TokenAmount
-        value={info.rewards}
+        value={info.value}
         tokenSymbol={info.tokenInfo.symbol}
         decimals={info.tokenInfo.decimals}
         logoUri={info.tokenInfo.logoUri}
diff --git a/src/features/stake/constants.ts b/src/features/stake/constants.ts
index cc4925f5f9..70a7f74155 100644
--- a/src/features/stake/constants.ts
+++ b/src/features/stake/constants.ts
@@ -9,3 +9,9 @@ export const widgetAppData = {
   iconUrl: '/images/common/stake.svg',
   chainIds: ['17000', '11155111', '1', '42161', '137', '56', '8453', '10'],
 }
+
+// TODO: move this to the config service
+export const BEACON_CHAIN_EXPLORERS = {
+  '1': 'https://beaconcha.in',
+  '17000': 'https://holesky.beaconcha.in',
+}

From e7e6ab7f555f18a2086595e59a387f131b27efe3 Mon Sep 17 00:00:00 2001
From: Daniel Dimitrov <daniel@compojoom.com>
Date: Thu, 26 Sep 2024 17:15:33 +0200
Subject: [PATCH 6/6] chore: update @safe-global/safe-gateway-typescript-sdk

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

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/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"