Merge pull request #62 from ResilientApp/SCM-27

Scm 27
ResilientApp · Sep 29, 2024 · aa12551 · aa12551
2 parents 2c39312 + c0c5839
commit aa12551
Show file tree

Hide file tree

Showing 20 changed files with 115 additions and 68 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
-    "main.css": "/static/css/main.19935419.css",
-    "main.js": "/static/js/main.259cdfbc.js",
+    "main.css": "/static/css/main.0a585a7c.css",
+    "main.js": "/static/js/main.d7bc5658.js",
     "static/js/1927.8bd9ca2b.chunk.js": "/static/js/1927.8bd9ca2b.chunk.js",
     "static/js/7590.4eeecba0.chunk.js": "/static/js/7590.4eeecba0.chunk.js",
     "static/js/6725.7c418f57.chunk.js": "/static/js/6725.7c418f57.chunk.js",
@@ -72,8 +72,8 @@
     "static/js/4290.d4ff0c15.chunk.js": "/static/js/4290.d4ff0c15.chunk.js",
     "static/media/defaultProfileImage.png": "/static/media/defaultProfileImage.6c9586e38b84a1d6a118.png",
     "index.html": "/index.html",
-    "main.19935419.css.map": "/static/css/main.19935419.css.map",
-    "main.259cdfbc.js.map": "/static/js/main.259cdfbc.js.map",
+    "main.0a585a7c.css.map": "/static/css/main.0a585a7c.css.map",
+    "main.d7bc5658.js.map": "/static/js/main.d7bc5658.js.map",
     "1927.8bd9ca2b.chunk.js.map": "/static/js/1927.8bd9ca2b.chunk.js.map",
     "7590.4eeecba0.chunk.js.map": "/static/js/7590.4eeecba0.chunk.js.map",
     "6725.7c418f57.chunk.js.map": "/static/js/6725.7c418f57.chunk.js.map",
@@ -144,7 +144,7 @@
     "4290.d4ff0c15.chunk.js.map": "/static/js/4290.d4ff0c15.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.19935419.css",
-    "static/js/main.259cdfbc.js"
+    "static/css/main.0a585a7c.css",
+    "static/js/main.d7bc5658.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Visualizer for the ResilientDB Blockchain fabric"/><meta name="author" description="aunshx"/><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/><title>ResView</title><script defer="defer" src="/static/js/main.259cdfbc.js"></script><link href="/static/css/main.19935419.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://unpkg.com/aos@next/dist/aos.js"></script><script>AOS.init({delay:0,duration:600,offset:10})</script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Visualizer for the ResilientDB Blockchain fabric"/><meta name="author" description="aunshx"/><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/><title>ResView</title><script defer="defer" src="/static/js/main.d7bc5658.js"></script><link href="/static/css/main.0a585a7c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://unpkg.com/aos@next/dist/aos.js"></script><script>AOS.init({delay:0,duration:600,offset:10})</script></body></html>
diff --git a/build/static/css/main.0a585a7c.css b/build/static/css/main.0a585a7c.css
diff --git a/build/static/css/main.0a585a7c.css.map b/build/static/css/main.0a585a7c.css.map
diff --git a/build/static/css/main.19935419.css b/build/static/css/main.19935419.css
diff --git a/build/static/css/main.19935419.css.map b/build/static/css/main.19935419.css.map
diff --git a/build/static/js/main.259cdfbc.js b/build/static/js/main.259cdfbc.js
diff --git a/build/static/js/main.259cdfbc.js.map b/build/static/js/main.259cdfbc.js.map
diff --git a/build/static/js/main.d7bc5658.js b/build/static/js/main.d7bc5658.js
diff --git a/build/static/js/main.259cdfbc.js.LICENSE.txt → build/static/js/main.d7bc5658.js.LICENSE.txt b/build/static/js/main.259cdfbc.js.LICENSE.txt → build/static/js/main.d7bc5658.js.LICENSE.txt
diff --git a/build/static/js/main.d7bc5658.js.map b/build/static/js/main.d7bc5658.js.map
diff --git a/src/App.js b/src/App.js
@@ -60,7 +60,7 @@ const PreSynthApp = () => {
 
   return (
     <>
-      {isMobile ? (
+      {false ? (
         <OnlyDesktop />
       ) : (
         <Router>

diff --git a/src/Components/Pages/Home/index.js b/src/Components/Pages/Home/index.js
@@ -19,12 +19,12 @@ const Home = () => {
       </div>
       <div className='flex flex-col items-center justify-center text-gray dark:text-white'>
         <div className="relative pt-20 ml-auto">
-          <div className="lg:w-2/3 text-center mx-auto">
+          <div className=" w-2/3 text-center mx-auto">
 
-            <div className="w-full mt-20 flex items-center justify-center flex-col" >
-              <div className="text-gray-900 dark:text-white font-bold text-8xl md:text-6xl xl:text-7xl px-[2em]">Visualizer for New Age Blockchain Fabrics</div>
+            <div className="w-full mt-20 flex items-center justify-center flex-col">
+              <div className="text-gray-900 dark:text-white font-bold text-8xl md:text-6xl xl:text-7xl ">Visualizer for New Age Blockchain Fabrics</div>
 
-              <div className="mt-10 px-[22rem] lg:px-[20rem] text-gray-700 dark:text-gray-300 text-20p">A novel graphical visualizer for the ResDB blockchain fabric, offering new users and learners a clear visualization of a complex technology.
+              <div className="mt-10 px-[8rem] text-gray-700 dark:text-gray-300 text-20p">A novel graphical visualizer for the ResDB blockchain fabric, offering new users and learners a clear visualization of a complex technology.
               </div>
             </div>
             <div className="mt-14 flex items-center justify-center gap-y-4 gap-x-[4em]">
@@ -34,16 +34,16 @@ const Home = () => {
             <Wrapper>
               <div className="py-8 mt-2 px-2 border-y-3p border-gray-900 dark:border-white sm:flex flex items-center justify-between w-full">
                 <div className="text-center">
-                  <h6 className="text-lg font-semibold text-gray-700 dark:text-white">Super Fast & Cheap</h6>
-                  <p className="mt-2 text-gray-500">Intensively optimized computation</p>
+                  <h6 className="text-lg font-semibold text-gray-700 dark:text-white">Super Fast</h6>
+                  <p className="mt-2 text-gray-500">Intensively optimized</p>
                 </div>
                 <div className="text-center">
                   <h6 className="text-lg font-semibold text-gray-700 dark:text-white">Wide range integration</h6>
-                  <p className="mt-2 text-gray-500">All the blocks no fuss!</p>
+                  <p className="mt-2 text-gray-500">Includes all the blocks</p>
                 </div>
                 <div className="text-center">
                   <h6 className="text-lg font-semibold text-gray-700 dark:text-white">Seeing is believing</h6>
-                  <p className="mt-2 text-gray-500">Check out all BC actions</p>
+                  <p className="mt-2 text-gray-500">Check out actions</p>
                 </div>
               </div>
             </Wrapper>

diff --git a/src/Components/Pages/Team/Ancilliary/Components/Card.js b/src/Components/Pages/Team/Ancilliary/Components/Card.js
@@ -1,20 +1,22 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import {Icon} from '../../../../Shared/Icon'
-import { linkedinIcon, githubIcon, instagramIcon } from '../../../../../Resources/Icons'
+import { linkedinIcon, githubIcon, instagramIcon, userIcon } from '../../../../../Resources/Icons'
 import {ICON_DEFAULT_COLOR} from '../../../../../Constants'
 import defaultProfileImage from '../../../../../Resources/Images/defaultProfileImage.png'
+import { CircularProgress } from '@mui/material'
+import cn from 'classnames'
 
 const linkToIcon = {
   github: githubIcon,
   linkedin: linkedinIcon,
-  ig: instagramIcon
+  portfolio: userIcon
 };
 
 const indexToSocial = {
   1: 'linkedin',
   2: 'github',
-  0: 'ig'
+  0: 'portfolio'
 };
 
 const LinkIcon = ({ link, social }) => {
@@ -31,13 +33,37 @@ const LinkIcon = ({ link, social }) => {
 
 export const CurrentTeamCard = ({ element }) => {
   const { name, title, socials, profilePic, quote } = element;
+
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const handleImageLoad = () => {
+    setImageLoaded(true);
+  };
+
+  const handleImageError = () => {
+    setImageLoaded(true);
+  };
+
   return (
     <div className='w-full h-250p text-black rounded-md border-3p border-gray-700 grid grid-cols-2 gap-x-4 dark:border-solid dark:border-gray-50 bg-blue-10 dark:bg-blue-500 dark:text-white px-4 py-6 hover:scale-105 transition'>
       <div className='w-full h-full flex items-center justify-center'>
+        <CircularProgress
+          size={30}
+          className={cn({
+            'hidden': imageLoaded
+          })}
+        />
         <img
           src={profilePic ?? defaultProfileImage}
           alt={`Profile pic of ${name}`}
-          className='object-fit rounded-md w-full'
+          className={cn(
+            'object-fit rounded-md w-full',
+            {
+              'hidden': !imageLoaded
+            }
+          )}
+          onLoad={handleImageLoad}
+          onError={handleImageError}
         />
       </div>
       <div className='py-10p flex flex-col items-center justify-evenly gap-y-4'>
@@ -63,13 +89,37 @@ export const CurrentTeamCard = ({ element }) => {
 
 export const PastMembersCard = ({ element }) => {
   const { name, profilePic, title, socials } = element;
+
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const handleImageLoad = () => {
+    setImageLoaded(true);
+  };
+
+  const handleImageError = () => {
+    setImageLoaded(true);
+  };
+
   return (
     <div className='w-full h-auto text-black rounded-md  border-3p border-gray-700 flex flex-col gap-x-2 dark:border-solid dark:border-gray-50 dark:bg-blue-500 dark:text-white px-2 py-4 hover:scale-105 transition'>
-      <div className='w-full h-full flex items-center justify-center rounded-lg'>
+      <div className='w-full h-full flex items-center justify-center'>
+        <CircularProgress
+          size={30}
+          className={cn({
+            'hidden': imageLoaded
+          })}
+        />
         <img
-          src={profilePic || defaultProfileImage}
+          src={profilePic ?? defaultProfileImage}
           alt={`Profile pic of ${name}`}
-          className='object-contain rounded-lg h-135p w-150p'
+          className={cn(
+            'object-fit rounded-md w-full p-6',
+            {
+              'hidden': !imageLoaded
+            }
+          )}
+          onLoad={handleImageLoad}
+          onError={handleImageError}
         />
       </div>
       <div className='py-10p flex flex-col items-center justify-evenly gap-y-4 mt-4'>

diff --git a/src/Components/Pages/Team/Ancilliary/Data/data.js b/src/Components/Pages/Team/Ancilliary/Data/data.js
@@ -4,7 +4,7 @@ export const currentTeam = [
     name: "Aunsh Bandivadekar",
     title: "Dev",
     socials: [
-      "https://instagram.com/aunsh___",
+      "https://deploy-preview-5--helpful-hamster-a151d8.netlify.app/",
       "https://linkedin.com/in/aunsh",
       "https://github.com/aunshx",
     ],

diff --git a/src/Components/Pages/Visualizer/TransComps/index.js b/src/Components/Pages/Visualizer/TransComps/index.js
@@ -57,7 +57,7 @@ const TransInfo = () => {
 
     const primary = primaryIndexVal === -1 ? 'No Primary' : `Replica ${primaryIndexVal}`
 
-    const [replica_current_status, setReplicaStatus] = useState([false, false, false, false])
+    const [replicaCurrentStatus, setReplicaStatus] = useState([false, false, false, false])
 
     function fetchWithTimeout(url, options, timeout = 5000) {
         return Promise.race([
@@ -100,11 +100,15 @@ const TransInfo = () => {
     }
     useEffect(() => {
         const interval = setInterval(() => {
-            fetchReplicaStatuses();
+            if(currentTransaction < 0) {
+                setReplicaStatus(replicaStatus);
+            } else {
+                fetchReplicaStatuses();
+            }
         }, 3000); // 3000 milliseconds = 3 seconds
 
         return () => clearInterval(interval);
-    }, []);
+    }, [replicaStatus]);
 
     return (
         <div className="h-full w-220p fixed z-1 top-0 left-0 overflow-x-hidden p-2 py-6 flex flex-col items-center justify-around opacity-1 border-r-3p border-solid border-gray-700 dark:border-gray-50 dark:text-gray-300 gap-y-6 scrollbar">
@@ -146,7 +150,7 @@ const TransInfo = () => {
                 Replica Status
             </div>
             <div className='flex flex-col items-center justify-center gap-y-10'>
-                {replica_current_status.length > 0 && replica_current_status.map((value, index) => (
+                {replicaCurrentStatus.length > 0 && replicaCurrentStatus.map((value, index) => (
                     <ReplicaStatTile
                         key={index}
                         replica={`Replica ${index + 1}`}

diff --git a/src/Components/Pages/Visualizer/index.js b/src/Components/Pages/Visualizer/index.js
@@ -3,8 +3,8 @@ import React from "react";
 import { DATA_TABLE_DELAY } from "../../../Constants";
 import Footer from "../../Shared/Footer";
 import HRline from '../../Shared/HRline';
-import Mvt from "./Graphs/MVT";
-import Pbft from "./Graphs/PBFT";
+import Mvt from "./Graphs/Mvt";
+import Pbft from "./Graphs/Pbft";
 import DataTable from './Table';
 import TransInfo from './TransComps';
 import Analytics from "./TransComps/Components/AnalyticsItem";

diff --git a/src/Components/Shared/Footer.js b/src/Components/Shared/Footer.js
@@ -27,7 +27,7 @@ const Footer = () => {
           </span>
         </div>
         <div className='text-12p text-gray-100 bold'>
-        v3.1.1 &middot; &copy; 2023-2024 &middot; All rights reserved
+        v3.1.2 &middot; &copy; 2023-2024 &middot; All rights reserved
         </div>
     </div>
     </div>

diff --git a/src/Resources/Icons/index.js b/src/Resources/Icons/index.js
diff --git a/src/Styles/App.css b/src/Styles/App.css
@@ -698,6 +698,9 @@ video {
 .grid {
   display: grid;
 }
+.hidden {
+  display: none;
+}
 .h-0 {
   height: 0px;
 }
@@ -782,12 +785,12 @@ video {
 .w-120p {
   width: 120px;
 }
-.w-150p {
-  width: 150px;
-}
 .w-180p {
   width: 180px;
 }
+.w-2\/3 {
+  width: 66.666667%;
+}
 .w-220p {
   width: 220px;
 }
@@ -1227,9 +1230,6 @@ video {
 .to-sky-300 {
   --tw-gradient-to: #7dd3fc var(--tw-gradient-to-position);
 }
-.object-contain {
-  object-fit: contain;
-}
 .object-fill {
   object-fit: fill;
 }
@@ -1242,6 +1242,9 @@ video {
 .p-4 {
   padding: 1rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1278,13 +1281,9 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.px-\[22rem\] {
-  padding-left: 22rem;
-  padding-right: 22rem;
-}
-.px-\[2em\] {
-  padding-left: 2em;
-  padding-right: 2em;
+.px-\[8rem\] {
+  padding-left: 8rem;
+  padding-right: 8rem;
 }
 .py-1 {
   padding-top: 0.25rem;
@@ -2206,20 +2205,11 @@ code {
 
 @media (max-width: 1080px) {
 
-  .lg\:w-2\/3 {
-    width: 66.666667%;
-  }
-
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
 
-  .lg\:px-\[20rem\] {
-    padding-left: 20rem;
-    padding-right: 20rem;
-  }
-
   .lg\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;