fix: reduce threshold when removing owner (#1181)

* fix: reduce threshold when removing owner

* fix: use enum for all field names

* fix: reduce code

src/components/new-safe/steps/Step2/index.tsx

@@ -1,5 +1,5 @@
 import { Button, SvgIcon, MenuItem, Select, Tooltip, Typography, Divider, Box } from '@mui/material'
-import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
+import { Controller, FormProvider, useFieldArray, useForm } from 'react-hook-form'
 import type { ReactElement } from 'react'
 
 import AddIcon from '@/public/images/common/add.svg'
@@ -17,16 +17,16 @@ import layoutCss from '@/components/new-safe/CreateSafe/styles.module.css'
 import NetworkWarning from '@/components/new-safe/NetworkWarning'
 import useIsWrongChain from '@/hooks/useIsWrongChain'
 
-export type CreateSafeStep2Form = {
-  owners: NamedAddress[]
-  threshold: number
-}
-
 enum CreateSafeStep2Fields {
   owners = 'owners',
   threshold = 'threshold',
 }
 
+export type CreateSafeStep2Form = {
+  [CreateSafeStep2Fields.owners]: NamedAddress[]
+  [CreateSafeStep2Fields.threshold]: number
+}
+
 const STEP_2_FORM_ID = 'create-safe-step-2-form'
 
 const CreateSafeStep2 = ({
@@ -49,11 +49,21 @@ const CreateSafeStep2 = ({
     },
   })
 
-  const { register, handleSubmit, control, watch, formState, getValues } = formMethods
+  const { handleSubmit, control, watch, formState, getValues, setValue } = formMethods
 
   const threshold = watch(CreateSafeStep2Fields.threshold)
 
-  const { fields: ownerFields, append: appendOwner, remove: removeOwner } = useFieldArray({ control, name: 'owners' })
+  const {
+    fields: ownerFields,
+    append: appendOwner,
+    remove,
+  } = useFieldArray({ control, name: CreateSafeStep2Fields.owners })
+
+  const removeOwner = (index: number): void => {
+    // Set threshold if it's greater than the number of owners
+    setValue(CreateSafeStep2Fields.threshold, Math.min(threshold, ownerFields.length - 1))
+    remove(index)
+  }
 
   const isDisabled = isWrongChain || !formState.isValid
 
@@ -120,13 +130,19 @@ const CreateSafeStep2 = ({
             Any transaction requires the confirmation of:
           </Typography>
           <Box display="flex" alignItems="center">
-            <Select {...register(CreateSafeStep2Fields.threshold)} defaultValue={data.threshold} className={css.select}>
-              {ownerFields.map((_, i) => (
-                <MenuItem key={i} value={i + 1}>
-                  {i + 1}
-                </MenuItem>
-              ))}
-            </Select>{' '}
+            <Controller
+              name={CreateSafeStep2Fields.threshold}
+              control={control}
+              render={({ field }) => (
+                <Select {...field} className={css.select}>
+                  {ownerFields.map(({ id }, i) => (
+                    <MenuItem key={id} value={i + 1}>
+                      {i + 1}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )}
+            />{' '}
             out of {ownerFields.length} owner(s).
           </Box>