AddOperations.tsx

import { useState } from "react";
import { Box, Button, FormControl, FormErrorMessage, Textarea } from "@chakra-ui/react";
import { Field, Form, Formik, FormikProps } from "formik";
import { Trans } from "@lingui/macro";

const AddOperations = ({ arbitratorAddress }) => {
  const [submissionData, setSubmissionData] = useState<any>();

  const validateOperations = (value: string) => {
    let error;
    if (!value) {
      error = t`At least one operation must be specified`;
    }
    return error;
  };

  const onSubmit = (data: any) => {
    const result = {
      operations: data.operations,
    };
    console.log("RESULT", result);
    setSubmissionData(result);
  };

  return (
    <Formik
      initialValues={{}}
      validateOnMount={true}
      onSubmit={(values, actions) => {
        onSubmit(values);
        setTimeout(() => {
          actions.setSubmitting(false);
        }, 1000);
      }}
    >
      {(props: FormikProps<any>) => (
        <Form onSubmit={props.handleSubmit}>
          <Field name="operations" validate={validateOperations}>
            {({ field, form }: any) => (
              <FormControl
                isInvalid={form.errors.operations && form.touched.operations}
                mb={{ base: "20px" }}
              >
                <Textarea
                  type="text"
                  {...field}
                  placeholder={t`Write your operations (each in a new line)`}
                  variant="primary"
                  resize="vertical"
                  mb={{ base: "20px" }}
                  minH={{ base: "128px" }}
                />
                <FormErrorMessage>{form.errors.operations}</FormErrorMessage>
              </FormControl>
            )}
          </Field>
          <Box>
            <Button
              type="submit"
              variant="dark-outline"
              textTransform="uppercase"
              isDisabled={!props.isValid}
            >
              <Trans>Add Operations</Trans>
            </Button>
          </Box>
        </Form>
      )}
    </Formik>
  );
};

export default AddOperations;