feat: Breadcrumbs (#175)

* chore: Add svg file support

* fix: Add breadcrumbs to all pages

* chore: Fix lint and svg mocks in tests

* chore: Move / into breadcrumbs component

* refactor: Remove paper elevation 0

* style: Remove address book header flex justify-content property

* style: Move breadcrumbs out of the table

components/address-book/AddressBookTable/index.tsx

@@ -14,6 +14,7 @@ import useIsSafeOwner from '@/hooks/useIsSafeOwner'
 import TokenTransferModal from '@/components/tx/modals/TokenTransferModal'
 import css from './styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
+import Box from '@mui/material/Box'
 
 const headCells = [
   { id: 'name', label: 'Name' },
@@ -94,7 +95,7 @@ const AddressBookTable = () => {
   }))
 
   return (
-    <>
+    <Box marginTop={['0', '-46px']}>
       <div className={css.headerButtonWrapper}>
         <Button
           onClick={handleOpenModal(ModalType.EXPORT)}
@@ -134,7 +135,7 @@ const AddressBookTable = () => {
           initialData={[{ recipient: selectedAddress }]}
         />
       )}
-    </>
+    </Box>
   )
 }
 

components/address-book/AddressBookTable/styles.module.css

@@ -23,6 +23,7 @@
 .headerButtonWrapper {
   display: flex;
   justify-content: flex-end;
+  align-items: flex-start;
   gap: 8px;
   margin-bottom: 8px;
 }

components/common/Breadcrumbs/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Typography } from '@mui/material'
+import css from './styles.module.css'
+
+type Props = {
+  Icon: React.FC<React.SVGProps<SVGSVGElement>>
+  first: string
+  second?: string
+}
+export const Breadcrumbs = ({ Icon, first, second }: Props) => {
+  return (
+    <div className={css.container}>
+      <Icon className={css.icon} />
+      <Typography className={css.text}>{first}</Typography>
+      {second && <Typography className={css.secondaryText}>/ {second}</Typography>}
+    </div>
+  )
+}

components/common/Breadcrumbs/styles.module.css

@@ -0,0 +1,23 @@
+.icon path {
+  fill: var(--color-primary-main);
+}
+
+.text {
+  font-size: 12px;
+  color: var(--color-primary-main);
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.secondaryText {
+  font-size: 12px;
+  color: var(--color-secondary-light);
+  text-transform: uppercase;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: var(--space-3);
+}

components/home/index.tsx

@@ -1,10 +1,11 @@
-import { Typography } from '@mui/material'
 import { NewSafeModal } from '@/components/home/NewSafeModal'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import HomeIcon from '@/public/images/sidebar/home.svg'
 
 export const Dashboard = () => {
   return (
     <main>
-      <Typography variant="h1">Dashboard</Typography>
+      <Breadcrumbs Icon={HomeIcon} first="Dashboard" />
       <NewSafeModal />
     </main>
   )

components/settings/SafeModules/index.tsx

@@ -23,7 +23,7 @@ const ModuleDisplay = ({ moduleAddress, chainId }: { moduleAddress: string; chai
 const SafeModules = () => {
   const { safe } = useSafeInfo()
   return (
-    <Paper elevation={0} sx={{ padding: 4 }}>
+    <Paper sx={{ padding: 4 }} variant="outlined">
       <Grid container direction="row" justifyContent="space-between">
         <Grid item>
           <Typography variant="h4" fontWeight={700}>

components/settings/SpendingLimits/index.tsx

@@ -2,7 +2,7 @@ import { Paper, Grid, Typography, Box, Button } from '@mui/material'
 
 const SpendingLimits = () => {
   return (
-    <Paper elevation={0} sx={{ padding: 4 }}>
+    <Paper sx={{ padding: 4 }} variant="outlined">
       <Grid container direction="row" justifyContent="space-between">
         <Grid item>
           <Typography variant="h4" fontWeight={700}>

components/settings/TransactionGuards/index.tsx

@@ -31,7 +31,7 @@ const TransactionGuards = () => {
   }
 
   return (
-    <Paper elevation={0} sx={{ padding: 4 }}>
+    <Paper sx={{ padding: 4 }} variant="outlined">
       <Grid container direction="row" justifyContent="space-between">
         <Grid item>
           <Typography variant="h4" fontWeight={700}>

definitions.d.ts

@@ -1,3 +1,4 @@
+import React from 'react'
 import { BeamerConfig, BeamerMethods } from '@services/beamer/types'
 
 declare global {
@@ -7,4 +8,10 @@ declare global {
   }
 }
 
+declare module '*.svg' {
+  const content: any
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  export default content
+}
+
 export {}

hooks/wallets/useOnboard.ts

@@ -123,7 +123,7 @@ export const useInitOnboard = () => {
     return () => {
       walletSubscription.unsubscribe()
     }
-  }, [onboard, dispatch, setLastWallet])
+  }, [onboard, dispatch])
 }
 
 export default useOnboard

jest.config.cjs

@@ -11,6 +11,7 @@ const customJestConfig = {
   moduleNameMapper: {
     // Handle module aliases (this will be automatically configured for you soon)
     '^@/(.*)$': '<rootDir>/$1',
+    '^.+\\.(svg)$': '<rootDir>/mocks/svg.js',
   },
   testEnvironment: 'jest-environment-jsdom',
   testEnvironmentOptions: { url: 'http://localhost/balances?safe=rin:0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A' },

mocks/svg.js

@@ -0,0 +1,3 @@
+const content = 'mock-icon'
+export const ReactComponent = content
+export default content

next.config.mjs

@@ -0,0 +1,41 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+  eslint: {
+    dirs: ['pages', 'services', 'store', 'components', 'config', 'utils', 'hooks', 'tests'],
+  },
+  experimental: {
+    images: {
+      unoptimized: true,
+    },
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: { and: [/\.(js|ts|md)x?$/] },
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            prettier: false,
+            svgo: true,
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: {
+                    overrides: { removeViewBox: false },
+                  },
+                },
+              ],
+            },
+            titleProp: true,
+          },
+        },
+      ],
+    })
+    return config
+  },
+}
+
+export default nextConfig

package.json

@@ -63,6 +63,7 @@
   "devDependencies": {
     "@gnosis.pm/safe-react-gateway-sdk": "^3.1.3",
     "@sentry/types": "^7.1.1",
+    "@svgr/webpack": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.2.1",

pages/safe/address-book.tsx

@@ -1,11 +1,12 @@
 import AddressBookTable from '@/components/address-book/AddressBookTable'
 import type { NextPage } from 'next'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import ABIcon from '@/public/images/sidebar/address-book.svg'
 
 const AddressBook: NextPage = () => {
   return (
     <main>
-      <h2>Address Book</h2>
-
+      <Breadcrumbs Icon={ABIcon} first="Address Book" />
       <AddressBookTable />
     </main>
   )

pages/safe/apps.tsx

@@ -2,6 +2,8 @@ import type { NextPage } from 'next'
 import Grid from '@mui/material/Grid'
 import { useSafeApps } from '@/hooks/useSafeApps'
 import { AppCard } from '@/components/safe-apps/AppCard'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import AppsIcon from '@/public/images/sidebar/apps.svg'
 
 const Apps: NextPage = () => {
   const [apps, error, loading] = useSafeApps()
@@ -16,6 +18,7 @@ const Apps: NextPage = () => {
 
   return (
     <main>
+      <Breadcrumbs Icon={AppsIcon} first="Apps" />
       <Grid container rowSpacing={2} columnSpacing={2}>
         {apps?.map((a) => (
           <Grid key={a.url} item xs={12} sm={6} md={3} xl={1.5}>

pages/safe/balances/index.tsx

@@ -4,6 +4,8 @@ import { Grid } from '@mui/material'
 import AssetsTable from '@/components/balances/AssetsTable'
 import CurrencySelect from '@/components/balances/CurrencySelect'
 import useBalances from '@/hooks/useBalances'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import AssetsIcon from '@/public/images/sidebar/assets.svg'
 
 const Balances: NextPage = () => {
   const { balances } = useBalances()
@@ -12,7 +14,7 @@ const Balances: NextPage = () => {
     <main>
       <Grid container spacing={2}>
         <Grid item xs>
-          <h2 style={{ margin: 0 }}>Balances</h2>
+          <Breadcrumbs Icon={AssetsIcon} first="Assets" second="Coins" />
         </Grid>
 
         <Grid item>

pages/safe/balances/nfts.tsx

@@ -1,13 +1,15 @@
 import type { NextPage } from 'next'
 import useCollectibles from '@/hooks/useCollectibles'
 import { NftGrid } from '@/components/nfts'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import AssetsIcon from '@/public/images/sidebar/assets.svg'
 
 const NFTs: NextPage = () => {
   const { collectibles } = useCollectibles()
 
   return (
     <main>
-      <h2>NFTs</h2>
+      <Breadcrumbs Icon={AssetsIcon} first="Assets" second="NFTs" />
       <NftGrid collectibles={collectibles} />
     </main>
   )

pages/safe/settings/appearance.tsx

@@ -1,9 +1,11 @@
-import { Checkbox, FormControlLabel, FormGroup, Link, Typography } from '@mui/material'
+import { Checkbox, FormControlLabel, FormGroup, Link, Paper, Typography } from '@mui/material'
 import type { ChangeEvent } from 'react'
 import type { NextPage } from 'next'
 
 import { useAppDispatch, useAppSelector } from '@/store'
 import { selectSettings, setCopyShortName, setDarkMode, setShowShortName } from '@/store/settingsSlice'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import SettingsIcon from '@/public/images/sidebar/settings.svg'
 
 const Appearance: NextPage = () => {
   const dispatch = useAppDispatch()
@@ -17,30 +19,36 @@ const Appearance: NextPage = () => {
 
   return (
     <main>
-      <Typography variant="h2">Settings / Appearance</Typography>
-      <Typography variant="h4">Chain-specific addresses</Typography>
-      <Typography>
-        You can choose whether to prepend{' '}
-        <Link href="https://eips.ethereum.org/EIPS/eip-3770" target="_blank" rel="noopener noreferrer">
-          EIP-3770
-        </Link>{' '}
-        address prefixes across all Safes.
-      </Typography>
-      <FormGroup>
+      <Breadcrumbs Icon={SettingsIcon} first="Settings" second="Appearance" />
+      <Paper sx={{ padding: 4 }} variant="outlined">
+        <Typography variant="h4" fontWeight="bold" mb={1}>
+          Chain-specific addresses
+        </Typography>
+        <Typography mb={2}>
+          You can choose whether to prepend{' '}
+          <Link href="https://eips.ethereum.org/EIPS/eip-3770" target="_blank" rel="noopener noreferrer">
+            EIP-3770
+          </Link>{' '}
+          address prefixes across all Safes.
+        </Typography>
+        <FormGroup>
+          <FormControlLabel
+            control={<Checkbox checked={settings.shortName.show} onChange={handleToggle(setShowShortName)} />}
+            label="Prepend chain prefix to addresses"
+          />
+          <FormControlLabel
+            control={<Checkbox checked={settings.shortName.copy} onChange={handleToggle(setCopyShortName)} />}
+            label="Copy addresses with chain prefix"
+          />
+        </FormGroup>
+        <Typography variant="h4" fontWeight="bold" mt={2}>
+          Theme
+        </Typography>
         <FormControlLabel
-          control={<Checkbox checked={settings.shortName.show} onChange={handleToggle(setShowShortName)} />}
-          label="Prepend chain prefix to addresses"
+          control={<Checkbox checked={settings.theme.darkMode} onChange={handleToggle(setDarkMode)} disabled />}
+          label="Dark mode"
         />
-        <FormControlLabel
-          control={<Checkbox checked={settings.shortName.copy} onChange={handleToggle(setCopyShortName)} />}
-          label="Copy addresses with chain prefix"
-        />
-      </FormGroup>
-      <Typography variant="h4">Theme</Typography>
-      <FormControlLabel
-        control={<Checkbox checked={settings.theme.darkMode} onChange={handleToggle(setDarkMode)} disabled />}
-        label="Dark mode"
-      />
+      </Paper>
     </main>
   )
 }

pages/safe/settings/modules.tsx

@@ -1,13 +1,15 @@
 import SafeModules from '@/components/settings/SafeModules'
 import SpendingLimits from '@/components/settings/SpendingLimits'
 import TransactionGuards from '@/components/settings/TransactionGuards'
-import { Grid, Typography } from '@mui/material'
+import { Grid } from '@mui/material'
 import type { NextPage } from 'next'
+import { Breadcrumbs } from '@/components/common/Breadcrumbs'
+import SettingsIcon from '@/public/images/sidebar/settings.svg'
 
 const Modules: NextPage = () => {
   return (
     <main>
-      <Typography variant="h2">Settings / Modules</Typography>
+      <Breadcrumbs Icon={SettingsIcon} first="Settings" second="Modules" />
       <Grid container direction="column" spacing={2}>
         <Grid item>
           <SafeModules />