From 861f8686cbbdad0d378035c7a8228dcdaaa8679e Mon Sep 17 00:00:00 2001
From: Andy Espagnolo <andyespagnolo@gmail.com>
Date: Thu, 29 Jun 2023 13:02:53 -0300
Subject: [PATCH] refactor: use react-hook-form in all forms (#1049)

* refactor: use react-hook-form in update proposal status modal

* refactor: use react-hook-form in grant category section

* refactor: use react-hook-form in http status test form

* refactor: use react-hook-form in team and budget modals

* refactor: use react-hook-form in grant general info submit

* refactor: remove assert function from linked-wearables

* fix: mobile styles

* remove console logs

* add function to get all field props in core unit

* add function to get all field props in other categories
---
 src/components/Common/Form/TextArea.tsx       |  33 ++
 src/components/Common/Text/Text.css           |   3 +
 src/components/Common/Text/Text.tsx           |   2 +-
 src/components/Debug/HttpStatus.tsx           | 111 +++----
 .../GrantRequest/AddBudgetBreakdownModal.tsx  | 305 +++++++++---------
 src/components/GrantRequest/AddModal.tsx      |  36 ++-
 .../GrantRequest/AddTeamMemberModal.tsx       | 176 +++++-----
 .../CategorySection/AcceleratorSection.tsx    | 165 ++++------
 .../CategorySection/CoreUnitSection.tsx       | 126 +++-----
 .../CategorySection/DocumentationSection.tsx  | 100 +++---
 .../CategorySection/InWorldContentSection.tsx | 121 ++++---
 .../CategorySection/PlatformSection.tsx       |  78 ++---
 .../SocialMediaContentSection.tsx             | 195 +++++------
 .../CategorySection/SponsorshipSection.tsx    | 277 ++++++++--------
 .../GrantRequestCategorySection.tsx           |  42 ++-
 .../GrantRequestGeneralInfoSection.tsx        | 252 +++++++--------
 .../GrantRequest/GrantRequestSection.css      |  23 --
 .../GrantRequest/GrantRequestSectionCard.css  |   1 +
 .../GrantRequest/MultipleChoiceField.css      |   3 +
 .../GrantRequest/MultipleChoiceField.tsx      |  20 +-
 src/components/Home/OpenProposal.css          |   4 +
 src/components/Home/OpenProposal.tsx          |   2 +-
 .../UpdateProposalStatusModal.tsx             | 207 ++++++------
 .../Profile/ProposalCreatedItem.css           |  20 +-
 .../Profile/ProposalCreatedItem.tsx           |  18 +-
 src/hooks/useGrantCategoryEditor.ts           |  22 --
 src/pages/proposal.tsx                        |   2 +-
 src/pages/submit/grant.tsx                    |  14 +-
 src/pages/submit/linked-wearables.tsx         |  20 +-
 src/ui-overrides.css                          |  26 ++
 30 files changed, 1160 insertions(+), 1244 deletions(-)
 create mode 100644 src/components/Common/Form/TextArea.tsx
 create mode 100644 src/components/GrantRequest/MultipleChoiceField.css
 delete mode 100644 src/hooks/useGrantCategoryEditor.ts

diff --git a/src/components/Common/Form/TextArea.tsx b/src/components/Common/Form/TextArea.tsx
new file mode 100644
index 000000000..1251d5f0b
--- /dev/null
+++ b/src/components/Common/Form/TextArea.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Control, Controller, FieldValues, Path, PathValue } from 'react-hook-form'
+
+import {
+  TextAreaField as DCLTextArea,
+  TextAreaFieldProps,
+} from 'decentraland-ui/dist/components/TextAreaField/TextAreaField'
+
+interface Props<T extends FieldValues> extends TextAreaFieldProps {
+  control: Control<T>
+  name: Path<T>
+  defaultValue?: PathValue<T, Path<T>> | undefined
+  rules?: any
+}
+
+export default function TextArea<T extends FieldValues>({
+  control,
+  name,
+  defaultValue,
+  rules,
+  ...fieldProps
+}: Props<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue={defaultValue}
+      rules={rules}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      render={({ field: { ref, ...field } }) => <DCLTextArea {...field} {...fieldProps} />}
+    />
+  )
+}
diff --git a/src/components/Common/Text/Text.css b/src/components/Common/Text/Text.css
index 57d0dd402..787556f16 100644
--- a/src/components/Common/Text/Text.css
+++ b/src/components/Common/Text/Text.css
@@ -43,6 +43,9 @@
 .Text.Text--color-secondary {
   color: var(--secondary-text);
 }
+.Text.Text--color-error {
+  color: var(--red-800);
+}
 
 .Text.Text--style-normal {
   font-style: normal;
diff --git a/src/components/Common/Text/Text.tsx b/src/components/Common/Text/Text.tsx
index 400af369c..002904c10 100644
--- a/src/components/Common/Text/Text.tsx
+++ b/src/components/Common/Text/Text.tsx
@@ -10,7 +10,7 @@ const DEFAULT_FONT_SIZE: FontSize = 'md'
 const DEFAULT_FONT_STYLE: FontStyle = 'normal'
 type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 type FontWeight = 'bold' | 'semi-bold' | 'normal'
-type TextColor = 'default' | 'primary' | 'secondary'
+type TextColor = 'default' | 'primary' | 'secondary' | 'error'
 type FontStyle = 'normal' | 'italic'
 
 interface Props {
diff --git a/src/components/Debug/HttpStatus.tsx b/src/components/Debug/HttpStatus.tsx
index ea59d14c6..63c9fdb40 100644
--- a/src/components/Debug/HttpStatus.tsx
+++ b/src/components/Debug/HttpStatus.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
 
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
 
 import { HttpStat } from '../../clients/HttpStat'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import Field from '../Common/Form/Field'
 import Label from '../Common/Label'
 import ErrorMessage from '../Error/ErrorMessage'
 import { ContentSection } from '../Layout/ContentLayout'
@@ -20,96 +20,83 @@ const initialState: TestState = {
   sleepTime: 0,
 }
 
-const edit = (state: TestState, props: Partial<TestState>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
-
 const MAX_SLEEP_TIME = 300000 // 5 minutes
 
-const validate = createValidator<TestState>({
-  httpStatus: (state) => ({
-    httpStatus: assert(state.httpStatus.length === 3, 'error.debug.invalid_http_status'),
-  }),
-  sleepTime: (state) => ({
-    sleepTime: assert(state.sleepTime >= 0 && state.sleepTime <= MAX_SLEEP_TIME, 'error.debug.invalid_sleep_time'),
-  }),
-  '*': (state) => ({
-    httpStatus: assert(state.httpStatus.length === 3, 'error.debug.invalid_http_status'),
-    sleepTime: assert(state.sleepTime >= 0 && state.sleepTime <= MAX_SLEEP_TIME, 'error.debug.invalid_sleep_time'),
-  }),
-})
-
 interface Props {
   className?: string
 }
 
 export default function HttpStatus({ className }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, initialState)
   const [formDisabled, setFormDisabled] = useState(false)
+  const {
+    handleSubmit,
+    formState: { isSubmitting, errors },
+    control,
+  } = useForm<TestState>({ defaultValues: initialState, mode: 'onTouched' })
+  const [error, setError] = useState('')
 
-  useEffect(() => {
-    if (state.validated) {
-      setFormDisabled(true)
-      Promise.resolve()
-        .then(async () => {
-          return HttpStat.get().fetchResponse(state.value.httpStatus, state.value.sleepTime)
-        })
-        .then((result) => {
-          console.log('result', result)
-          editor.error({ '*': '' })
-          setFormDisabled(false)
-        })
-        .catch((err) => {
-          console.error(err, { ...err })
-          editor.error({ '*': err.body?.error || err.message })
-          setFormDisabled(false)
-        })
+  const onSubmit: SubmitHandler<TestState> = async (data) => {
+    try {
+      const result = await HttpStat.get().fetchResponse(data.httpStatus, data.sleepTime)
+      console.log('result', result)
+      setFormDisabled(false)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      console.error(err, { ...err })
+      setError(err.body?.error || err.message)
+      setFormDisabled(false)
     }
-  }, [editor, state.validated, state.value])
+  }
 
   return (
-    <div className={className}>
+    <form className={className} onSubmit={handleSubmit(onSubmit)}>
       <ContentSection>
         <Label>{'Http Status'}</Label>
         <Field
-          value={state.value.httpStatus}
-          onChange={(_, { value }) => editor.set({ httpStatus: value })}
-          onBlur={() => editor.set({ httpStatus: state.value.httpStatus.trim() })}
-          error={!!state.error.httpStatus}
+          name="httpStatus"
+          control={control}
+          error={!!errors.httpStatus}
+          message={errors.httpStatus?.message}
           disabled={formDisabled}
-          message={t(state.error.httpStatus)}
+          rules={{
+            required: { value: true, message: t('error.draft.title_empty') },
+            validate: (value: string) => {
+              if (value.length !== 3) {
+                return t('error.debug.invalid_http_status')
+              }
+            },
+          }}
         />
       </ContentSection>
       <ContentSection>
         <Label>{'Sleep'}</Label>
         <Field
-          value={state.value.sleepTime}
-          onChange={(_, { value }) => editor.set({ sleepTime: value ? Number(value) : undefined })}
-          onBlur={() => editor.set({ sleepTime: state.value.sleepTime })}
-          error={!!state.error.sleepTime}
-          message={t(state.error.sleepTime)}
+          name="sleepTime"
+          control={control}
+          error={!!errors.sleepTime}
+          message={errors.sleepTime?.message}
           disabled={formDisabled}
+          rules={{
+            required: { value: true, message: t('error.draft.title_empty') },
+            validate: (value: string) => {
+              if (Number(value) >= 0 && Number(value) <= MAX_SLEEP_TIME) {
+                return t('error.debug.invalid_sleep_time')
+              }
+            },
+          }}
         />
       </ContentSection>
       <ContentSection className="DebugPage__Submit">
-        <Button
-          primary
-          disabled={state.validated || formDisabled}
-          loading={state.validated || formDisabled}
-          onClick={() => editor.validate()}
-        >
+        <Button type="submit" primary disabled={formDisabled} loading={isSubmitting}>
           {t('page.submit.button_submit')}
         </Button>
       </ContentSection>
-      {state.error['*'] && (
+      {error && (
         <ContentSection>
-          <ErrorMessage label={t('page.debug.error_label')} errorMessage={t(state.error['*']) || state.error['*']} />
+          <ErrorMessage label={t('page.debug.error_label')} errorMessage={t(error) || error} />
         </ContentSection>
       )}
-    </div>
+    </form>
   )
 }
diff --git a/src/components/GrantRequest/AddBudgetBreakdownModal.tsx b/src/components/GrantRequest/AddBudgetBreakdownModal.tsx
index 8fbc6dfe2..a145d0396 100644
--- a/src/components/GrantRequest/AddBudgetBreakdownModal.tsx
+++ b/src/components/GrantRequest/AddBudgetBreakdownModal.tsx
@@ -1,13 +1,12 @@
-import React, { useEffect, useMemo } from 'react'
-
-import Textarea from 'decentraland-gatsby/dist/components/Form/Textarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
+import React, { useEffect } from 'react'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 
 import { BudgetBreakdownConcept, BudgetBreakdownConceptSchema } from '../../entities/Grant/types'
 import { asNumber } from '../../entities/Proposal/utils'
 import { isHttpsURL } from '../../helpers'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import Field from '../Common/Form/Field'
+import TextArea from '../Common/Form/TextArea'
 import Label from '../Common/Label'
 import { ContentSection } from '../Layout/ContentLayout'
 
@@ -16,7 +15,7 @@ import './AddModal.css'
 import BudgetInput from './BudgetInput'
 import NumberSelector from './NumberSelector'
 
-export const INITIAL_BUDGET_BREAKDOWN_CONCEPT: BudgetBreakdownConcept = {
+const INITIAL_BUDGET_BREAKDOWN_CONCEPT: BudgetBreakdownConcept = {
   concept: '',
   duration: 1,
   estimatedBudget: '',
@@ -25,52 +24,6 @@ export const INITIAL_BUDGET_BREAKDOWN_CONCEPT: BudgetBreakdownConcept = {
 }
 
 const schema = BudgetBreakdownConceptSchema
-const validate = (fundingLeftToDisclose: number) =>
-  createValidator<BudgetBreakdownConcept>({
-    concept: (state) => ({
-      concept:
-        assert(state.concept.length <= schema.concept.maxLength, 'error.grant.due_diligence.concept_too_large') ||
-        assert(state.concept.length > 0, 'error.grant.due_diligence.concept_empty') ||
-        assert(state.concept.length >= schema.concept.minLength, 'error.grant.due_diligence.concept_too_short') ||
-        undefined,
-    }),
-    estimatedBudget: (state) => ({
-      estimatedBudget:
-        assert(
-          Number.isInteger(asNumber(state.estimatedBudget)),
-          'error.grant.due_diligence.estimated_budget_invalid'
-        ) ||
-        assert(
-          !state.estimatedBudget || asNumber(state.estimatedBudget) >= schema.estimatedBudget.minimum,
-          'error.grant.due_diligence.estimated_budget_too_low'
-        ) ||
-        assert(
-          !state.estimatedBudget || asNumber(state.estimatedBudget) <= fundingLeftToDisclose,
-          'error.grant.due_diligence.estimated_budget_too_big'
-        ) ||
-        undefined,
-    }),
-    aboutThis: (state) => ({
-      aboutThis:
-        assert(
-          state.aboutThis.length <= schema.aboutThis.maxLength,
-          'error.grant.due_diligence.about_this_too_large'
-        ) ||
-        assert(state.aboutThis.length > 0, 'error.grant.due_diligence.about_this_empty') ||
-        assert(
-          state.aboutThis.length >= schema.aboutThis.minLength,
-          'error.grant.due_diligence.about_this_too_short'
-        ) ||
-        undefined,
-    }),
-  })
-
-const edit = (state: BudgetBreakdownConcept, props: Partial<BudgetBreakdownConcept>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
   isOpen: boolean
@@ -82,7 +35,7 @@ interface Props {
   selectedConcept: BudgetBreakdownConcept | null
 }
 
-const AddBudgetBreakdownModal = ({
+export default function AddBudgetBreakdownModal({
   isOpen,
   onClose,
   onSubmit,
@@ -90,130 +43,170 @@ const AddBudgetBreakdownModal = ({
   fundingLeftToDisclose,
   selectedConcept,
   projectDuration,
-}: Props) => {
+}: Props) {
   const t = useFormatMessage()
   const leftToDisclose = selectedConcept
     ? fundingLeftToDisclose + Number(selectedConcept.estimatedBudget)
     : fundingLeftToDisclose
-  const validator = useMemo(() => validate(leftToDisclose), [leftToDisclose])
-  const [state, editor] = useEditor(edit, validator, INITIAL_BUDGET_BREAKDOWN_CONCEPT)
+
+  const {
+    formState: { errors },
+    control,
+    reset,
+    watch,
+    setValue,
+    handleSubmit,
+    register,
+  } = useForm<BudgetBreakdownConcept>({
+    defaultValues: INITIAL_BUDGET_BREAKDOWN_CONCEPT,
+    mode: 'onTouched',
+  })
+
+  const values = useWatch({ control })
 
   const hasInvalidUrl =
-    state.value.relevantLink !== '' &&
-    !!state.value.relevantLink &&
-    (!isHttpsURL(state.value.relevantLink) || state.value.relevantLink?.length >= schema.relevantLink.maxLength)
+    values.relevantLink !== '' &&
+    !!values.relevantLink &&
+    (!isHttpsURL(values.relevantLink) || values.relevantLink?.length >= schema.relevantLink.maxLength)
 
-  useEffect(() => {
-    if (state.validated) {
-      onSubmit(state.value)
-      onClose()
-      editor.set(INITIAL_BUDGET_BREAKDOWN_CONCEPT)
+  const onSubmitForm: SubmitHandler<BudgetBreakdownConcept> = (data) => {
+    if (hasInvalidUrl) {
+      return
     }
-  }, [editor, onClose, onSubmit, state.validated, state.value])
+
+    onSubmit(data)
+    onClose()
+    reset()
+  }
 
   useEffect(() => {
     if (selectedConcept) {
-      editor.set({ ...selectedConcept })
+      const { concept, aboutThis, duration, relevantLink } = selectedConcept
+      setValue('concept', concept)
+      setValue('aboutThis', aboutThis)
+      setValue('duration', duration)
+      setValue('relevantLink', relevantLink)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedConcept])
+  }, [selectedConcept, setValue])
 
   return (
     <AddModal
       title={t('page.submit_grant.due_diligence.budget_breakdown_modal.title')}
       isOpen={isOpen}
       onClose={onClose}
-      onPrimaryClick={() => !hasInvalidUrl && editor.validate()}
+      onPrimaryClick={handleSubmit(onSubmitForm)}
       onSecondaryClick={selectedConcept ? onDelete : undefined}
     >
-      <div>
-        <ContentSection className="GrantRequestSection__Field">
-          <Label>{t('page.submit_grant.due_diligence.budget_breakdown_modal.concept_label')}</Label>
-          <Field
-            value={state.value.concept}
-            placeholder={t('page.submit_grant.due_diligence.budget_breakdown_modal.concept_placeholder')}
-            onChange={(_, { value }) => editor.set({ concept: value })}
-            error={!!state.error.concept}
-            message={
-              t(state.error.concept) +
-              ' ' +
-              t('page.submit.character_counter', {
-                current: state.value.concept.length,
-                limit: schema.concept.maxLength,
-              })
-            }
-          />
-        </ContentSection>
-        <ContentSection className="GrantRequestSection__FieldRow">
-          <BudgetInput
-            label={t('page.submit_grant.due_diligence.budget_breakdown_modal.estimated_budget_label')}
-            min={0}
-            value={state.value.estimatedBudget}
-            error={state.error.estimatedBudget}
-            onChange={({ currentTarget }) =>
-              editor.set({
-                estimatedBudget: currentTarget.value !== '' ? Number(currentTarget.value) : currentTarget.value,
-              })
-            }
-            subtitle={t('page.submit_grant.due_diligence.budget_breakdown_modal.estimated_budget_left_to_disclose', {
+      <ContentSection className="GrantRequestSection__Field">
+        <Label>{t('page.submit_grant.due_diligence.budget_breakdown_modal.concept_label')}</Label>
+        <Field
+          name="concept"
+          control={control}
+          placeholder={t('page.submit_grant.due_diligence.budget_breakdown_modal.concept_placeholder')}
+          error={!!errors.concept}
+          message={
+            (errors.concept?.message || '') +
+            ' ' +
+            t('page.submit.character_counter', {
+              current: watch('concept').length,
+              limit: schema.concept.maxLength,
+            })
+          }
+          rules={{
+            required: { value: true, message: t('error.grant.due_diligence.concept_empty') },
+            minLength: {
+              value: schema.concept.minLength,
+              message: t('error.grant.due_diligence.concept_too_short'),
+            },
+            maxLength: {
+              value: schema.concept.maxLength,
+              message: t('error.grant.due_diligence.concept_too_large'),
+            },
+          }}
+        />
+      </ContentSection>
+      <ContentSection className="GrantRequestSection__FieldRow">
+        <BudgetInput
+          {...register('estimatedBudget', {
+            min: {
+              value: schema.estimatedBudget.minimum,
+              message: t('error.grant.due_diligence.estimated_budget_too_low'),
+            },
+            max: {
               value: leftToDisclose,
-            })}
-          />
-          <NumberSelector
-            value={state.value.duration}
-            min={BudgetBreakdownConceptSchema.duration.minimum}
-            max={projectDuration}
-            onChange={(value) => editor.set({ duration: Number(value) })}
-            label={t('page.submit_grant.due_diligence.budget_breakdown_modal.duration_label')}
-            unitLabel={t('page.submit_grant.due_diligence.budget_breakdown_modal.duration_unit_label')}
-            subtitle={t('page.submit_grant.due_diligence.budget_breakdown_modal.duration_subtitle')}
-          />
-        </ContentSection>
-        <ContentSection className="GrantRequestSection__Field">
-          <Label>{t('page.submit_grant.due_diligence.budget_breakdown_modal.about_this_label')}</Label>
-          <Textarea
-            value={state.value.aboutThis}
-            minHeight={175}
-            placeholder={t('page.submit_grant.due_diligence.budget_breakdown_modal.about_this_placeholder')}
-            onChange={(_: unknown, { value }: { value: string }) => editor.set({ aboutThis: String(value) })}
-            error={!!state.error.aboutThis}
-            message={
-              t(state.error.aboutThis) +
-              ' ' +
-              t('page.submit.character_counter', {
-                current: state.value.aboutThis.length,
-                limit: schema.aboutThis.maxLength,
-              })
-            }
-          />
-        </ContentSection>
-        <ContentSection className="GrantRequestSection__Field">
-          <div className="LabelContainer">
-            <Label>{t('page.submit_grant.due_diligence.budget_breakdown_modal.relevant_link_label')}</Label>
-            <span className="Optional">
-              {t('page.submit_grant.due_diligence.budget_breakdown_modal.optional_label')}
-            </span>
-          </div>
-          <Field
-            value={state.value.relevantLink}
-            placeholder={t('page.submit_grant.due_diligence.budget_breakdown_modal.relevant_link_placeholder')}
-            onChange={(_, { value }) => editor.set({ relevantLink: value })}
-            error={hasInvalidUrl}
-            message={
-              (!!state.value.relevantLink && !isHttpsURL(state.value.relevantLink)
-                ? t('error.grant.due_diligence.relevant_link_invalid')
-                : '') +
-              ' ' +
-              t('page.submit.character_counter', {
-                current: state.value.relevantLink?.length,
-                limit: schema.relevantLink.maxLength,
-              })
-            }
-          />
-        </ContentSection>
-      </div>
+              message: t('error.grant.due_diligence.estimated_budget_too_big'),
+            },
+            validate: (value) => {
+              if (!Number.isInteger(asNumber(value))) {
+                return t('error.grant.due_diligence.estimated_budget_invalid')
+              }
+            },
+          })}
+          error={errors.estimatedBudget?.message}
+          label={t('page.submit_grant.due_diligence.budget_breakdown_modal.estimated_budget_label')}
+          min={0}
+          defaultValue={selectedConcept ? selectedConcept.estimatedBudget : undefined}
+          onChange={({ currentTarget }) =>
+            setValue('estimatedBudget', currentTarget.value !== '' ? Number(currentTarget.value) : currentTarget.value)
+          }
+          subtitle={t('page.submit_grant.due_diligence.budget_breakdown_modal.estimated_budget_left_to_disclose', {
+            value: leftToDisclose,
+          })}
+        />
+        <NumberSelector
+          value={Number(values.duration)}
+          min={BudgetBreakdownConceptSchema.duration.minimum}
+          max={projectDuration}
+          onChange={(value) => setValue('duration', Number(value))}
+          label={t('page.submit_grant.due_diligence.budget_breakdown_modal.duration_label')}
+          unitLabel={t('page.submit_grant.due_diligence.budget_breakdown_modal.duration_unit_label')}
+          subtitle={t('page.submit_grant.due_diligence.budget_breakdown_modal.duration_subtitle')}
+        />
+      </ContentSection>
+      <ContentSection className="GrantRequestSection__Field">
+        <Label>{t('page.submit_grant.due_diligence.budget_breakdown_modal.about_this_label')}</Label>
+        <TextArea
+          name="aboutThis"
+          control={control}
+          placeholder={t('page.submit_grant.due_diligence.budget_breakdown_modal.about_this_placeholder')}
+          error={errors.aboutThis?.message}
+          message={t('page.submit.character_counter', {
+            current: watch('aboutThis').length,
+            limit: schema.aboutThis.maxLength,
+          })}
+          rules={{
+            required: { value: true, message: t('error.grant.due_diligence.about_this_empty') },
+            minLength: {
+              value: schema.aboutThis.minLength,
+              message: t('error.grant.due_diligence.about_this_too_short'),
+            },
+            maxLength: {
+              value: schema.aboutThis.maxLength,
+              message: t('error.grant.due_diligence.about_this_too_large'),
+            },
+          }}
+        />
+      </ContentSection>
+      <ContentSection className="GrantRequestSection__Field">
+        <div className="LabelContainer">
+          <Label>{t('page.submit_grant.due_diligence.budget_breakdown_modal.relevant_link_label')}</Label>
+          <span className="Optional">{t('page.submit_grant.due_diligence.budget_breakdown_modal.optional_label')}</span>
+        </div>
+        <Field
+          name="relevantLink"
+          control={control}
+          placeholder={t('page.submit_grant.due_diligence.budget_breakdown_modal.relevant_link_placeholder')}
+          error={hasInvalidUrl}
+          message={
+            (hasInvalidUrl ? t('error.grant.due_diligence.relevant_link_invalid') : '') +
+            ' ' +
+            t('page.submit.character_counter', {
+              current: watch('relevantLink') || ''.length,
+              limit: schema.relevantLink.maxLength,
+            })
+          }
+        />
+      </ContentSection>
     </AddModal>
   )
 }
-
-export default AddBudgetBreakdownModal
diff --git a/src/components/GrantRequest/AddModal.tsx b/src/components/GrantRequest/AddModal.tsx
index e17148b5c..87669f1d6 100644
--- a/src/components/GrantRequest/AddModal.tsx
+++ b/src/components/GrantRequest/AddModal.tsx
@@ -30,17 +30,31 @@ const AddModal = ({ title, isOpen, onClose, onSecondaryClick, onPrimaryClick, ch
     >
       <Modal.Header className="AddModal__Title">{title}</Modal.Header>
       <Modal.Content>
-        {children}
-        <div>
-          <Button fluid primary onClick={onPrimaryClick} className="AddModal__PrimaryButton">
-            {t('page.submit_grant.modal_actions.submit')}
-          </Button>
-          <Button fluid secondary onClick={onSecondaryClick || onClose} className="AddModal__SecondaryButton">
-            {onSecondaryClick
-              ? t('page.submit_grant.modal_actions.delete')
-              : t('page.submit_grant.modal_actions.cancel')}
-          </Button>
-        </div>
+        <form onSubmit={onPrimaryClick}>
+          {children}
+          <div>
+            <Button fluid primary onClick={onPrimaryClick} className="AddModal__PrimaryButton">
+              {t('page.submit_grant.modal_actions.submit')}
+            </Button>
+            <Button
+              fluid
+              secondary
+              onClick={(e) => {
+                e.preventDefault()
+                if (onSecondaryClick) {
+                  onSecondaryClick()
+                } else {
+                  onClose()
+                }
+              }}
+              className="AddModal__SecondaryButton"
+            >
+              {onSecondaryClick
+                ? t('page.submit_grant.modal_actions.delete')
+                : t('page.submit_grant.modal_actions.cancel')}
+            </Button>
+          </div>
+        </form>
       </Modal.Content>
     </Modal>
   )
diff --git a/src/components/GrantRequest/AddTeamMemberModal.tsx b/src/components/GrantRequest/AddTeamMemberModal.tsx
index 6d7e665cf..8fd31931d 100644
--- a/src/components/GrantRequest/AddTeamMemberModal.tsx
+++ b/src/components/GrantRequest/AddTeamMemberModal.tsx
@@ -1,19 +1,17 @@
 import React, { useEffect } from 'react'
-
-import Textarea from 'decentraland-gatsby/dist/components/Form/Textarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 
 import { TeamMember, TeamMemberItemSchema } from '../../entities/Grant/types'
 import { isHttpsURL } from '../../helpers'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import Field from '../Common/Form/Field'
+import TextArea from '../Common/Form/TextArea'
 import Label from '../Common/Label'
 import { ContentSection } from '../Layout/ContentLayout'
 
 import AddModal from './AddModal'
-import './AddModal.css'
 
-export const INITIAL_TEAM_MEMBER_ITEM: TeamMember = {
+const INITIAL_TEAM_MEMBER_ITEM: TeamMember = {
   name: '',
   role: '',
   about: '',
@@ -21,36 +19,6 @@ export const INITIAL_TEAM_MEMBER_ITEM: TeamMember = {
 }
 
 const schema = TeamMemberItemSchema
-const validate = createValidator<TeamMember>({
-  name: (state) => ({
-    name:
-      assert(state.name.length <= schema.name.maxLength, 'error.grant.team.name_too_large') ||
-      assert(state.name.length > 0, 'error.grant.team.name_empty') ||
-      assert(state.name.length >= schema.name.minLength, 'error.grant.team.name_too_short') ||
-      undefined,
-  }),
-  role: (state) => ({
-    role:
-      assert(state.role.length <= schema.role.maxLength, 'error.grant.team.role_too_large') ||
-      assert(state.role.length > 0, 'error.grant.team.role_empty') ||
-      assert(state.role.length >= schema.role.minLength, 'error.grant.team.role_too_short') ||
-      undefined,
-  }),
-  about: (state) => ({
-    about:
-      assert(state.about.length <= schema.about.maxLength, 'error.grant.team.about_too_large') ||
-      assert(state.about.length > 0, 'error.grant.team.about_empty') ||
-      assert(state.about.length >= schema.about.minLength, 'error.grant.team.about_too_short') ||
-      undefined,
-  }),
-})
-
-const edit = (state: TeamMember, props: Partial<TeamMember>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
   isOpen: boolean
@@ -60,88 +28,125 @@ interface Props {
   selectedTeamMember: TeamMember | null
 }
 
-const AddTeamMemberModal = ({ isOpen, onClose, onSubmit, selectedTeamMember, onDelete }: Props) => {
+export default function AddTeamMemberModal({ isOpen, onClose, onSubmit, selectedTeamMember, onDelete }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_TEAM_MEMBER_ITEM)
+  const {
+    formState: { errors },
+    control,
+    reset,
+    watch,
+    setValue,
+    handleSubmit,
+  } = useForm<TeamMember>({
+    defaultValues: INITIAL_TEAM_MEMBER_ITEM,
+    mode: 'onTouched',
+  })
+
+  const values = useWatch({ control })
 
   const hasInvalidUrl =
-    state.value.relevantLink !== '' &&
-    !!state.value.relevantLink &&
-    (!isHttpsURL(state.value.relevantLink) || state.value.relevantLink?.length >= schema.relevantLink.maxLength)
+    values.relevantLink !== '' &&
+    !!values.relevantLink &&
+    (!isHttpsURL(values.relevantLink) || values.relevantLink?.length >= schema.relevantLink.maxLength)
 
-  useEffect(() => {
-    if (state.validated) {
-      onSubmit(state.value)
-      onClose()
+  const onSubmitForm: SubmitHandler<TeamMember> = (data) => {
+    if (hasInvalidUrl) {
+      return
     }
-  }, [editor, onClose, onSubmit, state.validated, state.value])
+
+    onSubmit(data)
+    onClose()
+    reset()
+  }
 
   useEffect(() => {
     if (selectedTeamMember) {
-      editor.set({ ...selectedTeamMember })
+      const { name, role, about, relevantLink } = selectedTeamMember
+      setValue('name', name)
+      setValue('role', role)
+      setValue('about', about)
+      setValue('relevantLink', relevantLink)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTeamMember])
+  }, [selectedTeamMember, setValue])
 
   return (
     <AddModal
       title={t('page.submit_grant.team.team_modal.title')}
       isOpen={isOpen}
       onClose={onClose}
+      onPrimaryClick={handleSubmit(onSubmitForm)}
       onSecondaryClick={selectedTeamMember ? onDelete : undefined}
-      onPrimaryClick={() => !hasInvalidUrl && editor.validate()}
     >
       <div>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.team.team_modal.name_label')}</Label>
           <Field
-            value={state.value.name}
+            name="name"
+            control={control}
             placeholder={t('page.submit_grant.team.team_modal.name_placeholder')}
-            onChange={(_, { value }) => editor.set({ name: value })}
-            error={!!state.error.name}
+            error={!!errors.name}
             message={
-              t(state.error.name) +
+              (errors.name?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.name.length,
+                current: watch('name').length,
                 limit: schema.name.maxLength,
               })
             }
+            rules={{
+              required: { value: true, message: t('error.grant.team.name_empty') },
+              minLength: {
+                value: schema.name.minLength,
+                message: t('error.grant.team.name_too_short'),
+              },
+              maxLength: { value: schema.name.maxLength, message: t('error.grant.team.name_too_large') },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.team.team_modal.role_label')}</Label>
           <Field
-            value={state.value.role}
+            name="role"
+            control={control}
             placeholder={t('page.submit_grant.team.team_modal.role_placeholder')}
-            onChange={(_, { value }) => editor.set({ role: value })}
-            error={!!state.error.role}
+            error={!!errors.role}
             message={
-              t(state.error.role) +
+              (errors.role?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.role.length,
+                current: watch('role').length,
                 limit: schema.role.maxLength,
               })
             }
+            rules={{
+              required: { value: true, message: t('error.grant.team.role_empty') },
+              minLength: {
+                value: schema.role.minLength,
+                message: t('error.grant.team.role_too_short'),
+              },
+              maxLength: { value: schema.role.maxLength, message: t('error.grant.team.role_too_large') },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.team.team_modal.about_label')}</Label>
-          <Textarea
-            value={state.value.about}
-            minHeight={175}
+          <TextArea
+            name="about"
+            control={control}
             placeholder={t('page.submit_grant.team.team_modal.about_placeholder')}
-            onChange={(_: unknown, { value }: { value: string }) => editor.set({ about: String(value) })}
-            error={!!state.error.about}
-            message={
-              t(state.error.about) +
-              ' ' +
-              t('page.submit.character_counter', {
-                current: state.value.about.length,
-                limit: schema.about.maxLength,
-              })
-            }
+            error={errors.about?.message}
+            info={t('page.submit.character_counter', {
+              current: watch('about').length,
+              limit: schema.about.maxLength,
+            })}
+            rules={{
+              required: { value: true, message: t('error.grant.team.about_empty') },
+              minLength: {
+                value: schema.about.minLength,
+                message: t('error.grant.team.about_too_short'),
+              },
+              maxLength: { value: schema.about.maxLength, message: t('error.grant.team.about_too_large') },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
@@ -150,25 +155,32 @@ const AddTeamMemberModal = ({ isOpen, onClose, onSubmit, selectedTeamMember, onD
             <span className="Optional">{t('page.submit_grant.team.team_modal.optional_label')}</span>
           </div>
           <Field
-            value={state.value.relevantLink}
+            name="relevantLink"
+            control={control}
             placeholder={t('page.submit_grant.team.team_modal.relevant_link_placeholder')}
-            onChange={(_, { value }) => editor.set({ relevantLink: value })}
-            error={hasInvalidUrl}
+            error={!!errors.relevantLink}
             message={
-              (!!state.value.relevantLink && !isHttpsURL(state.value.relevantLink)
-                ? t('error.grant.team.relevant_link_invalid')
-                : '') +
+              (errors.relevantLink?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.relevantLink?.length,
+                current: (watch('relevantLink') || '').length,
                 limit: schema.relevantLink.maxLength,
               })
             }
+            rules={{
+              maxLength: {
+                value: schema.relevantLink.maxLength,
+                message: t('error.grant.team.relevant_link_invalid'),
+              },
+              validate: (value: string) => {
+                if (!isHttpsURL(value)) {
+                  return t('error.grant.team.relevant_link_invalid')
+                }
+              },
+            }}
           />
         </ContentSection>
       </div>
     </AddModal>
   )
 }
-
-export default AddTeamMemberModal
diff --git a/src/components/GrantRequest/CategorySection/AcceleratorSection.tsx b/src/components/GrantRequest/CategorySection/AcceleratorSection.tsx
index a1b824701..7a18cd1a9 100644
--- a/src/components/GrantRequest/CategorySection/AcceleratorSection.tsx
+++ b/src/components/GrantRequest/CategorySection/AcceleratorSection.tsx
@@ -1,8 +1,5 @@
-import React, { forwardRef, useEffect } from 'react'
-
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
+import React, { useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
 import {
   AcceleratorQuestions,
@@ -12,7 +9,8 @@ import {
 import { asNumber } from '../../../entities/Proposal/utils'
 import { disableOnWheelInput } from '../../../helpers'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import Field from '../../Common/Form/Field'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 
@@ -23,123 +21,94 @@ const INITIAL_ACCELERATOR_QUESTIONS: AcceleratorQuestions = {
 }
 
 const schema = AcceleratorQuestionsSchema
-const validate = createValidator<AcceleratorQuestions>({
-  revenueGenerationModel: (state) => ({
-    revenueGenerationModel:
-      assert(
-        state.revenueGenerationModel.length <= schema.revenueGenerationModel.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.revenueGenerationModel.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.revenueGenerationModel.length >= schema.revenueGenerationModel.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  returnOfInvestmentPlan: (state) => ({
-    returnOfInvestmentPlan:
-      assert(
-        state.returnOfInvestmentPlan.length <= schema.returnOfInvestmentPlan.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.returnOfInvestmentPlan.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.returnOfInvestmentPlan.length >= schema.returnOfInvestmentPlan.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  investmentRecoveryTime: (state) => ({
-    investmentRecoveryTime:
-      assert(
-        Number.isInteger(asNumber(state.investmentRecoveryTime)),
-        'error.grant.category_assessment.field_invalid'
-      ) ||
-      assert(
-        asNumber(state.investmentRecoveryTime) >= schema.investmentRecoveryTime.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: AcceleratorQuestions, props: Partial<AcceleratorQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
-const AcceleratorSection = forwardRef(function AcceleratorSection({ onValidation, isFormDisabled }: Props, ref) {
+type FieldName = 'investmentRecoveryTime'
+type MarkdownFieldName = 'revenueGenerationModel' | 'returnOfInvestmentPlan'
+
+export default function AcceleratorSection({ onValidation, isFormDisabled }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_ACCELERATOR_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    watch,
+  } = useForm<AcceleratorQuestions>({
+    defaultValues: INITIAL_ACCELERATOR_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_ACCELERATOR_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ accelerator: { ...state.value } }, state.validated)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+    onValidation({ accelerator: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
+  }, [isValid, isDirty, onValidation, values])
+
+  const getFieldProps = (field: FieldName | MarkdownFieldName) => ({
+    name: field,
+    control,
+    error: !!errors[field],
+    disabled: isFormDisabled,
+  })
+
+  const getMarkdownFieldProps = (field: MarkdownFieldName) => ({
+    ...getFieldProps(field),
+    message:
+      (errors[field]?.message || '') +
+      ' ' +
+      t('page.submit.character_counter', {
+        current: watch(field).length,
+        limit: schema[field].maxLength,
+      }),
+    disabled: isFormDisabled,
+    rules: {
+      required: { value: true, message: t('error.grant.category_assessment.field_empty') },
+      minLength: {
+        value: schema[field].minLength,
+        message: t('error.grant.category_assessment.field_too_short'),
+      },
+      maxLength: {
+        value: schema[field].maxLength,
+        message: t('error.grant.category_assessment.field_too_large'),
+      },
+    },
+  })
 
   return (
     <div className="GrantRequestSection__Content">
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.accelerator.revenue_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.revenueGenerationModel}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ revenueGenerationModel: value })}
-          error={!!state.error.revenueGenerationModel}
-          message={
-            t(state.error.revenueGenerationModel) +
-            ' ' +
-            t('page.submit.character_counter', {
-              current: state.value.revenueGenerationModel.length,
-              limit: schema.revenueGenerationModel.maxLength,
-            })
-          }
-          disabled={isFormDisabled}
-        />
+        <MarkdownField {...getMarkdownFieldProps('revenueGenerationModel')} />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.accelerator.return_of_investment_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.returnOfInvestmentPlan}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ returnOfInvestmentPlan: value })}
-          error={!!state.error.returnOfInvestmentPlan}
-          message={
-            t(state.error.returnOfInvestmentPlan) +
-            ' ' +
-            t('page.submit.character_counter', {
-              current: state.value.returnOfInvestmentPlan.length,
-              limit: schema.returnOfInvestmentPlan.maxLength,
-            })
-          }
-          disabled={isFormDisabled}
-        />
+        <MarkdownField {...getMarkdownFieldProps('returnOfInvestmentPlan')} />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.accelerator.investment_recovery_label')}</Label>
         <Field
+          {...getFieldProps('investmentRecoveryTime')}
           type="number"
           min="0"
-          value={state.value.investmentRecoveryTime}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ investmentRecoveryTime: value })}
-          error={!!state.error.investmentRecoveryTime}
-          message={t(state.error.investmentRecoveryTime)}
-          disabled={isFormDisabled}
+          message={errors.investmentRecoveryTime?.message}
           onWheel={disableOnWheelInput}
+          rules={{
+            required: { value: true, message: t('error.grant.category_assessment.field_invalid') },
+            validate: (value: string) => {
+              if (!Number.isInteger(asNumber(value))) {
+                return t('error.grant.category_assessment.field_invalid')
+              }
+            },
+            min: {
+              value: schema.investmentRecoveryTime.minimum,
+              message: t('error.grant.category_assessment.field_too_low'),
+            },
+          }}
         />
       </ContentSection>
     </div>
   )
-})
-
-export default AcceleratorSection
+}
diff --git a/src/components/GrantRequest/CategorySection/CoreUnitSection.tsx b/src/components/GrantRequest/CategorySection/CoreUnitSection.tsx
index 1783eae34..a8cfa0272 100644
--- a/src/components/GrantRequest/CategorySection/CoreUnitSection.tsx
+++ b/src/components/GrantRequest/CategorySection/CoreUnitSection.tsx
@@ -1,7 +1,5 @@
-import React, { forwardRef, useEffect } from 'react'
-
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
+import React, { useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
 import {
   CoreUnitQuestions,
@@ -9,7 +7,7 @@ import {
   GrantRequestCategoryAssessment,
 } from '../../../entities/Grant/types'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 
@@ -19,98 +17,66 @@ const INITIAL_CORE_UNIT_QUESTIONS = {
 }
 
 const schema = CoreUnitQuestionsSchema
-const validate = createValidator<CoreUnitQuestions>({
-  strategicValue: (state) => ({
-    strategicValue:
-      assert(
-        state.strategicValue.length <= schema.strategicValue.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.strategicValue.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.strategicValue.length >= schema.strategicValue.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  impactMetrics: (state) => ({
-    impactMetrics:
-      assert(
-        state.impactMetrics.length <= schema.impactMetrics.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.impactMetrics.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.impactMetrics.length >= schema.impactMetrics.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: CoreUnitQuestions, props: Partial<CoreUnitQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
-const CoreUnitSection = forwardRef(function CoreUnitSection({ onValidation, isFormDisabled }: Props, ref) {
+export default function CoreUnitSection({ onValidation, isFormDisabled }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_CORE_UNIT_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    watch,
+  } = useForm<CoreUnitQuestions>({
+    defaultValues: INITIAL_CORE_UNIT_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_CORE_UNIT_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ coreUnit: { ...state.value } }, state.validated)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+    onValidation({ coreUnit: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
+  }, [isValid, isDirty, onValidation, values])
+
+  const getMarkdownFieldProps = (field: 'strategicValue' | 'impactMetrics') => {
+    return {
+      name: field,
+      control,
+      error: !!errors[field],
+      message:
+        (errors[field]?.message || '') +
+        ' ' +
+        t('page.submit.character_counter', {
+          current: watch(field).length,
+          limit: schema[field].maxLength,
+        }),
+      disabled: isFormDisabled,
+      rules: {
+        required: { value: true, message: t('error.grant.category_assessment.field_empty') },
+        minLength: {
+          value: schema[field].minLength,
+          message: t('error.grant.category_assessment.field_too_short'),
+        },
+        maxLength: {
+          value: schema[field].maxLength,
+          message: t('error.grant.category_assessment.field_too_large'),
+        },
+      },
+    }
+  }
 
   return (
     <div className="GrantRequestSection__Content">
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.core_unit.strategic_value_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.strategicValue}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ strategicValue: value })}
-          error={!!state.error.strategicValue}
-          message={
-            t(state.error.strategicValue) +
-            ' ' +
-            t('page.submit.character_counter', {
-              current: state.value.strategicValue.length,
-              limit: schema.strategicValue.maxLength,
-            })
-          }
-          disabled={isFormDisabled}
-        />
+        <MarkdownField {...getMarkdownFieldProps('strategicValue')} />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.core_unit.impact_metrics_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.impactMetrics}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ impactMetrics: value })}
-          error={!!state.error.impactMetrics}
-          message={
-            t(state.error.impactMetrics) +
-            ' ' +
-            t('page.submit.character_counter', {
-              current: state.value.impactMetrics.length,
-              limit: schema.impactMetrics.maxLength,
-            })
-          }
-          disabled={isFormDisabled}
-        />
+        <MarkdownField {...getMarkdownFieldProps('impactMetrics')} />
       </ContentSection>
     </div>
   )
-})
-
-export default CoreUnitSection
+}
diff --git a/src/components/GrantRequest/CategorySection/DocumentationSection.tsx b/src/components/GrantRequest/CategorySection/DocumentationSection.tsx
index 4c7e609f7..dc1463553 100644
--- a/src/components/GrantRequest/CategorySection/DocumentationSection.tsx
+++ b/src/components/GrantRequest/CategorySection/DocumentationSection.tsx
@@ -1,7 +1,5 @@
-import React, { forwardRef, useEffect } from 'react'
-
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
+import React, { useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
 import {
   DocumentationQuestions,
@@ -11,7 +9,7 @@ import {
 import { asNumber } from '../../../entities/Proposal/utils'
 import { disableOnWheelInput } from '../../../helpers'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import Field from '../../Common/Form/Field'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 import MultipleChoiceField from '../MultipleChoiceField'
@@ -24,54 +22,31 @@ const INITIAL_DOCUMENTATION_QUESTIONS = {
 const CONTENT_TYPE_OPTIONS = ['documentation_article', 'scene_example', 'videos', 'code_examples', 'other']
 
 const schema = DocumentationQuestionsSchema
-const validate = createValidator<DocumentationQuestions>({
-  contentType: (state) => ({
-    contentType:
-      assert(state.contentType !== null, 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        String(state.contentType).length <= schema.contentType.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(String(state.contentType).length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        String(state.contentType).length >= schema.contentType.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  totalPieces: (state) => ({
-    totalPieces:
-      assert(Number.isInteger(asNumber(state.totalPieces)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalPieces) >= schema.totalPieces.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: DocumentationQuestions, props: Partial<DocumentationQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
-const DocumentationSection = forwardRef(function DocumentationSection({ onValidation, isFormDisabled }: Props, ref) {
+export default function DocumentationSection({ onValidation, isFormDisabled }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_DOCUMENTATION_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    setValue,
+    setError,
+    trigger,
+    clearErrors,
+  } = useForm<DocumentationQuestions>({
+    defaultValues: INITIAL_DOCUMENTATION_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_DOCUMENTATION_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ documentation: { ...state.value } }, state.validated)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+    onValidation({ documentation: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
+  }, [isValid, isDirty, onValidation, values])
 
   return (
     <div className="GrantRequestSection__Content">
@@ -80,24 +55,43 @@ const DocumentationSection = forwardRef(function DocumentationSection({ onValida
         intlKey="page.submit_grant.category_assessment.documentation.content_type.choices"
         options={CONTENT_TYPE_OPTIONS}
         isFormDisabled={isFormDisabled}
-        value={state.value.contentType}
-        onChange={(value) => editor.set({ contentType: value })}
+        value={values.contentType || ''}
+        error={!!errors?.contentType}
+        onChange={(value) => {
+          clearErrors('contentType')
+          setValue('contentType', value)
+          if (value === '') {
+            setError('contentType', { message: t('error.grant.category_assessment.field_empty') })
+          } else if (isDirty) {
+            trigger()
+          }
+        }}
       />
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.documentation.total_pieces_label')}</Label>
         <Field
+          name="totalPieces"
+          control={control}
           type="number"
           min="1"
-          value={state.value.totalPieces}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalPieces: value })}
-          error={!!state.error.totalPieces}
-          message={t(state.error.totalPieces)}
+          error={!!errors.totalPieces}
+          message={errors.totalPieces?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={{
+            required: { value: true, message: t('error.grant.category_assessment.field_invalid') },
+            validate: (value: string) => {
+              if (!Number.isInteger(asNumber(value))) {
+                return t('error.grant.category_assessment.field_invalid')
+              }
+            },
+            min: {
+              value: schema.totalPieces.minimum,
+              message: t('error.grant.category_assessment.field_too_low'),
+            },
+          }}
         />
       </ContentSection>
     </div>
   )
-})
-
-export default DocumentationSection
+}
diff --git a/src/components/GrantRequest/CategorySection/InWorldContentSection.tsx b/src/components/GrantRequest/CategorySection/InWorldContentSection.tsx
index 95e512dd6..795dc7dc9 100644
--- a/src/components/GrantRequest/CategorySection/InWorldContentSection.tsx
+++ b/src/components/GrantRequest/CategorySection/InWorldContentSection.tsx
@@ -1,7 +1,6 @@
-import React, { forwardRef, useEffect } from 'react'
+import React, { forwardRef, useCallback, useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
 import { Field } from 'decentraland-ui/dist/components/Field/Field'
 
 import {
@@ -12,7 +11,7 @@ import {
 import { asNumber } from '../../../entities/Proposal/utils'
 import { disableOnWheelInput } from '../../../helpers'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 
@@ -23,62 +22,44 @@ const INITIAL_IN_WORLD_CONTENT_QUESTIONS = {
 }
 
 const schema = InWorldContentQuestionsSchema
-const validate = createValidator<InWorldContentQuestions>({
-  engagementMeasurement: (state) => ({
-    engagementMeasurement:
-      assert(
-        state.engagementMeasurement.length <= schema.engagementMeasurement.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.engagementMeasurement.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.engagementMeasurement.length >= schema.engagementMeasurement.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  totalPieces: (state) => ({
-    totalPieces:
-      assert(Number.isInteger(asNumber(state.totalPieces)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalPieces) >= schema.totalPieces.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-  totalUsers: (state) => ({
-    totalUsers:
-      assert(Number.isInteger(asNumber(state.totalUsers)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalUsers) >= schema.totalUsers.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: InWorldContentQuestions, props: Partial<InWorldContentQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, onValidate: () => void) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
 const InWorldContentSection = forwardRef(function InWorldContentSection({ onValidation, isFormDisabled }: Props, ref) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_IN_WORLD_CONTENT_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    watch,
+  } = useForm<InWorldContentQuestions>({
+    defaultValues: INITIAL_IN_WORLD_CONTENT_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_IN_WORLD_CONTENT_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ inWorldContent: { ...state.value } }, state.validated, editor.validate)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+    onValidation({ inWorldContent: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
+  }, [isValid, isDirty, onValidation, values])
+
+  const getFieldRules = useCallback(
+    (field: 'totalPieces' | 'totalUsers') => ({
+      required: { value: true, message: t('error.grant.category_assessment.field_invalid') },
+      validate: (value: string) => {
+        if (!Number.isInteger(asNumber(value))) {
+          return t('error.grant.category_assessment.field_invalid')
+        }
+      },
+      min: {
+        value: schema[field].minimum,
+        message: t('error.grant.category_assessment.field_too_low'),
+      },
+    }),
+    [t]
+  )
 
   return (
     <div className="GrantRequestSection__Content">
@@ -87,43 +68,53 @@ const InWorldContentSection = forwardRef(function InWorldContentSection({ onVali
         <Field
           min="0"
           type="number"
-          value={state.value.totalPieces}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalPieces: value })}
-          error={!!state.error.totalPieces}
-          message={t(state.error.totalPieces)}
+          error={!!errors.totalPieces}
+          message={errors.totalPieces?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={getFieldRules('totalPieces')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.in_world_content.total_users_label')}</Label>
         <Field
+          name="totalUsers"
+          control={control}
           min="0"
           type="number"
-          value={state.value.totalUsers}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalUsers: value })}
-          error={!!state.error.totalUsers}
-          message={t(state.error.totalUsers)}
+          error={!!errors.totalUsers}
+          message={errors.totalUsers?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={getFieldRules('totalUsers')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.in_world_content.engagement_measurement_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.engagementMeasurement}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ engagementMeasurement: value })}
-          error={!!state.error.engagementMeasurement}
+        <MarkdownField
+          name="engagementMeasurement"
+          control={control}
+          error={!!errors.engagementMeasurement}
           message={
-            t(state.error.engagementMeasurement) +
+            (errors.engagementMeasurement?.message || '') +
             ' ' +
             t('page.submit.character_counter', {
-              current: state.value.engagementMeasurement.length,
+              current: watch('engagementMeasurement').length,
               limit: schema.engagementMeasurement.maxLength,
             })
           }
           disabled={isFormDisabled}
+          rules={{
+            required: { value: true, message: t('error.grant.category_assessment.field_empty') },
+            minLength: {
+              value: schema.engagementMeasurement.minLength,
+              message: t('error.grant.category_assessment.field_too_short'),
+            },
+            maxLength: {
+              value: schema.engagementMeasurement.maxLength,
+              message: t('error.grant.category_assessment.field_too_large'),
+            },
+          }}
         />
       </ContentSection>
     </div>
diff --git a/src/components/GrantRequest/CategorySection/PlatformSection.tsx b/src/components/GrantRequest/CategorySection/PlatformSection.tsx
index cb5395272..cac645b91 100644
--- a/src/components/GrantRequest/CategorySection/PlatformSection.tsx
+++ b/src/components/GrantRequest/CategorySection/PlatformSection.tsx
@@ -1,7 +1,5 @@
-import React, { forwardRef, useEffect } from 'react'
-
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
+import React, { useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
 import {
   GrantRequestCategoryAssessment,
@@ -9,7 +7,7 @@ import {
   PlatformQuestionsSchema,
 } from '../../../entities/Grant/types'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 
@@ -18,67 +16,59 @@ const INITIAL_PLATFORM_QUESTIONS = {
 }
 
 const schema = PlatformQuestionsSchema
-const validate = createValidator<PlatformQuestions>({
-  impactMetrics: (state) => ({
-    impactMetrics:
-      assert(
-        state.impactMetrics.length <= schema.impactMetrics.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.impactMetrics.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.impactMetrics.length >= schema.impactMetrics.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: PlatformQuestions, props: Partial<PlatformQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
-const PlatformSection = forwardRef(function PlatformSection({ onValidation, isFormDisabled }: Props, ref) {
+export default function PlatformSection({ onValidation, isFormDisabled }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_PLATFORM_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    watch,
+  } = useForm<PlatformQuestions>({
+    defaultValues: INITIAL_PLATFORM_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_PLATFORM_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ platform: { ...state.value } }, state.validated)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+    onValidation({ platform: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
+  }, [isValid, isDirty, onValidation, values])
 
   return (
     <div className="GrantRequestSection__Content">
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.platform.impact_metrics_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.impactMetrics}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ impactMetrics: value })}
-          error={!!state.error.impactMetrics}
+        <MarkdownField
+          name="impactMetrics"
+          control={control}
+          error={!!errors.impactMetrics}
           message={
-            t(state.error.impactMetrics) +
+            (errors.impactMetrics?.message || '') +
             ' ' +
             t('page.submit.character_counter', {
-              current: state.value.impactMetrics.length,
+              current: watch('impactMetrics').length,
               limit: schema.impactMetrics.maxLength,
             })
           }
           disabled={isFormDisabled}
+          rules={{
+            required: { value: true, message: t('error.grant.category_assessment.field_empty') },
+            minLength: {
+              value: schema.impactMetrics.minLength,
+              message: t('error.grant.category_assessment.field_too_short'),
+            },
+            maxLength: {
+              value: schema.impactMetrics.maxLength,
+              message: t('error.grant.category_assessment.field_too_large'),
+            },
+          }}
         />
       </ContentSection>
     </div>
   )
-})
-
-export default PlatformSection
+}
diff --git a/src/components/GrantRequest/CategorySection/SocialMediaContentSection.tsx b/src/components/GrantRequest/CategorySection/SocialMediaContentSection.tsx
index fd742c568..505ff87af 100644
--- a/src/components/GrantRequest/CategorySection/SocialMediaContentSection.tsx
+++ b/src/components/GrantRequest/CategorySection/SocialMediaContentSection.tsx
@@ -1,8 +1,5 @@
-import React, { forwardRef, useEffect } from 'react'
-
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
+import React, { useCallback, useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
 import {
   GrantRequestCategoryAssessment,
@@ -12,7 +9,8 @@ import {
 import { asNumber } from '../../../entities/Proposal/utils'
 import { disableOnWheelInput } from '../../../helpers'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import Field from '../../Common/Form/Field'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 import MultipleChoiceField from '../MultipleChoiceField'
@@ -37,157 +35,138 @@ const SOCIAL_MEDIA_PLATFORMS_OPTIONS = [
 ]
 
 const schema = SocialMediaContentQuestionsSchema
-const validate = createValidator<SocialMediaContentQuestions>({
-  socialMediaPlatforms: (state) => ({
-    socialMediaPlatforms:
-      assert(state.socialMediaPlatforms !== null, 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        String(state.socialMediaPlatforms).length <= schema.socialMediaPlatforms.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(String(state.socialMediaPlatforms).length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        String(state.socialMediaPlatforms).length >= schema.socialMediaPlatforms.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  audienceRelevance: (state) => ({
-    audienceRelevance:
-      assert(
-        state.audienceRelevance.length <= schema.audienceRelevance.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.audienceRelevance.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.audienceRelevance.length >= schema.audienceRelevance.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  totalPieces: (state) => ({
-    totalPieces:
-      assert(Number.isInteger(asNumber(state.totalPieces)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalPieces) >= schema.totalPieces.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-  totalPeopleImpact: (state) => ({
-    totalPeopleImpact:
-      assert(Number.isInteger(asNumber(state.totalPeopleImpact)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalPeopleImpact) >= schema.totalPeopleImpact.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-  relevantLink: (state) => ({
-    relevantLink:
-      assert(
-        state.relevantLink.length <= schema.relevantLink.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.relevantLink.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.relevantLink.length >= schema.relevantLink.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: SocialMediaContentQuestions, props: Partial<SocialMediaContentQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
-const SocialMediaContentSection = forwardRef(function SocialMediaContentSection(
-  { onValidation, isFormDisabled }: Props,
-  ref
-) {
+export default function SocialMediaContentSection({ onValidation, isFormDisabled }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_SOCIAL_MEDIA_CONTENT_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    setValue,
+    setError,
+    trigger,
+    clearErrors,
+    watch,
+  } = useForm<SocialMediaContentQuestions>({
+    defaultValues: INITIAL_SOCIAL_MEDIA_CONTENT_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_SOCIAL_MEDIA_CONTENT_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ socialMediaContent: { ...state.value } }, state.validated)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+    onValidation({ socialMediaContent: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
+  }, [isValid, isDirty, onValidation, values])
+
+  const getNumberFieldRules = useCallback(
+    (field: 'totalPieces' | 'totalPeopleImpact') => ({
+      required: { value: true, message: t('error.grant.category_assessment.field_invalid') },
+      validate: (value: string) => {
+        if (!Number.isInteger(asNumber(value))) {
+          return t('error.grant.category_assessment.field_invalid')
+        }
+      },
+      min: {
+        value: schema[field].minimum,
+        message: t('error.grant.category_assessment.field_too_low'),
+      },
+    }),
+    [t]
+  )
+
+  const getTextFieldRules = useCallback(
+    (field: 'audienceRelevance' | 'relevantLink') => ({
+      required: { value: true, message: t('error.grant.category_assessment.field_empty') },
+      minLength: {
+        value: schema[field].minLength,
+        message: t('error.grant.category_assessment.field_too_short'),
+      },
+      maxLength: {
+        value: schema[field].maxLength,
+        message: t('error.grant.category_assessment.field_too_large'),
+      },
+    }),
+    [t]
+  )
 
   return (
     <div className="GrantRequestSection__Content">
       <MultipleChoiceField
         label={t('page.submit_grant.category_assessment.social_media_content.social_media_platforms.label')}
-        onChange={(value) => editor.set({ socialMediaPlatforms: value })}
-        value={state.value.socialMediaPlatforms}
-        isFormDisabled={isFormDisabled}
         intlKey="page.submit_grant.category_assessment.social_media_content.social_media_platforms.choices"
         options={SOCIAL_MEDIA_PLATFORMS_OPTIONS}
+        isFormDisabled={isFormDisabled}
+        value={values.socialMediaPlatforms || ''}
+        error={!!errors?.socialMediaPlatforms}
+        onChange={(value) => {
+          clearErrors('socialMediaPlatforms')
+          setValue('socialMediaPlatforms', value)
+          if (value === '') {
+            setError('socialMediaPlatforms', { message: t('error.grant.category_assessment.field_empty') })
+          } else if (isDirty) {
+            trigger()
+          }
+        }}
       />
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.social_media_content.audience_relevance_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.audienceRelevance}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ audienceRelevance: value })}
-          error={!!state.error.audienceRelevance}
+        <MarkdownField
+          name="audienceRelevance"
+          control={control}
+          error={!!errors.audienceRelevance}
           message={
-            t(state.error.audienceRelevance) +
+            (errors.audienceRelevance?.message || '') +
             ' ' +
             t('page.submit.character_counter', {
-              current: state.value.audienceRelevance.length,
+              current: watch('audienceRelevance').length,
               limit: schema.audienceRelevance.maxLength,
             })
           }
           disabled={isFormDisabled}
+          rules={getTextFieldRules('audienceRelevance')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.social_media_content.total_pieces_label')}</Label>
         <Field
+          name="totalPieces"
+          control={control}
           type="number"
-          value={state.value.totalPieces}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalPieces: value })}
-          error={!!state.error.totalPieces}
-          message={t(state.error.totalPieces)}
+          error={!!errors.totalPieces}
+          message={errors.totalPieces?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={getNumberFieldRules('totalPieces')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.social_media_content.total_impact_label')}</Label>
         <Field
+          name="totalPeopleImpact"
+          control={control}
           type="number"
-          value={state.value.totalPeopleImpact}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalPeopleImpact: value })}
-          error={!!state.error.totalPeopleImpact}
-          message={t(state.error.totalPeopleImpact)}
+          error={!!errors.totalPeopleImpact}
+          message={errors.totalPeopleImpact?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={getNumberFieldRules('totalPeopleImpact')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.social_media_content.relevant_link_label')}</Label>
         <Field
-          value={state.value.relevantLink}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ relevantLink: value })}
-          error={!!state.error.relevantLink}
-          message={t(state.error.totalPieces)}
+          name="relevantLink"
+          control={control}
+          error={!!errors.relevantLink}
+          message={errors.relevantLink?.message}
           disabled={isFormDisabled}
+          rules={getTextFieldRules('relevantLink')}
         />
       </ContentSection>
     </div>
   )
-})
-
-export default SocialMediaContentSection
+}
diff --git a/src/components/GrantRequest/CategorySection/SponsorshipSection.tsx b/src/components/GrantRequest/CategorySection/SponsorshipSection.tsx
index 2359437f3..0b04912b7 100644
--- a/src/components/GrantRequest/CategorySection/SponsorshipSection.tsx
+++ b/src/components/GrantRequest/CategorySection/SponsorshipSection.tsx
@@ -1,8 +1,6 @@
-import React, { forwardRef, useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
+import { Controller, useForm, useWatch } from 'react-hook-form'
 
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
 import { SelectField } from 'decentraland-ui/dist/components/SelectField/SelectField'
 
 import {
@@ -13,7 +11,8 @@ import {
 import { asNumber } from '../../../entities/Proposal/utils'
 import { disableOnWheelInput } from '../../../helpers'
 import useFormatMessage from '../../../hooks/useFormatMessage'
-import { useGrantCategoryEditor } from '../../../hooks/useGrantCategoryEditor'
+import Field from '../../Common/Form/Field'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import { ContentSection } from '../../Layout/ContentLayout'
 import MultipleChoiceField from '../MultipleChoiceField'
@@ -29,117 +28,104 @@ const INITIAL_SPONSORSHIP_QUESTIONS = {
 }
 
 const EVENT_CATEGORY_OPTIONS = ['conference', 'side_event', 'community_meetups', 'hackathon', 'other']
+const PRIMARY_SOURCE_FUNDING_OPTIONS = [
+  {
+    text: 'Yes',
+    value: 'Yes',
+  },
+  {
+    text: 'No',
+    value: 'No',
+  },
+]
 
 const schema = SponsorshipQuestionsSchema
-const validate = createValidator<SponsorshipQuestions>({
-  eventType: (state) => ({
-    eventType:
-      assert(state.eventType.length <= schema.eventType.maxLength, 'error.grant.category_assessment.field_too_large') ||
-      assert(state.eventType.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(state.eventType.length >= schema.eventType.minLength, 'error.grant.category_assessment.field_too_short') ||
-      undefined,
-  }),
-  eventCategory: (state) => ({
-    eventCategory:
-      assert(state.eventCategory !== null, 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        String(state.eventCategory).length <= schema.eventCategory.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(String(state.eventCategory).length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        String(state.eventCategory).length >= schema.eventCategory.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  primarySourceFunding: (state) => ({
-    primarySourceFunding:
-      assert(state.primarySourceFunding !== null, 'error.grant.category_assessment.field_invalid') || undefined,
-  }),
-  audienceRelevance: (state) => ({
-    audienceRelevance:
-      assert(
-        state.audienceRelevance.length <= schema.audienceRelevance.maxLength,
-        'error.grant.category_assessment.field_too_large'
-      ) ||
-      assert(state.audienceRelevance.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(
-        state.audienceRelevance.length >= schema.audienceRelevance.minLength,
-        'error.grant.category_assessment.field_too_short'
-      ) ||
-      undefined,
-  }),
-  showcase: (state) => ({
-    showcase:
-      assert(state.showcase.length <= schema.showcase.maxLength, 'error.grant.category_assessment.field_too_large') ||
-      assert(state.showcase.length > 0, 'error.grant.category_assessment.field_empty') ||
-      assert(state.showcase.length >= schema.showcase.minLength, 'error.grant.category_assessment.field_too_short') ||
-      undefined,
-  }),
-  totalAttendance: (state) => ({
-    totalAttendance:
-      assert(Number.isInteger(asNumber(state.totalAttendance)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalAttendance) >= schema.totalAttendance.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-  totalEvents: (state) => ({
-    totalEvents:
-      assert(Number.isInteger(asNumber(state.totalEvents)), 'error.grant.category_assessment.field_invalid') ||
-      assert(
-        asNumber(state.totalEvents) >= schema.totalEvents.minimum,
-        'error.grant.category_assessment.field_too_low'
-      ) ||
-      undefined,
-  }),
-})
-
-const edit = (state: SponsorshipQuestions, props: Partial<SponsorshipQuestions>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
-  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean) => void
+  onValidation: (data: Partial<GrantRequestCategoryAssessment>, sectionValid: boolean, isEdited: boolean) => void
   isFormDisabled: boolean
 }
 
-const SponsorshipSection = forwardRef(function SponsorshipSection({ onValidation, isFormDisabled }: Props, ref) {
+export default function SponsorshipSection({ onValidation, isFormDisabled }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_SPONSORSHIP_QUESTIONS)
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    setValue,
+    setError,
+    trigger,
+    clearErrors,
+    watch,
+  } = useForm<SponsorshipQuestions>({
+    defaultValues: INITIAL_SPONSORSHIP_QUESTIONS,
+    mode: 'onTouched',
+  })
 
-  useGrantCategoryEditor(ref, editor, state, INITIAL_SPONSORSHIP_QUESTIONS)
+  const values = useWatch({ control })
 
   useEffect(() => {
-    onValidation({ sponsorship: { ...state.value } }, state.validated)
+    onValidation({ sponsorship: { ...values } } as Partial<GrantRequestCategoryAssessment>, isValid, isDirty)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+  }, [isValid, isDirty, values])
+
+  const getNumberFieldRules = useCallback(
+    (field: 'totalAttendance' | 'totalEvents') => ({
+      required: { value: true, message: t('error.grant.category_assessment.field_invalid') },
+      validate: (value: string) => {
+        if (!Number.isInteger(asNumber(value))) {
+          return t('error.grant.category_assessment.field_invalid')
+        }
+      },
+      min: {
+        value: schema[field].minimum,
+        message: t('error.grant.category_assessment.field_too_low'),
+      },
+    }),
+    [t]
+  )
+
+  const getMarkdownFieldRules = useCallback(
+    (field: 'audienceRelevance' | 'showcase') => ({
+      required: { value: true, message: t('error.grant.category_assessment.field_empty') },
+      minLength: {
+        value: schema[field].minLength,
+        message: t('error.grant.category_assessment.field_too_short'),
+      },
+      maxLength: {
+        value: schema[field].maxLength,
+        message: t('error.grant.category_assessment.field_too_large'),
+      },
+    }),
+    [t]
+  )
 
   return (
     <div className="GrantRequestSection__Content">
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.sponsorship.event_type.label')}</Label>
-        <SelectField
-          value={state.value.eventType || undefined}
-          onChange={(_, { value }) => editor.set({ eventType: String(value) })}
-          options={[
-            {
-              text: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.online'),
-              value: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.online'),
-            },
-            {
-              text: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.offline'),
-              value: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.offline'),
-            },
-          ]}
-          error={!!state.error.eventType}
-          message={t(state.error.eventType)}
-          disabled={isFormDisabled}
+        <Controller
+          name="eventType"
+          control={control}
+          rules={{ required: true }}
+          render={({ field }) => (
+            <SelectField
+              {...field}
+              onChange={(_, { value }) => setValue('eventType', value as string)}
+              options={[
+                {
+                  text: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.online'),
+                  value: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.online'),
+                },
+                {
+                  text: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.offline'),
+                  value: t('page.submit_grant.category_assessment.sponsorship.event_type.choices.offline'),
+                },
+              ]}
+              error={!!errors.eventType}
+              message={errors.eventType?.message}
+              disabled={isFormDisabled}
+            />
+          )}
         />
       </ContentSection>
       <MultipleChoiceField
@@ -147,91 +133,98 @@ const SponsorshipSection = forwardRef(function SponsorshipSection({ onValidation
         intlKey="page.submit_grant.category_assessment.sponsorship.event_category.choices"
         options={EVENT_CATEGORY_OPTIONS}
         isFormDisabled={isFormDisabled}
-        value={state.value.eventCategory}
-        onChange={(value) => editor.set({ eventCategory: value })}
+        value={values.eventCategory || ''}
+        error={!!errors?.eventCategory}
+        onChange={(value) => {
+          clearErrors('eventCategory')
+          setValue('eventCategory', value)
+          if (value === '') {
+            setError('eventCategory', { message: t('error.grant.category_assessment.field_empty') })
+          } else if (isDirty) {
+            trigger()
+          }
+        }}
       />
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.sponsorship.primary_source_funding_label')}</Label>
-        <SelectField
-          value={state.value.primarySourceFunding || undefined}
-          onChange={(_, { value }) => editor.set({ primarySourceFunding: String(value) })}
-          options={[
-            {
-              text: 'Yes',
-              value: 'Yes',
-            },
-            {
-              text: 'No',
-              value: 'No',
-            },
-          ]}
-          error={!!state.error.primarySourceFunding}
-          message={t(state.error.primarySourceFunding)}
-          disabled={isFormDisabled}
+        <Controller
+          name="primarySourceFunding"
+          control={control}
+          rules={{ required: true }}
+          render={({ field }) => (
+            <SelectField
+              {...field}
+              onChange={(_, { value }) => setValue('primarySourceFunding', value as string)}
+              options={PRIMARY_SOURCE_FUNDING_OPTIONS}
+              error={!!errors.primarySourceFunding}
+              message={errors.primarySourceFunding?.message}
+              disabled={isFormDisabled}
+            />
+          )}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.sponsorship.total_events_label')}</Label>
         <Field
+          name="totalEvents"
+          control={control}
           type="number"
-          value={state.value.totalEvents}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalEvents: value })}
-          error={!!state.error.totalEvents}
-          message={t(state.error.totalEvents)}
+          error={!!errors.totalEvents}
+          message={errors.totalEvents?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={getNumberFieldRules('totalEvents')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.sponsorship.total_attendance_label')}</Label>
         <Field
+          name="totalAttendance"
           type="number"
-          value={state.value.totalAttendance}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ totalAttendance: value })}
-          error={!!state.error.totalAttendance}
-          message={t(state.error.totalAttendance)}
+          control={control}
+          error={!!errors.totalAttendance}
+          message={errors.totalAttendance?.message}
           disabled={isFormDisabled}
           onWheel={disableOnWheelInput}
+          rules={getNumberFieldRules('totalAttendance')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.sponsorship.audience_relevance_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.audienceRelevance}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ audienceRelevance: value })}
-          error={!!state.error.audienceRelevance}
+        <MarkdownField
+          name="audienceRelevance"
+          control={control}
+          error={!!errors.audienceRelevance}
           message={
-            t(state.error.audienceRelevance) +
+            (errors.audienceRelevance?.message || '') +
             ' ' +
             t('page.submit.character_counter', {
-              current: state.value.audienceRelevance.length,
+              current: watch('audienceRelevance').length,
               limit: schema.audienceRelevance.maxLength,
             })
           }
           disabled={isFormDisabled}
+          rules={getMarkdownFieldRules('audienceRelevance')}
         />
       </ContentSection>
       <ContentSection className="GrantRequestSection__Field">
         <Label>{t('page.submit_grant.category_assessment.sponsorship.showcase_label')}</Label>
-        <MarkdownTextarea
-          minHeight={175}
-          value={state.value.showcase}
-          onChange={(_: unknown, { value }: { value: string }) => editor.set({ showcase: value })}
-          error={!!state.error.showcase}
+        <MarkdownField
+          name="showcase"
+          control={control}
+          error={!!errors.showcase}
           message={
-            t(state.error.showcase) +
+            (errors.showcase?.message || '') +
             ' ' +
             t('page.submit.character_counter', {
-              current: state.value.showcase.length,
+              current: watch('showcase').length,
               limit: schema.showcase.maxLength,
             })
           }
           disabled={isFormDisabled}
+          rules={getMarkdownFieldRules('showcase')}
         />
       </ContentSection>
     </div>
   )
-})
-
-export default SponsorshipSection
+}
diff --git a/src/components/GrantRequest/GrantRequestCategorySection.tsx b/src/components/GrantRequest/GrantRequestCategorySection.tsx
index 917fd1cf3..c9cec84b5 100644
--- a/src/components/GrantRequest/GrantRequestCategorySection.tsx
+++ b/src/components/GrantRequest/GrantRequestCategorySection.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { GrantRequestCategoryAssessment, NewGrantCategory } from '../../entities/Grant/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
@@ -22,47 +22,45 @@ interface Props {
 
 export default function GrantRequestCategorySection({ category, onValidation, isFormDisabled, sectionNumber }: Props) {
   const t = useFormatMessage()
+  const [validated, setValidated] = useState<boolean | null>(null)
+  const [isEdited, setIsEdited] = useState(false)
 
-  const sectionRef = useRef<{ validate: () => void; isValidated: () => boolean; isFormEdited: () => boolean }>(null)
-
-  const handleBlur = () => {
-    if (sectionRef) {
-      sectionRef.current?.validate()
-    }
-  }
-
-  const handleValidation = (data: Partial<GrantRequestCategoryAssessment>, validated: boolean) => {
-    onValidation(data, validated)
-  }
+  const handleValidation = useCallback(
+    (data: Partial<GrantRequestCategoryAssessment>, validated: boolean, isEdited: boolean) => {
+      onValidation(data, validated)
+      setValidated(validated)
+      setIsEdited(isEdited)
+    },
+    [onValidation]
+  )
 
   return (
     <GrantRequestSection
-      onBlur={handleBlur}
-      validated={sectionRef.current?.isValidated() || false}
-      isFormEdited={sectionRef.current?.isFormEdited() || false}
+      validated={!!validated}
+      isFormEdited={isEdited}
       sectionTitle={t('page.submit_grant.category_assessment.title')}
       sectionNumber={sectionNumber}
     >
       {category === NewGrantCategory.Accelerator && (
-        <AcceleratorSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <AcceleratorSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
       {category === NewGrantCategory.CoreUnit && (
-        <CoreUnitSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <CoreUnitSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
       {category === NewGrantCategory.Documentation && (
-        <DocumentationSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <DocumentationSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
       {category === NewGrantCategory.InWorldContent && (
-        <InWorldContentSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <InWorldContentSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
       {category === NewGrantCategory.SocialMediaContent && (
-        <SocialMediaContentSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <SocialMediaContentSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
       {category === NewGrantCategory.Sponsorship && (
-        <SponsorshipSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <SponsorshipSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
       {category === NewGrantCategory.Platform && (
-        <PlatformSection ref={sectionRef} onValidation={handleValidation} isFormDisabled={isFormDisabled} />
+        <PlatformSection onValidation={handleValidation} isFormDisabled={isFormDisabled} />
       )}
     </GrantRequestSection>
   )
diff --git a/src/components/GrantRequest/GrantRequestGeneralInfoSection.tsx b/src/components/GrantRequest/GrantRequestGeneralInfoSection.tsx
index 6b3274d48..d45f5d375 100644
--- a/src/components/GrantRequest/GrantRequestGeneralInfoSection.tsx
+++ b/src/components/GrantRequest/GrantRequestGeneralInfoSection.tsx
@@ -1,17 +1,17 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
 
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
 import isEmail from 'validator/lib/isEmail'
 import isEthereumAddress from 'validator/lib/isEthereumAddress'
 
 import { GrantRequestGeneralInfo, GrantRequestGeneralInfoSchema } from '../../entities/Grant/types'
-import { userModifiedForm } from '../../entities/Proposal/utils'
 import useFormatMessage from '../../hooks/useFormatMessage'
+import Field from '../Common/Form/Field'
+import MarkdownField from '../Common/Form/MarkdownField'
 import Label from '../Common/Label'
 import SubLabel from '../Common/SubLabel'
 import { ContentSection } from '../Layout/ContentLayout'
+import PostLabel from '../PostLabel'
 import CoAuthors from '../Proposal/Submit/CoAuthor/CoAuthors'
 
 import GrantRequestSection from './GrantRequestSection'
@@ -26,62 +26,6 @@ export const INITIAL_GRANT_REQUEST_GENERAL_INFO_STATE: GrantRequestGeneralInfo =
 }
 
 const schema = GrantRequestGeneralInfoSchema
-const validate = createValidator<GrantRequestGeneralInfo>({
-  title: (state) => ({
-    title:
-      assert(state.title.length <= schema.title.maxLength, 'error.grant.title_too_large') ||
-      assert(state.title.length > 0, 'error.grant.title_empty') ||
-      assert(state.title.length >= schema.title.minLength, 'error.grant.title_too_short') ||
-      undefined,
-  }),
-  abstract: (state) => ({
-    abstract:
-      assert(state.abstract.length <= schema.abstract.maxLength, 'error.grant.general_info.abstract_too_large') ||
-      assert(state.abstract.length > 0, 'error.grant.general_info.abstract_empty') ||
-      assert(state.abstract.length >= schema.abstract.minLength, 'error.grant.general_info.abstract_too_short') ||
-      undefined,
-  }),
-  description: (state) => ({
-    description:
-      assert(
-        state.description.length <= schema.description.maxLength,
-        'error.grant.general_info.description_too_large'
-      ) ||
-      assert(state.description.length > 0, 'error.grant.general_info.description_empty') ||
-      assert(
-        state.description.length >= schema.description.minLength,
-        'error.grant.general_info.description_too_short'
-      ) ||
-      undefined,
-  }),
-  beneficiary: (state) => ({
-    beneficiary:
-      assert(state.beneficiary !== '', 'error.grant.general_info.beneficiary_empty') ||
-      assert(
-        !state.beneficiary || isEthereumAddress(state.beneficiary),
-        'error.grant.general_info.beneficiary_invalid'
-      ),
-  }),
-  email: (state) => ({
-    email:
-      assert(state.email !== '', 'error.grant.general_info.email_empty') ||
-      assert(!state.email || isEmail(state.email), 'error.grant.general_info.email_invalid'),
-  }),
-  roadmap: (state) => ({
-    roadmap:
-      assert(state.roadmap.length <= schema.roadmap.maxLength, 'error.grant.general_info.roadmap_too_large') ||
-      assert(state.roadmap.length > 0, 'error.grant.general_info.roadmap_empty') ||
-      assert(state.roadmap.length >= schema.roadmap.minLength, 'error.grant.general_info.roadmap_too_short') ||
-      undefined,
-  }),
-})
-
-const edit = (state: GrantRequestGeneralInfo, props: Partial<GrantRequestGeneralInfo>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
 
 interface Props {
   onValidation: (data: GrantRequestGeneralInfo, sectionValid: boolean) => void
@@ -89,165 +33,197 @@ interface Props {
   sectionNumber: number
 }
 
-type Fields = keyof Omit<GrantRequestGeneralInfo, 'coAuthors' | 'specification' | 'personnel'>
-
 export default function GrantRequestGeneralInfoSection({ onValidation, isFormDisabled, sectionNumber }: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, INITIAL_GRANT_REQUEST_GENERAL_INFO_STATE)
-  const isFormEdited = userModifiedForm(state.value, INITIAL_GRANT_REQUEST_GENERAL_INFO_STATE)
-  const [checkedFields, setCheckedFields] = useState<Record<Fields, boolean>>({
-    title: false,
-    abstract: false,
-    description: false,
-    beneficiary: false,
-    email: false,
-    roadmap: false,
+  const {
+    formState: { isValid, errors, isDirty },
+    control,
+    setValue,
+    watch,
+  } = useForm<GrantRequestGeneralInfo>({
+    defaultValues: INITIAL_GRANT_REQUEST_GENERAL_INFO_STATE,
+    mode: 'onTouched',
   })
 
-  const canValidate = useCallback(() => Object.values(checkedFields).every((value) => value), [checkedFields])
-
-  const onFieldBlur = (field: Fields) => {
-    setCheckedFields({ ...checkedFields, [field]: true })
-    editor.set({ [field]: state.value[field].trim() })
-  }
-
-  useEffect(() => {
-    onValidation({ ...state.value }, state.validated)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.validated, state.value])
+  const values = useWatch({ control })
 
   useEffect(() => {
-    if (canValidate()) {
-      editor.validate()
-    }
+    onValidation({ ...(values as GrantRequestGeneralInfo) }, isValid)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [canValidate])
+  }, [values, isValid])
 
   return (
     <GrantRequestSection
-      validated={state.validated}
-      isFormEdited={isFormEdited}
+      validated={isValid}
+      isFormEdited={isDirty}
       sectionTitle={t('page.submit_grant.general_info.title')}
       sectionNumber={sectionNumber}
     >
       <div className="GrantRequestSection__Content">
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.general_info.title_label')}</Label>
-          <span className="GrantRequestSection__Sublabel GrantRequestSection__TitleSubLabel">
-            {t('page.submit_grant.general_info.title_detail')}
-          </span>
+          <SubLabel>{t('page.submit_grant.general_info.title_detail')}</SubLabel>
           <Field
-            value={state.value.title}
+            name="title"
+            control={control}
             placeholder={t('page.submit_grant.general_info.title_placeholder')}
-            onChange={(_, { value }) => editor.set({ title: value })}
-            onBlur={() => onFieldBlur('title')}
-            error={!!state.error.title}
+            error={!!errors.title}
             message={
-              t(state.error.title) +
+              (errors.title?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.title.length,
+                current: watch('title').length,
                 limit: schema.title.maxLength,
               })
             }
             disabled={isFormDisabled}
+            rules={{
+              required: { value: true, message: t('error.grant.title_empty') },
+              minLength: {
+                value: schema.title.minLength,
+                message: t('error.grant.title_too_short'),
+              },
+              maxLength: {
+                value: schema.title.maxLength,
+                message: t('error.grant.title_too_large'),
+              },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.general_info.abstract_label')}</Label>
           <SubLabel>{t('page.submit_grant.general_info.abstract_detail')}</SubLabel>
-          <MarkdownTextarea
-            minHeight={175}
-            value={state.value.abstract}
+          <MarkdownField
+            name="abstract"
+            control={control}
             placeholder={t('page.submit_grant.general_info.abstract_placeholder')}
-            onChange={(_: unknown, { value }: { value: string }) => editor.set({ abstract: value })}
-            onBlur={() => onFieldBlur('abstract')}
-            error={!!state.error.abstract}
+            error={!!errors.abstract}
             message={
-              t(state.error.abstract) +
+              (errors.abstract?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.abstract.length,
+                current: watch('abstract').length,
                 limit: schema.abstract.maxLength,
               })
             }
             disabled={isFormDisabled}
+            rules={{
+              required: { value: true, message: t('error.grant.general_info.abstract_empty') },
+              minLength: {
+                value: schema.abstract.minLength,
+                message: t('error.grant.general_info.abstract_too_short'),
+              },
+              maxLength: {
+                value: schema.abstract.maxLength,
+                message: t('error.grant.general_info.abstract_too_large'),
+              },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.general_info.description_label')}</Label>
           <SubLabel>{t('page.submit_grant.general_info.description_detail')}</SubLabel>
-          <MarkdownTextarea
-            minHeight={175}
-            value={state.value.description}
-            onChange={(_: unknown, { value }: { value: string }) => editor.set({ description: value })}
-            onBlur={() => onFieldBlur('description')}
-            error={!!state.error.description}
+          <MarkdownField
+            name="description"
+            control={control}
+            error={!!errors.description}
             message={
-              t(state.error.description) +
+              (errors.description?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.description.length,
+                current: watch('description').length,
                 limit: schema.description.maxLength,
               })
             }
             disabled={isFormDisabled}
+            rules={{
+              required: { value: true, message: t('error.grant.general_info.description_empty') },
+              minLength: {
+                value: schema.abstract.minLength,
+                message: t('error.grant.general_info.description_too_short'),
+              },
+              maxLength: {
+                value: schema.abstract.maxLength,
+                message: t('error.grant.general_info.description_too_large'),
+              },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.general_info.beneficiary_label')}</Label>
           <SubLabel>{t('page.submit_grant.general_info.beneficiary_detail')}</SubLabel>
           <Field
+            name="beneficiary"
+            control={control}
             type="address"
-            value={state.value.beneficiary}
-            onChange={(_, { value }) => editor.set({ beneficiary: value }, { validate: false })}
-            onBlur={() => onFieldBlur('beneficiary')}
-            message={t(state.error.beneficiary)}
-            error={!!state.error.beneficiary}
+            message={errors.beneficiary?.message}
+            error={!!errors.beneficiary}
             disabled={isFormDisabled}
+            rules={{
+              required: { value: true, message: t('error.grant.general_info.beneficiary_empty') },
+              validate: (value: string) => {
+                if (!isEthereumAddress(value)) {
+                  return t('error.grant.general_info.beneficiary_invalid')
+                }
+              },
+            }}
           />
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
-          <Label>
-            <span className="EmailLabel">{t('page.submit_grant.general_info.email_label')}</span>
-          </Label>
+          <Label>{t('page.submit_grant.general_info.email_label')}</Label>
           <SubLabel>{t('page.submit_grant.general_info.email_detail')}</SubLabel>
           <Field
+            name="email"
+            control={control}
             type="email"
-            value={state.value.email}
             placeholder={t('page.submit_grant.general_info.email_placeholder')}
-            onChange={(_, { value }) => editor.set({ email: value })}
-            onBlur={() => onFieldBlur('email')}
-            message={t(state.error.email)}
-            error={!!state.error.email}
+            message={errors.email?.message}
+            error={!!errors.email}
             disabled={isFormDisabled}
+            rules={{
+              required: { value: true, message: t('error.grant.general_info.email_empty') },
+              validate: (value: string) => {
+                if (!isEmail(value)) {
+                  return t('error.grant.general_info.email_invalid')
+                }
+              },
+            }}
           />
-          <p className="GrantRequestSection__EmailNote">{t('page.submit_grant.general_info.email_note')}</p>
+          <PostLabel>{t('page.submit_grant.general_info.email_note')}</PostLabel>
         </ContentSection>
         <ContentSection className="GrantRequestSection__Field">
           <Label>{t('page.submit_grant.general_info.roadmap_label')}</Label>
           <SubLabel>{t('page.submit_grant.general_info.roadmap_detail')}</SubLabel>
-          <MarkdownTextarea
-            minHeight={175}
-            value={state.value.roadmap}
+          <MarkdownField
+            name="roadmap"
+            control={control}
             placeholder={t('page.submit_grant.general_info.roadmap_placeholder')}
-            onChange={(_: unknown, { value }: { value: string }) => editor.set({ roadmap: value })}
-            onBlur={() => onFieldBlur('roadmap')}
-            error={!!state.error.roadmap}
+            error={!!errors.roadmap}
             message={
-              t(state.error.roadmap) +
+              (errors.roadmap?.message || '') +
               ' ' +
               t('page.submit.character_counter', {
-                current: state.value.roadmap.length,
+                current: watch('roadmap').length,
                 limit: schema.roadmap.maxLength,
               })
             }
             disabled={isFormDisabled}
+            rules={{
+              required: { value: true, message: t('error.grant.general_info.roadmap_empty') },
+              minLength: {
+                value: schema.abstract.minLength,
+                message: t('error.grant.general_info.roadmap_too_short'),
+              },
+              maxLength: {
+                value: schema.abstract.maxLength,
+                message: t('error.grant.general_info.roadmap_too_large'),
+              },
+            }}
           />
         </ContentSection>
-        <ContentSection onBlur={() => onValidation({ ...state.value }, state.validated)}>
+        <ContentSection>
           <CoAuthors
-            setCoAuthors={(addresses?: string[]) => editor.set({ coAuthors: addresses })}
+            setCoAuthors={(addresses?: string[]) => setValue('coAuthors', addresses)}
             isDisabled={isFormDisabled}
           />
         </ContentSection>
diff --git a/src/components/GrantRequest/GrantRequestSection.css b/src/components/GrantRequest/GrantRequestSection.css
index d3a2288b1..a9bf21a44 100644
--- a/src/components/GrantRequest/GrantRequestSection.css
+++ b/src/components/GrantRequest/GrantRequestSection.css
@@ -67,10 +67,6 @@
   flex: 1;
 }
 
-.GrantRequestSection__InputLabel {
-  padding-right: 20px;
-}
-
 .GrantRequestSection__Field {
   display: flex;
   flex-direction: column;
@@ -88,22 +84,3 @@
   justify-content: space-between;
   gap: 21px;
 }
-
-.GrantRequestSection__Sublabel,
-.GrantRequestSection__Sublabel .dg.Paragraph {
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 20px;
-  color: var(--black-600);
-}
-
-.GrantRequestSection__TitleSubLabel {
-  margin-bottom: 20px !important;
-}
-
-.GrantRequestSection__EmailNote {
-  font-size: 10px;
-  font-weight: 300;
-  margin-bottom: 8px;
-  margin-top: 8px;
-}
diff --git a/src/components/GrantRequest/GrantRequestSectionCard.css b/src/components/GrantRequest/GrantRequestSectionCard.css
index e71e0a941..70efc7b72 100644
--- a/src/components/GrantRequest/GrantRequestSectionCard.css
+++ b/src/components/GrantRequest/GrantRequestSectionCard.css
@@ -32,6 +32,7 @@
   align-items: flex-start;
   margin-bottom: 8px;
 }
+
 .GrantRequestSectionCard__Header > button.ui.basic.button {
   padding-top: 0;
 }
diff --git a/src/components/GrantRequest/MultipleChoiceField.css b/src/components/GrantRequest/MultipleChoiceField.css
new file mode 100644
index 000000000..da578b499
--- /dev/null
+++ b/src/components/GrantRequest/MultipleChoiceField.css
@@ -0,0 +1,3 @@
+.MultipleChoiceField__Error {
+  margin-top: 5px;
+}
diff --git a/src/components/GrantRequest/MultipleChoiceField.tsx b/src/components/GrantRequest/MultipleChoiceField.tsx
index 76196ad1e..89dd10acd 100644
--- a/src/components/GrantRequest/MultipleChoiceField.tsx
+++ b/src/components/GrantRequest/MultipleChoiceField.tsx
@@ -4,9 +4,11 @@ import { isEmpty } from 'lodash'
 
 import useFormatMessage from '../../hooks/useFormatMessage'
 import Label from '../Common/Label'
+import Text from '../Common/Text/Text'
 import { ContentSection } from '../Layout/ContentLayout'
 
 import CheckboxField from './CheckboxField'
+import './MultipleChoiceField.css'
 
 interface Props {
   label: string
@@ -15,9 +17,18 @@ interface Props {
   onChange: (newValue: string | null) => void
   intlKey: string
   options: string[]
+  error: boolean
 }
 
-const MultipleChoiceField = ({ label, isFormDisabled, value, onChange, options, intlKey }: Props) => {
+export default function MultipleChoiceField({
+  label,
+  isFormDisabled,
+  value,
+  onChange,
+  options,
+  intlKey,
+  error,
+}: Props) {
   const t = useFormatMessage()
 
   const handleEventCategoryChange = useCallback(
@@ -60,8 +71,11 @@ const MultipleChoiceField = ({ label, isFormDisabled, value, onChange, options,
           {t(`${intlKey}.${item}`)}
         </CheckboxField>
       ))}
+      {error && (
+        <Text className="MultipleChoiceField__Error" weight="semi-bold" color="error">
+          {t('error.grant.category_assessment.field_empty')}
+        </Text>
+      )}
     </ContentSection>
   )
 }
-
-export default MultipleChoiceField
diff --git a/src/components/Home/OpenProposal.css b/src/components/Home/OpenProposal.css
index c7c5f5c92..a5913d944 100644
--- a/src/components/Home/OpenProposal.css
+++ b/src/components/Home/OpenProposal.css
@@ -99,6 +99,10 @@
   }
 }
 
+.OpenProposal__Pill {
+  margin-right: 5px;
+}
+
 .OpenProposal__UsernameContainer {
   display: flex;
   flex-direction: row;
diff --git a/src/components/Home/OpenProposal.tsx b/src/components/Home/OpenProposal.tsx
index 8bd9dd69c..a69709bf5 100644
--- a/src/components/Home/OpenProposal.tsx
+++ b/src/components/Home/OpenProposal.tsx
@@ -58,7 +58,7 @@ const OpenProposal = ({ proposal }: Props) => {
           <h3 className="OpenProposal__Title">{title}</h3>
           <span className="OpenProposal__Details">
             <Mobile>
-              <CategoryPill proposalType={proposal.type} size="small" />
+              <CategoryPill className="OpenProposal__Pill" proposalType={proposal.type} size="small" />
             </Mobile>
             <span className="OpenProposal__DetailsItem OpenProposal__UsernameContainer">
               {t('page.home.open_proposals.by_user')}
diff --git a/src/components/Modal/UpdateProposalStatusModal/UpdateProposalStatusModal.tsx b/src/components/Modal/UpdateProposalStatusModal/UpdateProposalStatusModal.tsx
index f94812a7e..3ecc18950 100644
--- a/src/components/Modal/UpdateProposalStatusModal/UpdateProposalStatusModal.tsx
+++ b/src/components/Modal/UpdateProposalStatusModal/UpdateProposalStatusModal.tsx
@@ -1,12 +1,10 @@
-import React, { useMemo } from 'react'
+import React from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
 
 import classNames from 'classnames'
-import MarkdownTextarea from 'decentraland-gatsby/dist/components/Form/MarkdownTextarea'
 import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
-import useEditor, { assert, createValidator } from 'decentraland-gatsby/dist/hooks/useEditor'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
-import { Field } from 'decentraland-ui/dist/components/Field/Field'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
 import { Modal, ModalProps } from 'decentraland-ui/dist/components/Modal/Modal'
 import isEthereumAddress from 'validator/lib/isEthereumAddress'
@@ -15,6 +13,8 @@ import { GrantTier } from '../../../entities/Grant/GrantTier'
 import { ProposalAttributes, ProposalStatus, ProposalType } from '../../../entities/Proposal/types'
 import { isValidTransactionHash } from '../../../entities/Proposal/utils'
 import useFormatMessage from '../../../hooks/useFormatMessage'
+import Field from '../../Common/Form/Field'
+import MarkdownField from '../../Common/Form/MarkdownField'
 import Label from '../../Common/Label'
 import '../ProposalModal.css'
 
@@ -27,44 +27,18 @@ type UpdateProposalState = {
   description: string
 }
 
-const initialPollState: UpdateProposalState = {
+const initialUpdateProposalState: UpdateProposalState = {
   proposal: null,
   vestingAddress: '',
   enactingTx: '',
   description: '',
 }
 
-const edit = (state: UpdateProposalState, props: Partial<UpdateProposalState>) => {
-  return {
-    ...state,
-    ...props,
-  }
-}
-
-const validate = createValidator<UpdateProposalState>({
-  vestingAddress: (state) => ({
-    vestingAddress: assert(
-      !state.vestingAddress || isEthereumAddress(state.vestingAddress),
-      'error.update_status_proposal.grant_vesting_address_invalid'
-    ),
-  }),
-  enactingTx: (state) => ({
-    enactingTx: assert(
-      !state.enactingTx || isValidTransactionHash(state.enactingTx),
-      'error.update_status_proposal.grant_enacting_tx_invalid'
-    ),
-  }),
-  description: () => ({
-    description: undefined,
-  }),
-})
-
-export type UpdateProposalStatusModalProps = Omit<ModalProps, 'children'> & {
+type Props = Omit<ModalProps, 'children'> & {
   proposal?: ProposalAttributes | null
   status?: ProposalStatus | null
   loading?: boolean
-  onClickAccept?: (
-    e: React.MouseEvent<unknown>,
+  onClickAccept: (
     status: ProposalStatus,
     vestingContract: string | null,
     enactingTx: string | null,
@@ -72,107 +46,124 @@ export type UpdateProposalStatusModalProps = Omit<ModalProps, 'children'> & {
   ) => void
 }
 
+const getPrimaryButtonTextKey = (status?: ProposalStatus | null) => {
+  switch (status) {
+    case ProposalStatus.Enacted:
+      return 'page.proposal_detail.enact'
+    case ProposalStatus.Passed:
+      return 'page.proposal_detail.pass'
+    case ProposalStatus.Rejected:
+      return 'page.proposal_detail.reject'
+    default:
+      return 'modal.update_status_proposal.accept'
+  }
+}
+
 export function UpdateProposalStatusModal({
   onClickAccept,
   proposal,
   status,
   loading,
   open,
+  className,
   ...props
-}: UpdateProposalStatusModalProps) {
+}: Props) {
   const t = useFormatMessage()
-  const [state, editor] = useEditor(edit, validate, initialPollState)
+  const {
+    handleSubmit,
+    formState: { isSubmitting, errors },
+    control,
+  } = useForm<UpdateProposalState>({ defaultValues: initialUpdateProposalState, mode: 'onTouched' })
   const isOneTimePaymentProposalTier = GrantTier.isOneTimePaymentTier(proposal?.configuration.tier)
 
-  function handleAccept(e: React.MouseEvent<unknown>) {
-    editor.validate()
-    const hasErrors = Object.keys(state.error).length != 0
-    if (status && !hasErrors && onClickAccept) {
+  const onSubmit: SubmitHandler<UpdateProposalState> = async (data) => {
+    if (status) {
       onClickAccept(
-        e,
         status,
-        state.value.vestingAddress ? state.value.vestingAddress : null,
-        state.value.enactingTx ? state.value.enactingTx : null,
-        state.value.description
+        data.vestingAddress ? data.vestingAddress : null,
+        data.enactingTx ? data.enactingTx : null,
+        data.description
       )
     }
   }
 
-  const cta = useMemo(() => {
-    switch (status) {
-      case ProposalStatus.Enacted:
-        return 'page.proposal_detail.enact'
-      case ProposalStatus.Passed:
-        return 'page.proposal_detail.pass'
-      case ProposalStatus.Rejected:
-        return 'page.proposal_detail.reject'
-      default:
-        return 'modal.update_status_proposal.accept'
-    }
-  }, [status])
-
   return (
     <Modal
       {...props}
       open={open && !!status}
       size="small"
-      className={classNames('GovernanceActionModal', 'ProposalModal', 'UpdateProposalStatusModal', props.className)}
+      className={classNames('GovernanceActionModal', 'ProposalModal', 'UpdateProposalStatusModal', className)}
       closeIcon={<Close />}
     >
       <Modal.Content>
-        <div className="ProposalModal__Title">
-          <Header>{t('modal.update_status_proposal.title', { status })}</Header>
-          <Markdown>{t('modal.update_status_proposal.description', { status }) || ''}</Markdown>
-        </div>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="ProposalModal__Title">
+            <Header>{t('modal.update_status_proposal.title', { status })}</Header>
+            <Markdown>{t('modal.update_status_proposal.description', { status }) || ''}</Markdown>
+          </div>
 
-        {proposal && proposal.type === ProposalType.Grant && (
-          <div className="ProposalModal__GrantTransaction">
-            {!isOneTimePaymentProposalTier && (
-              <>
-                <Label>{t('modal.update_status_proposal.grant_vesting_address')}</Label>
-                <Field
-                  type="address"
-                  value={state.value.vestingAddress}
-                  onChange={(_, { value }) => editor.set({ vestingAddress: value }, { validate: false })}
-                  onBlur={() => editor.set({ vestingAddress: state.value.vestingAddress.trim() })}
-                  message={t(state.error.vestingAddress)}
-                  error={!!state.error.vestingAddress}
-                />
-              </>
-            )}
-            {isOneTimePaymentProposalTier && (
-              <>
-                <Label>{t('modal.update_status_proposal.grant_enacting_tx')}</Label>
-                <Field
-                  type="address"
-                  value={state.value.enactingTx}
-                  onChange={(_, { value }) => editor.set({ enactingTx: value }, { validate: false })}
-                  onBlur={() => editor.set({ enactingTx: state.value.enactingTx.trim() })}
-                  message={t(state.error.enactingTx)}
-                  error={!!state.error.enactingTx}
-                />
-              </>
-            )}
+          {proposal && proposal.type === ProposalType.Grant && (
+            <div className="ProposalModal__GrantTransaction">
+              {!isOneTimePaymentProposalTier && (
+                <>
+                  <Label>{t('modal.update_status_proposal.grant_vesting_address')}</Label>
+                  <Field
+                    control={control}
+                    name="vestingAddress"
+                    type="address"
+                    message={errors.vestingAddress?.message}
+                    error={!!errors.vestingAddress}
+                    rules={{
+                      validate: (value: string) => {
+                        if (!isEthereumAddress(value)) {
+                          return t('error.update_status_proposal.grant_vesting_address_invalid')
+                        }
+                      },
+                    }}
+                  />
+                </>
+              )}
+              {isOneTimePaymentProposalTier && (
+                <>
+                  <Label>{t('modal.update_status_proposal.grant_enacting_tx')}</Label>
+                  <Field
+                    control={control}
+                    name="enactingTx"
+                    type="address"
+                    message={errors.enactingTx?.message}
+                    error={!!errors.enactingTx}
+                    rules={{
+                      validate: (value: string) => {
+                        if (!isValidTransactionHash(value)) {
+                          return t('error.update_status_proposal.grant_enacting_tx_invalid')
+                        }
+                      },
+                    }}
+                  />
+                </>
+              )}
+            </div>
+          )}
+          <div className="ProposalModal__Form">
+            <Label>{t('modal.update_status_proposal.comments')}</Label>
+            <MarkdownField control={control} name="description" />
+          </div>
+          <div className="ProposalModal__Actions">
+            <Button type="submit" primary fluid disabled={isSubmitting} loading={loading && isSubmitting}>
+              {t(getPrimaryButtonTextKey(status))}
+            </Button>
+            <Button
+              className="cancel"
+              fluid
+              onClick={(e) => {
+                e.preventDefault()
+                props.onClose()
+              }}
+            >
+              {t('modal.update_status_proposal.reject')}
+            </Button>
           </div>
-        )}
-        <div className="ProposalModal__Form">
-          <Label>{t('modal.update_status_proposal.comments')}</Label>
-          <MarkdownTextarea
-            minHeight={150}
-            value={state.value.description}
-            onChange={(_: unknown, { value }: { value: string }) =>
-              editor.set({ description: value }, { validate: false })
-            }
-          />
-        </div>
-        <div className="ProposalModal__Actions">
-          <Button primary fluid disabled={state.validated} loading={loading && state.validated} onClick={handleAccept}>
-            {t(cta)}
-          </Button>
-          <Button className="cancel" fluid onClick={props.onClose}>
-            {t('modal.update_status_proposal.reject')}
-          </Button>
-        </div>
+        </form>
       </Modal.Content>
     </Modal>
   )
diff --git a/src/components/Profile/ProposalCreatedItem.css b/src/components/Profile/ProposalCreatedItem.css
index f0cb866ed..af4ea00a2 100644
--- a/src/components/Profile/ProposalCreatedItem.css
+++ b/src/components/Profile/ProposalCreatedItem.css
@@ -81,10 +81,28 @@ a.ui.card:hover,
 }
 
 .ProposalCreatedItem__Status {
+  display: flex;
+  flex-direction: column;
+  padding-top: 6px;
+}
+
+.ProposalCreatedItem__StatusPillsContainer {
   display: flex;
   flex-direction: row;
+  padding-bottom: 6px;
   align-items: center;
-  padding-top: 6px;
+}
+
+@media (min-width: 768px) {
+  .ProposalCreatedItem__Status {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .ProposalCreatedItem__StatusPillsContainer {
+    padding-bottom: 0;
+  }
 }
 
 .ProposalCreatedItem__Stats {
diff --git a/src/components/Profile/ProposalCreatedItem.tsx b/src/components/Profile/ProposalCreatedItem.tsx
index d81cf8276..372c0c079 100644
--- a/src/components/Profile/ProposalCreatedItem.tsx
+++ b/src/components/Profile/ProposalCreatedItem.tsx
@@ -38,13 +38,17 @@ function ProposalCreatedItem({ proposal, showCoauthoring, hasCoauthorRequests }:
             <Header>{title}</Header>
           </div>
           <div className="ProposalCreatedItem__Status">
-            <StatusPill className="ProposalCreatedItem__StatusPill" size="small" status={status} />
-            {showCoauthoring && (
-              <CoAuthorPill className="ProposalCreatedItem__CoAuthorPill" hasCoauthorRequests={hasCoauthorRequests} />
-            )}
-            <Mobile>
-              {type && <CategoryPill className="ProposalCreatedItem__CategoryPill" size="small" proposalType={type} />}
-            </Mobile>
+            <div className="ProposalCreatedItem__StatusPillsContainer">
+              <StatusPill className="ProposalCreatedItem__StatusPill" size="small" status={status} />
+              {showCoauthoring && (
+                <CoAuthorPill className="ProposalCreatedItem__CoAuthorPill" hasCoauthorRequests={hasCoauthorRequests} />
+              )}
+              <Mobile>
+                {type && (
+                  <CategoryPill className="ProposalCreatedItem__CategoryPill" size="small" proposalType={type} />
+                )}
+              </Mobile>
+            </div>
             <div className="ProposalCreatedItem__Stats">
               <span className="ProposalCreatedItem__Details">
                 {t('page.profile.created_proposals.votes', { total: Object.keys(votes || {}).length })}
diff --git a/src/hooks/useGrantCategoryEditor.ts b/src/hooks/useGrantCategoryEditor.ts
deleted file mode 100644
index 5fe663d5b..000000000
--- a/src/hooks/useGrantCategoryEditor.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { useImperativeHandle } from 'react'
-
-import { userModifiedForm } from '../entities/Proposal/utils'
-
-export const useGrantCategoryEditor = (ref: React.ForwardedRef<unknown>, editor: any, state: any, initialValue: any) =>
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        validate() {
-          editor.validate()
-        },
-        isValidated() {
-          return state.validated
-        },
-        isFormEdited() {
-          return userModifiedForm(state.value, initialValue)
-        },
-      }
-    },
-    [editor, state, initialValue]
-  )
diff --git a/src/pages/proposal.tsx b/src/pages/proposal.tsx
index 08f1fb176..197be689f 100644
--- a/src/pages/proposal.tsx
+++ b/src/pages/proposal.tsx
@@ -460,7 +460,7 @@ export default function ProposalPage() {
         proposal={proposal}
         status={proposalPageState.confirmStatusUpdate || null}
         loading={isUpdating}
-        onClickAccept={(_, status, vesting_contract, enactingTx, description) =>
+        onClickAccept={(status, vesting_contract, enactingTx, description) =>
           updateProposal({ status, vesting_contract, enactingTx, description })
         }
         onClose={() => updatePageState({ confirmStatusUpdate: false })}
diff --git a/src/pages/submit/grant.tsx b/src/pages/submit/grant.tsx
index 8c9bbcd92..24f529f48 100644
--- a/src/pages/submit/grant.tsx
+++ b/src/pages/submit/grant.tsx
@@ -102,6 +102,7 @@ function handleCancel() {
 export default function SubmitGrant() {
   const t = useFormatMessage()
   const [account, accountState] = useAuthContext()
+
   useEffect(() => {
     const params = new URLSearchParams(location.search)
     let category: NewGrantCategory | null = null
@@ -188,6 +189,14 @@ export default function SubmitGrant() {
     [patchGrantRequest, patchValidationState]
   )
 
+  const handleCategorySection = useCallback(
+    (data, sectionValid) => {
+      patchGrantRequest((prevState) => ({ ...prevState, ...data }))
+      patchValidationState({ categoryAssessmentSectionValid: sectionValid })
+    },
+    [patchValidationState]
+  )
+
   if (accountState.loading) {
     return <LoadingView />
   }
@@ -280,10 +289,7 @@ export default function SubmitGrant() {
           {grantRequest.category && (
             <GrantRequestCategorySection
               category={grantRequest.category}
-              onValidation={(data, sectionValid) => {
-                patchGrantRequest((prevState) => ({ ...prevState, ...data }))
-                patchValidationState({ categoryAssessmentSectionValid: sectionValid })
-              }}
+              onValidation={handleCategorySection}
               isFormDisabled={isFormDisabled}
               sectionNumber={getSectionNumber()}
             />
diff --git a/src/pages/submit/linked-wearables.tsx b/src/pages/submit/linked-wearables.tsx
index 2620be248..33f915aec 100644
--- a/src/pages/submit/linked-wearables.tsx
+++ b/src/pages/submit/linked-wearables.tsx
@@ -5,7 +5,6 @@ import { SubmitHandler, useForm, useWatch } from 'react-hook-form'
 import Head from 'decentraland-gatsby/dist/components/Head/Head'
 import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
 import useAuthContext from 'decentraland-gatsby/dist/context/Auth/useAuthContext'
-import { assert } from 'decentraland-gatsby/dist/hooks/useEditor'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Field as DCLField } from 'decentraland-ui/dist/components/Field/Field'
 import { Header } from 'decentraland-ui/dist/components/Header/Header'
@@ -156,12 +155,7 @@ export default function SubmitLinkedWearables() {
     } as Record<string, string>)
   }
 
-  const handleErrorOption = (
-    input: string,
-    fieldKey: string,
-    field: ListSectionType['section'],
-    validator: ListSectionValidator
-  ) => {
+  const handleErrorOption = (input: string, field: ListSectionType['section'], validator: ListSectionValidator) => {
     const error = validator(input)
     if (input !== '' && error) {
       setFormError(field, { message: (errors[field]?.message as unknown as string) || error })
@@ -173,11 +167,15 @@ export default function SubmitLinkedWearables() {
   }
 
   const urlValidator: ListSectionValidator = (input: string) => {
-    return assert(isHttpsURL(input), t('error.linked_wearables.url_invalid'))
+    if (!isHttpsURL(input)) {
+      return t('error.linked_wearables.url_invalid')
+    }
   }
 
   const addressValidator: ListSectionValidator = (input: string) => {
-    return assert(isEthereumAddress(input), t('error.linked_wearables.address_invalid'))
+    if (!isEthereumAddress(input)) {
+      return t('error.linked_wearables.address_invalid')
+    }
   }
 
   const getListSection = (
@@ -212,7 +210,7 @@ export default function SubmitLinkedWearables() {
                   onChange={(_, { value }) => handleEditOption(params.section, key, value)}
                   disabled={formDisabled}
                   error={!!errors[params.section]?.message}
-                  onBlur={() => handleErrorOption(sectionValue[key], key, params.section, validator)}
+                  onBlur={() => handleErrorOption(sectionValue[key], params.section, validator)}
                 />
               ))}
           {canAdd && (
@@ -280,8 +278,6 @@ export default function SubmitLinkedWearables() {
   useEffect(() => {
     const errorFields = Object.keys(omitBy(errors, isNil)) as (keyof LinkedWearablesState)[]
     const errorFieldsStr = JSON.stringify(errorFields)
-    console.log('errors', errors)
-    console.log('fields', formErrorKeys, errorFields)
     if (errorFields.length > 0 && errorFieldsStr !== formErrorKeys) {
       setError(
         `${errorFields
diff --git a/src/ui-overrides.css b/src/ui-overrides.css
index e05cc62a6..7b2235c72 100644
--- a/src/ui-overrides.css
+++ b/src/ui-overrides.css
@@ -77,6 +77,32 @@
   padding: 8px 8px 8px;
 }
 
+.dcl.text-area textarea {
+  border-width: 1px !important;
+  font-size: 20px !important;
+  line-height: 28px !important;
+}
+
+.dcl.text-area .message {
+  text-align: right;
+}
+
+.dcl.text-area > textarea {
+  border-color: var(--border-color-default) !important;
+}
+
+.dcl.text-area.error > textarea {
+  border-color: var(--red-800) !important;
+}
+
+.dcl.text-area .info {
+  display: none;
+}
+
+.dcl.text-area.info > .message {
+  color: var(--black-600) !important;
+}
+
 .dcl.select-field.select-field .ui.dropdown.visible .menu {
   border-radius: 0 0 6px 6px;
   margin: 1px 0 0 0;