diff --git a/src/features/stake/components/InfoTooltip/index.tsx b/src/features/stake/components/InfoTooltip/index.tsx new file mode 100644 index 0000000000..5dae2afa21 --- /dev/null +++ b/src/features/stake/components/InfoTooltip/index.tsx @@ -0,0 +1,22 @@ +import { SvgIcon, Tooltip } from '@mui/material' +import InfoIcon from '@/public/images/notifications/info.svg' +import type { ReactNode } from 'react' + +export function InfoTooltip({ title }: { title: string | ReactNode }) { + return ( + + + + + + ) +} diff --git a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx index 2334c48a11..bf523741c3 100644 --- a/src/features/stake/components/StakingConfirmationTx/Deposit.tsx +++ b/src/features/stake/components/StakingConfirmationTx/Deposit.tsx @@ -10,6 +10,7 @@ import ConfirmationOrderHeader from '@/components/tx/ConfirmationOrder/Confirmat import { formatDurationFromSeconds, formatVisualAmount } from '@/utils/formatters' import { formatCurrency } from '@/utils/formatNumber' import StakingStatus from '@/features/stake/components/StakingStatus' +import { InfoTooltip } from '@/features/stake/components/InfoTooltip' type StakingOrderConfirmationViewProps = { order: NativeStakingDepositConfirmationView | StakingTxDepositInfo @@ -50,7 +51,16 @@ const StakingConfirmationTxDeposit = ({ order }: StakingOrderConfirmationViewPro {formatCurrency(order.expectedFiatMonthlyReward, CURRENCY)}) - {order.fee}% + + Fee + + + } + > + {order.fee}% + Withdraw in - Withdrawal time is the sum of: @@ -46,22 +46,7 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps) } - arrow - placement="top" - > - - - - + /> } >