chore(web): split project page tabs into individual components

privacy-scaling-explorations · Sep 10, 2024 · e9c09ad · e9c09ad
1 parent d90f318
commit e9c09ad
Show file tree

Hide file tree

Showing 10 changed files with 509 additions and 397 deletions.
diff --git a/web/src/components/Avatars.tsx b/web/src/components/Avatars.tsx
@@ -1,15 +1,13 @@
 import React from "react"
 import { Avatar, Box } from "@chakra-ui/react"
 
-interface ScrollingAvatarsProps {
-    images?: string[]
-  }
-
+import { useProjectPageContext } from "../context/ProjectPageContext";
+
 /**
  * Display the participants Avatars in a scrolling list
- * @param {ScrollingAvatarsProps} - the images to show
  */
-const ScrollingAvatars: React.FC<ScrollingAvatarsProps> = ({ images }) => {
+const ScrollingAvatars: React.FC = () => {
+    const {avatars} = useProjectPageContext();
     return (
       <Box
         maxW={"container.md"}
@@ -20,7 +18,7 @@ const ScrollingAvatars: React.FC<ScrollingAvatarsProps> = ({ images }) => {
         px={2}
         borderColor="gray.200"
       >
-        {images && images.length > 0 && images.map((image: string, index: any) => (
+        {avatars && avatars.length > 0 && avatars.map((image: string, index: any) => (
           <Avatar
             key={index}
             src={image}
@@ -31,4 +29,4 @@ const ScrollingAvatars: React.FC<ScrollingAvatarsProps> = ({ images }) => {
     )
   }
 
-export default ScrollingAvatars
+export default ScrollingAvatars
diff --git a/web/src/components/CircuitAbout.tsx b/web/src/components/CircuitAbout.tsx
@@ -0,0 +1,62 @@
+import {
+  Box,
+  Stat,
+  StatLabel,
+  StatNumber,
+  Heading,
+  Flex,
+  SimpleGrid,
+} from "@chakra-ui/react";
+
+import {
+  truncateString,
+  parseRepoRoot
+} from "../helpers/utils";
+
+export const CircuitAbout: React.FC = ({ circuit }) => {
+  return (
+    <Box borderWidth={1} borderRadius="lg" p={4}>
+      <Heading fontSize={16} size="md" mb={2}>
+        {circuit.name} - {circuit.description}
+      </Heading>
+      <SimpleGrid columns={[2, 2]} spacing={4}>
+        <Flex justify="space-between" align="center">
+          <Stat>
+            <StatLabel fontSize={12}>Parameters</StatLabel>
+            <StatNumber fontSize={16}>
+              {
+                circuit.template.paramsConfiguration && circuit.template.paramsConfiguration.length > 0 ?
+                circuit.template.paramsConfiguration.join(" ") :
+                circuit.template.paramConfiguration && circuit.template.paramConfiguration.length > 0 ?
+                circuit.template.paramConfiguration.join(" ") :
+                "No parameters"
+              }
+            </StatNumber>
+          </Stat>
+        </Flex>
+        <Stat>
+          <StatLabel fontSize={12}>Commit Hash</StatLabel>
+          <StatNumber fontSize={16}>
+            <a href={`${parseRepoRoot(circuit.template.source)}/tree/${circuit.template.commitHash}`} target="_blank">
+              {truncateString(circuit.template.commitHash, 6)}
+            </a>
+          </StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel fontSize={12}>Template Link</StatLabel>
+          <StatNumber fontSize={16}>
+            <a href={circuit.template.source} target="_blank">
+            {truncateString(circuit.template.source, 16)}
+            </a>
+          </StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel fontSize={12}>Compiler Version</StatLabel>
+          <StatNumber fontSize={16}>
+            {circuit.compiler.version}
+          </StatNumber>
+        </Stat>
+      </SimpleGrid>
+    </Box>
+  );
+}
diff --git a/web/src/components/CircuitStats.tsx b/web/src/components/CircuitStats.tsx
@@ -0,0 +1,74 @@
+import {
+  Box,
+  Stat,
+  StatLabel,
+  StatNumber,
+  Tag,
+  Heading,
+  Flex,
+  Icon,
+  SimpleGrid,
+} from "@chakra-ui/react";
+import { FiTarget, FiZap, FiEye, FiUser, FiMapPin, FiWifi } from "react-icons/fi";
+
+export const CircuitStats: React.FC = ({ circuit }) => {
+  return (
+    <Box borderWidth={1} borderRadius="lg" p={4}>
+      <Heading fontSize={16} size="md" mb={2}>
+        {circuit.name} - {circuit.description}
+      </Heading>
+      <Flex wrap="wrap" mb={4}>
+        <Tag fontSize={10} size="sm" colorScheme="purple" mr={2} mb={2}>
+          <Icon as={FiTarget} mr={1} />
+          Constraints: {circuit.constraints}
+        </Tag>
+        <Tag fontSize={10} size="sm" colorScheme="cyan" mr={2} mb={2}>
+          <Icon as={FiZap} mr={1} />
+          Pot: {circuit.pot}
+        </Tag>
+        <Tag fontSize={10} size="sm" colorScheme="yellow" mr={2} mb={2}>
+          <Icon as={FiEye} mr={1} />
+          Private Inputs: {circuit.privateInputs}
+        </Tag>
+        <Tag fontSize={10} size="sm" colorScheme="pink" mr={2} mb={2}>
+          <Icon as={FiUser} mr={1} />
+          Public Inputs: {circuit.publicInputs}
+        </Tag>
+        <Tag fontSize={10} size="sm" colorScheme="blue" mr={2} mb={2}>
+          <Icon as={FiMapPin} mr={1} />
+          Curve: {circuit.curve}
+        </Tag>
+        <Tag fontSize={10} size="sm" colorScheme="teal" mr={2} mb={2}>
+          <Icon as={FiWifi} mr={1} />
+          Wires: {circuit.wires}
+        </Tag>
+      </Flex>
+      <SimpleGrid columns={[2, 2]} spacing={6}>
+        <Flex justify="space-between" align="center">
+          <Stat>
+            <StatLabel fontSize={12}>Completed Contributions</StatLabel>
+            <StatNumber fontSize={16}>
+              {circuit.completedContributions}
+            </StatNumber>
+          </Stat>
+        </Flex>
+        <Stat>
+          <StatLabel fontSize={12}>Memory Requirement</StatLabel>
+          <StatNumber fontSize={16}>
+            {circuit.memoryRequirement} mb
+          </StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel fontSize={12}>Avg Contribution Time</StatLabel>
+          <StatNumber fontSize={16}>
+            {circuit.avgTimingContribution}s
+          </StatNumber>
+        </Stat>
+        <Stat>
+          <StatLabel fontSize={12}>Max Contribution Time</StatLabel>
+          <StatNumber fontSize={16}>{circuit.maxTiming}s</StatNumber>
+        </Stat>
+      </SimpleGrid>
+    </Box>
+  );
+}
diff --git a/web/src/components/ProjectTabAbout.tsx b/web/src/components/ProjectTabAbout.tsx
@@ -0,0 +1,40 @@
+import {
+  Box,
+  VStack,
+  SimpleGrid,
+  TabPanel,
+} from "@chakra-ui/react";
+
+import { useProjectPageContext } from "../context/ProjectPageContext";
+import { CircuitAbout } from "../components/CircuitAbout";
+
+export const ProjectTabAbout: React.FC = () => {
+  const { circuitsClean } = useProjectPageContext();
+  return (
+    <TabPanel>
+      <VStack
+        alignSelf={"stretch"}
+        alignItems={"center"}
+        justifyContent={"center"}
+        spacing={8}
+        py={0}
+      >
+        <Box alignItems="center" alignSelf={"stretch"} w="full">
+          <SimpleGrid
+            alignSelf={"stretch"}
+            maxW={["392px", "390px", "100%"]}
+            columns={1}
+            spacing={6}
+          >
+            {circuitsClean.map((circuit, index) => (
+              <CircuitAbout
+                key={index}
+                {...{circuit}}
+              />
+            ))}
+          </SimpleGrid>
+        </Box>
+      </VStack>
+    </TabPanel>
+  );
+}
diff --git a/web/src/components/ProjectTabContributions.tsx b/web/src/components/ProjectTabContributions.tsx
@@ -0,0 +1,68 @@
+import {
+  Box,
+  HStack,
+  TabPanel,
+  Tag,
+  Heading,
+  Spacer,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tooltip,
+  Tr,
+  Skeleton,
+  Stack,
+} from "@chakra-ui/react";
+
+import { useProjectPageContext } from "../context/ProjectPageContext";
+
+export const ProjectTabContributions: React.FC = () => {
+  const { contributionsClean } = useProjectPageContext();
+  return (
+    <TabPanel alignSelf={"stretch"}>
+      <HStack justifyContent={"space-between"} alignSelf={"stretch"}>
+        <Heading fontSize="18" mb={6} fontWeight={"bold"} letterSpacing={"3%"}>
+          Contributions
+        </Heading>
+        <Spacer />
+      </HStack>
+      <Box overflowX="auto">
+        {!contributionsClean ? (
+          <Stack>
+            <Skeleton height="20px" />
+            <Skeleton height="20px" />
+            <Skeleton height="20px" />
+          </Stack>
+        ) : (
+          <Table fontSize={12} variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Doc</Th>
+                <Th>Contribution Date</Th>
+                <Th>Hashes</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {contributionsClean.map((contribution, index) => (
+                <Tr key={index}>
+                  <Td>{contribution.doc}</Td>
+                  <Td>{contribution.lastUpdated}</Td>
+                  <Td>
+                    <Tooltip
+                      label={contribution.lastZkeyBlake2bHash}
+                      aria-label="Last Zkey Hash"
+                    >
+                      <Tag fontSize={12}>{contribution.lastZkeyBlake2bHash}</Tag>
+                    </Tooltip>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        )}
+      </Box>
+    </TabPanel>
+  );
+}
diff --git a/web/src/components/ProjectTabStats.tsx b/web/src/components/ProjectTabStats.tsx
@@ -0,0 +1,32 @@
+import {
+  Box,
+  SimpleGrid,
+  TabPanel,
+} from "@chakra-ui/react";
+
+import { useProjectPageContext } from "../context/ProjectPageContext";
+
+import { CircuitStats } from "../components/CircuitStats";
+
+export const ProjectTabStats: React.FC = () => {
+  const { circuitsClean } = useProjectPageContext();
+  return (
+    <TabPanel>
+      <Box alignItems="center" alignSelf={"stretch"} w="full">
+        <SimpleGrid
+          alignSelf={"stretch"}
+          maxW={["392px", "390px", "100%"]}
+          columns={1}
+          spacing={6}
+        >
+          {circuitsClean.map((circuit, index) =>
+            <CircuitStats
+              key={index}
+              {...{circuit}}
+            />
+          )}
+        </SimpleGrid>
+      </Box>
+    </TabPanel>
+  );
+}