Breadcrumb Implementation

packages/frontend/src/app/validator/[hash]/Validator.js

@@ -17,13 +17,15 @@ import { ValidatorCard } from '../../../components/validators'
 import { CircleIcon } from '../../../components/ui/icons'
 import { RateTooltip } from '../../../components/ui/Tooltips'
 import { networks } from '../../../constants/networks'
+import { useBreadcrumbs } from '../../../contexts/BreadcrumbsContext'
 import './ValidatorPage.scss'
 import {
   Badge,
   Tabs, TabList, TabPanels, Tab, TabPanel
 } from '@chakra-ui/react'
 
 function Validator ({ hash }) {
+  const { setBreadcrumbs } = useBreadcrumbs()
   const [validator, setValidator] = useState({ data: {}, loading: true, error: false })
   const [rate, setRate] = useState({ data: {}, loading: true, error: false })
   const [proposedBlocks, setProposedBlocks] = useState({ data: {}, props: { currentPage: 0 }, loading: true, error: false })
@@ -36,6 +38,14 @@ function Validator ({ hash }) {
   const activeNetwork = networks.find(network => network.explorerBaseUrl === baseUrl)
   const l1explorerBaseUrl = activeNetwork?.l1explorerBaseUrl || null
 
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: 'Home', path: '/' },
+      { label: 'Validators', path: '/validators' },
+      { label: hash, avatar: true }
+    ])
+  }, [setBreadcrumbs, hash])
+
   const poseStatusColor = (validator.data?.proTxInfo?.state?.PoSeBanHeight > 0 &&
     validator.data?.proTxInfo?.state?.PoSeRevivedHeight === -1)
     ? 'red.default'

packages/frontend/src/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,40 @@
+import './Breadcrumbs.scss'
+import Link from 'next/link'
+import { ChevronIcon } from '../ui/icons'
+import { useBreadcrumbs } from '../../contexts/BreadcrumbsContext'
+import ImageGenerator from '../imageGenerator'
+
+const Breadcrumbs = () => {
+  const { breadcrumbs } = useBreadcrumbs()
+
+  if (!breadcrumbs || breadcrumbs?.length === 0) return
+
+  const LinkContainer = ({ children, href, ...props }) => {
+    if (href) {
+      return <Link href={href} {...props}>{children}</Link>
+    }
+
+    return <span {...props}>{children}</span>
+  }
+
+  return (
+    <div className={'Breadcrumbs'}>
+      <ul className={'Breadcrumbs__LinksContainer'}>
+        {breadcrumbs.map((link, i) => (
+          <>
+            <li className={'Breadcrumbs__Link'}>
+              <LinkContainer href={i !== breadcrumbs.length - 1 ? link.path : null} key={i}>
+                {link.avatar &&
+                  <ImageGenerator className={'Breadcrumbs__Avatar'} username={link.label} lightness={50} saturation={50} width={16} height={16} />}
+                {link.label}
+              </LinkContainer>
+            </li>
+            {i !== breadcrumbs.length - 1 && <div className={'Breadcrumbs__Separator'}><ChevronIcon color={'brand.normal'}/></div>}
+          </>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default Breadcrumbs

packages/frontend/src/components/breadcrumbs/Breadcrumbs.scss

@@ -0,0 +1,68 @@
+@use '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
+
+.Breadcrumbs {
+  max-width: var(--chakra-sizes-container-maxPageW);
+  background: rgba(var(--chakra-colors-gray-675-rgb), .5);
+  border-radius: 0 0 20px 20px;
+  margin: -500px auto 0;
+  padding: 512px 12px 12px 12px;
+
+  &__LinksContainer {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+  }
+
+  &__Link {
+    margin: 0;
+
+    a, span {
+      display: flex;
+      align-items: center;
+      padding: 9px 20px;
+      background: rgba(var(--chakra-colors-brand-normal-rgb), .2);
+      color: var(--chakra-colors-brand-normal);
+      transition: $transition-time-def;
+      border-radius: 10px;
+      font-size: 0.75rem;
+      font-family: $font-mono;
+    }
+
+    a {
+      background: rgba(var(--chakra-colors-brand-normal-rgb), .2);
+
+      &:hover {
+        background: rgba(var(--chakra-colors-brand-normal-rgb), .25);
+      }
+    }
+
+    span {
+      background: rgba(255, 255, 255, .1);
+      color: #ffffff;
+      cursor: default;
+    }
+  }
+
+  &__Avatar {
+    margin-right: 4px;
+  }
+
+  &__Separator {
+    margin: 0 10px;
+
+    svg {
+      width: 6px;
+      height: 10px;
+    }
+  }
+
+  @media screen and (max-width: 1440px) {
+    padding: 512px 24px 12px 24px;
+  }
+
+  @media screen and (max-width: $breakpoint-lg) {
+    display: none;
+  }
+}

packages/frontend/src/components/layout/RootComponent.js

@@ -1,23 +1,26 @@
 'use client'
 
 import { ChakraProvider, localStorageManager } from '@chakra-ui/react'
+import { BreadcrumbsProvider } from '../../contexts/BreadcrumbsContext'
 import { useEffect } from 'react'
 import theme from '../../styles/theme'
 import Navbar from './navbar/Navbar'
 import Footer from './footer'
 import Background from './Background'
 import '../../styles/theme.scss'
 
-export default function RootComponent ({ children, showHeaderLight }) {
+export default function RootComponent ({ children }) {
   useEffect(() => {
     localStorage.setItem('chakra-ui-color-mode', theme.initialColorMode)
   }, [])
 
   return (
     <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
       <Background/>
-      <Navbar/>
-      {children}
+      <BreadcrumbsProvider>
+        <Navbar/>
+        {children}
+      </BreadcrumbsProvider>
       <Footer/>
     </ChakraProvider>
   )

packages/frontend/src/components/layout/navbar/Navbar.js

@@ -11,6 +11,7 @@ import {
   useDisclosure,
   Stack
 } from '@chakra-ui/react'
+import Breadcrumbs from '../../breadcrumbs/Breadcrumbs'
 import NetworkSelect from './NetworkSelect'
 import { usePathname } from 'next/navigation'
 import { useEffect } from 'react'
@@ -42,11 +43,13 @@ const NavLink = ({ children, to, isActive, className }) => {
 function Navbar () {
   const pathname = usePathname()
   const { isOpen, onOpen, onClose } = useDisclosure()
+  const breadcrumbsActiveRoutes = ['/validator/']
+  const displayBreadcrumbs = breadcrumbsActiveRoutes.some(route => pathname.indexOf(route) !== -1)
 
-  useEffect(onClose, [pathname])
+  useEffect(onClose, [pathname, onClose])
 
   return (
-    <Box px={3} position={'relative'}>
+    <Box position={'relative'}>
       <div className={'NavbarStub'}></div>
       <Flex
         className={'Navbar'}
@@ -87,6 +90,7 @@ function Navbar () {
           ))}
         </Stack>
       </Box>
+      {displayBreadcrumbs && <Breadcrumbs/>}
     </Box>
   )
 }

packages/frontend/src/components/ui/containers/PageDataContainer.scss

@@ -40,7 +40,6 @@ $borderRadius: 20px;
   &__BackLink {
     position: relative;
     z-index: 2;
-    display: block;
     width: 32px;
     height: 24px;
     margin-right: 10px;
@@ -79,7 +78,6 @@ $borderRadius: 20px;
     }
 
     &__Header {
-      padding: 0 12px;
       margin-bottom: 12px;
 
       &::before {

packages/frontend/src/contexts/BreadcrumbsContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext, useState } from 'react'
+
+const BreadcrumbsContext = createContext({})
+export const useBreadcrumbs = () => useContext(BreadcrumbsContext)
+
+export const BreadcrumbsProvider = ({ children }) => {
+  const [breadcrumbs, setBreadcrumbs] = useState([])
+  const contextValue = { breadcrumbs, setBreadcrumbs }
+
+  return (
+    <BreadcrumbsContext.Provider value={contextValue}>
+      {children}
+    </BreadcrumbsContext.Provider>
+  )
+}

packages/frontend/src/styles/theme.js

@@ -46,7 +46,7 @@ export const theme = extendTheme({
   colors: {
     brand: {
       normal: '#008DE4',
-      'normal-rgb': '4, 147, 235',
+      'normal-rgb': '0, 141, 228',
       deep: '#0E75B5',
       shaded: '#165278',
       light: '#2CBBFF',
@@ -79,6 +79,7 @@ export const theme = extendTheme({
       600: '#62676a',
       650: '#232C30',
       675: '#21272C',
+      '675-rgb': '33, 39, 44',
       700: '#494e51',
       750: '#39454C',
       800: '#2e393d',