Add help tooltip

safe-global · Jul 31, 2023 · 60512fc · 60512fc
1 parent 2ba8a93
commit 60512fc
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/src/components/settings/DelegatesList/index.tsx b/src/components/settings/DelegatesList/index.tsx
@@ -1,15 +1,21 @@
 import { getDelegates } from '@safe-global/safe-gateway-typescript-sdk'
 import useAsync from '@/hooks/useAsync'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import { Box, Grid, Paper, Typography } from '@mui/material'
+import { Box, Grid, Paper, SvgIcon, Tooltip, Typography } from '@mui/material'
 import PrefixedEthHashInfo from '@/components/common/EthHashInfo'
+import InfoIcon from '@/public/images/notifications/info.svg'
+import ExternalLink from '@/components/common/ExternalLink'
+import { HelpCenterArticle } from '@/config/constants'
 
 const useDelegates = () => {
   const {
     safe: { chainId },
     safeAddress,
   } = useSafeInfo()
-  const [delegates] = useAsync(() => getDelegates(chainId, { safe: safeAddress }), [chainId, safeAddress])
+  const [delegates] = useAsync(() => {
+    if (!chainId || !safeAddress) return
+    return getDelegates(chainId, { safe: safeAddress })
+  }, [chainId, safeAddress])
   return delegates
 }
 
@@ -24,7 +30,26 @@ const DelegatesList = () => {
         <Grid container spacing={3}>
           <Grid item lg={4} xs={12}>
             <Typography variant="h4" fontWeight={700}>
-              Delegated accounts
+              <Tooltip
+                placement="top"
+                title={
+                  <>
+                    What are delegated accounts?{' '}
+                    <ExternalLink href={HelpCenterArticle.DELEGATES}>Learn more</ExternalLink>
+                  </>
+                }
+              >
+                <span>
+                  Delegated accounts
+                  <SvgIcon
+                    component={InfoIcon}
+                    inheritViewBox
+                    fontSize="small"
+                    color="border"
+                    sx={{ verticalAlign: 'middle', ml: 0.5 }}
+                  />
+                </span>
+              </Tooltip>
             </Typography>
           </Grid>
 

diff --git a/src/config/constants.ts b/src/config/constants.ts
@@ -82,6 +82,7 @@ export const HelpCenterArticle = {
   SPENDING_LIMITS: `${HELP_CENTER_URL}/en/articles/40842-set-up-and-use-spending-limits`,
   TRANSACTION_GUARD: `${HELP_CENTER_URL}/en/articles/40809-what-is-a-transaction-guard`,
   UNEXPECTED_DELEGATE_CALL: `${HELP_CENTER_URL}/en/articles/40794-why-do-i-see-an-unexpected-delegate-call-warning-in-my-transaction`,
+  DELEGATES: `${HELP_CENTER_URL}/en/articles/40799-what-is-a-delegate-key`,
 } as const
 
 // Social

diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
@@ -28,12 +28,12 @@ const Setup: NextPage = () => {
           <Grid container spacing={3}>
             <Grid item lg={4} xs={12}>
               <Typography variant="h4" fontWeight={700}>
-                Safe Account nonce
                 <Tooltip
                   placement="top"
                   title="For security reasons, transactions made with a Safe Account need to be executed in order. The nonce shows you which transaction will be executed next. You can find the nonce for a transaction in the transaction details."
                 >
                   <span>
+                    Safe Account nonce
                     <SvgIcon
                       component={InfoIcon}
                       inheritViewBox