Merge pull request #140 from algorandfoundation/develop

deploy: production

README.md

@@ -262,3 +262,15 @@ We recommend using the following IAM policy, which gives the least access possib
     ]
 }
 ```
+# Disaster Recovery
+
+During a deployment, there is a chance for a race condition between the CDK S3 deployer and CloudFront invalidation.
+It is intermittent and is being tracked in [an issue in the cdk library](https://github.com/aws/aws-cdk/issues/15891).
+If the deployment fails to update the Custom::CDKBucketDeployment, use the following process:
+
+1. Log into the effected AWS account and navigate to CloudFormation
+2. Select the failed deployment and use the `Stack options` drop down to select `Continue update rollback`
+   1. In the `Continue update rollback`, make sure to expand `Advanced` and select `skip` for the failing resource
+   2. Trigger the rollback
+3. Re-run the failed deployment from the CI/CD platform  (GithubActions). This may require a second deployment to ensure the cache is invalidated
+

src/build-a-bull/.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env*
+!.env*.template

src/build-a-bull/src/components/siteHeader.tsx

@@ -19,11 +19,7 @@ interface Link {
   onClick?: () => void
 }
 
-const createNavigation = () =>
-  [
-    { name: 'Home', href: '/', protect: false },
-    { name: 'Create', href: '/create', protect: true },
-  ] as Link[]
+const createNavigation = () => [{ name: 'Create', href: '/create', protect: true }] as Link[]
 
 function NavLink(props: { currentClasses: string; defaultClasses: string; link: Link; displayName?: string }) {
   const classes = 'no-underline text-black'

src/build-a-bull/src/features/rounds/index.tsx

@@ -2,7 +2,7 @@ import { useWallet } from '@makerx/use-wallet'
 import { Alert, Button, Skeleton, Typography } from '@mui/material'
 import sortBy from 'lodash.sortby'
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { VotingRoundGlobalState, fetchVotingRoundGlobalStatesByCreators } from '@/shared/VotingRoundContract'
 import { VoteType } from '@/shared/types'
 import { getHasVoteEnded, getHasVoteStarted } from '@/shared/vote'
@@ -36,6 +36,14 @@ const VotingRounds = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
+  // Redirect to live round
+  const navigate = useNavigate()
+  // TODO: add production voting round
+  const appId = window.location.hostname.includes('testnet') ? 499163907 : 1158913461
+  if (import.meta.env.VITE_ENVIRONMENT !== 'local') {
+    // navigate(`/vote/${appId}`)
+  }
+
   useEffect(() => {
     let addressesToFetch = [] as string[]
     if (showMyRounds && activeAddress) {

src/build-a-bull/src/features/vote/VoteResults.tsx

@@ -2,14 +2,12 @@ import FileDownloadIcon from '@mui/icons-material/FileDownload'
 import { Alert, Button, Skeleton, Typography } from '@mui/material'
 import { saveAs } from 'file-saver'
 import Papa from 'papaparse'
-import { useState } from 'react'
-import { Link } from 'react-router-dom'
-import { VotingRoundMetadata } from '@/shared/IPFSGateway'
+import { useMemo, useState } from 'react'
+import { Question, VotingRoundMetadata } from '@/shared/IPFSGateway'
 import { VotingRoundGlobalState } from '@/shared/VotingRoundContract'
 import { ProposalCard } from '@/shared/ProposalCard'
 import { VotingRoundResult } from '@/shared/types'
 import { generateOptionIDsToCountsMapping } from '@/utils/common'
-import { VoteDetails } from './VoteDetails'
 import VotingStats from './VotingStats'
 import { VotingTime } from './VotingTime'
 
@@ -33,7 +31,25 @@ export const VoteResults = ({
   const [error, setError] = useState<string | null>(null)
 
   const optionIDsToCounts = votingRoundResults !== undefined ? generateOptionIDsToCountsMapping(votingRoundResults) : {}
+  function getTotalVotes() {
+    return votingRoundResults && votingRoundMetadata
+      ? votingRoundResults.reduce((c, r) => {
+          const isYesOption = votingRoundMetadata.questions.map((q) => q.options[0]).some((el) => el.id === r.optionId)
+          return isYesOption ? c + r.count : c
+        }, 0)
+      : 0
+  }
+
+  const countVotesTally = (question: Question) => {
+    return question.options.length > 0 && optionIDsToCounts[question.options[0].id] ? optionIDsToCounts[question.options[0].id] : 0
+  }
 
+  const passedToTopSort = (q1: Question, q2: Question) => {
+    if (!q1.metadata?.threshold || !q2.metadata?.threshold) return 0
+    return countVotesTally(q2) / q2.metadata.threshold - countVotesTally(q1) / q1.metadata.threshold
+  }
+
+  const totalVotes = useMemo(() => getTotalVotes(), [votingRoundResults, votingRoundMetadata])
   const generateProposalsResultsCsv = async () => {
     if (votingRoundMetadata) {
       setIsDownloadingProposalsCsv(true)
@@ -67,23 +83,11 @@ export const VoteResults = ({
 
   return (
     <div>
-      <div className="mb-4">
-        <Link to="/" className="no-underline text-gray-600 hover:underline">
-          <Typography>&#60; Back to Voting sessions</Typography>
-        </Link>
-      </div>
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
         <div className="col-span-1 xl:col-span-2">
           <Typography variant="h3">{votingRoundMetadata?.title} - Results</Typography>
         </div>
-        <div>
-          <VoteDetails
-            globalState={votingRoundGlobalState}
-            appId={votingRoundGlobalState.appId}
-            loading={isLoadingVotingRoundData}
-            roundMetadata={votingRoundMetadata}
-          />
-        </div>
+        <div></div>
         <div>
           <VotingStats
             isLoading={isLoadingVotingRoundData || isLoadingVotingRoundResults}
@@ -111,25 +115,27 @@ export const VoteResults = ({
             </>
           ))}
         {!isLoadingVotingRoundResults &&
-          votingRoundMetadata?.questions.map((question) => (
-            <div key={question.id}>
-              {question.metadata && (
-                <ProposalCard
-                  title={question.prompt}
-                  description={question.description}
-                  category={question.metadata.category}
-                  focus_area={question.metadata.focus_area}
-                  link={question.metadata.link}
-                  threshold={question.metadata.threshold}
-                  ask={question.metadata.ask}
-                  votesTally={
-                    question.options.length > 0 && optionIDsToCounts[question.options[0].id] ? optionIDsToCounts[question.options[0].id] : 0
-                  }
-                  hasClosed={true}
-                />
-              )}
-            </div>
-          ))}
+          votingRoundMetadata?.questions
+            .sort((q1, q2) => passedToTopSort(q1, q2))
+            .map((question) => (
+              <div key={question.id}>
+                {question.metadata && (
+                  <ProposalCard
+                    title={question.prompt}
+                    description={question.description}
+                    category={question.metadata.category}
+                    focus_area={question.metadata.focus_area}
+                    link={question.metadata.link}
+                    threshold={question.metadata.threshold}
+                    ask={question.metadata.ask}
+                    skipTags={true}
+                    totalVotes={totalVotes}
+                    votesTally={countVotesTally(question)}
+                    hasClosed={true}
+                  />
+                )}
+              </div>
+            ))}
       </div>
       <div className="w-full text-right mt-4">
         <Button

src/build-a-bull/src/features/vote/index.tsx

@@ -8,7 +8,7 @@ import ShuffleOnIcon from '@mui/icons-material/ShuffleOn'
 import { Alert, Box, Button, Checkbox, IconButton, Link, Skeleton, Typography } from '@mui/material'
 import clsx from 'clsx'
 import { useEffect, useMemo, useState } from 'react'
-import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { Question, VotingRoundMetadata, fetchVotingRoundMetadata } from '@/shared/IPFSGateway'
 import {
   TallyCounts,
@@ -29,6 +29,7 @@ import { VotingInstructions } from './VotingInstructions'
 import VotingStats from './VotingStats'
 import { VotingTime } from './VotingTime'
 import { generateOptionIDsToCountsMapping } from '@/utils/common'
+import YouTubeIcon from '@mui/icons-material/YouTube'
 
 // Fisher-Yates shuffle
 Array.prototype.shuffle = function () {
@@ -316,11 +317,6 @@ function Vote({ sort: sortProp = 'none' }: { sort?: 'ascending' | 'descending' |
 
   return (
     <div>
-      <div className="mb-4">
-        <RouterLink to="/" className="no-underline text-gray-600 hover:underline">
-          <Typography>&#60; Back to events</Typography>
-        </RouterLink>
-      </div>
       <div>
         {error && (
           <Alert className="max-w-xl mt-4 text-white bg-red font-semibold" icon={false}>
@@ -331,7 +327,12 @@ function Vote({ sort: sortProp = 'none' }: { sort?: 'ascending' | 'descending' |
         {isLoadingVotingRoundData ? (
           <Skeleton className="h-12 w-1/2" variant="text" />
         ) : (
-          <Typography variant="h3">{votingRoundMetadata?.title}</Typography>
+          <div className="grid lg:grid-cols-4 grid-cols-3">
+            <Typography className="lg:col-span-3 col-span-2" variant="h3">{votingRoundMetadata?.title}</Typography>
+            <Button onClick={()=>window.open("https://www.youtube.com/live/HVpyIZVIV9s?feature=shared", '_blank', 'noopener, noreferrer')} className="col-span-1" startIcon={<YouTubeIcon />} variant="contained">
+              Watch Live
+            </Button>
+          </div>
         )}
         {votingRoundMetadata?.description && <Typography>{votingRoundMetadata.description}</Typography>}
         {votingRoundMetadata?.informationUrl && (

src/build-a-bull/src/shared/ProposalCard.tsx

@@ -16,6 +16,7 @@ export type ProposalCardProps = {
   totalVotes?: number | undefined
   hasClosed?: boolean
   forcePass?: boolean
+  skipTags?: boolean
 }
 
 export const ProposalCard = ({
@@ -30,6 +31,7 @@ export const ProposalCard = ({
   totalVotes = 0,
   hasClosed = false,
   forcePass = false,
+  skipTags = false,
 }: ProposalCardProps) => {
   // Handle collapse state
   const [isOverflow, setIsOverflow] = useState(false)
@@ -51,8 +53,8 @@ export const ProposalCard = ({
     <Paper elevation={0} className="p-5">
       <div className="flex justify-between">
         <div>
-          {hasPassed && <PassedChip />}
-          {hasClosed && !hasPassed && <DidNotPassChip />}
+          {hasPassed && !skipTags && <PassedChip />}
+          {hasClosed && !hasPassed && !skipTags && <DidNotPassChip />}
         </div>
         <div className="text-right">
           <span className="hidden md:inline-block">

src/xgov-dapp/.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env*
+!.env*.template

src/xgov-dapp/src/features/vote/VoteResults.tsx

@@ -48,6 +48,19 @@ export const VoteResults = ({
 
   const optionIDsToCounts = votingRoundResults !== undefined ? generateOptionIDsToCountsMapping(votingRoundResults) : {}
 
+  const countVotesTally = (question: Question) => {
+    return question.options.length > 0 && optionIDsToCounts[question.options[0].id] ? optionIDsToCounts[question.options[0].id] : 0
+  }
+
+  const passedToTopSort = (q1: Question, q2: Question) => {
+    if (!q1.metadata?.threshold || !q2.metadata?.threshold) return 0
+    return countVotesTally(q2) / q2.metadata.threshold - countVotesTally(q1) / q1.metadata.threshold
+  }
+
+  const passedToTopSortReserve = (q1: Question, q2: Question, passedReserveList: Set<string>) => {
+    return passedReserveList.has(q2.id) ? 100 : passedReserveList.has(q1.id) ? -100 : passedToTopSort(q1, q2)
+  }
+
   // clone the voting round metadata and adjust the threshold to be out of total votes instead of total voting power
   // we clone the metadata so that we don't mutate the original metadata
   const votingRoundMetadataClone = useMemo<VotingRoundMetadata | undefined>(() => {
@@ -224,6 +237,7 @@ export const VoteResults = ({
                 ? !isReserveList(q, optionIDsToCounts[q.options[0].id])
                 : true,
             )
+            .sort((q1, q2) => passedToTopSort(q1, q2))
             .map((question) => (
               <div key={question.id}>
                 {question.metadata && (
@@ -235,11 +249,7 @@ export const VoteResults = ({
                     link={question.metadata.link}
                     threshold={question.metadata.threshold}
                     ask={question.metadata.ask}
-                    votesTally={
-                      question.options.length > 0 && optionIDsToCounts[question.options[0].id]
-                        ? optionIDsToCounts[question.options[0].id]
-                        : 0
-                    }
+                    votesTally={countVotesTally(question)}
                     hasClosed={true}
                   />
                 )}
@@ -265,28 +275,26 @@ export const VoteResults = ({
                 </>
               ))}
             {!isLoadingVotingRoundResults &&
-              reserveList.map((question) => (
-                <div key={question.id}>
-                  {question.metadata && (
-                    <ProposalCard
-                      title={question.prompt}
-                      description={question.description}
-                      category={question.metadata.category}
-                      focus_area={question.metadata.focus_area}
-                      link={question.metadata.link}
-                      threshold={question.metadata.threshold}
-                      ask={question.metadata.ask}
-                      votesTally={
-                        question.options.length > 0 && optionIDsToCounts[question.options[0].id]
-                          ? optionIDsToCounts[question.options[0].id]
-                          : 0
-                      }
-                      hasClosed={true}
-                      forcePass={passedReserveList.has(question.id)}
-                    />
-                  )}
-                </div>
-              ))}
+              reserveList
+                .sort((q1, q2) => passedToTopSortReserve(q1, q2, passedReserveList))
+                .map((question) => (
+                  <div key={question.id}>
+                    {question.metadata && (
+                      <ProposalCard
+                        title={question.prompt}
+                        description={question.description}
+                        category={question.metadata.category}
+                        focus_area={question.metadata.focus_area}
+                        link={question.metadata.link}
+                        threshold={question.metadata.threshold}
+                        ask={question.metadata.ask}
+                        votesTally={countVotesTally(question)}
+                        hasClosed={true}
+                        forcePass={passedReserveList.has(question.id)}
+                      />
+                    )}
+                  </div>
+                ))}
           </>
         )}
       </div>