Implement Multielection VoteButton

vocdoni · Oct 10, 2024 · b0ab79d · b0ab79d
1 parent f43b9ca
commit b0ab79d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/components/Process/Aside.tsx b/src/components/Process/Aside.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Card, Flex, FlexProps, Link, Text } from '@chakra-ui/react'
+import { Box, Button, ButtonProps, Card, Flex, FlexProps, Link, Text } from '@chakra-ui/react'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { environment, SpreadsheetAccess, VoteButton as CVoteButton, VoteWeight } from '@vocdoni/chakra-components'
 import { useClient, useElection } from '@vocdoni/react-providers'
@@ -8,6 +8,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { Link as ReactRouterLink } from 'react-router-dom'
 import { useAccount, useDisconnect } from 'wagmi'
 import { CensusMeta } from './Census/CensusType'
+import { MultiElectionVoteButton } from '~components/Process/MultiElectionQuestions'
 
 const results = (result: number, decimals?: number) =>
   decimals ? parseInt(formatUnits(BigInt(result), decimals), 10) : result
@@ -197,7 +198,8 @@ const ProcessAside = () => {
   )
 }
 
-export const VoteButton = ({ ...props }: FlexProps) => {
+type VoteButtonProps = { isMultiElection?: boolean } & FlexProps
+export const VoteButton = ({ isMultiElection = false, ...props }: VoteButtonProps) => {
   const { t } = useTranslation()
   const { election, connected, isAbleToVote, isInCensus } = useElection()
   const { isConnected } = useAccount()
@@ -263,25 +265,40 @@ export const VoteButton = ({ ...props }: FlexProps) => {
         </ConnectButton.Custom>
       )}
       {isAbleToVote && (
-        <>
-          <CVoteButton
-            w='60%'
-            fontSize='lg'
-            height='50px'
-            mb={4}
-            sx={{
-              '&::disabled': {
-                opacity: '0.8',
-              },
-            }}
-          />
-          {isWeighted && <VoteWeight />}
-        </>
+        <VoteButtonAction
+          w='60%'
+          fontSize='lg'
+          height='50px'
+          mb={4}
+          sx={{
+            '&::disabled': {
+              opacity: '0.8',
+            },
+          }}
+          isMultiElection={isMultiElection}
+          isWeighted={isWeighted}
+        />
       )}
     </Flex>
   )
 }
 
+const VoteButtonAction = ({
+  isMultiElection = false,
+  isWeighted,
+  ...props
+}: { isWeighted: boolean; isMultiElection?: boolean } & ButtonProps) => {
+  if (isMultiElection) {
+    return <MultiElectionVoteButton {...props} />
+  }
+  return (
+    <>
+      <CVoteButton {...props} />
+      {isWeighted && <VoteWeight />}
+    </>
+  )
+}
+
 const hasOverwriteEnabled = (election?: PublishedElection): boolean =>
   typeof election !== 'undefined' &&
   typeof election.voteType.maxVoteOverwrites !== 'undefined' &&

diff --git a/src/components/Process/Chained.tsx b/src/components/Process/Chained.tsx
@@ -75,7 +75,7 @@ const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
       <MultiElectionsProvider renderWith={[{ id: current }, ...renderWith]} rootClient={client}>
         <MultiElectionQuestionsForm ConnectButton={ConnectButton} />
         <Box position='sticky' bottom={0} left={0} pb={1} pt={1} display={{ base: 'none', lg2: 'block' }}>
-          <VoteButton />
+          <VoteButton isMultiElection={true} />
         </Box>
       </MultiElectionsProvider>
     )