feat: show Abstain option

package.json

@@ -17,7 +17,7 @@
     "@emotion/styled": "^11.10.6",
     "@rainbow-me/rainbowkit": "^2.1.2",
     "@tanstack/react-query": "^5.40.1",
-    "@vocdoni/chakra-components": "~0.9.7",
+    "@vocdoni/chakra-components": "~0.9.8",
     "@vocdoni/sdk": "~0.9.1",
     "date-fns": "^4.1.0",
     "ethers": "^5.7.2",

src/components/Process/Aside.tsx

@@ -199,7 +199,13 @@ const ProcessAside = () => {
 
 export const VoteButton = ({ ...props }: FlexProps) => {
   const { t } = useTranslation()
-  const { election, connected, isAbleToVote, isInCensus } = useElection()
+  const {
+    election,
+    connected,
+    isAbleToVote,
+    isInCensus,
+    loading: { voting },
+  } = useElection()
   const { isConnected } = useAccount()
 
   if (!(election instanceof PublishedElection)) {
@@ -272,6 +278,7 @@ export const VoteButton = ({ ...props }: FlexProps) => {
                 opacity: '0.8',
               },
             }}
+            isLoading={voting}
           />
           {isWeighted && <VoteWeight />}
         </>

src/components/Process/Chained.tsx

@@ -2,7 +2,7 @@ import { Box, Progress } from '@chakra-ui/react'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import { ElectionQuestions, ElectionResults, SpreadsheetAccess } from '@vocdoni/chakra-components'
 import { ElectionProvider, useElection } from '@vocdoni/react-providers'
-import { ArchivedElection, InvalidElection, IVotePackage, PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk'
+import { InvalidElection, IVotePackage, PublishedElection, VocdoniSDKClient } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { VoteButton } from './Aside'
@@ -68,7 +68,7 @@ const ChainedProcessesInner = ({ connected }: ChainedProcessesInnerProps) => {
 }
 
 type ChainedProcessesProps = {
-  root?: PublishedElection | ArchivedElection | InvalidElection
+  root?: PublishedElection | InvalidElection
 }
 
 export const ChainedProcesses = ({ root }: ChainedProcessesProps) => {

src/components/Process/ConfirmVoteModal.tsx

@@ -79,6 +79,18 @@ export const ConfirmVoteModal = ({ election, answers }: { election: PublishedEle
 
 const ConfirmMultiquestion = ({ question, answers }: { question: IQuestion; answers: FieldValues }) => {
   const { t } = useTranslation()
+
+  // Add abstain option to choices if needed
+  const choices = [...question.choices]
+  if (answers[0].includes('-1')) {
+    choices[-1] = {
+      title: {
+        default: t('cc.vote.abstain'),
+      },
+      value: -1,
+    }
+  }
+
   return (
     <Text display='flex' flexDirection='column' gap={1}>
       <Trans
@@ -91,7 +103,7 @@ const ConfirmMultiquestion = ({ question, answers }: { question: IQuestion; answ
             answers[0].length === 0
               ? t('process.spreadsheet.confirm.blank_vote')
               : answers[0]
-                  .map((a: string) => question.choices[Number(a)].title.default)
+                  .map((a: string) => choices[Number(a)].title.default)
                   .map((a: string) => `- ${a}`)
                   .join('<br />'),
         }}

src/elements/Home/Berga.tsx

@@ -51,11 +51,11 @@ const Berga = () => (
         <strong>Seleccioneu</strong> una opció depenent de la teva edat
       </Text>
       <Flex gap={5} flexDirection={{ base: 'column', md: 'row' }}>
-        <ProcessLink id='6be21a5a9dc0d60812a70bb63b3693846873c371c2463472a4d3020800000006'>
+        <ProcessLink id='6be21a5a9dc0d60812a70bb63b3693846873c371c2463472a4d302080000000c'>
           <Text fontSize='18px'>Accedeix a la votació Juvenil</Text>
           <Text>12 - 15 anys</Text>
         </ProcessLink>
-        <ProcessLink id='6be21a5a9dc0d60812a70bb63b3693846873c371c2463472a4d3020000000007'>
+        <ProcessLink id='6be21a5a9dc0d60812a70bb63b3693846873c371c2463472a4d302000000000d'>
           <Text fontSize='18px'>Accedeix a la votació General</Text>
           <Text>+16 anys</Text>
         </ProcessLink>