[Seedless Onboarding] Add alternative welcome page

src/components/common/ErrorBoundary/index.tsx

@@ -33,7 +33,7 @@ const ErrorBoundary: FallbackRender = ({ error, componentStack }) => {
             <Typography color="error">{componentStack}</Typography>
           </>
         )}
-        <Link href={AppRoutes.welcome} color="primary" mt={2}>
+        <Link href={AppRoutes.welcome.index} color="primary" mt={2}>
           Go home
         </Link>
       </div>

src/components/common/Footer/index.tsx

@@ -11,7 +11,7 @@ import MUILink from '@mui/material/Link'
 import { IS_DEV, IS_OFFICIAL_HOST } from '@/config/constants'
 
 const footerPages = [
-  AppRoutes.welcome,
+  AppRoutes.welcome.index,
   AppRoutes.settings.index,
   AppRoutes.imprint,
   AppRoutes.privacy,

src/components/common/Header/index.tsx

@@ -29,7 +29,7 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
   const router = useRouter()
 
   // Logo link: if on Dashboard, link to Welcome, otherwise to the root (which redirects to either Dashboard or Welcome)
-  const logoHref = router.pathname === AppRoutes.home ? AppRoutes.welcome : AppRoutes.index
+  const logoHref = router.pathname === AppRoutes.home ? AppRoutes.welcome.index : AppRoutes.index
 
   const handleMenuToggle = () => {
     if (onMenuToggle) {

src/components/common/NetworkSelector/index.tsx

@@ -15,7 +15,7 @@ import useWallet from '@/hooks/wallets/useWallet'
 import { isSocialWalletEnabled } from '@/hooks/wallets/wallets'
 import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
 
-const keepPathRoutes = [AppRoutes.welcome, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
+const keepPathRoutes = [AppRoutes.welcome.index, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
 
 const MenuWithTooltip = forwardRef<HTMLUListElement>(function MenuWithTooltip(props: any, ref) {
   return (

src/components/common/SafeLoadingError/index.tsx

@@ -15,7 +15,7 @@ const SafeLoadingError = ({ children }: { children: ReactNode }): ReactElement =
       img={<img src="/images/common/error.png" alt="A vault with a red icon in the bottom right corner" />}
       text="This Safe Account couldn't be loaded"
     >
-      <Link href={AppRoutes.welcome} passHref legacyBehavior>
+      <Link href={AppRoutes.welcome.index} passHref legacyBehavior>
         <Button variant="contained" color="primary" size="large" sx={{ mt: 2 }}>
           Go to the main page
         </Button>

src/components/new-safe/create/__tests__/useSyncSafeCreationStep.test.ts

@@ -36,7 +36,7 @@ describe('useSyncSafeCreationStep', () => {
     renderHook(() => useSyncSafeCreationStep(mockSetStep))
 
     expect(mockSetStep).not.toHaveBeenCalled()
-    expect(mockPushRoute).toHaveBeenCalledWith({ pathname: AppRoutes.welcome, query: undefined })
+    expect(mockPushRoute).toHaveBeenCalledWith({ pathname: AppRoutes.welcome.index, query: undefined })
   })
 
   it('should go to the fourth step if there is a pending safe', async () => {

src/components/new-safe/create/index.tsx

@@ -169,7 +169,7 @@ const CreateSafe = () => {
   const initialStep = isSocialLogin ? 2 : 0
 
   const onClose = () => {
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }
 
   return (

src/components/new-safe/create/steps/SetNameStep/index.tsx

@@ -63,7 +63,7 @@ function SetNameStep({
 
   const onCancel = () => {
     trackEvent(CREATE_SAFE_EVENTS.CANCEL_CREATE_SAFE_FORM)
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }
 
   const isDisabled = isWrongChain || !isValid

src/components/new-safe/create/steps/StatusStep/index.tsx

@@ -49,7 +49,7 @@ export const CreateSafeStatus = ({ data, setProgressColor, setStep }: StepRender
   const onClose = useCallback(() => {
     setPendingSafe(undefined)
 
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }, [router, setPendingSafe])
 
   const handleRetry = useCallback(() => {

src/components/new-safe/create/useSyncSafeCreationStep.ts

@@ -22,7 +22,7 @@ const useSyncSafeCreationStep = (setStep: StepRenderProps<NewSafeFormData>['setS
 
     // Jump to connect wallet step if there is no wallet and no pending Safe
     if (!wallet) {
-      router.push({ pathname: AppRoutes.welcome, query: router.query })
+      router.push({ pathname: AppRoutes.welcome.index, query: router.query })
     }
 
     // Jump to choose name and network step if the wallet is connected to the wrong chain and there is no pending Safe

src/components/new-safe/load/index.tsx

@@ -46,7 +46,7 @@ const LoadSafe = ({ initialData }: { initialData?: TxStepperProps<LoadSafeFormDa
   const router = useRouter()
 
   const onClose = () => {
-    router.push(AppRoutes.welcome)
+    router.push(AppRoutes.welcome.index)
   }
 
   const initialSafe = initialData ?? loadSafeDefaultData

src/components/sidebar/SafeList/index.tsx

@@ -82,7 +82,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
 
   const hasWallet = !!wallet
   const hasNoSafes = Object.keys(ownedSafes).length === 0 && Object.keys(addedSafes).length === 0
-  const isWelcomePage = router.pathname === AppRoutes.welcome
+  const isWelcomePage = router.pathname === AppRoutes.welcome.index || router.pathname === AppRoutes.welcome.socialLogin
   const isSingleTxPage = router.pathname === AppRoutes.transactions.tx
 
   /**
@@ -110,7 +110,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
         {!isWelcomePage && (
           <Track {...OVERVIEW_EVENTS.ADD_SAFE}>
             <Link
-              href={{ pathname: AppRoutes.welcome, query: { chain: currentChain?.shortName } }}
+              href={{ pathname: AppRoutes.welcome.index, query: { chain: currentChain?.shortName } }}
               passHref
               legacyBehavior
             >
@@ -136,7 +136,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
 
               <Typography variant="body2" color="primary.light" textAlign="center" mt={3}>
                 {!isWelcomePage ? (
-                  <Link href={{ pathname: AppRoutes.welcome, query: router.query }} passHref legacyBehavior>
+                  <Link href={{ pathname: AppRoutes.welcome.index, query: router.query }} passHref legacyBehavior>
                     <MuiLink onClick={closeDrawer}>{NO_SAFE_MESSAGE}</MuiLink>
                   </Link>
                 ) : (
@@ -193,7 +193,7 @@ const SafeList = ({ closeDrawer }: { closeDrawer?: () => void }): ReactElement =
               {!addedSafeEntriesOnChain.length && !ownedSafesOnChain.length && (
                 <Typography variant="body2" color="primary.light" p={2} textAlign="center">
                   {!isWelcomePage ? (
-                    <Link href={{ pathname: AppRoutes.welcome, query: router.query }} passHref legacyBehavior>
+                    <Link href={{ pathname: AppRoutes.welcome.index, query: router.query }} passHref legacyBehavior>
                       <MuiLink onClick={closeDrawer}>{NO_SAFE_MESSAGE}</MuiLink>
                     </Link>
                   ) : (

src/components/sidebar/Sidebar/index.tsx

@@ -10,7 +10,7 @@ import SidebarFooter from '@/components/sidebar/SidebarFooter'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
-import { DataWidget } from '@/components/welcome/DataWidget'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)

src/components/welcome/NewSafe.tsx

@@ -1,17 +1,10 @@
-import React, { useState } from 'react'
-import { Accordion, AccordionSummary, Box, Drawer, Grid, IconButton, SvgIcon, Typography } from '@mui/material'
-import SafeList from '@/components/sidebar/SafeList'
+import React from 'react'
+import { Box, Grid, SvgIcon, Typography } from '@mui/material'
 import css from './styles.module.css'
 import CheckFilled from '@/public/images/common/check-filled.svg'
 
-import ChevronRightIcon from '@mui/icons-material/ChevronRight'
-import { DataWidget } from '@/components/welcome/DataWidget'
 import WelcomeLogin from './WelcomeLogin'
-import { useAppSelector } from '@/store'
-import { selectTotalAdded } from '@/store/addedSafesSlice'
-
-import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
-import useOwnedSafes from '@/hooks/useOwnedSafes'
+import SafeListDrawer from '@/components/welcome/SafeListDrawer'
 
 const BulletListItem = ({ text }: { text: string }) => (
   <li>
@@ -23,51 +16,16 @@ const BulletListItem = ({ text }: { text: string }) => (
 )
 
 const NewSafe = () => {
-  const numberOfAddedSafes = useAppSelector(selectTotalAdded)
-  const ownedSafes = useOwnedSafes()
-  const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
-  const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
-
-  const [showSidebar, setShowSidebar] = useState(false)
-
-  const closeSidebar = () => setShowSidebar(false)
-
   return (
     <>
-      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
-        <div className={drawerCSS.drawer}>
-          <SafeList closeDrawer={closeSidebar} />
-
-          <div className={drawerCSS.dataWidget}>
-            <DataWidget />
-          </div>
-        </div>
-      </Drawer>
       <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
         <Grid item xs={12} lg={6}>
           <WelcomeLogin />
         </Grid>
         <Grid item xs={12} lg={6} flex={1}>
           <div className={css.content}>
             <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              {totalNumberOfSafes > 0 ? (
-                <Box display="flex" flexDirection="column">
-                  <Box flex={1}>
-                    <Accordion className={css.accordion} onClick={() => setShowSidebar(true)} expanded={false}>
-                      <AccordionSummary>
-                        <Box display="flex" flexDirection="row" alignItems="center" width="100%" gap={2}>
-                          <IconButton sx={{ mr: 'auto', padding: '4px' }}>
-                            <ChevronRightIcon />
-                          </IconButton>
-                          <Typography sx={{ mr: 'auto' }} variant="h4" display="inline" fontWeight={700}>
-                            My Safe Accounts ({totalNumberOfSafes})
-                          </Typography>
-                        </Box>
-                      </AccordionSummary>
-                    </Accordion>
-                  </Box>
-                </Box>
-              ) : null}
+              <SafeListDrawer />
             </Box>
 
             <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">

src/components/welcome/NewSafeSocial.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Box, Button, Grid, Typography } from '@mui/material'
+import css from './styles.module.css'
+import Link from 'next/link'
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import WelcomeLogin from './WelcomeLogin'
+import GnosisChainLogo from '@/public/images/common/gnosis-chain-logo.png'
+import Image from 'next/image'
+import SafeListDrawer from '@/components/welcome/SafeListDrawer'
+
+const BulletListItem = ({ text }: { text: string }) => (
+  <li>
+    <Typography color="static.main" fontWeight={700}>
+      {text}
+    </Typography>
+  </li>
+)
+
+const MarqueeItem = () => {
+  return (
+    <li className={css.marqueeItem}>
+      Free on
+      <Image src={GnosisChainLogo} alt="Gnosis Chain logo" width={24} height={24} />
+      Gnosis Chain
+    </li>
+  )
+}
+
+const NewSafeSocial = () => {
+  return (
+    <>
+      <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
+        <Grid item xs={12} lg={6}>
+          <WelcomeLogin />
+        </Grid>
+        <Grid item xs={12} lg={6} flex={1}>
+          <div className={css.content}>
+            <Box minWidth={{ md: 480 }} className={css.sidebar}>
+              <SafeListDrawer />
+            </Box>
+
+            <Box pt={5} alignSelf="center" margin="auto">
+              <Typography
+                variant="h1"
+                fontSize={[44, null, 52]}
+                lineHeight={1.15}
+                letterSpacing={-1.5}
+                color="static.main"
+              >
+                Get started in 30 seconds with your Google Account
+              </Typography>
+
+              <ul className={css.numberList}>
+                <BulletListItem text="Choose your Google Account" />
+                <BulletListItem text="Review, wait and you’re done!" />
+                <BulletListItem text="Add more signers later to level up your security" />
+              </ul>
+
+              {/* TODO: Replace with actual link and possibly add tracking */}
+              <Link href="https://safe.global" passHref>
+                <Button startIcon={<ChevronLeftIcon />} className={css.button}>
+                  Back to landing page
+                </Button>
+              </Link>
+            </Box>
+
+            <div className={css.marquee}>
+              <ul className={css.marqueeContent}>
+                <MarqueeItem />
+                <MarqueeItem />
+                <MarqueeItem />
+              </ul>
+              <ul className={css.marqueeContent} aria-hidden="true">
+                <MarqueeItem />
+                <MarqueeItem />
+                <MarqueeItem />
+              </ul>
+            </div>
+          </div>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default NewSafeSocial

src/components/welcome/SafeListDrawer/index.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import SafeList from '@/components/sidebar/SafeList'
+import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget'
+import { Button, Drawer, Typography } from '@mui/material'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import { useAppSelector } from '@/store'
+import { selectTotalAdded } from '@/store/addedSafesSlice'
+import useOwnedSafes from '@/hooks/useOwnedSafes'
+import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
+import css from './styles.module.css'
+
+const SafeListDrawer = () => {
+  const numberOfAddedSafes = useAppSelector(selectTotalAdded)
+  const ownedSafes = useOwnedSafes()
+  const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0)
+  const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes
+  const [showSidebar, setShowSidebar] = useState(false)
+
+  const closeSidebar = () => setShowSidebar(false)
+
+  if (totalNumberOfSafes <= 0) {
+    return null
+  }
+
+  return (
+    <>
+      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
+        <div className={drawerCSS.drawer}>
+          <SafeList closeDrawer={closeSidebar} />
+
+          <div className={drawerCSS.dataWidget}>
+            <DataWidget />
+          </div>
+        </div>
+      </Drawer>
+      <Button
+        className={css.button}
+        fullWidth
+        variant="contained"
+        color="background"
+        startIcon={<ChevronRightIcon />}
+        onClick={() => setShowSidebar(true)}
+      >
+        <Typography className={css.buttonText} fontWeight="bold">
+          My Safe Accounts{' '}
+          <Typography color="text.secondary" fontWeight="bold">
+            ({totalNumberOfSafes})
+          </Typography>
+        </Typography>
+      </Button>
+    </>
+  )
+}
+
+export default SafeListDrawer

src/components/welcome/SafeListDrawer/styles.module.css

@@ -0,0 +1,33 @@
+.button {
+  padding: var(--space-2);
+}
+
+.buttonText {
+  align-self: center;
+  margin: auto;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.fileIcon {
+  display: flex;
+  align-items: center;
+  padding: var(--space-1);
+  background-color: var(--color-background-main);
+}
+
+.card {
+  padding: var(--space-3);
+  gap: var(--space-2);
+  display: flex;
+  flex-direction: column;
+}
+
+.card :global .MuiCardHeader-root,
+.card :global .MuiCardContent-root {
+  padding: 0;
+}
+
+.cardHeader {
+  text-align: left;
+}