Upgrade @vocdoni/[email protected] (and made required changes)

vocdoni · May 23, 2024 · 4c08972 · 4c08972
1 parent 056aeb3
commit 4c08972
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@emotion/styled": "^11.10.6",
     "@rainbow-me/rainbowkit": "^2.0.7",
     "@tanstack/react-query": "^5.35.1",
-    "@vocdoni/chakra-components": "~0.8.0",
+    "@vocdoni/chakra-components": "~0.8.1",
     "@vocdoni/sdk": "~0.8.1",
     "date-fns": "^3.6.0",
     "ethers": "^5.7.2",

diff --git a/src/components/Process/ActionsMenu.tsx b/src/components/Process/ActionsMenu.tsx
@@ -11,7 +11,7 @@ import {
 } from '@chakra-ui/react'
 import { ActionCancel, ActionContinue, ActionEnd, ActionPause, ActionsProvider } from '@vocdoni/chakra-components'
 import { useActions, useClient, useElection } from '@vocdoni/react-providers'
-import { ElectionStatus } from '@vocdoni/sdk'
+import { ElectionStatus, PublishedElection } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
 import { FaCog } from 'react-icons/fa'
 import { RiCloseCircleLine, RiPauseCircleLine, RiPlayCircleLine, RiStopCircleLine } from 'react-icons/ri'
@@ -20,10 +20,15 @@ export const ActionsMenu = (props: MenuListProps) => {
   const { account } = useClient()
   const { election } = useElection()
 
-  if (!election || (election && election?.organizationId !== account?.address)) return null
-
-  // canceled and ended elections cannot be acted upon
-  if ([ElectionStatus.CANCELED, ElectionStatus.ENDED, ElectionStatus.RESULTS].includes(election.status)) return null
+  if (
+    !election ||
+    !(election instanceof PublishedElection) ||
+    election?.organizationId !== account?.address ||
+    // canceled and ended elections cannot be acted upon
+    [ElectionStatus.CANCELED, ElectionStatus.ENDED, ElectionStatus.RESULTS].includes(election.status)
+  ) {
+    return null
+  }
 
   return (
     <Menu closeOnSelect={false}>
@@ -40,7 +45,7 @@ const ActionsMenuList = (props: MenuListProps) => {
   const { election } = useElection()
   const { loading } = useActions()
 
-  if (!election) return null
+  if (!election || !(election instanceof PublishedElection)) return null
 
   return (
     <MenuList p={0}>

diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx
@@ -24,8 +24,10 @@ const ProcessAside = () => {
   } = useElection()
   const { isConnected } = useAccount()
   const { env } = useClient()
-  const census: CensusMeta = dotobject(election?.meta || {}, 'census')
 
+  if (!election || !(election instanceof PublishedElection)) return null
+
+  const census: CensusMeta = dotobject(election?.meta || {}, 'census')
   const renderVoteMenu =
     voted ||
     (voting && election?.electionType.anonymous) ||
@@ -183,11 +185,13 @@ const ProcessAside = () => {
 
 export const VoteButton = ({ setQuestionsTab, ...props }: { setQuestionsTab: () => void }) => {
   const { t } = useTranslation()
-
   const { election, connected, isAbleToVote, isInCensus } = useElection()
-  const census: CensusMeta = dotobject(election?.meta || {}, 'census')
   const { isConnected } = useAccount()
 
+  if (!(election instanceof PublishedElection)) return null
+
+  const census: CensusMeta = dotobject(election?.meta || {}, 'census')
+
   if (
     election?.status === ElectionStatus.CANCELED ||
     (isConnected && !isInCensus && !['spreadsheet', 'csp'].includes(census?.type))

diff --git a/src/components/Process/CardDetailed.tsx b/src/components/Process/CardDetailed.tsx
@@ -43,7 +43,7 @@ const ProcessDetailedCreationDate = () => {
   const { election } = useElection()
   const { format } = useDateFns()
 
-  if (!election?.creationTime) return null
+  if (election instanceof InvalidElection || !election?.creationTime) return null
 
   return <Text>{format(new Date(election.creationTime), 'PPP')}</Text>
 }

diff --git a/src/components/Process/Date.tsx b/src/components/Process/Date.tsx
@@ -1,14 +1,14 @@
 import { Box, Text } from '@chakra-ui/react'
 import { useElection } from '@vocdoni/react-providers'
-import { ElectionStatus } from '@vocdoni/sdk'
+import { ElectionStatus, InvalidElection } from '@vocdoni/sdk'
 import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
 
 export const ProcessDate = () => {
   const { election } = useElection()
   const { t } = useTranslation()
 
-  if (!election?.startDate) return null
+  if (election instanceof InvalidElection || !election?.startDate) return null
 
   const statusText = getStatusText(t, election.status)
 
@@ -33,7 +33,7 @@ export const ProcessDateInline = () => {
   const { election } = useElection()
   const { t } = useTranslation()
 
-  if (!election?.startDate) return null
+  if (election instanceof InvalidElection || !election?.startDate) return null
 
   const status = getStatusText(t, election.status)
 

diff --git a/src/components/Process/Header.tsx b/src/components/Process/Header.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex, Icon, Image, Text, Tooltip } from '@chakra-ui/react'
 import { ElectionDescription, ElectionSchedule, ElectionStatusBadge, ElectionTitle } from '@vocdoni/chakra-components'
 import { useClient, useElection, useOrganization } from '@vocdoni/react-providers'
-import { CensusType, ElectionStatus, Strategy } from '@vocdoni/sdk'
+import { CensusType, ElectionStatus, InvalidElection, PublishedElection, Strategy } from '@vocdoni/sdk'
 import { ReactNode, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FaInfoCircle } from 'react-icons/fa'
@@ -33,7 +33,7 @@ const ProcessHeader = () => {
   useEffect(() => {
     ;(async () => {
       try {
-        if (!election?.census?.censusId || !client) return
+        if (election instanceof InvalidElection || !election?.census?.censusId || !client) return
         const censusInfo: CensusInfo = await client.fetchCensusInfo(election.census.censusId)
         setCensusInfo(censusInfo)
       } catch (e) {
@@ -44,11 +44,15 @@ const ProcessHeader = () => {
   }, [election, client])
 
   const showOrgInformation = !loaded || (loaded && organization?.account?.name)
-  const showTotalCensusSize = censusInfo?.size && election?.maxCensusSize && election.maxCensusSize < censusInfo.size
+  const showTotalCensusSize =
+    election instanceof PublishedElection &&
+    censusInfo?.size &&
+    election?.maxCensusSize &&
+    election.maxCensusSize < censusInfo.size
 
   return (
     <Box mb={10}>
-      {election?.header && (
+      {election instanceof PublishedElection && election?.header && (
         <Box w='100%' mx='auto' maxH='300px' my='30px' overflow='hidden'>
           <Image src={election?.header} w='100%' h='auto' objectFit='cover' />
         </Box>
@@ -88,7 +92,7 @@ const ProcessHeader = () => {
             </Box>
           </Flex>
           <Flex flexDirection='column'>
-            {!election?.description?.default.length && (
+            {election instanceof PublishedElection && !election?.description?.default.length && (
               <Text textAlign='center' mt={5} color='process.no_description'>
                 {t('process.no_description')}
               </Text>
@@ -117,7 +121,7 @@ const ProcessHeader = () => {
           }}
         >
           <Box flexDir='row' display='flex' justifyContent='space-between' w={{ lg2: 'full' }}>
-            {election?.status !== ElectionStatus.CANCELED ? (
+            {election instanceof PublishedElection && election?.status !== ElectionStatus.CANCELED ? (
               <ProcessDate />
             ) : (
               <Text color='process.canceled' fontWeight='bold'>
@@ -128,7 +132,7 @@ const ProcessHeader = () => {
               <ActionsMenu />
             </Box>
           </Box>
-          {election?.electionType.anonymous && (
+          {election instanceof PublishedElection && election?.electionType.anonymous && (
             <Box>
               <Text fontWeight='bold'>{t('process.is_anonymous.title')}</Text>
               <Text>{t('process.is_anonymous.description')}</Text>
@@ -139,33 +143,34 @@ const ProcessHeader = () => {
               {t('process.census')}{' '}
               {showTotalCensusSize && <Icon as={FaInfoCircle} color='process_create.alert_info.color' ml={1} />}
             </Text>
-            {showTotalCensusSize ? (
-              <Tooltip
-                hasArrow
-                bg='primary.600'
-                color='white'
-                placement='top'
-                label={t('process.total_census_size_tooltip', {
-                  censusSize: censusInfo?.size,
-                  maxCensusSize: election?.maxCensusSize,
-                  percent:
-                    censusInfo?.size && election?.maxCensusSize
-                      ? Math.round((election?.maxCensusSize / censusInfo?.size) * 100)
-                      : 0,
-                })}
-              >
-                <Text>
-                  {t('process.total_census_size', {
+            {election instanceof PublishedElection &&
+              (showTotalCensusSize ? (
+                <Tooltip
+                  hasArrow
+                  bg='primary.600'
+                  color='white'
+                  placement='top'
+                  label={t('process.total_census_size_tooltip', {
                     censusSize: censusInfo?.size,
                     maxCensusSize: election?.maxCensusSize,
+                    percent:
+                      censusInfo?.size && election?.maxCensusSize
+                        ? Math.round((election?.maxCensusSize / censusInfo?.size) * 100)
+                        : 0,
                   })}
-                </Text>
-              </Tooltip>
-            ) : (
-              <Text>{t('process.people_in_census', { count: election?.maxCensusSize })}</Text>
-            )}
+                >
+                  <Text>
+                    {t('process.total_census_size', {
+                      censusSize: censusInfo?.size,
+                      maxCensusSize: election?.maxCensusSize,
+                    })}
+                  </Text>
+                </Tooltip>
+              ) : (
+                <Text>{t('process.people_in_census', { count: election?.maxCensusSize })}</Text>
+              ))}
           </Box>
-          {election?.meta?.census && (
+          {election instanceof PublishedElection && election?.meta?.census && (
             <>
               <Box>
                 <Text fontWeight='bold'>{t('process.strategy')}</Text>
@@ -197,23 +202,25 @@ const ProcessHeader = () => {
               />
             </Box>
           )}
-          {election?.status === ElectionStatus.PAUSED && election?.organizationId !== account?.address && (
-            <Flex
-              color='process.paused'
-              gap={2}
-              alignItems='center'
-              border='1px solid'
-              borderColor='process.paused'
-              borderRadius='lg'
-              p={2}
-            >
-              <Icon as={IoWarningOutline} />
-              <Box>
-                <Text>{t('process.status.paused')}</Text>
-                <Text>{t('process.status.paused_description')}</Text>
-              </Box>
-            </Flex>
-          )}
+          {election instanceof PublishedElection &&
+            election?.status === ElectionStatus.PAUSED &&
+            election?.organizationId !== account?.address && (
+              <Flex
+                color='process.paused'
+                gap={2}
+                alignItems='center'
+                border='1px solid'
+                borderColor='process.paused'
+                borderRadius='lg'
+                p={2}
+              >
+                <Icon as={IoWarningOutline} />
+                <Box>
+                  <Text>{t('process.status.paused')}</Text>
+                  <Text>{t('process.status.paused_description')}</Text>
+                </Box>
+              </Flex>
+            )}
         </Flex>
       </Flex>
     </Box>
@@ -224,9 +231,9 @@ const GitcoinStrategyInfo = () => {
   const { t } = useTranslation()
   const { election } = useElection()
 
-  if (!election || (election && !election?.meta?.strategy)) return
-  const strategy: Strategy = election.get('strategy')
+  if (!election || election instanceof InvalidElection || !election?.meta?.strategy) return
 
+  const strategy: Strategy = election.get('strategy')
   const score = strategy.tokens['GPS'].minBalance
   const firstParenthesesMatch = strategy.predicate.match(/\(([^)]+)\)/)
   let unionTypeString: string | null = null
@@ -266,6 +273,8 @@ const GitcoinStrategyInfo = () => {
 const useStrategy = () => {
   const { t } = useTranslation()
   const { election } = useElection()
+  if (!election || election instanceof InvalidElection || !election?.meta?.census) return ''
+
   const strategies: { [key: string]: ReactNode } = {
     spreadsheet: t('process.census_strategies.spreadsheet'),
     token: t('process.census_strategies.token', { token: election?.meta?.token }),
@@ -274,8 +283,6 @@ const useStrategy = () => {
     gitcoin: <GitcoinStrategyInfo />,
   }
 
-  if (!election || (election && !election?.meta?.census)) return ''
-
   const type = election.get('census.type')
 
   if (typeof strategies[type] === 'undefined') {

diff --git a/src/components/Process/View.tsx b/src/components/Process/View.tsx
@@ -24,7 +24,7 @@ import {
 } from '@chakra-ui/react'
 import { ElectionQuestions, ElectionResults, environment, useConfirm } from '@vocdoni/chakra-components'
 import { useClient, useElection } from '@vocdoni/react-providers'
-import { ElectionResultsTypeNames, ElectionStatus, PublishedElection } from '@vocdoni/sdk'
+import { ElectionResultsTypeNames, ElectionStatus, InvalidElection, PublishedElection } from '@vocdoni/sdk'
 import { useEffect, useRef, useState } from 'react'
 import { FieldValues } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
@@ -71,7 +71,7 @@ export const ProcessView = () => {
 
   // If the election is finished show the results tab
   useEffect(() => {
-    if (election?.status === ElectionStatus.RESULTS) {
+    if (election instanceof PublishedElection && election?.status === ElectionStatus.RESULTS) {
       setTabIndex(1)
     }
   }, [election])
@@ -108,7 +108,7 @@ export const ProcessView = () => {
       <Box className='site-wrapper' mb={44}>
         <Header />
 
-        {election?.streamUri && (
+        {election instanceof PublishedElection && election?.streamUri && (
           <Box
             maxW={{ base: '800px', lg: videoTop ? '400px' : '800px' }}
             ml={videoTop ? 'auto' : 'none'}
@@ -135,7 +135,9 @@ export const ProcessView = () => {
           >
             <TabList>
               <Tab>{t('process.questions')}</Tab>
-              {election?.status !== ElectionStatus.CANCELED && <Tab>{t('process.results')}</Tab>}
+              {election instanceof PublishedElection && election?.status !== ElectionStatus.CANCELED && (
+                <Tab>{t('process.results')}</Tab>
+              )}
             </TabList>
             <TabPanels>
               <TabPanel>
@@ -209,7 +211,7 @@ const SuccessVoteModal = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [votesLeft, vLeft])
 
-  if (!election || !voted) return null
+  if (!election || !voted || election instanceof InvalidElection) return null
 
   const verify = environment.verifyVote(env, voted)
   const url = encodeURIComponent(document.location.href)

diff --git a/yarn.lock b/yarn.lock
@@ -2663,12 +2663,12 @@
     "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.0"
 
-"@vocdoni/chakra-components@~0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@vocdoni/chakra-components/-/chakra-components-0.8.0.tgz#bb20ce94cc4c8bd6d86372ee612243fe7b5f3067"
-  integrity sha512-gHX0M90W8YE/ivdlDW2eyPu2mv/iftqkYrPxlx0tn2x31CiXQsaMo79p93bQU4hv+ztTRHqML9iKq4udkVW5Bw==
+"@vocdoni/chakra-components@~0.8.1":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@vocdoni/chakra-components/-/chakra-components-0.8.2.tgz#076fd46bbf1142ba2fbd9e5c9bcc975c93ef8692"
+  integrity sha512-r+kB/gD0eM0v2WIJ4JjpAd/GjVHCXhFJZWovNZA+K9wOQRvhuTU4Mo0oDncIlEjNlzgt2MARWK6n2y/ZJCXJoQ==
   dependencies:
-    "@vocdoni/react-providers" "~0.4.0"
+    "@vocdoni/react-providers" "~0.4.1"
 
 "@vocdoni/[email protected]":
   version "1.15.5"
@@ -2678,10 +2678,10 @@
     long "^5.2.1"
     protobufjs "^7.1.2"
 
-"@vocdoni/react-providers@~0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@vocdoni/react-providers/-/react-providers-0.4.0.tgz#550898447c93b429639a1cf1918dec9f0d90eba6"
-  integrity sha512-XqCm7i6tGWzpJq2P4hRqETlxISQXDKArFqCh1Vb/edM+YkHU/HGJQF3rNjhmWf1lI1fbrZ7D2F7ad3M0ojwxgg==
+"@vocdoni/react-providers@~0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@vocdoni/react-providers/-/react-providers-0.4.1.tgz#1066cf0fea52d3e01f4003de0fa5f0dc808f158f"
+  integrity sha512-l+KyB9YAmPKhmFXGwFEOj0RaesqGP0ncqq9GovSP8d3SNNypgWDpepvXW0YR0P6qe/Xdia6fFXvDe3huyNn0xQ==
 
 "@vocdoni/sdk@~0.8.1":
   version "0.8.1"