feat: add help tooltip for withdraw in

safe-global · Sep 19, 2024 · d2dd730 · d2dd730
1 parent fce4c1b
commit d2dd730
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/components/tx/FieldsGrid/index.tsx b/src/components/tx/FieldsGrid/index.tsx
@@ -4,7 +4,7 @@ import { Grid, Typography } from '@mui/material'
 const minWidth = { xl: '25%', lg: '100px' }
 const wrap = { flexWrap: { xl: 'nowrap' } }
 
-const FieldsGrid = ({ title, children }: { title: string; children: ReactNode }) => {
+const FieldsGrid = ({ title, children }: { title: string | ReactNode; children: ReactNode }) => {
   return (
     <Grid container alignItems="center" gap={1} sx={wrap}>
       <Grid item minWidth={minWidth}>

diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
@@ -1,9 +1,10 @@
-import { Typography, Stack, Alert } from '@mui/material'
+import { Typography, Stack, Alert, Tooltip, SvgIcon } 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 { type NativeStakingValidatorsExitConfirmationView } from '@safe-global/safe-gateway-typescript-sdk/dist/types/decoded-data'
 import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/ConfirmationOrderHeader'
+import InfoIcon from '@/public/images/notifications/info.svg'
 
 type StakingOrderConfirmationViewProps = {
   order: NativeStakingValidatorsExitConfirmationView | StakingTxExitInfo
@@ -31,7 +32,41 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
         ]}
       />
 
-      <FieldsGrid title="Withdraw in">Up to {withdrawIn}</FieldsGrid>
+      <FieldsGrid
+        title={
+          <>
+            Withdraw in
+            <Tooltip
+              title={
+                <>
+                  Withdrawal time is the sum of:
+                  <ul>
+                    <li>Time until your validator is successfully exited after the withdraw request</li>
+                    <li>Time for a stake to receive Consensus rewards on the execution layer</li>
+                  </ul>
+                </>
+              }
+              arrow
+              placement="top"
+            >
+              <span>
+                <SvgIcon
+                  component={InfoIcon}
+                  inheritViewBox
+                  color="border"
+                  fontSize="small"
+                  sx={{
+                    verticalAlign: 'middle',
+                    ml: 0.5,
+                  }}
+                />
+              </span>
+            </Tooltip>
+          </>
+        }
+      >
+        Up to {withdrawIn}
+      </FieldsGrid>
 
       <Typography variant="body2" color="text.secondary" mt={2}>
         The selected amount and any rewards will be withdrawn from Dedicated Staking for ETH after the validator exit.