feat(Safenet): Add Safenet opt-in flow

apps/web/src/components/dashboard/index.tsx

@@ -1,20 +1,22 @@
-import FirstSteps from '@/components/dashboard/FirstSteps'
-import useSafeInfo from '@/hooks/useSafeInfo'
-import { type ReactElement } from 'react'
-import dynamic from 'next/dynamic'
-import { Grid } from '@mui/material'
-import PendingTxsList from '@/components/dashboard/PendingTxs/PendingTxsList'
 import AssetsWidget from '@/components/dashboard/Assets'
+import FirstSteps from '@/components/dashboard/FirstSteps'
+import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
 import Overview from '@/components/dashboard/Overview/Overview'
+import PendingTxsList from '@/components/dashboard/PendingTxs/PendingTxsList'
 import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection'
-import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection'
-import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
 import StakingBanner from '@/components/dashboard/StakingBanner'
+import { InconsistentSignerSetupWarning } from '@/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning'
+import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
+import { SafenetHeader } from '@/features/safenet/SafenetHeader'
+import useIsStakingBannerEnabled from '@/features/stake/hooks/useIsStakingBannerEnabled'
 import { useHasFeature } from '@/hooks/useChains'
+import useIsSafenetEnabled from '@/hooks/useIsSafenetEnabled'
+import useSafeInfo from '@/hooks/useSafeInfo'
 import { FEATURES } from '@/utils/chains'
+import { Grid } from '@mui/material'
+import dynamic from 'next/dynamic'
+import { type ReactElement } from 'react'
 import css from './styles.module.css'
-import { InconsistentSignerSetupWarning } from '@/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning'
-import useIsStakingBannerEnabled from '@/features/stake/hooks/useIsStakingBannerEnabled'
 
 const RecoveryHeader = dynamic(() => import('@/features/recovery/components/RecoveryHeader'))
 
@@ -23,6 +25,7 @@ const Dashboard = (): ReactElement => {
   const showSafeApps = useHasFeature(FEATURES.SAFE_APPS)
   const isStakingBannerEnabled = useIsStakingBannerEnabled()
   const supportsRecovery = useIsRecoverySupported()
+  const isSafenetEnabled = useIsSafenetEnabled()
 
   return (
     <>
@@ -33,6 +36,12 @@ const Dashboard = (): ReactElement => {
           <InconsistentSignerSetupWarning />
         </Grid>
 
+        {!isSafenetEnabled && (
+          <Grid item xs={12}>
+            <SafenetHeader />
+          </Grid>
+        )}
+
         <Grid item xs={12}>
           <Overview />
         </Grid>

apps/web/src/features/safenet/SafenetHeader.tsx

@@ -0,0 +1,39 @@
+import darkPalette from '@/components/theme/darkPalette'
+import lightPalette from '@/components/theme/lightPalette'
+import SafenetLogo from '@/public/images/logo-safenet.svg'
+import { Box, Button, Grid, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+import css from './styles.module.css'
+
+export const SafenetHeader = () => {
+  const { palette } = useTheme()
+
+  return (
+    <Grid className={palette.mode === 'dark' ? css.darkBanner : css.lightBanner}>
+      <Box className={css.title}>
+        <Typography
+          variant="h1"
+          sx={{
+            fontSize: 40,
+            color: darkPalette.text.primary,
+          }}
+        >
+          UPDAGRADE TO
+        </Typography>
+        <SafenetLogo />
+      </Box>
+      <Typography color={darkPalette.text.primary}>
+        Supercharge your finances by enjoying a unified experience across networks while keeping the main treasury
+        secured.
+      </Typography>
+      <Button
+        className={css.bannerButton}
+        sx={{
+          color: lightPalette.text.primary,
+        }}
+      >
+        Learn more
+      </Button>
+    </Grid>
+  )
+}

apps/web/src/features/safenet/styles.module.css

@@ -0,0 +1,40 @@
+.lightBanner,
+.darkBanner {
+  align-items: flex-start;
+  border: 2px solid transparent;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-4);
+}
+
+.lightBanner {
+  background: radial-gradient(94.6% 266.69% at 95.54% 76.33%, #003F54 0%, #000000 100%);
+}
+
+.darkBanner {
+  background-image:
+    radial-gradient(94.6% 266.69% at 95.54% 76.33%, #003F54 0%, #000000 100%),
+    radial-gradient(119.01% 132.63% at 119.01% -14.15%, #FF5F00 0%, #FFD200 50%, #12FF80 100%);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+}
+
+.bannerButton {
+  background: radial-gradient(119.01% 132.63% at 119.01% -14.15%, #FF5F00 0%, #FFD200 50%, #12FF80 100%);
+}
+
+@media (max-width: 700px) {
+  .title {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}