Merge pull request #129 from numtel/feat/circuit-details

feat(web): include compiler version and commit hash in circuit repo link

Author: glamperd

web/src/helpers/utils.ts

@@ -15,6 +15,11 @@ export function truncateString(str: string, numCharacters = 5): string {
 
     return `${firstPart}...${lastPart}`;
 }
+
+export function parseRepoRoot(templateSource: string): string | null {
+  const match = templateSource.match(/^(https:\/\/github\.com\/[^\/]+\/[^\/]+)(?:\/|$)/);
+  return match ? match[1] : null;
+}
 
 export function parseDate(dateString: number): string {
     const parsedDate = new Date(dateString);
@@ -860,4 +865,4 @@ export const checkGitHubReputation = async (): Promise<boolean> => {
     if (data.following < minFollowing) return false
 
     return true 
-}
+}

web/src/pages/ProjectPage.tsx

@@ -50,7 +50,8 @@ import {
   getTimeDifference,
   parseDate,
   singleProjectPageSteps,
-  truncateString
+  truncateString,
+  parseRepoRoot
 } from "../helpers/utils";
 import Joyride, { STATUS } from "react-joyride";
 import ScrollingAvatars from "../components/Avatars";
@@ -83,6 +84,7 @@ const ProjectPage: React.FC = () => {
   const circuitsClean =
     validatedProjectData.circuits?.map((circuit) => ({
       template: circuit.data.template,
+      compiler: circuit.data.compiler,
       name: circuit.data.name,
       description: circuit.data.description,
       constraints: circuit.data.metadata?.constraints,
@@ -489,7 +491,9 @@ const ProjectPage: React.FC = () => {
                               <Stat>
                                 <StatLabel fontSize={12}>Commit Hash</StatLabel>
                                 <StatNumber fontSize={16}>
-                                  {truncateString(circuit.template.commitHash, 6)}
+                                  <a href={`${parseRepoRoot(circuit.template.source)}/tree/${circuit.template.commitHash}`} target="_blank">
+                                    {truncateString(circuit.template.commitHash, 6)}
+                                  </a>
                                 </StatNumber>
                               </Stat>
                               <Stat>
@@ -500,6 +504,12 @@ const ProjectPage: React.FC = () => {
                                   </a>
                                 </StatNumber>
                               </Stat>
+                              <Stat>
+                                <StatLabel fontSize={12}>Compiler Version</StatLabel>
+                                <StatNumber fontSize={16}>
+                                  {circuit.compiler.version}
+                                </StatNumber>
+                              </Stat>
                             </SimpleGrid>
                           </Box>
                         ))}