feat: add address info popover, add form for main settings, more updates

Author: ev-d

assets/icons/error-triangle.svg

@@ -1,5 +1,5 @@
 import { InputProps } from '@lidofinance/lido-ui';
-import { FieldConfig } from 'features/create-vault/types';
+import { FieldConfig, FieldName } from 'features/create-vault/types';
 
 export const CREATE_VAULT_STEPS = 3;
 
@@ -30,7 +30,7 @@ export const steps: Record<number, string> = {
 
 export const getSectionNameByStep = (step: number) => steps[step];
 
-export const createVaultFieldsList: FieldConfig[] = [
+export const createVaultFieldsList: FieldConfig<FieldName>[] = [
   {
     name: 'nodeOperator',
     title: 'Node Operator',
@@ -146,10 +146,20 @@ export const createVaultFieldsList: FieldConfig[] = [
   },
 ];
 
-export type Permission = (typeof createVaultFieldsList)[number]['name'];
+export const mainSettingsFields = [
+  'nodeOperator',
+  'assetRecoverer',
+  'nodeOperatorFeeBP',
+  'curatorFeeBP',
+  'confirmExpiry',
+  'defaultAdmin',
+  'nodeOperatorManager',
+] as const;
 
-export const getCreateVaultFields = (fieldsList: string[]) => {
-  return createVaultFieldsList.filter((field) =>
-    fieldsList.includes(field.name),
+export const getCreateVaultFields = <T extends FieldName>(
+  fieldsList: readonly T[],
+): FieldConfig<T>[] => {
+  return createVaultFieldsList.filter((field): field is FieldConfig<T> =>
+    fieldsList.includes(field.name as T),
   );
 };

features/create-vault/consts.ts

@@ -1,11 +1,21 @@
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import { useCreateVaultFormData } from 'features/create-vault/create-vault-form/create-vault-form-context';
 
 import { Button } from '@lidofinance/lido-ui';
 import { Container } from './styles';
+import { useFormContext } from 'react-hook-form';
 
 export const ConfirmationAction: FC = () => {
   const { step, handleSetStep } = useCreateVaultFormData();
+  const {
+    trigger,
+    formState: { isValid },
+  } = useFormContext();
+
+  useEffect(() => {
+    // validate core form to unlock submit button
+    void trigger();
+  }, [trigger]);
 
   const handleSetPrevStep = () => {
     const prevStep = step - 1;
@@ -22,7 +32,7 @@ export const ConfirmationAction: FC = () => {
       >
         Back
       </Button>
-      <Button type="submit" fullwidth>
+      <Button disabled={!isValid} type="submit" fullwidth>
         Create vault
       </Button>
     </Container>

features/create-vault/create-vault-form/confirmation/confirmation-action/confirmation-action.tsx

@@ -12,6 +12,7 @@ import {
   InputDataType,
   ConfirmationList,
   FieldConfig,
+  FieldName,
 } from 'features/create-vault/types';
 import { getCreateVaultFields } from 'features/create-vault/consts';
 
@@ -23,7 +24,7 @@ const mainSettingsList = [
   'assetRecoverer',
   'defaultAdmin',
   'nodeOperatorManager',
-];
+] as const;
 
 const managerPermissionsList = [
   'curatorFeeSetters',
@@ -38,17 +39,17 @@ const managerPermissionsList = [
   'validatorExitRequesters',
   'validatorWithdrawalTriggerers',
   'disconnecters',
-];
+] as const;
 
-const nodeOperatorPermissionList = ['nodeOperatorFeeClaimers'];
+const nodeOperatorPermissionList = ['nodeOperatorFeeClaimers'] as const;
 
 const mainSettings = getCreateVaultFields(mainSettingsList);
 const vaultManagerPermissions = getCreateVaultFields(managerPermissionsList);
 const nodeOperatorManagerPermissions = getCreateVaultFields(
   nodeOperatorPermissionList,
 );
 
-const lists: Record<ConfirmationList, FieldConfig[]> = {
+const lists: Record<ConfirmationList, FieldConfig<FieldName>[]> = {
   mainSettings,
   vaultManagerPermissions,
   nodeOperatorManagerPermissions,

features/create-vault/create-vault-form/confirmation/confirmation-vault-info/confirmation-vault-info.tsx

@@ -26,6 +26,7 @@ import {
 } from 'features/create-vault/types';
 import {
   createVaultFormValidator,
+  createVaultSchema,
   CreateVaultSchema,
   formatCreateVaultData,
 } from './validation';
@@ -96,7 +97,6 @@ export const CreateFormProvider: FC<PropsWithChildren> = ({ children }) => {
       curatorFeeBP: 5,
       confirmExpiry: 36,
       defaultAdmin: '',
-      confirmMainSettings: false,
       funders: [],
       withdrawers: [],
       minters: [],
@@ -111,7 +111,7 @@ export const CreateFormProvider: FC<PropsWithChildren> = ({ children }) => {
       curatorFeeClaimers: [],
       nodeOperatorFeeClaimers: [],
     },
-    resolver: createVaultFormValidator,
+    resolver: createVaultFormValidator(createVaultSchema),
     mode: 'all',
   });
 

features/create-vault/create-vault-form/create-vault-form-context/create-vault-form-context.tsx

@@ -1,6 +1,5 @@
-import { isAddress, PublicClient } from 'viem';
-import { normalize } from 'viem/ens';
-import { z, ZodError } from 'zod';
+import { isAddress } from 'viem';
+import { z, ZodError, ZodSchema } from 'zod';
 import {
   appendErrors,
   FieldError,
@@ -9,16 +8,24 @@ import {
 } from 'react-hook-form';
 import { VaultFactoryArgs } from 'types';
 import {
+  MainSettingsKeys,
   PermissionKeys,
+  VaultMainSettingsType,
   VaultPermissionsType,
 } from 'features/create-vault/types';
+import { isValidAnyAddress } from 'utils/address-validation';
+import { isValidEns } from '../../../../utils/ens';
 
 const INVALID_ADDRESS_MESSAGE = 'Invalid ethereum address';
 const INVALID_NUMBER_MIN_MESSAGE = 'Must be 0.001 or above';
 const INVALID_NUMBER_MAX_MESSAGE = 'Must be 99 or less';
-const INVALID_NUMBER_DATA_MESSAGE = { message: 'Only number is valid' };
+const INVALID_NUMBER_SUM_MESSAGE =
+  "Sum of Curator's and Node Operator's fees can't be more than 100";
+const INVALID_NUMBER_EXPIRY_MAX_MESSAGE = 'Must be 800 or less';
+const INVALID_NUMBER_DATA_MESSAGE = 'Only number is valid';
+const INVALID_NUMBER_DATA_OBJECT_MESSAGE = { message: 'Only number is valid' };
 
-const validateAddress = (value: string) => isAddress(value);
+const validateAddress = (value: string) => isValidAnyAddress(value);
 
 const addressSchema = z
   .string()
@@ -29,19 +36,18 @@ export const createVaultSchema = z.object({
   nodeOperatorManager: addressSchema,
   assetRecoverer: addressSchema,
   nodeOperatorFeeBP: z
-    .number(INVALID_NUMBER_DATA_MESSAGE)
+    .number(INVALID_NUMBER_DATA_OBJECT_MESSAGE)
     .min(0.001, INVALID_NUMBER_MIN_MESSAGE)
     .max(99, INVALID_NUMBER_MAX_MESSAGE),
   curatorFeeBP: z.coerce
-    .number(INVALID_NUMBER_DATA_MESSAGE)
+    .number(INVALID_NUMBER_DATA_OBJECT_MESSAGE)
     .min(0.001, INVALID_NUMBER_MIN_MESSAGE)
     .max(99, INVALID_NUMBER_MAX_MESSAGE),
   confirmExpiry: z.coerce
-    .number(INVALID_NUMBER_DATA_MESSAGE)
+    .number(INVALID_NUMBER_DATA_OBJECT_MESSAGE)
     .min(1, INVALID_NUMBER_MIN_MESSAGE)
-    .max(800, 'Must be 800 or less'),
+    .max(800, INVALID_NUMBER_EXPIRY_MAX_MESSAGE),
   defaultAdmin: addressSchema,
-  confirmMainSettings: z.boolean(),
   funders: z.array(addressSchema).optional(),
   withdrawers: z.array(addressSchema).optional(),
   minters: z.array(addressSchema).optional(),
@@ -114,49 +120,37 @@ export const parseZodErrorSchema = (
   return errors;
 };
 
-export const createVaultFormValidator = async (values: CreateVaultSchema) => {
-  try {
-    const output = await createVaultSchema.parseAsync(values);
-    return {
-      values: output,
-      errors: {},
-    };
-  } catch (err: unknown) {
-    if (isZodError(err)) {
-      const errors = err.errors;
+export const createVaultFormValidator = <T extends ZodSchema>(
+  schema: T,
+): Resolver<z.infer<T>> => {
+  return async (values: z.infer<T>) => {
+    try {
+      const output = schema.parse(values);
       return {
-        values,
-        errors: parseZodErrorSchema(errors, true),
+        values: output,
+        errors: {},
       };
-    }
-
-    return {
-      values: values,
-      errors: {},
-    };
-  }
-};
+    } catch (err: unknown) {
+      if (isZodError(err)) {
+        const errors = err.errors;
+        return {
+          values,
+          errors: parseZodErrorSchema(errors, true),
+        };
+      }
 
-// TODO: move to shared validators
-export const validateEnsDomain = async (
-  value: string,
-  publicClient: PublicClient,
-) => {
-  try {
-    const ensAddress = await publicClient.getEnsAddress({
-      name: normalize(value),
-    });
-
-    return !!ensAddress;
-  } catch (e) {
-    return false;
-  }
+      return {
+        values: values,
+        errors: {},
+      };
+    }
+  };
 };
 
 export const formatCreateVaultData = (
   values: CreateVaultSchema,
 ): VaultFactoryArgs => {
-  const { confirmMainSettings, nodeOperator, ...payload } = values;
+  const { nodeOperator, ...payload } = values;
   (payload as unknown as VaultFactoryArgs).confirmExpiry = BigInt(
     values.confirmExpiry,
   );
@@ -165,9 +159,8 @@ export const formatCreateVaultData = (
 };
 
 export const validatePermissions = (
-  publicClient: PublicClient,
   getValues: UseFormGetValues<Record<string, any>>,
-): Resolver<VaultPermissionsType, any> => {
+): Resolver<VaultPermissionsType> => {
   return async (values: VaultPermissionsType) => {
     const errors = {} as Record<
       PermissionKeys,
@@ -185,10 +178,7 @@ export const validatePermissions = (
             const { value: currentValue } = field;
 
             if (!isAddress(currentValue)) {
-              const isValid = await validateEnsDomain(
-                currentValue,
-                publicClient,
-              );
+              const isValid = isValidEns(currentValue);
 
               if (!isValid) {
                 errors[key][`${index}`] = {
@@ -218,3 +208,88 @@ export const validatePermissions = (
     };
   };
 };
+
+export const validateMainSettings: Resolver<VaultMainSettingsType> = (
+  values: VaultMainSettingsType,
+) => {
+  const errors = {} as Record<MainSettingsKeys, { message: string }>;
+  const keysList = Object.keys(values) as MainSettingsKeys[];
+
+  keysList.map((key: MainSettingsKeys) => {
+    const payload = values[key];
+    if (typeof payload === 'string') {
+      const isValid = validateAddress(payload);
+      if (!isValid) {
+        errors[key] = {
+          message: INVALID_ADDRESS_MESSAGE,
+        };
+      }
+    }
+
+    if (
+      ['nodeOperatorFeeBP', 'confirmExpiry', 'curatorFeeBP'].includes(key) &&
+      typeof payload !== 'number'
+    ) {
+      errors[key] = {
+        message: INVALID_NUMBER_DATA_MESSAGE,
+      };
+    }
+
+    if (typeof payload === 'number') {
+      if (key === 'nodeOperatorFeeBP') {
+        if (payload < 0.001) {
+          errors[key] = {
+            message: INVALID_NUMBER_DATA_MESSAGE,
+          };
+        } else if (payload > 99) {
+          errors[key] = {
+            message: INVALID_NUMBER_MAX_MESSAGE,
+          };
+        } else if (values.curatorFeeBP + payload > 100) {
+          errors[key] = {
+            message: INVALID_NUMBER_SUM_MESSAGE,
+          };
+        }
+      }
+
+      if (key === 'confirmExpiry') {
+        if (payload < 1) {
+          errors[key] = {
+            message: INVALID_NUMBER_DATA_MESSAGE,
+          };
+        }
+
+        if (payload > 800) {
+          errors[key] = {
+            message: INVALID_NUMBER_EXPIRY_MAX_MESSAGE,
+          };
+        }
+      }
+
+      if (key === 'curatorFeeBP') {
+        if (payload < 0.001) {
+          errors[key] = {
+            message: INVALID_NUMBER_DATA_MESSAGE,
+          };
+        }
+
+        if (payload > 99) {
+          errors[key] = {
+            message: INVALID_NUMBER_MAX_MESSAGE,
+          };
+        }
+
+        if (values.nodeOperatorFeeBP + payload > 100) {
+          errors[key] = {
+            message: INVALID_NUMBER_SUM_MESSAGE,
+          };
+        }
+      }
+    }
+  });
+
+  return {
+    values,
+    errors,
+  };
+};