Merge pull request #397 from ethereum/pse-projects

Add multi select for pse projects
ethereum · Dec 11, 2024 · 70d60ac · 70d60ac
2 parents a9eecc8 + 0f31180
commit 70d60ac
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 20 deletions.
diff --git a/src/components/forms/PSEApplicationForm.tsx b/src/components/forms/PSEApplicationForm.tsx
@@ -13,7 +13,12 @@ import { api } from './api';
 
 import { chakraStyles } from './selectStyles';
 
-import { COUNTRY_OPTIONS, FIAT_CURRENCY_OPTIONS, TIMEZONE_OPTIONS } from './constants';
+import {
+  COUNTRY_OPTIONS,
+  FIAT_CURRENCY_OPTIONS,
+  TIMEZONE_OPTIONS,
+  PSE_PROJECTS_OPTIONS
+} from './constants';
 import { TOAST_OPTIONS, PSE_APPLICATION_THANK_YOU_PAGE_URL } from '../../constants';
 
 import { PSEData, PSESchema } from './schemas/PSEGrants';
@@ -299,24 +304,49 @@ export const PSEApplicationForm: FC = () => {
 
           <PageSection mt={12}>Additional Information</PageSection>
 
-          <TextField
-            id='relatedPSEProject'
-            label='Related PSE Project'
-            helpText={
-              <div>
-                Which PSE project does your proposal relate to? See the{' '}
-                <Link
-                  fontWeight={700}
-                  color='brand.orange.100'
-                  href='https://pse.dev/en/projects'
-                  isExternal
-                  _hover={{ textDecoration: 'none' }}
-                >
-                  complete list of PSE projects
-                </Link>
-              </div>
-            }
-            isRequired
+          <Controller
+            name='relatedPSEProject'
+            control={control}
+            render={({ field: { onChange }, fieldState: { error } }) => (
+              <Field
+                id='relatedPSEProject'
+                label='Related PSE Project'
+                helpText={
+                  <div>
+                    Which PSE project does your proposal relate to? See the{' '}
+                    <Link
+                      fontWeight={700}
+                      color='brand.orange.100'
+                      href='https://pse.dev/en/projects'
+                      isExternal
+                      _hover={{ textDecoration: 'none' }}
+                    >
+                      complete list of PSE projects
+                    </Link>
+                  </div>
+                }
+                error={error}
+                isRequired
+              >
+                <Select
+                  id='relatedPSEProject'
+                  options={PSE_PROJECTS_OPTIONS}
+                  isMulti
+                  onChange={selectedOptions => {
+                    onChange(
+                      (selectedOptions as typeof PSE_PROJECTS_OPTIONS)
+                        .map(option => option.value)
+                        .join(',')
+                    );
+                  }}
+                  components={{ DropdownIndicator }}
+                  placeholder='Select'
+                  closeMenuOnSelect={true}
+                  selectedOptionColor='brand.option'
+                  chakraStyles={chakraStyles}
+                />
+              </Field>
+            )}
           />
 
           <TextField

diff --git a/src/components/forms/constants.ts b/src/components/forms/constants.ts
@@ -1545,6 +1545,24 @@ export const TIMEZONE_OPTIONS = [
   }
 ];
 
+// PSE Projects
+export const PSE_PROJECTS_OPTIONS = [
+  { value: 'Anon Aadhaar', label: 'Anon Aadhaar' },
+  { value: 'OpenPassport', label: 'OpenPassport' },
+  { value: 'TLSNotary', label: 'TLSNotary' },
+  { value: 'ZK Email', label: 'ZK Email' },
+  { value: 'zkID Standards', label: 'zkID Standards' },
+  { value: 'Bandada', label: 'Bandada' },
+  { value: 'Cursive', label: 'Cursive' },
+  { value: 'MACI', label: 'MACI' },
+  { value: 'Semaphore', label: 'Semaphore' },
+  { value: 'ZKP2P', label: 'ZKP2P' },
+  { value: 'ZKStats/MPCStats', label: 'ZKStats/MPCStats' },
+  { value: 'Mopro', label: 'Mopro' },
+  { value: 'RISC-V zkVM', label: 'RISC-V zkVM' },
+  { value: 'ZK-Kit', label: 'ZK-Kit' }
+];
+
 // fiat currency
 export const FIAT_CURRENCY_OPTIONS = [
   { value: 'AUD', label: 'AUD' },

diff --git a/src/components/forms/schemas/PSEGrants.ts b/src/components/forms/schemas/PSEGrants.ts
@@ -50,7 +50,7 @@ export const PSESchema = z
     timezone: stringFieldSchema('Time zone', { min: 1 }),
 
     // Additional Information
-    relatedPSEProject: stringFieldSchema('Related PSE project', { min: 1, max: MAX_TEXT_LENGTH }),
+    relatedPSEProject: stringFieldSchema('Related PSE project', { min: 1 }),
     referrals: stringFieldSchema('Field', { min: 1, max: MAX_TEXT_AREA_LENGTH }),
     sustainabilityPlan: stringFieldSchema('Field', {
       max: MAX_TEXT_AREA_LENGTH