From e9d0a78e4e2137f46655b9e8a932100bdba08f2e Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 28 Jul 2023 12:36:10 +0200
Subject: [PATCH 1/3] Feat: show delegates

---
 package.json                                  |  2 +-
 .../settings/DelegatesList/index.tsx          | 56 +++++++++++++++++++
 src/pages/settings/setup.tsx                  |  3 +
 yarn.lock                                     |  8 +--
 4 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/components/settings/DelegatesList/index.tsx

diff --git a/package.json b/package.json
index 4b7b4644c3..a4b9ebd832 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-deployments": "^1.25.0",
     "@safe-global/safe-ethers-lib": "^1.9.4",
-    "@safe-global/safe-gateway-typescript-sdk": "^3.7.3",
+    "@safe-global/safe-gateway-typescript-sdk": "^3.8.0",
     "@safe-global/safe-modules-deployments": "^1.0.0",
     "@safe-global/safe-react-components": "^2.0.5",
     "@sentry/react": "^7.28.1",
diff --git a/src/components/settings/DelegatesList/index.tsx b/src/components/settings/DelegatesList/index.tsx
new file mode 100644
index 0000000000..089231b7c6
--- /dev/null
+++ b/src/components/settings/DelegatesList/index.tsx
@@ -0,0 +1,56 @@
+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 PrefixedEthHashInfo from '@/components/common/EthHashInfo'
+
+const useDelegates = () => {
+  const {
+    safe: { chainId },
+    safeAddress,
+  } = useSafeInfo()
+  const [delegates] = useAsync(() => getDelegates(chainId, { safe: safeAddress }), [chainId, safeAddress])
+  return delegates
+}
+
+const DelegatesList = () => {
+  const delegates = useDelegates()
+
+  if (!delegates) return null
+
+  return (
+    <Paper sx={{ p: 4, mt: 2 }}>
+      <Box display="flex" flexDirection="column" gap={2}>
+        <Grid container spacing={3}>
+          <Grid item lg={4} xs={12}>
+            <Typography variant="h4" fontWeight={700}>
+              Delegated accounts
+            </Typography>
+          </Grid>
+
+          <Grid item xs>
+            <ul style={{ padding: 0, margin: 0 }}>
+              {(delegates?.results || []).map((item) => (
+                <li
+                  key={item.delegate}
+                  style={{ listStyleType: 'none', marginBottom: '1em' }}
+                  title={`Delegated by ${item.delegator}`}
+                >
+                  <PrefixedEthHashInfo
+                    address={item.delegate}
+                    showCopyButton
+                    hasExplorer
+                    name={item.label || undefined}
+                    shortAddress={false}
+                  />
+                </li>
+              ))}
+            </ul>
+          </Grid>
+        </Grid>
+      </Box>
+    </Paper>
+  )
+}
+
+export default DelegatesList
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
index 5c341cc76f..ada350cdfa 100644
--- a/src/pages/settings/setup.tsx
+++ b/src/pages/settings/setup.tsx
@@ -7,6 +7,7 @@ import { OwnerList } from '@/components/settings/owner/OwnerList'
 import { RequiredConfirmation } from '@/components/settings/RequiredConfirmations'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import SettingsHeader from '@/components/settings/SettingsHeader'
+import DelegatesList from '@/components/settings/DelegatesList'
 
 const Setup: NextPage = () => {
   const { safe, safeLoaded } = useSafeInfo()
@@ -61,6 +62,8 @@ const Setup: NextPage = () => {
 
           <RequiredConfirmation threshold={threshold} owners={ownerLength} />
         </Paper>
+
+        <DelegatesList />
       </main>
     </>
   )
diff --git a/yarn.lock b/yarn.lock
index 95a1f994e4..26cb94795e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3249,10 +3249,10 @@
   dependencies:
     cross-fetch "^3.1.5"
 
-"@safe-global/safe-gateway-typescript-sdk@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.7.3.tgz#68ec7d82711e2d0f82ce2e577b1df67ba8da2bed"
-  integrity sha512-O6JCgXNZWG0Vv8FnOEjKfcbsP0WxGvoPJk5ufqUrsyBlHup16It6oaLnn+25nXFLBZOHI1bz8429JlqAc2t2hg==
+"@safe-global/safe-gateway-typescript-sdk@^3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.8.0.tgz#6a71eeab0ecd447a585531ef87cf987da30b78a0"
+  integrity sha512-CiGWIHgIaOdICpDxp05Jw3OPslWTu8AnL0PhrCT1xZgIO86NlMMLzkGbeycJ4FHpTjA999O791Oxp4bZPIjgHA==
   dependencies:
     cross-fetch "^3.1.5"
 

From 2ba8a9329f3051d5b4b8cf0c03d848a678faecb2 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Mon, 31 Jul 2023 09:17:30 +0200
Subject: [PATCH 2/3] Fix: don't show delegates if array is empty

---
 src/components/settings/DelegatesList/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/DelegatesList/index.tsx b/src/components/settings/DelegatesList/index.tsx
index 089231b7c6..0b2236ec76 100644
--- a/src/components/settings/DelegatesList/index.tsx
+++ b/src/components/settings/DelegatesList/index.tsx
@@ -16,7 +16,7 @@ const useDelegates = () => {
 const DelegatesList = () => {
   const delegates = useDelegates()
 
-  if (!delegates) return null
+  if (!delegates?.results.length) return null
 
   return (
     <Paper sx={{ p: 4, mt: 2 }}>
@@ -30,7 +30,7 @@ const DelegatesList = () => {
 
           <Grid item xs>
             <ul style={{ padding: 0, margin: 0 }}>
-              {(delegates?.results || []).map((item) => (
+              {delegates.results.map((item) => (
                 <li
                   key={item.delegate}
                   style={{ listStyleType: 'none', marginBottom: '1em' }}

From 60512fc384cca789ba7c713bc2a7927d4ec42a43 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Mon, 31 Jul 2023 11:08:40 +0200
Subject: [PATCH 3/3] Add help tooltip

---
 .../settings/DelegatesList/index.tsx          | 31 +++++++++++++++++--
 src/config/constants.ts                       |  1 +
 src/pages/settings/setup.tsx                  |  2 +-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/settings/DelegatesList/index.tsx b/src/components/settings/DelegatesList/index.tsx
index 0b2236ec76..b9ee500e7d 100644
--- 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
index 285673028c..03d62be6d1 100644
--- 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
index ada350cdfa..a551c4a177 100644
--- 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