From b6412105a95dd77dcb8aa7a545bbd56bdf8b11c3 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Mon, 7 Oct 2024 11:14:15 +0200
Subject: [PATCH] fix: Add condensed network list to safe creation review
 (#4321)

---
 .../create/OverviewWidget/styles.module.css   |  1 +
 .../create/steps/ReviewStep/index.tsx         | 24 ++++++++++++++-----
 .../NetworkLogosList/styles.module.css        |  1 +
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/new-safe/create/OverviewWidget/styles.module.css b/src/components/new-safe/create/OverviewWidget/styles.module.css
index c7e87b7dbe..6119485d8f 100644
--- a/src/components/new-safe/create/OverviewWidget/styles.module.css
+++ b/src/components/new-safe/create/OverviewWidget/styles.module.css
@@ -19,4 +19,5 @@
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--color-border-light);
+  gap: var(--space-1);
 }
diff --git a/src/components/new-safe/create/steps/ReviewStep/index.tsx b/src/components/new-safe/create/steps/ReviewStep/index.tsx
index 8a122672ff..704e2c42d0 100644
--- a/src/components/new-safe/create/steps/ReviewStep/index.tsx
+++ b/src/components/new-safe/create/steps/ReviewStep/index.tsx
@@ -1,6 +1,7 @@
 import type { NamedAddress } from '@/components/new-safe/create/types'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { safeCreationDispatch, SafeCreationEvent } from '@/features/counterfactual/services/safeCreationEvents'
+import NetworkLogosList from '@/features/multichain/components/NetworkLogosList'
 import { getTotalFeeFormatted } from '@/hooks/useGasPrice'
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import type { NewSafeFormData } from '@/components/new-safe/create'
@@ -33,7 +34,7 @@ import { FEATURES, hasFeature } from '@/utils/chains'
 import { hasRemainingRelays } from '@/utils/relaying'
 import { isWalletRejection } from '@/utils/wallets'
 import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import { Box, Button, CircularProgress, Divider, Grid, Typography } from '@mui/material'
+import { Box, Button, CircularProgress, Divider, Grid, Tooltip, Typography } from '@mui/material'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import classnames from 'classnames'
 import { useRouter } from 'next/router'
@@ -88,11 +89,22 @@ export const SafeSetupOverview = ({
       <ReviewRow
         name={networks.length > 1 ? 'Networks' : 'Network'}
         value={
-          <Box display="flex" flexWrap="wrap" gap={1}>
-            {networks.map((network) => (
-              <ChainIndicator inline key={network.chainId} chainId={network.chainId} showUnknown={false} />
-            ))}
-          </Box>
+          <Tooltip
+            title={
+              <Box>
+                {networks.map((safeItem) => (
+                  <Box p="4px 0px" key={safeItem.chainId}>
+                    <ChainIndicator chainId={safeItem.chainId} />
+                  </Box>
+                ))}
+              </Box>
+            }
+            arrow
+          >
+            <Box display="inline-block">
+              <NetworkLogosList networks={networks} />
+            </Box>
+          </Tooltip>
         }
       />
       {name && <ReviewRow name="Name" value={<Typography>{name}</Typography>} />}
diff --git a/src/features/multichain/components/NetworkLogosList/styles.module.css b/src/features/multichain/components/NetworkLogosList/styles.module.css
index 41d0b1c099..136e26c2c0 100644
--- a/src/features/multichain/components/NetworkLogosList/styles.module.css
+++ b/src/features/multichain/components/NetworkLogosList/styles.module.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-left: 6px;
+  row-gap: 4px;
 }
 
 .networks img {