From e394e7f82a4f752792f327437fcb51e61be04ad6 Mon Sep 17 00:00:00 2001
From: brusher_ru <brusher.designer@gmail.com>
Date: Fri, 13 Sep 2024 19:43:24 -0300
Subject: [PATCH] tweak: improve UX of create/edit account and multi-key
 selector

---
 src/components/CreateAccountModal.tsx |  7 ++++++-
 src/components/FormMultiKeySelect.tsx | 29 +++++++++------------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/CreateAccountModal.tsx b/src/components/CreateAccountModal.tsx
index 00ff527..6933d71 100644
--- a/src/components/CreateAccountModal.tsx
+++ b/src/components/CreateAccountModal.tsx
@@ -106,6 +106,11 @@ function CreateAccountModal({
     }
   }, [totalAmount, setValue]);
 
+  const close = () => {
+    reset(defaultValues);
+    onClose();
+  };
+
   const submit = handleSubmit(async (data) => {
     const success = await withPassword(
       (password) =>
@@ -286,7 +291,7 @@ function CreateAccountModal({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered size="lg">
+    <Modal isOpen={isOpen} onClose={close} isCentered size="lg">
       <Form control={control}>
         <ModalOverlay />
         <ModalContent>
diff --git a/src/components/FormMultiKeySelect.tsx b/src/components/FormMultiKeySelect.tsx
index 04d1b21..31df608 100644
--- a/src/components/FormMultiKeySelect.tsx
+++ b/src/components/FormMultiKeySelect.tsx
@@ -16,7 +16,6 @@ import { IconPlus, IconTrash } from '@tabler/icons-react';
 
 import { SafeKey } from '../types/wallet';
 import { BUTTON_ICON_SIZE, MAX_MULTISIG_AMOUNT } from '../utils/constants';
-import { noop } from '../utils/func';
 
 import FormKeySelect from './FormKeySelect';
 
@@ -28,7 +27,7 @@ type Props<T extends FieldValues, FieldName extends ArrayPath<T>> = {
   unregister: UseFormUnregister<T>;
   errors: FieldErrors<T>;
   isSubmitted?: boolean;
-  values?: string[];
+  values?: string[] | null;
 };
 
 function FormMultiKeySelect<
@@ -42,7 +41,7 @@ function FormMultiKeySelect<
   unregister,
   errors,
   isSubmitted = false,
-  values = [],
+  values = null,
 }: Props<T, FieldName>): JSX.Element {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -61,22 +60,14 @@ function FormMultiKeySelect<
   );
 
   useEffect(() => {
-    // Have at least one field by default
-    if (!values) {
-      append(keys[0]?.publicKey as FieldArray<T, FieldName>);
+    if (!values || values.length === 0) {
+      append((keys?.[0]?.publicKey || '0x01') as FieldArray<T, FieldName>);
+    } else {
+      // In case there are some values — restore them in the form
+      values.forEach((v) => append(v as FieldArray<T, FieldName>));
     }
-  }, [append, keys, values]);
-
-  useEffect(() => {
-    if (values.length === 0) {
-      return noop;
-    }
-    // In case there are some values — restore them in the form
-    values.forEach((_, idx) => append(idx as FieldArray<T, FieldName>));
-    return () => {
-      values.forEach((_, idx) => remove(idx));
-    };
-  }, [values, append, remove]);
+    return () => remove();
+  }, [values, append, remove, keys]);
 
   const rootError = errors[fieldName]?.message;
   return (
@@ -96,7 +87,7 @@ function FormMultiKeySelect<
           errors={errors}
           isSubmitted={isSubmitted}
           isRequired
-          value={values[index] || keys[index]?.publicKey}
+          value={values?.[index] || keys[index]?.publicKey}
         >
           <IconButton
             icon={<IconTrash size={BUTTON_ICON_SIZE} />}