Implement token census max size limit (#584)

configured trhough the env var `DEFAULT_CENSUS_SIZE`

src/components/ProcessCreate/Census/Token.tsx

@@ -2,6 +2,7 @@ import {
   Alert,
   AlertIcon,
   Badge,
+  Button,
   Card,
   CardHeader,
   Flex,
@@ -20,6 +21,8 @@ import {
   Stack,
   Text,
   Tooltip,
+  Wrap,
+  WrapItem,
 } from '@chakra-ui/react'
 import { errorToString, useClient } from '@vocdoni/react-providers'
 import { Census3Token, EnvOptions, ICensus3SupportedChain, TokenSummary, VocdoniCensus3Client } from '@vocdoni/sdk'
@@ -30,6 +33,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { customStylesSelect, customStylesTokensSelect } from '~theme/tokenSelectStyles'
 import { useProcessCreationSteps } from '../Steps/use-steps'
 import selectComponents, { CryptoAvatar } from './select-components'
+import { DefaultCensusSize } from '~constants'
 
 export interface FilterOptionOption<Option> {
   readonly label: string
@@ -366,7 +370,10 @@ export const CensusTokens = () => {
   )
 }
 
-export const MaxCensusSizeSelector = ({ token, strategySize }: { token?: Census3Token; strategySize?: number }) => {
+const SliderButtonsValuesDesktop = [0.01, 0.05, 0.1, 0.25, 0.5, 0.75, 1]
+const SliderButtonsValues = [0.05, 0.1, 0.25, 0.5, 0.75, 1]
+
+export const MaxCensusSizeSelector = ({ token, strategySize }: { token?: Census3Token; strategySize: number }) => {
   const {
     setValue,
     getValues,
@@ -387,15 +394,17 @@ export const MaxCensusSizeSelector = ({ token, strategySize }: { token?: Census3
     required: t('process_create.census.mandatory_max_census_size'),
   })
 
+  const maxStrategySize = strategySize < DefaultCensusSize ? strategySize : DefaultCensusSize
+
   useEffect(() => {
     if (sliderValue !== undefined) return
-    setValue('maxCensusSize', strategySize)
-    setSliderValue(strategySize as number)
+    setValue('maxCensusSize', maxStrategySize)
+    setSliderValue(maxStrategySize as number)
   }, [])
 
   if (sliderValue === undefined || !token || !strategySize) return null
 
-  const percent = Math.round((sliderValue / strategySize) * 100)
+  const percent = Math.round((sliderValue / maxStrategySize) * 100)
 
   return (
     <>
@@ -405,9 +414,10 @@ export const MaxCensusSizeSelector = ({ token, strategySize }: { token?: Census3
         </FormLabel>
         <Slider
           aria-label={t('form.process_create.census.max_census_slider_arialabel')}
+          value={sliderValue}
           defaultValue={sliderValue}
           min={0}
-          max={strategySize}
+          max={maxStrategySize}
           ref={field.ref}
           onBlur={field.onBlur}
           onChange={(v) => {
@@ -417,13 +427,13 @@ export const MaxCensusSizeSelector = ({ token, strategySize }: { token?: Census3
           onMouseEnter={() => setShowTooltip(true)}
           onMouseLeave={() => setShowTooltip(false)}
         >
-          <SliderMark value={strategySize * 0.25} mt='1' ml='-2.5' fontSize='sm'>
+          <SliderMark value={maxStrategySize * 0.25} mt='1' ml='-2.5' fontSize='sm'>
             25%
           </SliderMark>
-          <SliderMark value={strategySize * 0.5} mt='1' ml='-2.5' fontSize='sm'>
+          <SliderMark value={maxStrategySize * 0.5} mt='1' ml='-2.5' fontSize='sm'>
             50%
           </SliderMark>
-          <SliderMark value={strategySize * 0.75} mt='1' ml='-2.5' fontSize='sm'>
+          <SliderMark value={maxStrategySize * 0.75} mt='1' ml='-2.5' fontSize='sm'>
             75%
           </SliderMark>
           <SliderTrack>
@@ -444,6 +454,24 @@ export const MaxCensusSizeSelector = ({ token, strategySize }: { token?: Census3
           </Tooltip>
         </Slider>
         <FormErrorMessage>{errors.maxCensusSize && errors.maxCensusSize.message?.toString()}</FormErrorMessage>
+        <Wrap spacing={4} mt={10} justify='center' w={'100%'}>
+          {SliderButtonsValues.map((v) => (
+            <WrapItem key={v}>
+              <Button
+                onClick={() => {
+                  const val = Math.round(maxStrategySize * v)
+                  setSliderValue(val)
+                  setValue('maxCensusSize', val)
+                }}
+                fontSize='sm'
+                variant={'secondary'}
+                height={'var(--chakra-sizes-8)'}
+              >
+                {v * 100}%
+              </Button>
+            </WrapItem>
+          ))}
+        </Wrap>
       </FormControl>
       <Text>
         <Trans

src/constants/index.ts

@@ -14,6 +14,9 @@ export const ExplorerBaseURL = explorer
 export const VocdoniEnvironment = evocdoni
 export const CensusPreviewRowsLimit = 10
 
+const defaultCensusSize = import.meta.env.DEFAULT_CENSUS_SIZE
+export const DefaultCensusSize = defaultCensusSize
+
 /**
  * Given an object of react-hook-form errors, determines if the specified mapped field is invalid (returns an error)
  *

src/importmeta.d.ts

@@ -28,5 +28,6 @@ interface ImportMeta {
     theme: string
     CSP_URL: string
     CSP_PUBKEY: string
+    DEFAULT_CENSUS_SIZE: number
   }
 }

vite.config.ts

@@ -22,6 +22,11 @@ const viteconfig = ({ mode }) => {
 
   const commit = execSync('git rev-parse --short HEAD').toString()
 
+  let defaultCensusSize = Number(process.env.DEFAULT_CENSUS_SIZE)
+  if (!defaultCensusSize) {
+    defaultCensusSize = 5000
+  }
+
   return defineConfig({
     base,
     build: {
@@ -33,6 +38,7 @@ const viteconfig = ({ mode }) => {
       'import.meta.env.CUSTOM_FAUCET_URL': JSON.stringify(process.env.CUSTOM_FAUCET_URL),
       'import.meta.env.CSP_PUBKEY': JSON.stringify(process.env.CSP_PUBKEY),
       'import.meta.env.CSP_URL': JSON.stringify(process.env.CSP_URL),
+      'import.meta.env.DEFAULT_CENSUS_SIZE': JSON.stringify(defaultCensusSize),
     },
     plugins: [
       tsconfigPaths(),