Merge remote-tracking branch 'origin/dev' into staging

web/README.md

@@ -50,7 +50,7 @@ pnpm install
 -  Node.js version 16.0 or higher.
 -  pnpm version 8.6.7 or higher.
 
-Copy the `.env.default` file to `.env`:
+Copy the `.default.env` file to `.env`:
 
 ```bash
 cp .env.default .env
@@ -60,7 +60,7 @@ And add your environment variables.
 
 ### Build
 
-Rum:
+Run:
 
 ```bash
 pnpm build

web/src/context/StateContext.tsx

@@ -123,7 +123,8 @@ export const useInitialStateContext = () => {
 
       // 2. Post-process data.
       const ceremonies: CeremonyDocumentReferenceAndData[] = docs.map((document: DocumentData) => { return { uid: document.id, data: document.data() } })
-      const projects: Project[] = ceremonies.map((ceremony: CeremonyDocumentReferenceAndData) => { return { ceremony: ceremony } })
+      const ceremoniesVisibleInWeb = ceremonies.filter((ceremony) => ceremony.data.hideInWeb !== true)
+      const projects: Project[] = ceremoniesVisibleInWeb.map((ceremony: CeremonyDocumentReferenceAndData) => { return { ceremony: ceremony } })
 
       const queue: WaitingQueue[] = []
       for (const project of projects) {
@@ -134,22 +135,22 @@ export const useInitialStateContext = () => {
       }
 
       setWaitingQueue(queue)
-      // 3. Store data.      
+      // 3. Store data.
       setProjects(projects)
       setLoading(false)
     }
 
     setRunTutorial(true)
 
     fetchData()
-   
+
   },[])
 
   return { waitingQueue, projects, setProjects, circuit, setCircuit, search, setSearch, loading, setLoading, runTutorial, setRunTutorial };
 };
 
 export const StateProvider: React.FC<StateProviderProps> = ({ children }) => {
- 
+
   const [user, setUser] = useState<string | undefined>(
     localStorage.getItem("username") || undefined
   );

web/src/helpers/constants.ts

@@ -178,4 +178,4 @@ export const projectId = import.meta.env.VITE_FIREBASE_PROJECT_ID
 export const messagingSenderId = import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID
 export const appId = import.meta.env.VITE_FIREBASE_APP_ID
 export const awsRegion = import.meta.env.VITE_AWS_REGION
-export const maxConstraintsForBrowser = 1500000
+export const maxConstraintsForBrowser = 1500000

web/src/helpers/interfaces.ts

@@ -171,6 +171,7 @@ export interface CeremonyDocument {
   type: CeremonyType
   coordinatorId: string
   lastUpdated: number
+  hideInWeb?: boolean
 }
 
 /**
@@ -494,9 +495,9 @@ export interface ZkeyDownloadLink {
  * @property {number} waitingQueue - the number of participants in the waiting queue.
  */
 export interface WaitingQueue {
-  ceremonyName: string 
-  circuitName: string 
-  waitingQueue: number 
+  ceremonyName: string
+  circuitName: string
+  waitingQueue: number
 }
 
 /**
@@ -513,7 +514,7 @@ export interface Project {
   circuits?: CircuitDocumentReferenceAndData[] | null
   participants?: ParticipantDocumentReferenceAndData[] | null
   contributions?: ContributionDocumentReferenceAndData[] | null
-  coordinatorId?: string 
+  coordinatorId?: string
 }
 
 export interface State {
@@ -578,6 +579,6 @@ export type StateProviderProps = {
  * @property {string} hash - the hash of the beacon.
  */
 export interface FinalBeacon {
-  beacon: string 
+  beacon: string
   beaconHash: string
 }

web/src/pages/LandingPage/HeroComponent.tsx

@@ -13,6 +13,7 @@ import { ScrollBanner } from "./Banner";
 
 export function HeroComponent({ projects, waitingQueue }: HeroComponentProps) {
   const bannerImages: any[] = []
+  const sortedProjects = projects.sort((a, b) => b.ceremony.data.endDate - a.ceremony.data.endDate);
 
   for (const queue of waitingQueue) {
     bannerImages.push({
@@ -53,7 +54,7 @@ export function HeroComponent({ projects, waitingQueue }: HeroComponentProps) {
           <Box width="100%" px={8} py={0}>
             {projects.length > 0 ? (
               <SimpleGrid columns={[1, null, 1]} spacing={0}>
-                {projects.map((project, index) => (
+                {sortedProjects.map((project, index) => (
                   <ProjectCard key={index} project={project} />
                 ))}
               </SimpleGrid>
@@ -65,4 +66,4 @@ export function HeroComponent({ projects, waitingQueue }: HeroComponentProps) {
       </VStack>
     </>
   );
-}
+}

web/src/pages/ProjectPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
   Box,
@@ -22,6 +22,7 @@ import {
   BreadcrumbItem,
   Flex,
   Icon,
+  Progress,
   SimpleGrid,
   SkeletonText,
   Table,
@@ -65,6 +66,8 @@ const ProjectPage: React.FC = () => {
   const { ceremonyName } = useParams<RouteParams>();
   const { user, projects, setRunTutorial, runTutorial } = useContext(StateContext);
   const { latestZkeys, finalBeacon, finalZkeys, hasUserContributed, projectData, isLoading, avatars, largestCircuitConstraints } = useProjectPageContext();
+  //const [ downloadProgress, setDownloadProgress ] = useState(0)
+  const [ {loaded, fileSize}, setDownloadSize] = useState({loaded: 0, fileSize: 0})
   // handle the callback from joyride
   const handleJoyrideCallback = (data: any) => {
     const { status } = data;
@@ -100,7 +103,7 @@ const ProjectPage: React.FC = () => {
       maxTiming: Math.round((Number(circuit.data.avgTimings?.fullContribution) * 1.618) / 1000)
     })) ?? [];
 
-  // parse contributions and sort by zkey name
+  // parse contributions and sort by zkey name. FIlter for valid contribs.
   const contributionsClean =
     validatedProjectData.contributions?.map((contribution) => ({
       doc: contribution.data.files?.lastZkeyFilename ?? "",
@@ -112,7 +115,9 @@ const ProjectPage: React.FC = () => {
         contribution.data?.files?.transcriptBlake2bHash ?? "",
         10
       )
-    })).slice().sort((a: any, b: any) => {
+    })).slice()
+      .filter((c: any) => c.valid)
+      .sort((a: any, b: any) => {
       const docA = a.doc.toLowerCase()
       const docB = b.doc.toLowerCase()
 
@@ -138,19 +143,46 @@ const ProjectPage: React.FC = () => {
   const { onCopy: copyBeaconValue, hasCopied: copiedBeaconValue } = useClipboard(beaconValue || "")
   const { onCopy: copyBeaconHash, hasCopied: copiedBeaconHash } = useClipboard(beaconHash || "")
 
+  let downloadProgress = fileSize > 0 ? Math.round(100*loaded/fileSize) : 0;
 
   // Download a file from AWS S3 bucket.
-  const downloadFileFromS3 = (index: number, name: string) => {
+  const downloadFileFromS3 = (index: number, name: string) => {                                         
     if (finalZkeys) {
-      fetch(finalZkeys[index].zkeyURL).then((response) => {
-        response.blob().then((blob) => {
-          const fileURL = window.URL.createObjectURL(blob);
-
-          let alink = document.createElement("a");
-          alink.href = fileURL;
-          alink.download = name;
-          alink.click();
-        });
+      fetch(finalZkeys[index].zkeyURL , {
+        mode: 'cors',
+        headers: {
+          'Access-Control-Allow-Origin':'*'
+        }})
+        .then((response) => {
+          const contentLength = response.headers.get('content-length');
+          setDownloadSize(() => {return {loaded: 0, fileSize: parseInt(contentLength!, 10)}});
+
+          const res = new Response(new ReadableStream({
+            async start(controller) {
+              if (response.body) {
+                const reader = response.body.getReader();
+                for (;;) {
+                  const {done, value} = await reader.read();
+                  if (done) break;
+                  setDownloadSize(ds => {return {...ds, loaded: ds.loaded+value.byteLength}});
+                  controller.enqueue(value);
+                }
+                controller.close();
+              } else {
+                console.log(`no body`)
+              }
+            }
+          }));
+
+          res.blob().then((blob) => {
+            console.log()
+            const fileURL = window.URL.createObjectURL(blob);
+
+            let alink = document.createElement("a");
+            alink.href = fileURL;
+            alink.download = name;
+            alink.click();
+          });
       });
     }
 
@@ -616,6 +648,7 @@ const ProjectPage: React.FC = () => {
                             )
                           })
                         }
+                        <Progress colorScheme="green" value={downloadProgress}></Progress>
                       </>
                     }