feat: add sticky topbar and reverse charts (#23)

src/components/StyledComponents.ts

@@ -44,6 +44,7 @@ export const StyledAccordion = styled(Accordion)(({ theme }) => ({
   boxShadow: '1px 5px 28px rgba(35, 11, 73, 0.05)',
   borderRadius: theme.shape.borderRadius,
   marginBottom: theme.spacing(1),
+  border: '1px solid #f8f8f8',
   '&:hover': {
     backgroundColor: '#fafafc',
   },

src/routes/Blocks/GridItem.tsx

@@ -26,7 +26,6 @@ import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import { shortenString } from '../../utils/helpers';
 import CopyToClipboard from '../../components/CopyToClipboard';
-import { useTheme } from '@mui/material/styles';
 
 function GridItem(
   label: string,
@@ -36,7 +35,6 @@ function GridItem(
   subIndex: number,
   showDivider: boolean
 ) {
-  const theme = useTheme();
   return (
     <Grid
       container
@@ -46,26 +44,10 @@ function GridItem(
         borderTop: showDivider ? `1px solid white` : 'none',
       }}
     >
-      <Grid
-        item
-        xs={12}
-        md={4}
-        lg={4}
-        style={{
-          padding: theme.spacing(2),
-        }}
-      >
+      <Grid item xs={12} md={4} lg={4} p={2}>
         <Typography variant="body2">{label}</Typography>
       </Grid>
-      <Grid
-        item
-        xs={12}
-        md={8}
-        lg={8}
-        style={{
-          padding: theme.spacing(2),
-        }}
-      >
+      <Grid item xs={12} md={8} lg={8} p={2}>
         <TypographyData>
           {copy ? (
             <Fragment>

src/routes/Charts/HashRates.tsx

@@ -79,20 +79,26 @@ const HashRates: React.FC<HashRatesProps> = ({ type }) => {
 
   useEffect(() => {
     const display: Display[] = [];
-    let blockItem = parseInt(tip, 10);
+    const ascendingBlockNumbers: number[] = [];
+    let blockItem = parseInt(tip, 10) - noOfBlocks + 1;
     let hashRates = hashRatesMap[type];
+
+    // Populate ascendingBlockNumbers array
+    for (let i = 0; i < noOfBlocks; i++) {
+      ascendingBlockNumbers.push(blockItem + i);
+    }
+
     for (let i = 1; i <= noOfBlocks; i++) {
       if (hashRates?.[i - 1] !== 0) {
         display.push({
-          blockNumber: blockItem,
+          blockNumber: ascendingBlockNumbers[i - 1],
           hashRate: hashRates?.[i - 1] || 0,
         });
       } else {
         setNoOfBlocks((prevState) => prevState - 1);
       }
-      blockItem = blockItem - 1;
     }
-    setDisplay(display.reverse());
+    setDisplay(display);
   }, [data]);
 
   const option = {

src/routes/Header/Header.tsx

@@ -47,11 +47,8 @@ function Header() {
     0
   );
 
-  // check for the first non-zero value
-  const latestMoneroHashRate =
-    data?.moneroHashRates?.find((rate: number) => rate !== 0) ?? 0;
-  const latestShaHashRate =
-    data?.shaHashRates?.find((rate: number) => rate !== 0) ?? 0;
+  const latestMoneroHashRate = data?.currentMoneroHashRate ?? 0;
+  const latestShaHashRate = data?.currentShaHashRate ?? 0;
 
   const average = sum / values.length;
   const formattedAverageBlockTime = numeral(average).format('0') + 'm';

src/routes/Header/StickyHeader.tsx

@@ -0,0 +1,69 @@
+//  Copyright 2022. The Tari Project
+//
+//  Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+//  following conditions are met:
+//
+//  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following
+//  disclaimer.
+//
+//  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+//  following disclaimer in the documentation and/or other materials provided with the distribution.
+//
+//  3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote
+//  products derived from this software without specific prior written permission.
+//
+//  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+//  INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+//  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+//  SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+//  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+//  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
+//  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+import React, { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const darkBg = 'rgb(25, 14, 43, 0.95)';
+const lightBg = 'rgba(0,0,0,0.1)';
+
+const StickyHeader = ({ children }: Props) => {
+  const [bgColor, setBgColor] = useState(lightBg);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 10) {
+        setBgColor(darkBg);
+      } else {
+        setBgColor(lightBg);
+      }
+    };
+
+    handleScroll();
+
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <Box
+      style={{
+        position: 'sticky',
+        top: 0,
+        width: '100%',
+        backgroundColor: bgColor,
+        transition: 'background-color 0.3s ease',
+        zIndex: 1000,
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default StickyHeader;

src/theme/MainLayout.tsx

@@ -26,6 +26,7 @@ import { Outlet } from 'react-router-dom';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Header from '../routes/Header/Header';
+import StickyHeader from '../routes/Header/StickyHeader';
 import TopBar from '../routes/Header/TopBar';
 import { darkTheme } from './themes';
 
@@ -35,8 +36,10 @@ export default function MainLayout() {
       <ThemeProvider theme={darkTheme}>
         <CssBaseline />
         <Grid container spacing={0} className="main-bg">
-          <TopBar />
-          <Header />
+          <StickyHeader>
+            <TopBar />
+            <Header />
+          </StickyHeader>
           <Container maxWidth="xl">
             <Outlet />
           </Container>

src/theme/PageLayout.tsx

@@ -26,6 +26,7 @@ import { Outlet } from 'react-router-dom';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
 import Header from '../routes/Header/Header';
+import StickyHeader from '../routes/Header/StickyHeader';
 import TopBar from '../routes/Header/TopBar';
 import { darkTheme, lightTheme } from './themes';
 
@@ -47,28 +48,31 @@ export default function PageLayout({
       <ThemeProvider theme={darkTheme}>
         <CssBaseline />
         <Grid container spacing={0} className="main-bg">
-          <TopBar />
-          <Header />
+          <StickyHeader>
+            <TopBar />
+            <Header />
+          </StickyHeader>
           {customHeader ? (
             customHeader
           ) : (
             <HeaderTitle title={title || ''} subTitle={subTitle || ''} />
           )}
+          <ThemeProvider theme={lightTheme}>
+            <Container
+              maxWidth="xl"
+              style={{
+                paddingTop: lightTheme.spacing(5),
+                paddingBottom: lightTheme.spacing(5),
+                background: lightTheme.palette.background.default,
+              }}
+            >
+              <Grid container spacing={3}>
+                <Outlet />
+              </Grid>
+            </Container>
+          </ThemeProvider>
         </Grid>
       </ThemeProvider>
-      <ThemeProvider theme={lightTheme}>
-        <Container
-          maxWidth="xl"
-          style={{
-            paddingTop: lightTheme.spacing(5),
-            paddingBottom: lightTheme.spacing(5),
-          }}
-        >
-          <Grid container spacing={3}>
-            <Outlet />
-          </Grid>
-        </Container>
-      </ThemeProvider>
     </>
   );
 }