Fixed validation

pioneer/packages/joy-proposals/src/forms/FileDropdown.tsx

@@ -100,6 +100,7 @@ type FileDropdownProps<FormValuesT> = {
   error: string | undefined;
   name: keyof FormValuesT & string;
   setFieldValue: FormikProps<FormValuesT>['setFieldValue'];
+  setFieldTouched: FormikProps<FormValuesT>['setFieldTouched'];
   acceptedFormats: string | string[];
   defaultText: string;
   interpretAs: 'utf-8' | 'binary';
@@ -107,7 +108,7 @@ type FileDropdownProps<FormValuesT> = {
 
 export default function FileDropdown<ValuesT = {}> (props: FileDropdownProps<ValuesT>) {
   const [parsing, setParsing] = useState(false);
-  const { error, name, setFieldValue, acceptedFormats, defaultText, interpretAs } = props;
+  const { error, name, setFieldValue, setFieldTouched, acceptedFormats, defaultText, interpretAs } = props;
   return (
     <Dropzone
       onDropAccepted={async acceptedFiles => {
@@ -119,6 +120,7 @@ export default function FileDropdown<ValuesT = {}> (props: FileDropdownProps<Val
           contents = await parseFileAsBinary(acceptedFiles[0]);
         }
         setFieldValue(name, contents, true);
+        setFieldTouched(name, true);
         setParsing(false);
       }}
       multiple={false}

pioneer/packages/joy-proposals/src/forms/RuntimeUpgradeForm.tsx

@@ -32,7 +32,7 @@ type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
 const RuntimeUpgradeForm: React.FunctionComponent<FormInnerProps> = props => {
-  const { errors, setFieldValue, values } = props;
+  const { errors, setFieldValue, setFieldTouched, values, touched } = props;
   return (
     <GenericProposalForm
       {...props}
@@ -43,10 +43,11 @@ const RuntimeUpgradeForm: React.FunctionComponent<FormInnerProps> = props => {
       <Form.Field>
         <FileDropdown<FormValues>
           setFieldValue={setFieldValue}
+          setFieldTouched={setFieldTouched}
           defaultText="Drag-n-drop WASM bytecode of a runtime upgrade (*.wasm)"
           acceptedFormats=".wasm"
           name="WASM"
-          error={errors.WASM}
+          error={touched.WASM ? errors.WASM : undefined}
           interpretAs='binary'
         />
       </Form.Field>

pioneer/packages/joy-proposals/src/validationSchema.ts

@@ -100,7 +100,7 @@ type ValidationType = {
     description: Yup.StringSchema<string>;
   };
   RuntimeUpgrade: {
-    WASM: Yup.StringSchema<string>;
+    WASM: Yup.MixedSchema<any>;
   };
   SetElectionParameters: {
     announcingPeriod: Yup.NumberSchema<number>;
@@ -157,10 +157,10 @@ const Validation: ValidationType = {
       .max(DESCRIPTION_MAX_LENGTH, `Description should be under ${DESCRIPTION_MAX_LENGTH}`)
   },
   RuntimeUpgrade: {
-    WASM: Yup.string()
-      .required('A file is required')
-      .min(FILE_SIZE_BYTES_MIN, 'File is empty.')
-      .max(FILE_SIZE_BYTES_MAX, `The maximum file size is ${FILE_SIZE_BYTES_MAX} bytes.`)
+    WASM: Yup.mixed()
+      .test('fileArrayBuffer', 'Unexpected data format, file cannot be processed.', value => typeof value.byteLength !== 'undefined')
+      .test('fileSizeMin', `Minimum file size is ${FILE_SIZE_BYTES_MIN} bytes.`, value => value.byteLength >= FILE_SIZE_BYTES_MIN)
+      .test('fileSizeMax', `Maximum file size is ${FILE_SIZE_BYTES_MAX} bytes.`, value => value.byteLength <= FILE_SIZE_BYTES_MAX)
   },
   SetElectionParameters: {
     announcingPeriod: Yup.number()