fix: add tooltip to widget fee (#4204)

safe-global · Sep 19, 2024 · bbf9f90 · bbf9f90
1 parent e5cad45
commit bbf9f90
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/src/features/stake/components/InfoTooltip/index.tsx 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 (
+    <Tooltip title={title} arrow placement="top">
+      <span>
+        <SvgIcon
+          component={InfoIcon}
+          inheritViewBox
+          color="border"
+          fontSize="small"
+          sx={{
+            verticalAlign: 'middle',
+            ml: 0.5,
+          }}
+        />
+      </span>
+    </Tooltip>
+  )
+}
diff --git 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)})
       </FieldsGrid>
 
-      <FieldsGrid title="Fee">{order.fee}%</FieldsGrid>
+      <FieldsGrid
+        title={
+          <>
+            Fee
+            <InfoTooltip title="The widget fee incurred here is charged by Kiln for the operation of this widget. The fee is calculated automatically. Part of the fee will contribute to a license fee that supports the Safe Community. Neither the Safe Ecosystem Foundation nor Safe{Wallet} operates the Kiln Widget and/or Kiln." />
+          </>
+        }
+      >
+        {order.fee}%
+      </FieldsGrid>
 
       <Stack
         {...{ [isOrder ? 'border' : 'borderTop']: '1px solid' }}

diff --git a/src/features/stake/components/StakingConfirmationTx/Exit.tsx b/src/features/stake/components/StakingConfirmationTx/Exit.tsx
@@ -1,10 +1,10 @@
-import { Typography, Stack, Alert, Tooltip, SvgIcon } from '@mui/material'
+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 { 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'
+import { InfoTooltip } from '@/features/stake/components/InfoTooltip'
 
 type StakingOrderConfirmationViewProps = {
   order: NativeStakingValidatorsExitConfirmationView | StakingTxExitInfo
@@ -36,7 +36,7 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
         title={
           <>
             Withdraw in
-            <Tooltip
+            <InfoTooltip
               title={
                 <>
                   Withdrawal time is the sum of:
@@ -46,22 +46,7 @@ const StakingConfirmationTxExit = ({ order }: StakingOrderConfirmationViewProps)
                   </ul>
                 </>
               }
-              arrow
-              placement="top"
-            >
-              <span>
-                <SvgIcon
-                  component={InfoIcon}
-                  inheritViewBox
-                  color="border"
-                  fontSize="small"
-                  sx={{
-                    verticalAlign: 'middle',
-                    ml: 0.5,
-                  }}
-                />
-              </span>
-            </Tooltip>
+            />
           </>
         }
       >