Feat: show delegates

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",

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?.results.length) 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

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>
     </>
   )

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"