New layout

.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+  ],
+};

.storybook/preview-body.html

@@ -0,0 +1,6 @@
+<style>
+     html, body, #root {
+      height: 100%;
+      margin: 0;
+      }
+</style>

.storybook/preview.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { MemoryRouter } from 'react-router-dom'
+import { addDecorator } from '@storybook/react'
+import { ThemeProvider, createGlobalStyle } from 'styled-components'
+import { theme } from '@gnosis.pm/safe-react-components'
+
+import averta from 'src/assets/fonts/Averta-normal.woff2'
+import avertaBold from 'src/assets/fonts/Averta-ExtraBold.woff2'
+
+const GlobalStyles = createGlobalStyle`
+   @font-face {
+        font-family: 'Averta';
+        src: local('Averta'), local('Averta Bold'),
+        url(${averta}) format('woff2'),
+        url(${avertaBold}) format('woff');
+    }
+`
+
+addDecorator((storyFn) => (
+  <ThemeProvider theme={theme}>
+    <MemoryRouter>
+      <GlobalStyles />
+      {storyFn()}
+    </MemoryRouter>
+  </ThemeProvider>
+))

package.json

@@ -40,7 +40,9 @@
     "start": "react-app-rewired start",
     "test": "NODE_ENV=test && react-app-rewired test --env=jsdom",
     "test:coverage": "yarn test --coverage --watchAll=false",
-    "coveralls": "cat ./coverage/lcov.info | coveralls"
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "husky": {
     "hooks": {
@@ -164,7 +166,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#development",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#fd4498f",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#development",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid": "5.19.1",
     "@material-ui/core": "4.11.0",
@@ -229,6 +231,11 @@
     "web3-utils": "^1.2.11"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^5.3.19",
     "@testing-library/jest-dom": "5.11.2",
     "@testing-library/react": "10.4.8",
     "@testing-library/user-event": "12.1.0",
@@ -237,7 +244,7 @@
     "@types/jest": "^26.0.9",
     "@types/lodash.memoize": "^4.1.6",
     "@types/node": "14.6.0",
-    "@types/react": "^16.9.44",
+    "@types/react": "^16.9.47",
     "@types/react-dom": "^16.9.6",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
@@ -264,6 +271,7 @@
     "node-sass": "^4.14.1",
     "prettier": "2.0.5",
     "react-app-rewired": "^2.1.6",
+    "react-docgen-typescript-loader": "^3.7.2",
     "truffle": "5.1.36",
     "typechain": "^2.0.0",
     "typescript": "3.9.7",

src/components/App/index.tsx

@@ -0,0 +1,157 @@
+import React, { useContext, useEffect } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import { SnackbarProvider } from 'notistack'
+import { useSelector } from 'react-redux'
+import { useRouteMatch, useHistory } from 'react-router-dom'
+import styled from 'styled-components'
+
+import AlertIcon from './assets/alert.svg'
+import CheckIcon from './assets/check.svg'
+import ErrorIcon from './assets/error.svg'
+import InfoIcon from './assets/info.svg'
+
+import AppLayout from 'src/components/AppLayout'
+import SafeListSidebarProvider, { SafeListSidebarContext } from 'src/components/SafeListSidebar'
+import CookiesBanner from 'src/components/CookiesBanner'
+import Notifier from 'src/components/Notifier'
+import Backdrop from 'src/components/layout/Backdrop'
+import Img from 'src/components/layout/Img'
+import { getNetwork } from 'src/config'
+import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3'
+import { networkSelector } from 'src/logic/wallets/store/selectors'
+import { SAFELIST_ADDRESS, WELCOME_ADDRESS } from 'src/routes/routes'
+import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import Modal from 'src/components/Modal'
+import SendModal from 'src/routes/safe/components/Balances/SendModal'
+import { useLoadSafe } from 'src/logic/safe/hooks/useLoadSafe'
+import { useSafeScheduledUpdates } from 'src/logic/safe/hooks/useSafeScheduledUpdates'
+import useSafeActions from 'src/logic/safe/hooks/useSafeActions'
+import { currentCurrencySelector, safeFiatBalancesTotalSelector } from 'src/logic/currencyValues/store/selectors/index'
+import { formatAmountInUsFormat } from 'src/logic/tokens/utils/formatAmount'
+import { grantedSelector } from 'src/routes/safe/container/selector'
+
+import Receive from './ModalReceive'
+import { useSidebarItems } from 'src/components/AppLayout/Sidebar/useSidebarItems'
+
+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 desiredNetwork = getNetwork()
+
+const useStyles = makeStyles(notificationStyles)
+
+const App: React.FC = ({ children }) => {
+  const classes = useStyles()
+  const currentNetwork = useSelector(networkSelector)
+  const isWrongNetwork = currentNetwork !== ETHEREUM_NETWORK.UNKNOWN && currentNetwork !== desiredNetwork
+  const { toggleSidebar } = useContext(SafeListSidebarContext)
+  const matchSafe = useRouteMatch({ path: `${SAFELIST_ADDRESS}`, strict: false })
+  const history = useHistory()
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const safeName = useSelector(safeNameSelector)
+  const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
+  const currentSafeBalance = useSelector(safeFiatBalancesTotalSelector)
+  const currentCurrency = useSelector(currentCurrencySelector)
+  const granted = useSelector(grantedSelector)
+  const sidebarItems = useSidebarItems()
+
+  useLoadSafe(safeAddress)
+  useSafeScheduledUpdates(safeAddress)
+
+  const sendFunds = safeActionsState.sendFunds as { isOpen: boolean; selectedToken: string }
+  const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''
+  const balance = !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : null
+
+  useEffect(() => {
+    if (matchSafe?.isExact) {
+      history.push(WELCOME_ADDRESS)
+      return
+    }
+  }, [matchSafe, history])
+
+  const onReceiveShow = () => onShow('Receive')
+  const onReceiveHide = () => onHide('Receive')
+
+  return (
+    <Frame>
+      <Backdrop isOpen={isWrongNetwork} />
+      <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}
+      >
+        <>
+          <Notifier />
+
+          <AppLayout
+            sidebarItems={sidebarItems}
+            safeAddress={safeAddress}
+            safeName={safeName}
+            balance={balance}
+            granted={granted}
+            onToggleSafeList={toggleSidebar}
+            onReceiveClick={onReceiveShow}
+            onNewTransactionClick={() => showSendFunds('')}
+          >
+            {children}
+          </AppLayout>
+
+          <SendModal
+            activeScreenType="chooseTxType"
+            isOpen={sendFunds.isOpen}
+            onClose={hideSendFunds}
+            selectedToken={sendFunds.selectedToken}
+          />
+
+          <Modal
+            description="Receive Tokens Form"
+            handleClose={onReceiveHide}
+            open={safeActionsState.showReceive as boolean}
+            title="Receive Tokens"
+          >
+            <Receive onClose={onReceiveHide} />
+          </Modal>
+        </>
+      </SnackbarProvider>
+      <CookiesBanner />
+    </Frame>
+  )
+}
+
+const WrapperAppWithSidebar: React.FC = ({ children }) => (
+  <SafeListSidebarProvider>
+    <App>{children}</App>
+  </SafeListSidebarProvider>
+)
+
+export default WrapperAppWithSidebar

src/components/AppLayout/AppLayout.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { Icon } from '@gnosis.pm/safe-react-components'
+import { ListItemType } from 'src/components/List'
+import Layout from '.'
+
+export default {
+  title: 'Layout',
+  component: Layout,
+  parameters: {
+    componentSubtitle: 'It provides a custom layout used in Safe Multisig',
+  },
+}
+
+const items: ListItemType[] = [
+  {
+    label: 'Assets',
+    icon: <Icon size="md" type="assets" />,
+    href: '#',
+  },
+  {
+    label: 'Settings',
+    icon: <Icon size="md" type="settings" />,
+    href: '#',
+    subItems: [
+      {
+        label: 'Safe Details',
+        href: '#',
+      },
+      {
+        label: 'Owners',
+        href: '#',
+      },
+      {
+        label: 'Policies',
+        href: '#',
+      },
+      {
+        label: 'Advanced',
+        href: '#',
+      },
+    ],
+  },
+]
+
+export const Base = (): React.ReactElement => {
+  return (
+    <Layout
+      sidebarItems={items}
+      safeAddress="0xEE63624cC4Dd2355B16b35eFaadF3F7450A9438B"
+      safeName="someName"
+      granted={true}
+      balance={null}
+      onToggleSafeList={() => console.log}
+      onReceiveClick={() => console.log}
+      onNewTransactionClick={() => console.log}
+    >
+      <div>The content goes here</div>
+    </Layout>
+  )
+}

src/components/Footer/index.tsx → src/components/AppLayout/Footer/index.tsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles({
 
 const appVersion = process.env.REACT_APP_APP_VERSION ? `v${process.env.REACT_APP_APP_VERSION} ` : 'Versions'
 
-const Footer = () => {
+const Footer = (): React.ReactElement => {
   const date = new Date()
   const classes = useStyles()
   const dispatch = useDispatch()

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

@@ -6,14 +6,11 @@ import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 
-import NetworkLabel from './NetworkLabel'
 import Provider from './Provider'
-import SafeListHeader from './SafeListHeader'
 
 import Spacer from 'src/components/Spacer'
 import openHoc from 'src/components/hoc/OpenHoc'
 import Col from 'src/components/layout/Col'
-import Divider from 'src/components/layout/Divider'
 import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
 import { border, headerHeight, md, screenSm, sm } from 'src/theme/variables'
@@ -41,11 +38,12 @@ const styles = () => ({
     zIndex: 1301,
   },
   logo: {
-    flexBasis: '95px',
+    flexBasis: '114px',
     flexShrink: '0',
     flexGrow: '0',
     maxWidth: '55px',
     padding: sm,
+    marginTop: '4px',
     [`@media (min-width: ${screenSm}px)`]: {
       maxWidth: 'none',
       paddingLeft: md,
@@ -61,13 +59,9 @@ const Layout = openHoc(({ classes, clickAway, open, providerDetails, providerInf
   <Row className={classes.summary}>
     <Col className={classes.logo} middle="xs" start="xs">
       <Link to="/">
-        <Img alt="Gnosis Team Safe" height={32} src={logo} testId="heading-gnosis-logo" />
+        <Img alt="Gnosis Team Safe" height={36} src={logo} testId="heading-gnosis-logo" />
       </Link>
     </Col>
-    <Divider />
-    <SafeListHeader />
-    <Divider />
-    <NetworkLabel />
     <Spacer />
     <Provider
       info={providerInfo}

src/components/Header/components/ProviderDetails/ConnectDetails.tsx → src/components/AppLayout/Header/components/ProviderDetails/ConnectDetails.tsx

@@ -2,7 +2,7 @@ import { withStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 
 import ConnectButton from 'src/components/ConnectButton'
-import CircleDot from 'src/components/Header/components/CircleDot'
+import CircleDot from 'src/components/AppLayout/Header/components/CircleDot'
 import Block from 'src/components/layout/Block'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'

src/components/Header/components/ProviderDetails/UserDetails.tsx → src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx

@@ -2,10 +2,9 @@ import { withStyles } from '@material-ui/core/styles'
 import Dot from '@material-ui/icons/FiberManualRecord'
 import classNames from 'classnames'
 import * as React from 'react'
-import { Identicon } from '@gnosis.pm/safe-react-components'
-import { EthHashInfo } from '@gnosis.pm/safe-react-components'
+import { EthHashInfo, Identicon } from '@gnosis.pm/safe-react-components'
 
-import CircleDot from 'src/components/Header/components/CircleDot'
+import CircleDot from 'src/components/AppLayout/Header/components/CircleDot'
 import Spacer from 'src/components/Spacer'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'