Skip to content

Commit

Permalink
create process revamp (#303)
Browse files Browse the repository at this point in the history
Co-authored-by: Òscar Casajuana <elboletaire@gmail.com>
  • Loading branch information
gerouvi and elboletaire authored Oct 4, 2023
1 parent 314a212 commit 61bddb0
Show file tree
Hide file tree
Showing 26 changed files with 570 additions and 399 deletions.
21 changes: 17 additions & 4 deletions src/components/Faucet/Claim.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { VocdoniEnvironment } from '@constants'
import { ConnectButton } from '@rainbow-me/rainbowkit'
import { errorToString, useClient } from '@vocdoni/react-providers'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Trans, useTranslation } from 'react-i18next'
import { FaGithub } from 'react-icons/fa'
import { useFaucet } from './use-faucet'

Expand Down Expand Up @@ -104,11 +104,24 @@ export const Claim = () => {
}

return (
<Flex direction='column' gap={3}>
<Text>{t('faucet.request_tokens.description')}</Text>
<Flex direction='column' gap={3} fontSize='sm'>
<Trans
i18nKey='faucet.request_tokens.description'
components={{
span: <Text as='span' />,
}}
values={{ balance: account?.balance }}
/>

{connected && (
<Flex direction='row' gap='2'>
<Button type='submit' isLoading={loading} colorScheme='purple' onClick={() => handleSignIn('github')}>
<Button
type='submit'
w='full'
isLoading={loading}
colorScheme='primary'
onClick={() => handleSignIn('github')}
>
<Icon mr={2} as={FaGithub} />
{t('login.github')}
</Button>
Expand Down
104 changes: 65 additions & 39 deletions src/components/ProcessCreate/Census/Spreadsheet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import { ChangeEvent, useCallback, useMemo } from 'react'
import { useDropzone } from 'react-dropzone'
import { Controller, useFormContext } from 'react-hook-form'
import { Trans, useTranslation } from 'react-i18next'
import { BiDownload } from 'react-icons/bi'
import { BiCheckDouble, BiDownload } from 'react-icons/bi'
import { PiWarningCircleLight } from 'react-icons/pi'
import { RiFileExcel2Line } from 'react-icons/ri'
import { CensusSpreadsheetManager } from './CensusSpreadsheetManager'
import { CsvGenerator } from './generator'
import { CsvPreview } from './Preview'
import { CsvGenerator } from './generator'

export const CensusCsvManager = () => {
const { t } = useTranslation()
Expand Down Expand Up @@ -85,7 +85,7 @@ export const CensusCsvManager = () => {
}, [weighted])

return (
<Box>
<>
<Flex
gap={5}
flexDirection={{ base: 'column', lg: 'row' }}
Expand All @@ -98,17 +98,68 @@ export const CensusCsvManager = () => {
<Icon as={PiWarningCircleLight} />
<Text>{t('form.process_create.spreadsheet.requirements.title')}</Text>
</Flex>
<UnorderedList>
<UnorderedList mb={4} fontSize='sm'>
<ListItem mb={2}>
<Text>{t('form.process_create.spreadsheet.requirements.list_one')}</Text>
</ListItem>
<ListItem>
<Text>{t('form.process_create.spreadsheet.requirements.list_two')}</Text>
</ListItem>
<ListItem>
<Text>{t('form.process_create.spreadsheet.requirements.list_three')}</Text>
</ListItem>
</UnorderedList>
<FormControl
bgColor='process_create.bg'
p={3}
borderRadius='md'
sx={{
'& > label': {
position: 'relative',

'& span:first-of-type': {
position: 'absolute',
top: 1,
right: 1,
borderRadius: '50%',
borderColor: 'process_create.census.weighted_vote_checked',
},

'& > input:checked + span': {
bgColor: 'process_create.census.weighted_vote_checked',
},
},
}}
>
<Controller
control={control}
name='weightedVote'
defaultValue={weighted}
render={({ field: { onChange, onBlur, value, ref } }) => (
<Checkbox
onChange={(event: ChangeEvent<HTMLInputElement>) => {
if (!manager) {
return setValue('weightedVote', event.target.checked)
}
if (window.confirm(t('form.process_create.confirm_spreadsheet_removal'))) {
setValue('spreadsheet', undefined)
setValue('weightedVote', event.target.checked)
}
}}
onBlur={onBlur}
ref={ref}
isChecked={value}
>
<Flex alignItems='center' gap={1}>
<Icon as={BiCheckDouble} />
<Text fontWeight='bold' mb={1}>
<Trans i18nKey='form.process_create.weighted'>Weighted vote</Trans>
</Text>
</Flex>
<Text color='process_create.description' fontSize='sm'>
{t('form.process_create.spreadsheet.requirements.list_three')}
</Text>
</Checkbox>
)}
/>
</FormControl>
</Box>
<Flex
flex='1 1 40%'
Expand All @@ -117,7 +168,6 @@ export const CensusCsvManager = () => {
alignItems='center'
gap={3}
p={6}
bgColor='white'
borderRadius='lg'
mx='auto'
>
Expand All @@ -130,31 +180,6 @@ export const CensusCsvManager = () => {
</Flex>
</Flex>

<FormControl>
<Controller
control={control}
name='weightedVote'
defaultValue={weighted}
render={({ field: { onChange, onBlur, value, ref } }) => (
<Checkbox
onChange={(event: ChangeEvent<HTMLInputElement>) => {
if (!manager) {
return setValue('weightedVote', event.target.checked)
}
if (window.confirm(t('form.process_create.confirm_spreadsheet_removal'))) {
setValue('spreadsheet', undefined)
setValue('weightedVote', event.target.checked)
}
}}
onBlur={onBlur}
ref={ref}
isChecked={value}
>
<Trans i18nKey='form.process_create.weighted'>Weighted vote</Trans>
</Checkbox>
)}
/>
</FormControl>
<FormControl
{...register('spreadsheet', { required: { value: true, message: t('form.error.field_is_required') } })}
{...upload}
Expand All @@ -167,24 +192,25 @@ export const CensusCsvManager = () => {
alignItems='center'
gap={5}
p={10}
border='1px dotted lightgray'
bgColor='white'
border='1px dotted'
borderColor='process_create.census.drag_and_drop_border'
bgColor='process_create.bg'
borderRadius='lg'
cursor='pointer'
>
<input {...getInputProps()} />
<Icon as={RiFileExcel2Line} boxSize={20} color='process_create.spreadsheet.file' />
<Box>
{isDragActive ? (
<Text textAlign='center' color='process_create.spreadsheet.drag_and_drop_text'>
<Text textAlign='center' color='process_create.description'>
{t('uploader.drop_here')}
</Text>
) : (
<Trans
i18nKey='uploader.click_or_drag_and_drop'
components={{
p1: <Text textAlign='center' color='process_create.spreadsheet.drag_and_drop_text' />,
p2: <Text textAlign='center' fontSize='sm' color='process_create.spreadsheet.drag_and_drop_text' />,
p1: <Text textAlign='center' color='process_create.description' />,
p2: <Text textAlign='center' fontSize='sm' color='process_create.description' />,
}}
/>
)}
Expand All @@ -195,6 +221,6 @@ export const CensusCsvManager = () => {
</FormErrorMessage>
</FormControl>
<CsvPreview manager={manager} upload={upload} />
</Box>
</>
)
}
72 changes: 35 additions & 37 deletions src/components/ProcessCreate/Census/Token.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,44 +93,42 @@ export const CensusTokens = () => {
}

return (
<Flex justifyContent='center'>
<Stack maxW='50%' w='full' direction='column' gap={3} alignItems='center'>
<FormControl isInvalid={!!errors.censusToken}>
<AsyncSelect
ref={selectRef}
placeholder={t('form.process_create.census.tokens_placeholder')}
cacheOptions
defaultOptions
defaultValue={ct}
loadOptions={(input: string) => {
const regex = new RegExp(input, 'ig')
return client
.getSupportedTokens()
.then((res: object) =>
(res as ICensus3Token[]).filter(
(t) => t.name.match(regex) || t.symbol.match(regex) || t.id.match(regex)
)
<Stack w='full' direction='column' gap={3} alignItems='center'>
<FormControl isInvalid={!!errors.censusToken}>
<AsyncSelect
ref={selectRef}
placeholder={t('form.process_create.census.tokens_placeholder')}
cacheOptions
defaultOptions
defaultValue={ct}
loadOptions={(input: string) => {
const regex = new RegExp(input, 'ig')
return client
.getSupportedTokens()
.then((res: object) =>
(res as ICensus3Token[]).filter(
(t) => t.name.match(regex) || t.symbol.match(regex) || t.id.match(regex)
)
}}
getOptionValue={({ id }) => id}
getOptionLabel={({ name, symbol }) => `${name} (${symbol})`}
onChange={async (token) => setValue('censusToken', token?.id)}
name={ctoken.name}
onBlur={ctoken.onBlur}
chakraStyles={{ container: (p, state) => ({ ...p, w: 'full' }) }}
/>
<FormErrorMessage>{errors.censusToken && errors.censusToken.message?.toString()}</FormErrorMessage>
</FormControl>
{loading ? (
<Spinner />
) : (
<>
<TokenPreview token={token} />
<MaxCensusSizeSelector token={token} />
</>
)}
</Stack>
</Flex>
)
}}
getOptionValue={({ id }) => id}
getOptionLabel={({ name, symbol }) => `${name} (${symbol})`}
onChange={async (token) => setValue('censusToken', token?.id)}
name={ctoken.name}
onBlur={ctoken.onBlur}
chakraStyles={{ container: (p, state) => ({ ...p, w: 'full' }) }}
/>
<FormErrorMessage>{errors.censusToken && errors.censusToken.message?.toString()}</FormErrorMessage>
</FormControl>
{loading ? (
<Spinner />
) : (
<>
<TokenPreview token={token} />
<MaxCensusSizeSelector token={token} />
</>
)}
</Stack>
)
}

Expand Down
Loading

1 comment on commit 61bddb0

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.