Skip to content

Commit e9c09ad

Browse files
numtelnumtel
committed
chore(web): split project page tabs into individual components
1 parent d90f318 commit e9c09ad

File tree

10 files changed

+509
-397
lines changed

10 files changed

+509
-397
lines changed

‎web/src/components/Avatars.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from "react"
22
import { Avatar, Box } from "@chakra-ui/react"
33

4-
interface ScrollingAvatarsProps {
5-
images?: string[]
6-
}
7-
4+
import { useProjectPageContext } from "../context/ProjectPageContext";
5+
86
/**
97
* Display the participants Avatars in a scrolling list
10-
* @param {ScrollingAvatarsProps} - the images to show
118
*/
12-
const ScrollingAvatars: React.FC<ScrollingAvatarsProps> = ({ images }) => {
9+
const ScrollingAvatars: React.FC = () => {
10+
const {avatars} = useProjectPageContext();
1311
return (
1412
<Box
1513
maxW={"container.md"}
@@ -20,7 +18,7 @@ const ScrollingAvatars: React.FC<ScrollingAvatarsProps> = ({ images }) => {
2018
px={2}
2119
borderColor="gray.200"
2220
>
23-
{images && images.length > 0 && images.map((image: string, index: any) => (
21+
{avatars && avatars.length > 0 && avatars.map((image: string, index: any) => (
2422
<Avatar
2523
key={index}
2624
src={image}
@@ -31,4 +29,4 @@ const ScrollingAvatars: React.FC<ScrollingAvatarsProps> = ({ images }) => {
3129
)
3230
}
3331

34-
export default ScrollingAvatars
32+
export default ScrollingAvatars

‎web/src/components/CircuitAbout.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {
2+
Box,
3+
Stat,
4+
StatLabel,
5+
StatNumber,
6+
Heading,
7+
Flex,
8+
SimpleGrid,
9+
} from "@chakra-ui/react";
10+
11+
import {
12+
truncateString,
13+
parseRepoRoot
14+
} from "../helpers/utils";
15+
16+
export const CircuitAbout: React.FC = ({ circuit }) => {
17+
return (
18+
<Box borderWidth={1} borderRadius="lg" p={4}>
19+
<Heading fontSize={16} size="md" mb={2}>
20+
{circuit.name} - {circuit.description}
21+
</Heading>
22+
<SimpleGrid columns={[2, 2]} spacing={4}>
23+
<Flex justify="space-between" align="center">
24+
<Stat>
25+
<StatLabel fontSize={12}>Parameters</StatLabel>
26+
<StatNumber fontSize={16}>
27+
{
28+
circuit.template.paramsConfiguration && circuit.template.paramsConfiguration.length > 0 ?
29+
circuit.template.paramsConfiguration.join(" ") :
30+
circuit.template.paramConfiguration && circuit.template.paramConfiguration.length > 0 ?
31+
circuit.template.paramConfiguration.join(" ") :
32+
"No parameters"
33+
}
34+
</StatNumber>
35+
</Stat>
36+
</Flex>
37+
<Stat>
38+
<StatLabel fontSize={12}>Commit Hash</StatLabel>
39+
<StatNumber fontSize={16}>
40+
<a href={`${parseRepoRoot(circuit.template.source)}/tree/${circuit.template.commitHash}`} target="_blank">
41+
{truncateString(circuit.template.commitHash, 6)}
42+
</a>
43+
</StatNumber>
44+
</Stat>
45+
<Stat>
46+
<StatLabel fontSize={12}>Template Link</StatLabel>
47+
<StatNumber fontSize={16}>
48+
<a href={circuit.template.source} target="_blank">
49+
{truncateString(circuit.template.source, 16)}
50+
</a>
51+
</StatNumber>
52+
</Stat>
53+
<Stat>
54+
<StatLabel fontSize={12}>Compiler Version</StatLabel>
55+
<StatNumber fontSize={16}>
56+
{circuit.compiler.version}
57+
</StatNumber>
58+
</Stat>
59+
</SimpleGrid>
60+
</Box>
61+
);
62+
}

‎web/src/components/CircuitStats.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import {
2+
Box,
3+
Stat,
4+
StatLabel,
5+
StatNumber,
6+
Tag,
7+
Heading,
8+
Flex,
9+
Icon,
10+
SimpleGrid,
11+
} from "@chakra-ui/react";
12+
import { FiTarget, FiZap, FiEye, FiUser, FiMapPin, FiWifi } from "react-icons/fi";
13+
14+
export const CircuitStats: React.FC = ({ circuit }) => {
15+
return (
16+
<Box borderWidth={1} borderRadius="lg" p={4}>
17+
<Heading fontSize={16} size="md" mb={2}>
18+
{circuit.name} - {circuit.description}
19+
</Heading>
20+
<Flex wrap="wrap" mb={4}>
21+
<Tag fontSize={10} size="sm" colorScheme="purple" mr={2} mb={2}>
22+
<Icon as={FiTarget} mr={1} />
23+
Constraints: {circuit.constraints}
24+
</Tag>
25+
<Tag fontSize={10} size="sm" colorScheme="cyan" mr={2} mb={2}>
26+
<Icon as={FiZap} mr={1} />
27+
Pot: {circuit.pot}
28+
</Tag>
29+
<Tag fontSize={10} size="sm" colorScheme="yellow" mr={2} mb={2}>
30+
<Icon as={FiEye} mr={1} />
31+
Private Inputs: {circuit.privateInputs}
32+
</Tag>
33+
<Tag fontSize={10} size="sm" colorScheme="pink" mr={2} mb={2}>
34+
<Icon as={FiUser} mr={1} />
35+
Public Inputs: {circuit.publicInputs}
36+
</Tag>
37+
<Tag fontSize={10} size="sm" colorScheme="blue" mr={2} mb={2}>
38+
<Icon as={FiMapPin} mr={1} />
39+
Curve: {circuit.curve}
40+
</Tag>
41+
<Tag fontSize={10} size="sm" colorScheme="teal" mr={2} mb={2}>
42+
<Icon as={FiWifi} mr={1} />
43+
Wires: {circuit.wires}
44+
</Tag>
45+
</Flex>
46+
<SimpleGrid columns={[2, 2]} spacing={6}>
47+
<Flex justify="space-between" align="center">
48+
<Stat>
49+
<StatLabel fontSize={12}>Completed Contributions</StatLabel>
50+
<StatNumber fontSize={16}>
51+
{circuit.completedContributions}
52+
</StatNumber>
53+
</Stat>
54+
</Flex>
55+
<Stat>
56+
<StatLabel fontSize={12}>Memory Requirement</StatLabel>
57+
<StatNumber fontSize={16}>
58+
{circuit.memoryRequirement} mb
59+
</StatNumber>
60+
</Stat>
61+
<Stat>
62+
<StatLabel fontSize={12}>Avg Contribution Time</StatLabel>
63+
<StatNumber fontSize={16}>
64+
{circuit.avgTimingContribution}s
65+
</StatNumber>
66+
</Stat>
67+
<Stat>
68+
<StatLabel fontSize={12}>Max Contribution Time</StatLabel>
69+
<StatNumber fontSize={16}>{circuit.maxTiming}s</StatNumber>
70+
</Stat>
71+
</SimpleGrid>
72+
</Box>
73+
);
74+
}

‎web/src/components/ProjectTabAbout.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {
2+
Box,
3+
VStack,
4+
SimpleGrid,
5+
TabPanel,
6+
} from "@chakra-ui/react";
7+
8+
import { useProjectPageContext } from "../context/ProjectPageContext";
9+
import { CircuitAbout } from "../components/CircuitAbout";
10+
11+
export const ProjectTabAbout: React.FC = () => {
12+
const { circuitsClean } = useProjectPageContext();
13+
return (
14+
<TabPanel>
15+
<VStack
16+
alignSelf={"stretch"}
17+
alignItems={"center"}
18+
justifyContent={"center"}
19+
spacing={8}
20+
py={0}
21+
>
22+
<Box alignItems="center" alignSelf={"stretch"} w="full">
23+
<SimpleGrid
24+
alignSelf={"stretch"}
25+
maxW={["392px", "390px", "100%"]}
26+
columns={1}
27+
spacing={6}
28+
>
29+
{circuitsClean.map((circuit, index) => (
30+
<CircuitAbout
31+
key={index}
32+
{...{circuit}}
33+
/>
34+
))}
35+
</SimpleGrid>
36+
</Box>
37+
</VStack>
38+
</TabPanel>
39+
);
40+
}

‎web/src/components/ProjectTabContributions.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
Box,
3+
HStack,
4+
TabPanel,
5+
Tag,
6+
Heading,
7+
Spacer,
8+
Table,
9+
Tbody,
10+
Td,
11+
Th,
12+
Thead,
13+
Tooltip,
14+
Tr,
15+
Skeleton,
16+
Stack,
17+
} from "@chakra-ui/react";
18+
19+
import { useProjectPageContext } from "../context/ProjectPageContext";
20+
21+
export const ProjectTabContributions: React.FC = () => {
22+
const { contributionsClean } = useProjectPageContext();
23+
return (
24+
<TabPanel alignSelf={"stretch"}>
25+
<HStack justifyContent={"space-between"} alignSelf={"stretch"}>
26+
<Heading fontSize="18" mb={6} fontWeight={"bold"} letterSpacing={"3%"}>
27+
Contributions
28+
</Heading>
29+
<Spacer />
30+
</HStack>
31+
<Box overflowX="auto">
32+
{!contributionsClean ? (
33+
<Stack>
34+
<Skeleton height="20px" />
35+
<Skeleton height="20px" />
36+
<Skeleton height="20px" />
37+
</Stack>
38+
) : (
39+
<Table fontSize={12} variant="simple">
40+
<Thead>
41+
<Tr>
42+
<Th>Doc</Th>
43+
<Th>Contribution Date</Th>
44+
<Th>Hashes</Th>
45+
</Tr>
46+
</Thead>
47+
<Tbody>
48+
{contributionsClean.map((contribution, index) => (
49+
<Tr key={index}>
50+
<Td>{contribution.doc}</Td>
51+
<Td>{contribution.lastUpdated}</Td>
52+
<Td>
53+
<Tooltip
54+
label={contribution.lastZkeyBlake2bHash}
55+
aria-label="Last Zkey Hash"
56+
>
57+
<Tag fontSize={12}>{contribution.lastZkeyBlake2bHash}</Tag>
58+
</Tooltip>
59+
</Td>
60+
</Tr>
61+
))}
62+
</Tbody>
63+
</Table>
64+
)}
65+
</Box>
66+
</TabPanel>
67+
);
68+
}

‎web/src/components/ProjectTabStats.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {
2+
Box,
3+
SimpleGrid,
4+
TabPanel,
5+
} from "@chakra-ui/react";
6+
7+
import { useProjectPageContext } from "../context/ProjectPageContext";
8+
9+
import { CircuitStats } from "../components/CircuitStats";
10+
11+
export const ProjectTabStats: React.FC = () => {
12+
const { circuitsClean } = useProjectPageContext();
13+
return (
14+
<TabPanel>
15+
<Box alignItems="center" alignSelf={"stretch"} w="full">
16+
<SimpleGrid
17+
alignSelf={"stretch"}
18+
maxW={["392px", "390px", "100%"]}
19+
columns={1}
20+
spacing={6}
21+
>
22+
{circuitsClean.map((circuit, index) =>
23+
<CircuitStats
24+
key={index}
25+
{...{circuit}}
26+
/>
27+
)}
28+
</SimpleGrid>
29+
</Box>
30+
</TabPanel>
31+
);
32+
}

0 commit comments

Comments
 (0)