fix(wallet): not possible anymore to choose an existing profilename d…

…uring recovery (#2899)

.changeset/tidy-cougars-bathe.md

@@ -0,0 +1,5 @@
+---
+'@kadena/dev-wallet': patch
+---
+
+not possible anymore to choose an existing profilename during recovery

packages/apps/dev-wallet/src/pages/wallet-recovery/recover-from-mnemonic/recover-from-mnemonic.tsx

@@ -57,12 +57,10 @@ export function RecoverFromMnemonic() {
     control,
     formState: { isValid, errors },
   } = useForm<Inputs>({
+    mode: 'onChange',
     defaultValues: {
       mnemonic: '',
-      profileName:
-        profileList.length === 0
-          ? 'default'
-          : `profile-${profileList.length + 1}`,
+      profileName: '',
       accentColor:
         config.colorList[profileList.length % config.colorList.length],
       password: '',
@@ -295,13 +293,39 @@ export function RecoverFromMnemonic() {
                   )}
                 </Stack>
 
-                <TextField
-                  label="Profile name"
-                  id="name"
-                  type="text"
-                  defaultValue={profileName}
-                  value={profileName}
-                  {...register('profileName')}
+                <Controller
+                  control={control}
+                  name="profileName"
+                  rules={{
+                    required: {
+                      value: true,
+                      message: 'This field is required',
+                    },
+                    minLength: { value: 6, message: 'Minimum 6 symbols' },
+                    maxLength: { value: 30, message: 'Maximym 30 symbols' },
+                    validate: {
+                      required: (value) => {
+                        const existingProfile = profileList.find(
+                          (profile) => profile.name === value,
+                        );
+                        if (existingProfile)
+                          return `The profile name ${value} already exists. Please use another name.`;
+                        return true;
+                      },
+                    },
+                  }}
+                  render={({ field }) => (
+                    <TextField
+                      label="Profile name"
+                      id="name"
+                      type="text"
+                      defaultValue={profileName}
+                      value={field.value}
+                      {...register('profileName')}
+                      isInvalid={!!errors.profileName}
+                      errorMessage={errors.profileName?.message}
+                    />
+                  )}
                 />
               </Stack>
               <Stack flexDirection={'column'} gap={'lg'}>