Update Safenet sidebar header

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

@@ -2,7 +2,6 @@ import ChevronRight from '@mui/icons-material/ChevronRight'
 import { Box, Divider, Drawer } from '@mui/material'
 import { useCallback, useState, type ReactElement } from 'react'
 
-import ChainIndicatorSafenet from '@/components/common/ChainIndicator/ChainIndicatorSafenet'
 import IndexingStatus from '@/components/sidebar/IndexingStatus'
 import SidebarFooter from '@/components/sidebar/SidebarFooter'
 import SidebarHeader from '@/components/sidebar/SidebarHeader'
@@ -11,6 +10,7 @@ import SidebarNavigation from '@/components/sidebar/SidebarNavigation'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import MyAccounts from '@/features/myAccounts'
 import useIsSafenetEnabled from '@/features/safenet/hooks/useIsSafenetEnabled'
+import SafenetLogo from '@/public/images/safenet/logo-safenet.svg'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
 import css from './styles.module.css'
 
@@ -31,7 +31,11 @@ const Sidebar = (): ReactElement => {
   return (
     <div data-testid="sidebar-container" className={css.container}>
       <div className={css.scroll}>
-        {isSafenetEnabled ? <ChainIndicatorSafenet /> : <ChainIndicator showLogo={false} />}
+        {isSafenetEnabled ? (
+          <Box className={css.safenetHeader}>
+            <SafenetLogo height="14" />
+          </Box>
+        ) : <ChainIndicator showLogo={false} />}
 
         {/* Open the safes list */}
         <button data-testid="open-safes-icon" className={css.drawerButton} onClick={onDrawerToggle}>

apps/web/src/components/sidebar/Sidebar/styles.module.css

@@ -65,6 +65,20 @@
   background-color: var(--color-secondary-background);
 }
 
+.safenetHeader {
+  background: linear-gradient(269.61deg, #FF5F00 -34.26%, #FFD200 32.94%, #12FF80 92.29%);
+  border-radius: 0 0 var(--space-1) var(--space-1);
+  padding: var(--space-1);
+}
+
+.safenetHeader > svg {
+  display: block;
+}
+
+.safenetHeader > svg > path {
+  fill: black;
+}
+
 @media (max-width: 899.95px) {
   .container {
     padding-top: var(--header-height);

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

@@ -21,7 +21,6 @@ import ExplorerButton from '@/components/common/ExplorerButton'
 import FiatValue from '@/components/common/FiatValue'
 import Track from '@/components/common/Track'
 import EnvHintButton from '@/components/settings/EnvironmentVariables/EnvHintButton'
-import useIsSafenetEnabled from '@/features/safenet/hooks/useIsSafenetEnabled'
 import { useAddressResolver } from '@/hooks/useAddressResolver'
 import { useCurrentChain } from '@/hooks/useChains'
 import useSafeAddress from '@/hooks/useSafeAddress'
@@ -30,13 +29,9 @@ import { OVERVIEW_EVENTS } from '@/services/analytics/events/overview'
 import { selectSettings } from '@/store/settingsSlice'
 import { getBlockExplorerLink } from '@/utils/chains'
 import { SvgIcon } from '@mui/material'
-import dynamic from 'next/dynamic'
 import QrCodeButton from '../QrCodeButton'
 
-const GradientBoxSafenet = dynamic(() => import('@/features/safenet/components/GradientBoxSafenet'))
-
 const SafeHeader = (): ReactElement => {
-  const isSafenetEnabled = useIsSafenetEnabled()
   const { balances } = useVisibleBalances()
   const safeAddress = useSafeAddress()
   const { safe } = useSafeInfo()
@@ -49,7 +44,7 @@ const SafeHeader = (): ReactElement => {
 
   const blockExplorerLink = chain ? getBlockExplorerLink(chain, safeAddress) : undefined
 
-  const header = (
+  return (
     <div className={css.container}>
       <div className={css.info}>
         <div data-testid="safe-header-info" className={css.safe}>
@@ -121,7 +116,6 @@ const SafeHeader = (): ReactElement => {
       <NewTxButton />
     </div>
   )
-  return isSafenetEnabled ? <GradientBoxSafenet variant="bottom">{header}</GradientBoxSafenet> : header
 }
 
 export default SafeHeader