Implement Multiprocesses components

package.json

@@ -17,17 +17,17 @@
     "@emotion/styled": "^11.10.6",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@tanstack/react-query": "^5.40.1",
-    "@vocdoni/chakra-components": "~0.8.3",
-    "@vocdoni/sdk": "~0.8.1",
-    "date-fns": "^3.6.0",
+    "@vocdoni/chakra-components": "~0.9.6",
+    "@vocdoni/sdk": "~0.9.1",
+    "date-fns": "^4.1.0",
     "ethers": "^5.7.2",
     "framer-motion": "^11.2.10",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",
-    "react-i18next": "^14.1.2",
+    "react-i18next": "^15.0.3",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-player": "^2.16.0",

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

@@ -1,6 +1,6 @@
 import { Box, Button, Card, Flex, FlexProps, Link, Text } from '@chakra-ui/react'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
-import { VoteButton as CVoteButton, environment, SpreadsheetAccess, VoteWeight } from '@vocdoni/chakra-components'
+import { environment, SpreadsheetAccess, VoteButton as CVoteButton, VoteWeight } from '@vocdoni/chakra-components'
 import { useClient, useElection } from '@vocdoni/react-providers'
 import { dotobject, ElectionStatus, formatUnits, PublishedElection } from '@vocdoni/sdk'
 import { TFunction } from 'i18next'
@@ -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,7 +218,8 @@ 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 (
     <Flex
@@ -228,7 +232,7 @@ export const VoteButton = ({ ...props }: FlexProps) => {
       px={{ base: 3, lg2: 0 }}
       {...props}
     >
-      {census?.type !== 'spreadsheet' && !connected && (
+      {census?.type !== 'spreadsheet' && !isBlindCsp && !connected && (
         <ConnectButton.Custom>
           {({ account, chain, openConnectModal, authenticationStatus, mounted }) => {
             const ready = mounted && authenticationStatus !== 'loading'
@@ -269,7 +273,8 @@ export const VoteButton = ({ ...props }: FlexProps) => {
             mb={4}
             sx={{
               '&::disabled': {
-                opacity: '0.8',
+                // opacity: '0.8',
+                display: 'none',
               },
             }}
           />

src/components/Process/BlindCSPConnect.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useState } from 'react'
+import { useClient, useElection } from '@vocdoni/react-providers'
+import { VocdoniSDKClient } from '@vocdoni/sdk'
+import { Wallet } from 'ethers'
+import { Button } from '@chakra-ui/react'
+import { Trans } from 'react-i18next'
+
+const BlindCSPConnect = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { env } = useClient()
+  const { election, setClient, connected, client: cl } = useElection()
+  const connect = useCallback(() => {
+    setIsLoading(true)
+    try {
+      setClient(
+        new VocdoniSDKClient({
+          env,
+          wallet: Wallet.createRandom(),
+          electionId: election?.id,
+        })
+      )
+    } catch (e) {
+      console.warn('Error trying to login with private key ', e)
+      // this should not be required... if it fails, the client should already be the one set
+      setClient(cl)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [env, election?.id])
+
+  return (
+    <>
+      {(!cl.wallet || Object.keys(cl.wallet).length === 0) && (
+        <Button w={'full'} onClick={connect} isLoading={isLoading}>
+          <Trans i18nKey={'blindcsp.connect'}>Demo connect</Trans>
+        </Button>
+      )}
+    </>
+  )
+}
+
+export default BlindCSPConnect

src/components/Process/CardDetailed.tsx

@@ -18,7 +18,7 @@ const ProcessCardDetailed = ({ election }: Props) => {
     <ElectionProvider election={election}>
       <Card variant='detailed'>
         <CardBody>
-          <Link to={`/processes/${enforceHexPrefix(election.id)}`}>
+          <Link to={`/${enforceHexPrefix(election.id)}`}>
             <ProcessDetailedCardTitle />
             <Box>
               <ElectionStatusBadge />