feat: Safe Apps landing page

src/components/App/index.tsx

@@ -1,18 +1,10 @@
 import { useContext } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { SnackbarProvider } from 'notistack'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
-import AlertIcon from 'src/assets/icons/alert.svg'
-import CheckIcon from 'src/assets/icons/check.svg'
-import ErrorIcon from 'src/assets/icons/error.svg'
-import InfoIcon from 'src/assets/icons/info.svg'
 import AppLayout from 'src/components/AppLayout'
 import { SafeListSidebar, SafeListSidebarContext } from 'src/components/SafeListSidebar'
 import CookiesBanner from 'src/components/CookiesBanner'
-import Notifier from 'src/components/Notifier'
-import Img from 'src/components/layout/Img'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
 import Modal from 'src/components/Modal'
@@ -25,32 +17,14 @@ import { useSidebarItems } from 'src/components/AppLayout/Sidebar/useSidebarItem
 import useAddressBookSync from 'src/logic/addressBook/hooks/useAddressBookSync'
 import { useCurrentSafeAddressSync } from 'src/logic/currentSession/hooks/useCurrentSafeAddressSync'
 
-const notificationStyles = {
-  success: {
-    background: '#fff',
-  },
-  error: {
-    background: '#ffe6ea',
-  },
-  warning: {
-    background: '#fff3e2',
-  },
-  info: {
-    background: '#fff',
-  },
-}
-
 const Frame = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   max-width: 100%;
 `
 
-const useStyles = makeStyles(notificationStyles)
-
 const App: React.FC = ({ children }) => {
-  const classes = useStyles()
   const { toggleSidebar } = useContext(SafeListSidebarContext)
   const { name: safeName, totalFiatBalance: currentSafeBalance } = useSelector(currentSafeWithNames)
   const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
@@ -70,58 +44,37 @@ const App: React.FC = ({ children }) => {
 
   return (
     <Frame>
-      <SnackbarProvider
-        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-        classes={{
-          variantSuccess: classes.success,
-          variantError: classes.error,
-          variantWarning: classes.warning,
-          variantInfo: classes.info,
-        }}
-        iconVariant={{
-          error: <Img alt="Error" src={ErrorIcon} />,
-          info: <Img alt="Info" src={InfoIcon} />,
-          success: <Img alt="Success" src={CheckIcon} />,
-          warning: <Img alt="Warning" src={AlertIcon} />,
-        }}
-        maxSnack={5}
+      <AppLayout
+        sidebarItems={sidebarItems}
+        safeAddress={safeAddress}
+        safeName={safeName}
+        balance={balance}
+        granted={granted}
+        onToggleSafeList={toggleSidebar}
+        onReceiveClick={onReceiveShow}
+        onNewTransactionClick={() => showSendFunds('')}
       >
-        <>
-          <Notifier />
-
-          <AppLayout
-            sidebarItems={sidebarItems}
-            safeAddress={safeAddress}
-            safeName={safeName}
-            balance={balance}
-            granted={granted}
-            onToggleSafeList={toggleSidebar}
-            onReceiveClick={onReceiveShow}
-            onNewTransactionClick={() => showSendFunds('')}
-          >
-            {children}
-          </AppLayout>
+        {children}
+      </AppLayout>
 
-          <SendModal
-            activeScreenType="chooseTxType"
-            isOpen={sendFunds.isOpen}
-            onClose={hideSendFunds}
-            selectedToken={sendFunds.selectedToken}
-          />
+      <SendModal
+        activeScreenType="chooseTxType"
+        isOpen={sendFunds.isOpen}
+        onClose={hideSendFunds}
+        selectedToken={sendFunds.selectedToken}
+      />
 
-          {safeAddress && (
-            <Modal
-              description="Receive Tokens Form"
-              handleClose={onReceiveHide}
-              open={safeActionsState.showReceive}
-              paperClassName="receive-modal"
-              title="Receive Tokens"
-            >
-              <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
-            </Modal>
-          )}
-        </>
-      </SnackbarProvider>
+      {safeAddress && (
+        <Modal
+          description="Receive Tokens Form"
+          handleClose={onReceiveHide}
+          open={safeActionsState.showReceive}
+          paperClassName="receive-modal"
+          title="Receive Tokens"
+        >
+          <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
+        </Modal>
+      )}
       <CookiesBanner />
     </Frame>
   )

src/components/AppLayout/Header/components/Layout.tsx

@@ -113,6 +113,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
         </div>
       )}
 
+      <Divider />
       <Provider
         info={providerInfo}
         open={open}
@@ -129,6 +130,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
           )
         }
       />
+      <Divider />
 
       <NetworkSelector open={openNetworks} toggle={toggleNetworks} clickAway={clickAwayNetworks} />
     </Row>

src/components/AppLayout/Header/components/Provider.tsx

@@ -5,7 +5,6 @@ import ExpandMore from '@material-ui/icons/ExpandMore'
 import * as React from 'react'
 
 import Col from 'src/components/layout/Col'
-import Divider from 'src/components/layout/Divider'
 import { screenSm, sm } from 'src/theme/variables'
 
 const styles = () => ({
@@ -50,14 +49,12 @@ class Provider extends React.Component<any> {
     return (
       <>
         <div className={classes.root} ref={this.myRef}>
-          <Divider />
           <Col className={classes.provider} end="sm" middle="xs" onClick={toggle}>
             {info}
             <IconButton className={classes.expand} disableRipple>
               {open ? <ExpandLess /> : <ExpandMore />}
             </IconButton>
           </Col>
-          <Divider />
         </div>
         {render(this.myRef)}
       </>

src/components/AppLayout/index.tsx

@@ -1,14 +1,14 @@
 import { useCallback, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { useLocation, matchPath } from 'react-router-dom'
+import { useLocation, matchPath, useRouteMatch } from 'react-router-dom'
 
 import { ListItemType } from 'src/components/List'
 
 import Header from './Header'
 import Footer from './Footer'
 import Sidebar from './Sidebar'
 import { MobileNotSupported } from './MobileNotSupported'
-import { SAFE_ROUTES, WELCOME_ROUTE } from 'src/routes/routes'
+import { SAFE_APP_LANDING_PAGE_ROUTE, SAFE_ROUTES, WELCOME_ROUTE } from 'src/routes/routes'
 import useDarkMode from 'src/logic/hooks/useDarkMode'
 import { screenSm } from 'src/theme/variables'
 
@@ -143,6 +143,7 @@ const Layout: React.FC<Props> = ({
     path: [SAFE_ROUTES.SETTINGS, WELCOME_ROUTE],
   })
 
+  const showSideBar = !useRouteMatch({ path: SAFE_APP_LANDING_PAGE_ROUTE })
   const onSidebarClick = useCallback(
     (e: React.MouseEvent): void => {
       e.stopPropagation()
@@ -157,18 +158,20 @@ const Layout: React.FC<Props> = ({
         <Header />
       </HeaderWrapper>
       <BodyWrapper>
-        <SidebarWrapper data-testid="sidebar" $expanded={expanded} onClick={onSidebarClick}>
-          <Sidebar
-            items={sidebarItems}
-            safeAddress={safeAddress}
-            safeName={safeName}
-            balance={balance}
-            granted={granted}
-            onToggleSafeList={onToggleSafeList}
-            onReceiveClick={onReceiveClick}
-            onNewTransactionClick={onNewTransactionClick}
-          />
-        </SidebarWrapper>
+        {showSideBar && (
+          <SidebarWrapper data-testid="sidebar" $expanded={expanded} onClick={onSidebarClick}>
+            <Sidebar
+              items={sidebarItems}
+              safeAddress={safeAddress}
+              safeName={safeName}
+              balance={balance}
+              granted={granted}
+              onToggleSafeList={onToggleSafeList}
+              onReceiveClick={onReceiveClick}
+              onNewTransactionClick={onNewTransactionClick}
+            />
+          </SidebarWrapper>
+        )}
         <ContentWrapper>
           <div>{children}</div>
           {hasFooter && <Footer />}

src/components/Providers/SnackbarProvider.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react'
+import { SnackbarProvider } from 'notistack'
+import { makeStyles } from '@material-ui/core/styles'
+
+import Img from 'src/components/layout/Img'
+import AlertIcon from 'src/assets/icons/alert.svg'
+import CheckIcon from 'src/assets/icons/check.svg'
+import ErrorIcon from 'src/assets/icons/error.svg'
+import InfoIcon from 'src/assets/icons/info.svg'
+import Notifier from 'src/components/Notifier'
+
+type SnackBarProviderProps = {
+  children: ReactNode
+}
+
+const notificationStyles = {
+  success: {
+    background: '#fff',
+  },
+  error: {
+    background: '#ffe6ea',
+  },
+  warning: {
+    background: '#fff3e2',
+  },
+  info: {
+    background: '#fff',
+  },
+}
+
+const useStyles = makeStyles(notificationStyles)
+
+const CustomSnackBarProvider = ({ children }: SnackBarProviderProps): React.ReactElement => {
+  const classes = useStyles()
+
+  return (
+    <SnackbarProvider
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      classes={{
+        variantSuccess: classes.success,
+        variantError: classes.error,
+        variantWarning: classes.warning,
+        variantInfo: classes.info,
+      }}
+      iconVariant={{
+        error: <Img alt="Error" src={ErrorIcon} />,
+        info: <Img alt="Info" src={InfoIcon} />,
+        success: <Img alt="Success" src={CheckIcon} />,
+        warning: <Img alt="Warning" src={AlertIcon} />,
+      }}
+      maxSnack={5}
+    >
+      <>
+        {children}
+        <Notifier />
+      </>
+    </SnackbarProvider>
+  )
+}
+
+export default CustomSnackBarProvider

src/components/Providers/index.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from 'styled-components'
 import { Store } from 'redux'
 import { History } from 'history'
 import { theme } from '@gnosis.pm/safe-react-components'
+import SnackbarProvider from './SnackbarProvider'
 
 declare type Theme = typeof theme
 
@@ -22,7 +23,9 @@ function Providers({ children, store, styledTheme, muiTheme, history }: Provider
     <ThemeProvider theme={styledTheme}>
       <Provider store={store}>
         <MuiThemeProvider theme={muiTheme}>
-          <Router history={history}>{children}</Router>
+          <SnackbarProvider>
+            <Router history={history}>{children}</Router>
+          </SnackbarProvider>
         </MuiThemeProvider>
       </Provider>
     </ThemeProvider>