Add breadcrums to app sections

package.json

@@ -165,7 +165,7 @@
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
     "@gnosis.pm/safe-deployments": "^1.0.0",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#17058d4",
+    "@gnosis.pm/safe-react-components": "^0.7.0",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.51.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.0",

src/routes/safe/components/AddressBook/index.tsx

@@ -1,4 +1,14 @@
-import { Button, EthHashInfo, FixedIcon, Text, ButtonLink, Icon } from '@gnosis.pm/safe-react-components'
+import {
+  Breadcrumb,
+  BreadcrumbElement,
+  Button,
+  ButtonLink,
+  EthHashInfo,
+  FixedIcon,
+  Icon,
+  Menu,
+  Text,
+} from '@gnosis.pm/safe-react-components'
 import TableCell from '@material-ui/core/TableCell'
 import TableContainer from '@material-ui/core/TableContainer'
 import TableRow from '@material-ui/core/TableRow'
@@ -147,8 +157,13 @@ const AddressBookTable = (): ReactElement => {
 
   return (
     <>
-      <Row align="center" className={classes.message}>
-        <Col end="sm" xs={12}>
+      <Menu>
+        <Col start="sm" sm={6} xs={12}>
+          <Breadcrumb>
+            <BreadcrumbElement iconType="addressBook" text="Address Book" counter={addressBook?.length.toString()} />
+          </Breadcrumb>
+        </Col>
+        <Col end="sm" sm={6} xs={12}>
           <ButtonLink
             onClick={() => {
               setSelectedEntry(initialEntryState)
@@ -185,7 +200,7 @@ const AddressBookTable = (): ReactElement => {
             Create entry
           </ButtonLink>
         </Col>
-      </Row>
+      </Menu>
       <Block className={classes.formContainer}>
         <TableContainer>
           <Table

src/routes/safe/components/AddressBook/style.ts

@@ -52,12 +52,6 @@ export const styles = createStyles({
   removeEntryButtonNonOwner: {
     cursor: 'pointer',
   },
-  message: {
-    padding: `${md} 0`,
-    maxHeight: '54px',
-    boxSizing: 'border-box',
-    justifyContent: 'flex-end',
-  },
   leftIcon: {
     marginRight: sm,
   },

src/routes/safe/components/Apps/components/AppsList.tsx

@@ -1,10 +1,11 @@
-import { IconText, Loader, Menu, Text, Icon } from '@gnosis.pm/safe-react-components'
+import { IconText, Loader, Menu, Text, Icon, Breadcrumb, BreadcrumbElement } from '@gnosis.pm/safe-react-components'
 import IconButton from '@material-ui/core/IconButton'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Link, generatePath } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 
+import Col from 'src/components/layout/Col'
 import { Modal } from 'src/components/Modal'
 import { safeAddressFromUrl } from 'src/logic/safe/store/selectors'
 import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
@@ -54,9 +55,6 @@ const ContentWrapper = styled.div`
   flex-grow: 1;
   align-items: center;
 `
-const Breadcrumb = styled.div`
-  height: 51px;
-`
 
 const IconBtn = styled(IconButton)`
   position: absolute;
@@ -105,10 +103,12 @@ const AppsList = (): React.ReactElement => {
   return (
     <Wrapper>
       <Menu>
-        {/* TODO: Add navigation breadcrumb. Empty for now to give some top margin */}
-        <Breadcrumb />
+        <Col start="sm" xs={12}>
+          <Breadcrumb>
+            <BreadcrumbElement iconType="apps" text="Apps" />
+          </Breadcrumb>
+        </Col>
       </Menu>
-
       <ContentWrapper>
         <CardsWrapper>
           <AppCard iconUrl={AddAppIcon} onClick={openAddAppModal} buttonText="Add custom app" iconSize="lg" />

src/routes/safe/components/Balances/index.tsx

@@ -1,16 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { Breadcrumb, BreadcrumbElement, Menu } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { generatePath, Redirect, Route, Switch } from 'react-router-dom'
+import { generatePath, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
-import ReceiveModal from 'src/components/App/ReceiveModal'
-import { styles } from './style'
-
-import Modal from 'src/components/Modal'
 import Col from 'src/components/layout/Col'
+import Modal from 'src/components/Modal'
+import ReceiveModal from 'src/components/App/ReceiveModal'
 
-import Row from 'src/components/layout/Row'
-import { SAFE_ROUTES } from 'src/routes/routes'
+import { SAFE_ROUTES, SAFELIST_ADDRESS } from 'src/routes/routes'
 import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import { CurrencyDropdown } from 'src/routes/safe/components/CurrencyDropdown'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
@@ -38,11 +35,14 @@ const INITIAL_STATE = {
 export const COINS_LOCATION_REGEX = /\/balances\/?$/
 export const COLLECTIBLES_LOCATION_REGEX = /\/balances\/collectibles$/
 
-const useStyles = makeStyles(styles)
-
 const Balances = (): ReactElement => {
-  const classes = useStyles()
   const [state, setState] = useState(INITIAL_STATE)
+  const matchSafeWithAction = useRouteMatch({
+    path: `${SAFELIST_ADDRESS}/:safeAddress/:safeAction/:safeSubaction?`,
+  }) as {
+    url: string
+    params: Record<string, string>
+  }
 
   const { address: safeAddress, featuresEnabled, name: safeName } = useSelector(currentSafeWithNames)
 
@@ -85,12 +85,33 @@ const Balances = (): ReactElement => {
     }))
   }
 
-  const { controls, tokenControls } = classes
   const { erc721Enabled, sendFunds, showReceive } = state
 
+  let balancesSection
+  switch (matchSafeWithAction.url) {
+    case generatePath(SAFE_ROUTES.ASSETS_BALANCES, {
+      safeAddress,
+    }):
+      balancesSection = 'Coins'
+      break
+    case generatePath(SAFE_ROUTES.ASSETS_COLLECTIBLES, {
+      safeAddress,
+    }):
+      balancesSection = 'Collectibles'
+      break
+    default:
+      balancesSection = ''
+  }
+
   return (
     <>
-      <Row align="center" className={controls}>
+      <Menu>
+        <Col start="sm" sm={6} xs={12}>
+          <Breadcrumb>
+            <BreadcrumbElement iconType="assets" text="ASSETS" color="primary" />
+            <BreadcrumbElement text={balancesSection} color="placeHolder" />
+          </Breadcrumb>
+        </Col>
         <Switch>
           <Route
             path={generatePath(SAFE_ROUTES.ASSETS_COLLECTIBLES, {
@@ -104,24 +125,24 @@ const Balances = (): ReactElement => {
                     safeAddress,
                   })}
                 />
-              ) : null
+              ) : (
+                <Col end="sm" sm={6} xs={12}></Col>
+              )
             }}
           />
           <Route
             path={generatePath(SAFE_ROUTES.ASSETS_BALANCES, {
               safeAddress,
             })}
             exact
-            render={() => {
-              return (
-                <Col className={tokenControls} end="sm" xs={12}>
-                  <CurrencyDropdown />
-                </Col>
-              )
-            }}
+            render={() => (
+              <Col end="sm" sm={6} xs={12}>
+                <CurrencyDropdown />
+              </Col>
+            )}
           />
         </Switch>
-      </Row>
+      </Menu>
       <Switch>
         <Route
           path={generatePath(SAFE_ROUTES.ASSETS_COLLECTIBLES, {

src/routes/safe/components/Settings/index.tsx

@@ -1,17 +1,16 @@
-import { Loader, Icon } from '@gnosis.pm/safe-react-components'
+import { Breadcrumb, BreadcrumbElement, Loader, Icon, Menu } from '@gnosis.pm/safe-react-components'
 import { LoadingContainer } from 'src/components/LoaderContainer'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
-import { generatePath, Route, Switch } from 'react-router-dom'
+import { generatePath, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import { styles } from './style'
 
-import { SAFE_ROUTES } from 'src/routes/routes'
+import { SAFE_ROUTES, SAFELIST_ADDRESS } from 'src/routes/routes'
 import Block from 'src/components/layout/Block'
 import ButtonLink from 'src/components/layout/ButtonLink'
 import Col from 'src/components/layout/Col'
-import Row from 'src/components/layout/Row'
 import Span from 'src/components/layout/Span'
 import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { grantedSelector } from 'src/routes/safe/container/selector'
@@ -36,6 +35,43 @@ const Settings = (): React.ReactElement => {
   const [state, setState] = useState(INITIAL_STATE)
   const { address: safeAddress, owners, loadedViaUrl } = useSelector(currentSafeWithNames)
   const granted = useSelector(grantedSelector)
+  const matchSafeWithAction = useRouteMatch({
+    path: `${SAFELIST_ADDRESS}/:safeAddress/:safeAction/:safeSubaction?`,
+  }) as {
+    url: string
+    params: Record<string, string>
+  }
+
+  let settingsSection
+  switch (matchSafeWithAction.url) {
+    case generatePath(SAFE_ROUTES.SETTINGS_DETAILS, {
+      safeAddress,
+    }):
+      settingsSection = 'Safe Details'
+      break
+    case generatePath(SAFE_ROUTES.SETTINGS_OWNERS, {
+      safeAddress,
+    }):
+      settingsSection = 'Owners'
+      break
+    case generatePath(SAFE_ROUTES.SETTINGS_POLICIES, {
+      safeAddress,
+    }):
+      settingsSection = 'Policies'
+      break
+    case generatePath(SAFE_ROUTES.SETTINGS_SPENDING_LIMIT, {
+      safeAddress,
+    }):
+      settingsSection = 'Spending Limit'
+      break
+    case generatePath(SAFE_ROUTES.SETTINGS_ADVANCED, {
+      safeAddress,
+    }):
+      settingsSection = 'Advanced'
+      break
+    default:
+      settingsSection = ''
+  }
 
   const onShow = (action) => () => {
     setState((prevState) => ({ ...prevState, [`show${action}`]: true }))
@@ -53,17 +89,25 @@ const Settings = (): React.ReactElement => {
     </LoadingContainer>
   ) : (
     <>
-      <Row className={classes.message}>
-        {!loadedViaUrl && (
-          <>
+      <Menu>
+        <Col start="sm" sm={6} xs={12}>
+          <Breadcrumb>
+            <BreadcrumbElement iconType="settings" text="SETTINGS" />
+            <BreadcrumbElement text={settingsSection} color="placeHolder" />
+          </Breadcrumb>
+        </Col>
+        {!loadedViaUrl ? (
+          <Col end="sm" sm={6} xs={12}>
             <ButtonLink className={classes.removeSafeBtn} color="error" onClick={onShow('RemoveSafe')} size="lg">
               <Span className={classes.links}>Remove Safe</Span>
               <Icon size="sm" type="delete" color="error" tooltip="Remove Safe" />
             </ButtonLink>
             <RemoveSafeModal isOpen={showRemoveSafe} onClose={onHide('RemoveSafe')} />
-          </>
+          </Col>
+        ) : (
+          <Col end="sm" sm={6} xs={12}></Col>
         )}
-      </Row>
+      </Menu>
       <Block className={classes.root}>
         <Col className={classes.contents} layout="column">
           <Block className={classes.container}>