tweak: autoselect proper keys on adding more keys for MultiSig / Vesting

spacemeshos · Oct 9, 2024 · a1b85ca · a1b85ca
1 parent 5cd6294
commit a1b85ca
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/components/CreateAccountModal.tsx b/src/components/CreateAccountModal.tsx
@@ -89,6 +89,10 @@ function CreateAccountModal({
     () => findUnusedKey(keys, usedPublicKeys),
     [keys, usedPublicKeys]
   );
+  const unusedKeys = useMemo(
+    () => keys.filter((key) => !usedPublicKeys.has(key.publicKey)),
+    [keys, usedPublicKeys]
+  );
 
   const isKeyUsed = (() => {
     if (selectedTemplate === StdPublicKeys.SingleSig) {
@@ -300,6 +304,7 @@ function CreateAccountModal({
               errors={errors}
               isSubmitted={isSubmitted}
               hasCreateOption
+              autoSelectKeys={unusedKeys}
             />
           </>
         );
@@ -343,6 +348,7 @@ function CreateAccountModal({
               isSubmitted={isSubmitted}
               values={multiKeyValues}
               hasCreateOption
+              autoSelectKeys={unusedKeys}
             />
           </>
         );

diff --git a/src/components/FormMultiKeySelect.tsx b/src/components/FormMultiKeySelect.tsx
@@ -33,8 +33,8 @@ type Props<T extends FieldValues, FieldName extends ArrayPath<T>> = {
   isSubmitted?: boolean;
   values?: string[] | null;
   hasCreateOption?: boolean;
+  autoSelectKeys?: null | SafeKey[];
 };
-
 function FormMultiKeySelect<
   T extends FieldValues,
   FieldName extends ArrayPath<T>
@@ -48,6 +48,7 @@ function FormMultiKeySelect<
   isSubmitted = false,
   values = null,
   hasCreateOption = false,
+  autoSelectKeys = null,
 }: Props<T, FieldName>): JSX.Element {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -56,13 +57,12 @@ function FormMultiKeySelect<
   const addEmptyField = useCallback(
     () =>
       append(
-        (keys[fields.length]?.publicKey ||
-          `0x${String(fields.length).padStart(2, '0')}`) as FieldArray<
+        `0x${String(fields.length).padStart(2, '0')}` as FieldArray<
           T,
           FieldName
         >
       ),
-    [append, fields.length, keys]
+    [append, fields.length]
   );
 
   useEffect(() => {
@@ -76,8 +76,17 @@ function FormMultiKeySelect<
   }, [values, append, remove, keys]);
 
   const getSelectValue = useCallback(
-    (index: number) => values?.[index] || keys[index]?.publicKey,
-    [keys, values]
+    (index: number) => {
+      const nextRecommendedKey = autoSelectKeys
+        ? autoSelectKeys[index]?.publicKey
+        : keys[index]?.publicKey;
+      const defaultKey = hasCreateOption
+        ? CREATE_NEW_KEY_LITERAL
+        : `0x${String(index).padStart(2, '0')}`;
+      const nextKey = nextRecommendedKey ?? defaultKey;
+      return values?.[index] || nextKey;
+    },
+    [autoSelectKeys, hasCreateOption, keys, values]
   );
 
   const rootError = errors[fieldName]?.message;