feat: new Sidebar design (safe-global#93)

* feat: theme

* feat: redesign Safe sidebar

* fix: lint + theme import

* fix: add `alt`s

* feat: Safe list drawer

* fix: Safe list navigation

* fix: restructure sidebar folder

* fix: adjust hooks

* fix: split component, adjust currency logic + lint

* fix: extract function

* feat: basis of new Safe list

* fix: adjust secondary action

* fix: add tests

* test: SVG icons

* Revert "test: SVG icons"

This reverts commit b5cdc1f.

* fix: highlight icon + scroll to Safe

* fix: test

* feat: Safe list context menu + review fixes

* fix: move assets + style context menu

* fix: update theme typography

* fix: styles + open drawer

* fix: styles

* fix: hydration error

* fix: make entire Safe list scrollable

* fix: address review comments

* fix: balance

* fix: test

* fix: tweak styles + add optional chain

components/common/Identicon/index.tsx

@@ -1,22 +1,28 @@
-import { ReactElement, useMemo } from 'react'
+import { ReactElement, useMemo, CSSProperties } from 'react'
 import makeBlockie from 'ethereum-blockies-base64'
+import Skeleton from '@mui/material/Skeleton'
+
 import css from './styles.module.css'
 
-interface IdenticonProps {
+export interface IdenticonProps {
   address: string
 }
 
 const Identicon = ({ address }: IdenticonProps): ReactElement => {
-  const iconSrc = useMemo<string>(() => {
-    if (!address) return ''
-    try {
-      return makeBlockie(address)
-    } catch (e) {
-      return ''
+  const style = useMemo<CSSProperties | null>(() => {
+    if (!address) {
+      return null
     }
+
+    let blockie = ''
+    try {
+      blockie = makeBlockie(address)
+    } catch (e) {}
+
+    return blockie ? { backgroundImage: `url(${blockie})` } : null
   }, [address])
 
-  return <div className={css.icon} style={{ backgroundImage: `url(${iconSrc})` }} />
+  return !style ? <Skeleton variant="circular" width={40} height={40} /> : <div className={css.icon} style={style} />
 }
 
 export default Identicon

components/common/Identicon/styles.module.css

@@ -6,6 +6,5 @@
   min-width: 20px;
   min-height: 20px;
   border-radius: 50%;
-  background-color: #eee;
   background-size: cover;
 }

components/common/PageLayout/index.tsx

@@ -1,7 +1,7 @@
 import { useState, type ReactElement } from 'react'
 import { Box, Drawer } from '@mui/material'
 
-import Sidebar from '@/components/common/Sidebar'
+import Sidebar from '@/components/sidebar/Sidebar'
 import Header from '@/components/common//Header'
 import css from './styles.module.css'
 

components/common/SafeIcon/index.tsx

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react'
+import { Box } from '@mui/material'
+
+import css from './styles.module.css'
+import Identicon, { type IdenticonProps } from '../Identicon'
+
+interface ThresholdProps {
+  threshold: number | string
+  owners: number | string
+}
+const Threshold = ({ threshold, owners }: ThresholdProps): ReactElement => (
+  <Box
+    className={css.threshold}
+    sx={({ palette }) => ({
+      background: palette.primaryGreen[200],
+      // @ts-expect-error type '400' can't be used to index type 'PaletteColor'
+      color: palette.primary[400],
+    })}
+  >
+    {threshold}/{owners}
+  </Box>
+)
+
+interface SafeIconProps extends IdenticonProps {
+  threshold?: ThresholdProps['threshold']
+  owners?: ThresholdProps['owners']
+}
+
+const SafeIcon = ({ address, threshold, owners }: SafeIconProps): ReactElement => (
+  <div className={css.container}>
+    {threshold && owners && <Threshold threshold={threshold} owners={owners} />}
+    <Identicon address={address} />
+  </div>
+)
+
+export default SafeIcon

components/common/SafeIcon/styles.module.css

@@ -0,0 +1,24 @@
+.container {
+  position: relative;
+  height: 40px;
+  width: 40px;
+}
+
+.threshold {
+  position: absolute;
+  margin-top: -8px;
+  margin-left: -8px;
+  left: 36px;
+  z-index: 1;
+  border-radius: 100%;
+  font-size: 12px;
+  min-width: 25px;
+  min-height: 25px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  line-height: 16px;
+  font-weight: 700;
+}