Add Safenet to NetworkLogosList

Author: germartinez

apps/web/src/components/sidebar/Sidebar/index.tsx

@@ -35,7 +35,9 @@ const Sidebar = (): ReactElement => {
           <Box className={css.safenetHeader}>
             <SafenetLogo height="14" />
           </Box>
-        ) : <ChainIndicator showLogo={false} />}
+        ) : (
+          <ChainIndicator showLogo={false} />
+        )}
 
         {/* Open the safes list */}
         <button data-testid="open-safes-icon" className={css.drawerButton} onClick={onDrawerToggle}>

apps/web/src/features/multichain/components/NetworkLogosList/index.tsx

@@ -1,23 +1,31 @@
 import ChainIndicator from '@/components/common/ChainIndicator'
+import SafeLogo from '@/public/images/logo-no-text.svg'
 import { Box } from '@mui/material'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import css from './styles.module.css'
 
 const NetworkLogosList = ({
   networks,
   showHasMore = false,
+  showHasSafenet = false,
 }: {
   networks: Pick<ChainInfo, 'chainId'>[]
   showHasMore?: boolean
+  showHasSafenet?: boolean
 }) => {
-  const MAX_NUM_VISIBLE_CHAINS = 4
+  const MAX_NUM_VISIBLE_CHAINS = showHasSafenet ? 3 : 4
   const visibleChains = showHasMore ? networks.slice(0, MAX_NUM_VISIBLE_CHAINS) : networks
 
   return (
     <Box className={css.networks}>
       {visibleChains.map((chain) => (
         <ChainIndicator key={chain.chainId} chainId={chain.chainId} onlyLogo inline />
       ))}
+      {showHasSafenet && (
+        <Box className={css.safenetIndicator}>
+          <SafeLogo height="14" />
+        </Box>
+      )}
       {showHasMore && networks.length > MAX_NUM_VISIBLE_CHAINS && (
         <Box className={css.moreChainsIndicator}>+{networks.length - MAX_NUM_VISIBLE_CHAINS}</Box>
       )}

apps/web/src/features/multichain/components/NetworkLogosList/styles.module.css

@@ -23,3 +23,16 @@
   justify-content: center;
   font-size: 14px;
 }
+
+.safenetIndicator {
+  background: radial-gradient(119.01% 132.63% at 119.01% -14.15%, #FF5F00 0%, #FFD200 50%, #12FF80 100%);
+  margin-left: -5px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  outline: 2px solid var(--color-background-paper);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}