issue #11: adds step to ceremony sttructure

zkparty · Jul 14, 2023 · f1ed41a · f1ed41a
1 parent 25a1b10
commit f1ed41a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/packages/frontend/src/components/ProgressPanel.tsx b/packages/frontend/src/components/ProgressPanel.tsx
@@ -102,10 +102,9 @@ interface ProgressProps {
 
 export const CeremonyProgress = observer((props: any) => {
   const { ceremony } = useContext(state) as State;
-  const { ceremonyState, contributionHashes, inQueue, contributing } = ceremony;
-  const cctCount = ceremonyState?.circuitStats?.length;
+  const { contributionHashes, inQueue, contributing, numberOfCircuits } = ceremony;
   const cctNum = contributionHashes?.length || 0;
-  const ceremonyPct = (cctCount>0) ? 100 * cctNum / cctCount : 0;
+  const ceremonyPct = (numberOfCircuits>0) ? 100 * cctNum / numberOfCircuits : 100;
   const { format } = props;
 
   const prefix = (format && format === 'bar') ?
@@ -135,12 +134,20 @@ export const CeremonyProgress = observer((props: any) => {
   );
 });
 
+const stepToProgress = (step?: string) => {
+  switch (step) {
+    case 'downloading': return 0
+    case 'computing': return 30
+    case 'uploading': return 80
+    default : return 100
+  }
+}
+
 const StepProgress = observer(() => {
   const { ceremony } = useContext(state) as State;
-  const { contributionHashes, ceremonyState } = ceremony;
-  const cctNum = contributionHashes ? contributionHashes.length : 0;
-  const cctCount = ceremonyState?.circuitStats.length;
-  const progressPct = cctNum / cctCount * 100;
+  const { step } = ceremony;
+  // TODO downloads/uploads happen in parallel. Need a better way to show progress.
+  const progressPct = stepToProgress(step);
   return (
     <StyledProgressBar variant="determinate" value={progressPct} $size='small' />
   );
@@ -159,18 +166,17 @@ const Animation = () => {
 }
 
 const status = (ceremony: Queue) => {
-  const { ceremonyState, queueLength, contributionHashes, contributionUpdates, inQueue, contributing } = ceremony;
+  const { queueLength, contributionHashes, contributionUpdates, inQueue, contributing, numberOfCircuits } = ceremony;
   const cctNum = (contributionHashes ? contributionHashes.length : 0) + 1;
-  const cctCount = ceremonyState?.circuitStats?.length;
   let header = '';
   let body1 = (<></>);
   let body2 = (<></>);
-  if (cctNum >= cctCount) {
+  if (cctNum >= numberOfCircuits) {
     header = 'Contribution Complete.';
     body1 = (
       <div>
         <NormalBodyText>
-        You've successfully contributed to {cctCount} circuits.
+        You've successfully contributed to {numberOfCircuits} circuits.
         </NormalBodyText>
         <br />
         <NormalBodyText>
@@ -217,7 +223,7 @@ const status = (ceremony: Queue) => {
             </Grid>
             <Grid item>
               <NormalBodyText>
-                {cctNum}/{cctCount}
+                {cctNum}/{numberOfCircuits}
               </NormalBodyText>
             </Grid>
           </Grid>

diff --git a/packages/frontend/src/contexts/Ceremony.js b/packages/frontend/src/contexts/Ceremony.js
@@ -23,6 +23,7 @@ export default class Queue {
   queueEntry = null
   activeQueueEntry = null
   project = null
+  step = null
 
   contributionUpdates = []
 
@@ -131,6 +132,7 @@ ${hashText}
   async contribute() {
     if (this.contributing) return
     this.contributing = true
+    this.step = 'downloading'
     console.log('starting contribution')
     try {
       const snarkjs = await import('snarkjs')
@@ -157,6 +159,7 @@ ${hashText}
       )) {
         console.log(circuitName, id)
         const latest = await downloadPromises[circuitName]
+        this.step = 'computing'
         const out = { type: 'mem' }
         if (this.activeContributor !== this.userId) break
         this.updateContributionStatus(`Computing ${circuitName} contribution`)
@@ -168,6 +171,7 @@ ${hashText}
         )
         if (this.activeContributor !== this.userId) break
         this.updateContributionStatus(`Uploading ${circuitName} contribution`)
+        this.step = 'uploading'
         uploadPromises.push(this.uploadContribution(out.data, circuitName))
         contributionHashes[circuitName] = formatHash(hash)
         i = i + 1
@@ -182,6 +186,7 @@ ${hashText}
           `! One or more contributions failed to process !`
         )
       }
+      this.step = 'done'
       this.stopKeepalive()
       this.timeoutAt = null
       this.contributing = false

diff --git a/packages/frontend/src/types/ceremony.d.ts b/packages/frontend/src/types/ceremony.d.ts
@@ -196,6 +196,8 @@ export interface Queue {
   isFinished: boolean
   project: string
   authenticated: boolean
+  step?: string 
+  numberOfCircuits: number
 
   contributionUpdates: any[]
   contributionText: string

diff --git a/yarn.lock b/yarn.lock
@@ -3374,7 +3374,7 @@
     "@mui/utils" "^5.13.7"
     prop-types "^15.8.1"
 
-"@mui/styled-engine-sc@^5.12.0", "@mui/styled-engine@^5.13.2", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
+"@mui/styled-engine-sc@^5.12.0", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
   name "@mui/styled-engine"
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.12.0.tgz#41040fb27667efab46e9200cec9657e62b544c48"
@@ -3383,6 +3383,16 @@
     "@babel/runtime" "^7.21.0"
     prop-types "^15.8.1"
 
+"@mui/styled-engine@^5.13.2":
+  version "5.13.2"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.13.2.tgz#c87bd61c0ab8086d34828b6defe97c02bcd642ef"
+  integrity sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
 "@mui/styles@^5.13.7":
   version "5.13.7"
   resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.13.7.tgz#b3d98741ccfaad32c6341c9b1dc5072578327d66"