fix: optimise forms (safe-global#23)

* fix: optimise forms * fix: revert ref rename
protofire · Apr 22, 2022 · 0a7637e · 0a7637e
1 parent 78ef8d3
commit 0a7637e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/components/tx/ReviewTx/index.tsx b/components/tx/ReviewTx/index.tsx
@@ -1,16 +1,17 @@
 import { useState, type ReactElement } from 'react'
-import { type SafeTransaction } from '@gnosis.pm/safe-core-sdk-types'
-import { type TokenInfo } from '@gnosis.pm/safe-react-gateway-sdk'
-import { type SendAssetsFormData } from '../SendAssetsForm'
 import { Button, FormControl, TextField, Typography } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import type { SafeTransaction } from '@gnosis.pm/safe-core-sdk-types'
+import type { TokenInfo } from '@gnosis.pm/safe-react-gateway-sdk'
+
 import { TokenIcon } from '@/components/common/TokenAmount'
 import { createTokenTransferParams, createTransaction } from '@/services/createTransaction'
 import { shortenAddress } from '@/services/formatters'
-import { useForm, type FieldValues } from 'react-hook-form'
-import css from './styles.module.css'
 import ErrorToast from '@/components/common/ErrorToast'
 import useSafeTxGas from '@/services/useSafeTxGas'
 import useBalances from '@/services/useBalances'
+import { type SendAssetsFormData } from '@/components/tx/SendAssetsForm'
+import css from '@/components/tx/ReviewTx/styles.module.css'
 
 const TokenTransferReview = ({ params, tokenInfo }: { params: SendAssetsFormData; tokenInfo: TokenInfo }) => {
   return (
@@ -24,6 +25,10 @@ const TokenTransferReview = ({ params, tokenInfo }: { params: SendAssetsFormData
   )
 }
 
+type ReviewTxForm = {
+  nonce: number
+}
+
 const ReviewTx = ({
   params,
   onSubmit,
@@ -46,9 +51,11 @@ const ReviewTx = ({
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm()
+  } = useForm<ReviewTxForm>({
+    defaultValues: { nonce: safeGas?.recommendedNonce || 0 },
+  })
 
-  const onFormSubmit = async (data: FieldValues) => {
+  const onFormSubmit = async (data: ReviewTxForm) => {
     if (!txParams) return
 
     const editedTxParams = {
@@ -66,8 +73,8 @@ const ReviewTx = ({
     }
   }
 
-  const validateNonce = (userNonce: string) => {
-    if (!/^[0-9]+$/.test(userNonce)) {
+  const validateNonce = (userNonce: number) => {
+    if (!Number.isInteger(userNonce)) {
       return 'Nonce must be a number'
     }
   }
@@ -80,12 +87,16 @@ const ReviewTx = ({
 
       <FormControl fullWidth>
         <TextField
-          key={safeGas?.recommendedNonce}
-          defaultValue={safeGas?.recommendedNonce}
           disabled={safeGasLoading}
           label="Nonce"
+          error={!!errors.nonce}
           helperText={errors.nonce?.message}
-          {...register('nonce', { validate: validateNonce, required: true })}
+          type="number"
+          {...register('nonce', {
+            valueAsNumber: true, // Set field to number type to auto parseInt
+            validate: validateNonce,
+            required: true,
+          })}
         />
       </FormControl>
 

diff --git a/components/tx/SendAssetsForm/index.tsx b/components/tx/SendAssetsForm/index.tsx
@@ -20,16 +20,18 @@ const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData)
   const {
     register,
     handleSubmit,
-    watch,
+    getValues,
     formState: { errors },
-  } = useForm()
-
-  const onFormSubmit = async (data: FieldValues) => {
-    onSubmit(data as SendAssetsFormData)
-  }
+  } = useForm<SendAssetsFormData>({
+    defaultValues: {
+      recepient: '',
+      tokenAddress: '',
+      amount: '',
+    },
+  })
 
   const validateAmount = (amount: string) => {
-    const tokenAddress = watch('tokenAddress')
+    const tokenAddress = getValues('tokenAddress')
     const token = tokenAddress && balances.items.find((item) => item.tokenInfo.address === tokenAddress)
 
     if (!token) return
@@ -40,13 +42,16 @@ const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData)
   }
 
   return (
-    <form className={css.container} onSubmit={handleSubmit(onFormSubmit)}>
+    <form className={css.container} onSubmit={handleSubmit(onSubmit)}>
       <FormControl fullWidth>
         <TextField
-          required
           label="Recepient"
+          error={!!errors.recepient}
           helperText={errors.recepient?.message}
-          {...register('recepient', { required: true, validate: validateAddress })}
+          {...register('recepient', {
+            validate: validateAddress,
+            required: true,
+          })}
         />
       </FormControl>
 
@@ -69,8 +74,8 @@ const SendAssetsForm = ({ onSubmit }: { onSubmit: (formData: SendAssetsFormData)
 
       <FormControl fullWidth>
         <TextField
-          required
           label="Amount"
+          error={!!errors.amount}
           helperText={errors.amount?.message}
           {...register('amount', { required: true, validate: validateAmount })}
         />