refactor: validator exit

Instead of displaying the value for exiting a validator, we now display the validator amount that we are exiting.
safe-global · Sep 27, 2024 · b55d1ad · b55d1ad
1 parent cea76a7
commit b55d1ad
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
+}