create modal election

src/components/ProcessCreate/CreationProgress.tsx

@@ -1,8 +1,9 @@
-import { Heading, List, ListIcon, ListItem, Progress, Stack, Text } from '@chakra-ui/react'
+import { Box, List, ListIcon, ListItem, Spinner, Stack, Text } from '@chakra-ui/react'
 import { ElectionCreationSteps } from '@vocdoni/sdk'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AiFillCheckCircle, AiFillCloseCircle } from 'react-icons/ai'
+import imageHeader from '/assets/spreadsheet-confirm-modal.png'
 
 export type Steps =
   | ElectionCreationSteps.CENSUS_CREATED
@@ -43,24 +44,28 @@ export const CreationProgress = ({ error, sending, step }: CreationProgressProps
   }, [step])
 
   return (
-    <Stack direction='column' gap={4}>
-      <Text>{t('process_create.creation_steps_description')}</Text>
-      <Heading as='h2' size='md' textAlign='center'>
-        {t('process_create.creation_steps_title')}
-      </Heading>
+    <Stack direction='column' gap={5} p={0}>
+      <Box bgImage={imageHeader} height='150px' bgSize='cover' borderRadius='lg' />
+      <Text mb={6} textAlign='center'>
+        {t('process_create.creation_steps_description')}
+      </Text>
       <List spacing={3}>
-        {Object.keys(labels).map((key) => (
-          <ListItem key={key}>
-            <ListIcon
-              as={steps[key as keyof CreationStepsState] ? AiFillCheckCircle : AiFillCloseCircle}
-              fontSize={22}
-            />
-            {labels[key]}
+        {Object.keys(labels).map((key, index) => (
+          <ListItem key={key} display='flex' alignItems='center' gap={2}>
+            {steps[key as keyof CreationStepsState] ? (
+              <ListIcon as={AiFillCheckCircle} fontSize={23} m={0} />
+            ) : (
+              <>{!error ? <Spinner boxSize={5} mr='3px' /> : <ListIcon as={AiFillCloseCircle} fontSize={23} m={0} />}</>
+            )}
+            <Text>{labels[key]}</Text>
           </ListItem>
         ))}
       </List>
-      {!error && <Progress isIndeterminate />}
-      {error ? <Text color='red.300'>{error}</Text> : <Text>{t('process_create.do_not_close')}</Text>}
+      {error && (
+        <Text color='red.300' textAlign='center' mt={5}>
+          {error}
+        </Text>
+      )}
     </Stack>
   )
 }

src/components/ProcessCreate/Steps/Confirm.tsx

@@ -11,7 +11,6 @@ import {
   ModalBody,
   ModalCloseButton,
   ModalContent,
-  ModalFooter,
   ModalHeader,
   ModalOverlay,
   Text,
@@ -23,7 +22,6 @@ import {
   Election,
   ElectionCreationSteps,
   ElectionStatus,
-  ensure0x,
   EnvOptions,
   IElectionParameters,
   IPublishedElectionParameters,
@@ -33,6 +31,7 @@ import {
   UnpublishedElection,
   VocdoniCensus3Client,
   WeightedCensus,
+  ensure0x,
 } from '@vocdoni/sdk'
 import { useEffect, useMemo, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -44,8 +43,8 @@ import { CostPreview } from '../CostPreview'
 import { CreationProgress, Steps } from '../CreationProgress'
 import { Web3Address } from '../StepForm/CensusWeb3'
 import { Option } from '../StepForm/Questions'
-import { StepsFormValues, useProcessCreationSteps } from './use-steps'
 import Wrapper from './Wrapper'
+import { StepsFormValues, useProcessCreationSteps } from './use-steps'
 
 export const Confirm = () => {
   const { env, client, account } = useClient()
@@ -243,19 +242,14 @@ export const Confirm = () => {
         </Button>
         <Modal isOpen={isOpen} onClose={onClose} closeOnEsc={!!error} closeOnOverlayClick={!!error} isCentered>
           <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>{t('form.process_create.creating_process')}</ModalHeader>
+          <ModalContent p={12}>
+            <ModalHeader p={0} mb={5} textAlign='center'>
+              {t('form.process_create.creating_process')}
+            </ModalHeader>
             {error && <ModalCloseButton />}
-            <ModalBody>
+            <ModalBody p={0}>
               <CreationProgress error={error} sending={sending} step={step} />
             </ModalBody>
-            {error && (
-              <ModalFooter>
-                <Button colorScheme='blue' mr={3} onClick={onClose}>
-                  {t('form.process_create.confirm.close')}
-                </Button>
-              </ModalFooter>
-            )}
           </ModalContent>
         </Modal>
       </Flex>

src/i18n/locales/ca.json

@@ -208,7 +208,6 @@
         "census_total_people_one": "Una persona podrà votar en aquesta votació",
         "census_total_people_many": "{{ count }} persones podran votar en aquesta votació",
         "census_total_people_other": "",
-        "close": "Tanca",
         "configuration": "Configuració",
         "confirmation": "Confirmació",
         "confirmation_terms_and_conditions": "Accepto els <link>termes i condicions</link> de Vocdoni",
@@ -235,7 +234,7 @@
         "vote_overwritte": "Sobreescriure vot"
       },
       "confirm_spreadsheet_removal": "Estàs segur que vols canviar-ho? Fent-ho s'esborrarà el fitxer que has carregat actualment.",
-      "creating_process": "Creant el procés...",
+      "creating_process": "Creant Procés de Votació...",
       "meta": {
         "description": "Proporciona un títol i una descripció clars. Això ajudarà als votants a entendre el propòsit del procés de votació.",
         "description_helper": "Una breu descripció de la teva votació",
@@ -416,9 +415,8 @@
       "done": "Creació del procés",
       "sign_tx": "Signar transacció"
     },
-    "creation_steps_description": "S'està creant el procés de votació. Aquest procediment pot trigar una mica (no tanquis aquesta finestra) mentre queda enregistrada tota la informació a la blockchain privada i segura de Vocdoni.",
-    "creation_steps_title": "Progrés",
-    "do_not_close": "Aquesta acció pot trigar una estona, no tanquis aquesta finestra"
+    "creation_steps_description": "Necessites signar les transaccions per crear el procés de votació a la cadena de blocs de Vocdoni. No tanquis aquesta finestra.",
+    "creation_steps_title": "Progrés"
   },
   "uploader": {
     "click_or_drag_and_drop": "<p1>Puja o arrossega i deixa anar aquí la llista de votants</p1><p2>(Formats permesos: CSV, XLSX i ODS)</p2>",

src/i18n/locales/en.json

@@ -204,7 +204,6 @@
         "census_total_other": "<span>Voters:</span><span>{{ count }} voters</span>",
         "census_total_people_one": "A single person will be elegible for voting in this process",
         "census_total_people_other": "{{ count }} people will be elegible for voting in this process",
-        "close": "Close",
         "configuration": "Configuration",
         "confirmation": "Confirmation",
         "confirmation_terms_and_conditions": "I accept the <link>Terms and Conditions</link> of Vocdoni",
@@ -229,7 +228,7 @@
         "vote_overwritte": "Vote overwritte"
       },
       "confirm_spreadsheet_removal": "Are you sure? Take in mind that the uploaded file will be removed",
-      "creating_process": "Creating process...",
+      "creating_process": "Creating Voting Process...",
       "meta": {
         "description": "Provide a clear title & description. This will help voters understand the purpose of the voting process.",
         "description_helper": "A brief description of your voting process",
@@ -407,9 +406,8 @@
       "done": "Process creation",
       "sign_tx": "Sign transaction"
     },
-    "creation_steps_description": "The voting process is being created. This process can last a bit (don't close this window), as it is registering all the information in the secure & private Vocdoni Blockchain.",
-    "creation_steps_title": "Progress",
-    "do_not_close": "This action can take some time, don't close this window"
+    "creation_steps_description": "You need to sign the transactions in order to create the voting process in the Vocdoni blockchain. Don't close this windows.",
+    "creation_steps_title": "Progress"
   },
   "uploader": {
     "click_or_drag_and_drop": "<p1>Upload or drag and drop the voter list here</p1><p2>(Allowed formats: CSV, XLSX, and ODS)</p2>",

src/i18n/locales/es.json

@@ -208,7 +208,6 @@
         "census_total_people_one": "Una persona podrá votar en esta votación",
         "census_total_people_many": "{{ count }} personas podrán votar en esta votación",
         "census_total_people_other": "",
-        "close": "Cerrar",
         "configuration": "Configuración",
         "confirmation": "Confirmación",
         "confirmation_terms_and_conditions": "Acepto los <link>términos y condiciones</link> de Vocdoni",
@@ -235,7 +234,7 @@
         "vote_overwritte": "Sobrescribir voto"
       },
       "confirm_spreadsheet_removal": "Seguro? Piensa que al hacerlo se eliminará el fichero que has cargado.",
-      "creating_process": "Creando proceso...",
+      "creating_process": "Creando Proceso de Votación...",
       "meta": {
         "description": "Proporciona un título y descripción claros. Esto ayudará a los votantes a entender el propósito de la votación.",
         "description_helper": "Una breve descripción de tu votación",
@@ -416,9 +415,8 @@
       "done": "Creación del proceso",
       "sign_tx": "Firmar transacción"
     },
-    "creation_steps_description": "Se está creando el proceso de votación. Este procedimiento puede tardar un rato (no cierres esta ventana) mientras queda registrada toda la información en la blockchain privada y segura de Vocdoni.",
-    "creation_steps_title": "Progreso",
-    "do_not_close": "Esta acción puede llevar algún tiempo, no cierres esta ventana"
+    "creation_steps_description": "Necesitas firmar las transacciones para crear el proceso de votación en la cadena de bloques de Vocdoni. No cierres esta ventana.",
+    "creation_steps_title": "Progreso"
   },
   "uploader": {
     "click_or_drag_and_drop": "<p1>Sube o arrastra y suelta aqui la lista de votantes</p1><p2>(Formap permitidos: CSV, XLSX y ODS)</p2>",