From a378007f218f09497971beed3f76209cf50f161c Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Thu, 22 Jun 2023 14:41:53 +0200
Subject: [PATCH] feat: add tooltip to advanced details (#2153)

* feat: add tooltip to advanced details

* fix: alter wording
---
 src/components/tx/DecodedTx/index.tsx | 42 +++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/tx/DecodedTx/index.tsx b/src/components/tx/DecodedTx/index.tsx
index 3d40317595..2709ef17b9 100644
--- a/src/components/tx/DecodedTx/index.tsx
+++ b/src/components/tx/DecodedTx/index.tsx
@@ -1,5 +1,14 @@
 import { type SyntheticEvent, type ReactElement, useMemo } from 'react'
-import { Accordion, AccordionDetails, AccordionSummary, Box, Skeleton, Typography } from '@mui/material'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Skeleton,
+  SvgIcon,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 import { OperationType, type SafeTransaction } from '@safe-global/safe-core-sdk-types'
 import {
   type DecodedDataResponse,
@@ -19,6 +28,9 @@ import ApprovalEditor from '@/components/tx/ApprovalEditor'
 import { ErrorBoundary } from '@sentry/react'
 import { getNativeTransferData } from '@/services/tx/tokenTransferParams'
 import Multisend from '@/components/transactions/TxDetails/TxData/DecodedData/Multisend'
+import InfoIcon from '@/public/images/notifications/info.svg'
+import ExternalLink from '@/components/common/ExternalLink'
+import { HelpCenterArticle } from '@/config/constants'
 
 type DecodedTxProps = {
   tx?: SafeTransaction
@@ -97,8 +109,34 @@ const DecodedTx = ({ tx, txId }: DecodedTxProps): ReactElement | null => {
           )}
 
           <Box mt={2}>
-            <Typography variant="overline" fontWeight="bold" color="border.main">
+            <Typography variant="overline" fontWeight="bold" color="border.main" display="flex" alignItems="center">
               Advanced details
+              <Tooltip
+                title={
+                  <>
+                    We recommend not changing the default values unless necessary.{' '}
+                    <ExternalLink href={HelpCenterArticle.ADVANCED_PARAMS} title="Learn more about advanced details">
+                      Learn more about advanced details
+                    </ExternalLink>
+                    .
+                  </>
+                }
+                arrow
+                placement="top"
+              >
+                <span>
+                  <SvgIcon
+                    component={InfoIcon}
+                    inheritViewBox
+                    color="border"
+                    fontSize="small"
+                    sx={{
+                      verticalAlign: 'middle',
+                      ml: 0.5,
+                    }}
+                  />
+                </span>
+              </Tooltip>
             </Typography>
 
             {txDetails ? <Summary txDetails={txDetails} defaultExpanded /> : tx && <PartialSummary safeTx={tx} />}