Merge pull request #38 from ResilientApp/v3-1

V3-1
ResilientApp · Sep 4, 2024 · 44f64f8 · 44f64f8
2 parents f596446 + 563c417
commit 44f64f8
Show file tree

Hide file tree

Showing 59 changed files with 2,955 additions and 3,620 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "@mui/material": "^5.14.17",
     "@nivo/core": "^0.83.1",
     "@nivo/line": "^0.83.1",
+    "@react-hook/window-size": "^3.1.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -21,16 +22,14 @@
     "dotenv": "^16.4.5",
     "lodash": "^4.17.21",
     "object-hash": "^3.0.0",
-    "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-axios": "^2.0.6",
     "react-chartjs-2": "^5.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
-    "react-use-websocket": "^4.5.0",
-    "usehooks-ts": "^3.0.1"
+    "react-use-websocket": "^4.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/APIs/index.js b/src/APIs/index.js
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,9 @@
-import { Suspense, useContext, useState } from 'react';
+import { Suspense, useContext, useEffect, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { Navigate, Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import Home from './Components/Pages/Home';
 import Team from './Components/Pages/Team';
+// TODO: Change the below from index2 to index for Visualizer
 import Visualizer from './Components/Pages/Visualizer';
 import Footer from './Components/Shared/Footer';
 import Loader from './Components/Shared/Loader';
@@ -15,8 +16,10 @@ import { AllProviders } from './Context';
 import { NavbarToggleContext } from './Context/navbarToggle';
 import { ThemeContext } from './Context/theme';
 import './Styles/App.css';
+import { initParticlesEngine } from '@tsparticles/react';
+import { loadSlim } from '@tsparticles/slim';
 
-const BorderToggleRef = () => {
+export const BorderToggleRef = () => {
   const { bToggleElement } = useContext(NavbarToggleContext);
 
   return (
@@ -25,8 +28,8 @@ const BorderToggleRef = () => {
 }
 
 const PreSynthApp = () => {
-  const [isLoading, setIsLoading] = useState(true);
-  const { borderToggle } = useContext(NavbarToggleContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const [init, setInit] = useState(false);
   const { toggleLightTheme, toggleDarkTheme } = useContext(ThemeContext);
 
   if (localStorage.getItem("theme") === "light") {
@@ -37,9 +40,18 @@ const PreSynthApp = () => {
     document.documentElement.setAttribute("data-theme", "dark");
   }
 
+  useEffect(() => {
+    initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    }).then(() => {
+      setInit(true);
+      setIsLoading(false);
+    });
+  }, []);
+
   return (
     <>
-      <ParticleWrapper setIsLoading={setIsLoading} />
+      <ParticleWrapper init={init} />
       {isLoading ? (
         <Loader />
       ) : (
@@ -48,17 +60,14 @@ const PreSynthApp = () => {
               <OnlyDesktop />
             ) : (
               <Router>
-                <Navbar borderToggle={borderToggle} />
-                <BorderToggleRef />
                 <Routes>
                     <Route path={`${URL_TEAM_PAGE}`} element={<Team />} />
                     <Route path={`${URL_HOME_PAGE}`} element={<Home />} />
                     <Route path={`${URL_VISUALIZER_PAGE}`} element={<Visualizer />} />
                   <Route path='*' element={<NotFound />} />
                     <Route index element={<Navigate to={`${URL_REROUTE_PAGE}`} />} />
                 </Routes>
-                <Footer />
-              </Router >
+              </Router>
             )}
           </>
       )}

diff --git a/src/Components/Pages/Home/Sections/Graphs/Card.js b/src/Components/Pages/Home/Sections/Graphs/Card.js
@@ -55,7 +55,7 @@ const Card = ({
   };
 
   return (
-    <div className='mt-2 mb-2 mx-0 w-750p'>
+    <div className='mt-2 mb-2 mx-0 w-920p'>
       <div className={
         classNames('grid gap-x-4 items-center justify-center',
         {'grid-cols-1-1.5fr': inverted},

diff --git a/src/Components/Pages/Home/Sections/PbftIntro/index.js b/src/Components/Pages/Home/Sections/PbftIntro/index.js
@@ -3,6 +3,7 @@ import { atomIcon } from '../../../../../Resources/Icons'
 import Title, { Subtitle } from '../../../../Shared/Title'
 import Timeline from './Timeline'
 import { WHAT_IST_PBFT_SUBTITLE } from '../../../../../Constants'
+import Wrapper from '../../../../Shared/Wrapper'
 
 const index = () => {
     return (
@@ -13,8 +14,10 @@ const index = () => {
             <div>
                 <Subtitle subtitle={WHAT_IST_PBFT_SUBTITLE} />
             </div>
-            <div className='mt-16'>
-                <Timeline />
+            <div className=''>
+                <Wrapper>
+                    <Timeline />
+                </Wrapper>
             </div>
         </div>
     )