Implement Multiprocesses components

src/App.tsx

@@ -8,14 +8,19 @@ import { VocdoniEnvironment } from '~constants'
 import { translations } from '~i18n/components'
 import { clientToSigner } from '~util/wagmi-adapters'
 import { RoutesProvider } from './router'
+import { ExternalProvider, JsonRpcFetchFunc } from '@ethersproject/providers'
 
 export const App = () => {
   const { data } = useWalletClient()
   const { t } = useTranslation()
 
   let signer: Signer = {} as Signer
   if (data) {
-    signer = clientToSigner(data)
+    signer = clientToSigner({
+      transport: data.transport as ExternalProvider | JsonRpcFetchFunc,
+      chain: data.chain,
+      account: data.account,
+    })
   }
 
   return (

src/components/Process/Aside.tsx

@@ -25,14 +25,16 @@ const ProcessAside = () => {
   } = useElection()
   const { isConnected } = useAccount()
   const { env, clear } = useClient()
-
   if (!election || !(election instanceof PublishedElection)) return null
 
   const census: CensusMeta = dotobject(election?.meta || {}, 'census')
+
+  const isMultiProcess = !!election.get('multiprocess')
   const renderVoteMenu =
-    voted ||
-    (voting && election?.electionType.anonymous) ||
-    (hasOverwriteEnabled(election) && isInCensus && votesLeft > 0 && voted)
+    !isMultiProcess &&
+    (voted ||
+      (voting && election?.electionType.anonymous) ||
+      (hasOverwriteEnabled(election) && isInCensus && votesLeft > 0 && voted))
 
   const showVoters =
     election?.status !== ElectionStatus.CANCELED &&
@@ -197,7 +199,8 @@ const ProcessAside = () => {
   )
 }
 
-export const VoteButton = ({ ...props }: FlexProps) => {
+type VoteButtonProps = FlexProps
+export const VoteButton = (props: VoteButtonProps) => {
   const { t } = useTranslation()
   const { election, connected, isAbleToVote, isInCensus } = useElection()
   const { isConnected } = useAccount()
@@ -215,8 +218,7 @@ export const VoteButton = ({ ...props }: FlexProps) => {
     return null
   }
 
-  const isWeighted = election?.census.weight !== election?.census.size
-
+  const isWeighted = Number(election?.census.weight) !== election?.census.size
   const isBlindCsp = census?.type === 'csp' && election?.meta.csp?.service === 'vocdoni-blind-csp'
 
   return (
@@ -271,7 +273,8 @@ export const VoteButton = ({ ...props }: FlexProps) => {
             mb={4}
             sx={{
               '&::disabled': {
-                opacity: '0.8',
+                // opacity: '0.8',
+                display: 'none',
               },
             }}
           />

src/components/Process/Chained.tsx

@@ -1,22 +1,54 @@
-import { Box, Progress } from '@chakra-ui/react'
+import { Box, Flex, Progress, useBreakpointValue } from '@chakra-ui/react'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
-import { ElectionQuestions, ElectionResults, SpreadsheetAccess } from '@vocdoni/chakra-components'
+import {
+  ElectionQuestions,
+  ElectionQuestionsForm,
+  ElectionResults,
+  QuestionsFormProvider,
+  RenderWith,
+  SpreadsheetAccess,
+} from '@vocdoni/chakra-components'
 import { ElectionProvider, useElection } from '@vocdoni/react-providers'
 import { InvalidElection, IVotePackage, PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk'
-import { useEffect, useState } from 'react'
+import { PropsWithChildren, useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
-import { VoteButton } from './Aside'
-import { ChainedProvider, useChainedProcesses } from './ChainedContext'
-import { ConfirmVoteModal } from './ConfirmVoteModal'
+import { VoteButton } from '~components/Process/Aside'
 import BlindCSPConnect from '~components/Process/BlindCSPConnect'
+import { ConfirmVoteModal } from '~components/Process/ConfirmVoteModal'
+import { MultiElectionSuccessVoteModal, SuccessVoteModal } from '~components/Process/SuccessVoteModal'
+import VotingVoteModal, { MultiElectionVotingVoteModal } from '~components/Process/VotingVoteModal'
+import { ChainedProvider, useChainedProcesses } from './ChainedContext'
 
 type ChainedProcessesInnerProps = {
   connected: boolean
 }
 
+const VoteButtonContainer = ({ children }: PropsWithChildren) => {
+  const isBreakPoint = useBreakpointValue({ base: true, lg2: false })
+  if (isBreakPoint) {
+    return (
+      <Box
+        position='sticky'
+        bottom={0}
+        left={0}
+        bgColor='process.aside.aside_footer_mbl_border'
+        pt={1}
+        display={isBreakPoint ? 'block' : 'none'}
+      >
+        {children}
+      </Box>
+    )
+  }
+  return (
+    <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={isBreakPoint ? 'none' : 'block'}>
+      {children}
+    </Box>
+  )
+}
+
 const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
   const { election, voted, setClient, clearClient } = useElection()
-  const { processes, client, current, setProcess, setCurrent } = useChainedProcesses()
+  const { processes, client, current, setProcess, setCurrent, root } = useChainedProcesses()
 
   // clear session of local context when login out
   useEffect(() => {
@@ -26,7 +58,9 @@
 
   // ensure the client is set to the root one
   useEffect(() => {
-    setClient(client)
+    if (election.id !== root.id) {
+      setClient(client)
+    }
   }, [client, election])
 
   // fetch current process and process flow logic
@@ -40,6 +74,7 @@
       // fetch votes info
       const next = await getNextProcessInFlow(client, voted, meta)
 
+      if (typeof next === 'undefined') return // If cannot found next process, return
       if (typeof processes[next] === 'undefined') {
         const election = await client.fetchElection(next)
         setProcess(next, election)
@@ -48,6 +83,18 @@
     })()
   }, [processes, current, voted, client])
 
+  const [renderWith, setRenderWith] = useState<RenderWith[]>([])
+  // Effect to set renderWith component state.
+  useEffect(() => {
+    if (!current || processes[current] instanceof InvalidElection) return
+    const currentElection = processes[current]
+    const meta = currentElection.get('multiprocess')
+    if (meta && meta.renderWith) {
+      setRenderWith(meta.renderWith)
+    }
+  }, [current, processes])
+  const isRenderWith = renderWith.length > 0
+
   if (!current || !processes[current]) {
     return <Progress w='full' size='xs' isIndeterminate />
   }
@@ -56,15 +103,33 @@
     return <Trans i18nKey='error.election_is_invalid'>Invalid election</Trans>
   }
 
+  if (isRenderWith) {
+    return (
+      <QuestionsFormProvider
+        renderWith={renderWith}
+        confirmContents={(elections, answers) => <ConfirmVoteModal elections={elections} answers={answers} />}
+      >
+        <ElectionQuestionsForm />
+        <VoteButtonContainer>
+          <VoteButton />
+        </VoteButtonContainer>
+        <MultiElectionVotingVoteModal />
+        <MultiElectionSuccessVoteModal />
+      </QuestionsFormProvider>
+    )
+  }
+
   return (
-    <Box className='md-sizes' mb='100px' pt='25px'>
+    <>
       <ElectionQuestions
-        confirmContents={(election, answers) => <ConfirmVoteModal election={election} answers={answers} />}
+        confirmContents={(elections, answers) => <ConfirmVoteModal elections={elections} answers={answers} />}
       />
-      <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={{ base: 'none', lg2: 'block' }}>
+      <VoteButtonContainer>
         <VoteButton />
-      </Box>
-    </Box>
+      </VoteButtonContainer>
+      <VotingVoteModal />
+      <SuccessVoteModal />
+    </>
   )
 }
 
@@ -114,29 +179,43 @@
     return <Progress w='full' size='xs' isIndeterminate />
   }
 
+  if (processes[current] instanceof InvalidElection) {
+    return <Trans i18nKey='error.election_is_invalid'>Invalid election</Trans>
+  }
+
   const isBlindCsp = election.get('census.type') === 'csp' && election?.meta.csp?.service === 'vocdoni-blind-csp'
 
   return (
-    <>
-      <ElectionProvider key={current} election={processes[current]} ConnectButton={ConnectButton} fetchCensus>
+    <Box className='md-sizes' mb='100px' pt='25px'>
+      {current === election.id ? (
         <ChainedProcessesInner connected={connected} />
-      </ElectionProvider>
-      {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}
-      {isBlindCsp && !connected && <BlindCSPConnect />}
-    </>
+      ) : (
+        <ElectionProvider key={current} election={processes[current]} ConnectButton={ConnectButton} fetchCensus>
+          <ChainedProcessesInner connected={connected} />
+        </ElectionProvider>
+      )}
+      <VoteButtonContainer>
+        <Flex justifyContent='center' alignItems='center' direction={'column'} py={3} px={{ base: 3, lg2: 0 }}>
+          {!connected && election.get('census.type') === 'spreadsheet' && <SpreadsheetAccess />}
+          {isBlindCsp && !connected && <BlindCSPConnect />}
+        </Flex>
+      </VoteButtonContainer>
+    </Box>
   )
 }
 
 const ChainedResultsWrapper = () => {
   // note election context refers to the root election here, ALWAYS
-  const { election, client } = useElection()
+  const { election, client, voted } = useElection()
   const { processes, setProcess } = useChainedProcesses()
   const [loaded, setLoaded] = useState<boolean>(false)
   const [loading, setLoading] = useState<boolean>(false)
   const [sorted, setSorted] = useState<string[]>([])
 
+  // Get elections information
   useEffect(() => {
     if (!election || election instanceof InvalidElection || loading || loaded) return
+
     setLoading(true)
     ;(async () => {
       try {
@@ -154,6 +233,16 @@
     })()
   }, [election])
 
+  // Reset loaded state when root election voted changes.
+  // On renderWith elections this will update all the render elections.
+  // However, this fix won't work on chained processes since we should check voted state for all processes to update
+  // results on real time.
+  useEffect(() => {
+    if (voted) {
+      setLoaded(false)
+    }
+  }, [voted])
+
   if (!loaded) {
     return <Progress w='full' size='xs' isIndeterminate />
   }
@@ -204,12 +293,16 @@
     ids.push(meta.default)
   }
 
-  if (!meta.conditions) {
-    return ids
+  if (meta.renderWith) {
+    for (const renderWith of meta.renderWith) {
+      ids.push(renderWith.id)
+    }
   }
 
-  for (const condition of meta.conditions) {
-    ids.push(condition.goto)
+  if (meta.conditions) {
+    for (const condition of meta.conditions) {
+      ids.push(condition.goto)
+    }
   }
 
   return ids
@@ -229,7 +322,7 @@
       processes[id] = election
 
       const meta = election.get('multiprocess')
-      if (meta && meta.default && !visited.has(meta.default)) {
+      if (meta && (meta.default || meta.renderWith) && !visited.has(meta.default)) {
         const idsToFetch = getProcessIdsInFlowStep(meta)
         for (const nextId of idsToFetch) {
           await loadProcess(nextId)
@@ -245,6 +338,16 @@
           }
         }
 
+        // Add renderWith processes
+        if (meta.renderWith) {
+          for (const renderWithElection of meta.renderWith as RenderWith[]) {
+            if (!visited.has(renderWithElection.id)) {
+              visited.add(renderWithElection.id)
+              ids.push(renderWithElection.id)
+            }
+          }
+        }
+
         // Add defaults after conditions
         if (!visited.has(meta.default)) {
           visited.add(meta.default)
@@ -259,6 +362,7 @@
   if (meta) {
     initialIds.push(...getProcessIdsInFlowStep(meta))
   }
+
   for (const id of initialIds) {
     await loadProcess(id)
   }
@@ -274,7 +378,15 @@
   goto: string
 }
 
-type FlowNode = {
-  default: string
-  conditions?: FlowCondition[]
-}
+// FlowNode can have or conditions or renderWith, but not both
+export type FlowNode =
+  | {
+      conditions?: FlowCondition[]
+      renderWith?: never
+      default: string
+    }
+  | {
+      conditions?: never
+      renderWith: RenderWith[]
+      default?: string // Default is optional for renderWith elections
+    }