chore: fixes

Author: Jeday

features/create-vault/consts.ts

@@ -7,7 +7,13 @@ export enum CREATE_VAULT_FORM_STEPS {
 
 const steps = ['Main settings', 'Verify new vaults settings'];
 
-export const getSectionNameByStep = (step: number) => steps[step - 1];
+export const SECTION_NAMES_BY_STEP = steps.reduce(
+  (acc, step, index) => ({
+    ...acc,
+    [index + 1]: step,
+  }),
+  {} as Record<number, string>,
+);
 
 export const CREATE_VAULT_STEPS = steps.length;
 

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

@@ -8,7 +8,7 @@ import { CreateVaultSchema } from 'features/create-vault/types';
 import {
   CREATE_VAULT_FORM_STEPS,
   CREATE_VAULT_STEPS,
-  getSectionNameByStep,
+  SECTION_NAMES_BY_STEP,
 } from 'features/create-vault/consts';
 
 import { createVaultSchema } from './validation';
@@ -22,22 +22,19 @@ import { FormTitle, FormBlock, FormSubtitle } from './styles';
 
 import type { Address } from 'viem';
 
-const defaultValues: CreateVaultSchema = {
-  nodeOperator: '' as Address,
-  vaultManager: [{ value: '' as Address }],
-  nodeOperatorManager: '' as Address,
-  nodeOperatorFeeBP: '' as unknown as number,
-  confirmExpiry: 36,
-  acceptTerms: false,
-  roles: {},
-  step: CREATE_VAULT_FORM_STEPS.main,
-};
-
 export const CreateVaultForm: FC<PropsWithChildren> = () => {
   const formObject = useForm({
-    defaultValues,
+    defaultValues: {
+      nodeOperator: '' as Address,
+      vaultManager: [{ value: '' as Address }],
+      nodeOperatorManager: '' as Address,
+      nodeOperatorFeeBP: undefined,
+      confirmExpiry: 36,
+      acceptTerms: false,
+      roles: {},
+      step: CREATE_VAULT_FORM_STEPS.main,
+    },
     mode: 'onTouched',
-
     resolver: zodResolver(createVaultSchema, { async: true }),
   });
 
@@ -64,7 +61,7 @@ export const CreateVaultForm: FC<PropsWithChildren> = () => {
               <FormSubtitle>
                 Step {step} of {CREATE_VAULT_STEPS}
               </FormSubtitle>
-              <FormTitle>{getSectionNameByStep(step)}</FormTitle>
+              <FormTitle> {SECTION_NAMES_BY_STEP[step]}</FormTitle>
               <MainSettings isShown={step === CREATE_VAULT_FORM_STEPS.main} />
               <Confirmation
                 isShown={step === CREATE_VAULT_FORM_STEPS.confirm}

features/create-vault/create-vault-form/form-controllers/address-array-input.tsx

@@ -22,6 +22,7 @@ export const AddressArrayInput: FC<AddressArrayProps> = ({ name, label }) => {
     'addresses'
   >({ name: name as 'addresses' });
   const allowDelete = fields.length > 1;
+
   return (
     <AddressList>
       {fields.map((field, index) => {

features/create-vault/create-vault-form/form-controllers/address-input-base.tsx

@@ -16,19 +16,20 @@ type AddressInputProps = Omit<UseFormRegisterReturn, 'ref'> &
   React.ComponentProps<typeof Input>;
 
 export const AddressInputBase = forwardRef<HTMLInputElement, AddressInputProps>(
-  (props, ref) => {
+  ({ onFocus, onBlur, ...rest }, ref) => {
+    const name = rest.name as 'value';
+
     const [inFocus, setInFocus] = useState(false);
-    const name = props.name as 'value';
     const { getFieldState } = useFormContext();
 
-    const { invalid, isDirty, isValidating, error } = getFieldState(props.name);
+    const { invalid, isDirty, isValidating, error } = getFieldState(name);
 
     const value = useWatch<{ value: Address }>({ name });
 
     const decorator = (() => {
       if (isAddress(value)) {
         if (invalid) return <ErrorTriangle />;
-        if (isValidating) return <Loader size="small" />;
+        if (invalid && isValidating) return <Loader size="small" />;
         if (!isDirty) return null;
 
         return <Identicon address={value} />;
@@ -39,20 +40,20 @@ export const AddressInputBase = forwardRef<HTMLInputElement, AddressInputProps>(
     return (
       <AddressInputWrapper>
         <Input
-          {...props}
-          ref={ref}
           leftDecorator={decorator}
           type="text"
           fullwidth
+          ref={ref}
           onFocus={(e) => {
             setInFocus(true);
-            props.onFocus?.(e);
+            onFocus?.(e);
           }}
           onBlur={(e) => {
-            void props.onBlur?.(e);
             setInFocus(false);
+            void onBlur?.(e);
           }}
           error={inFocus ? error?.message : Boolean(error?.message)}
+          {...rest}
         />
         {!invalid && value && (
           <EtherScanLink>

…form/form-controllers/input-resolver.tsx …/form-controllers/create-vault-input.tsxfeatures/create-vault/create-vault-form/form-controllers/input-resolver.tsx renamed to features/create-vault/create-vault-form/form-controllers/create-vault-input.tsx features/create-vault/create-vault-form/form-controllers/input-resolver.tsx renamed to features/create-vault/create-vault-form/form-controllers/create-vault-input.tsx

@@ -19,7 +19,7 @@ const getInput = (dataType: GeneralInputProps['dataType']) => {
   }
 };
 
-export const InputResolver: FC<GeneralInputProps> = (props) => {
+export const CreateVaultInput: FC<GeneralInputProps> = (props) => {
   const { dataType, title, notes, hint } = props;
 
   const Input = getInput(dataType);

features/create-vault/create-vault-form/form-controllers/index.ts

@@ -1 +1 @@
-export { InputResolver } from './input-resolver';
+export { CreateVaultInput } from './create-vault-input';

features/create-vault/create-vault-form/form-controllers/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { ButtonIcon, Question } from '@lidofinance/lido-ui';
 
-/// InputResolver
+/// CreateVaultInput
 
 export const InputContainer = styled.div`
   display: flex;

…nfirmation-data-item/confirm-address.tsx …on/confirmation-data/confirm-address.tsxfeatures/create-vault/create-vault-form/stages/confirmation/confirmation-data/confirmation-data-item/confirm-address.tsx renamed to features/create-vault/create-vault-form/stages/confirmation/confirmation-data/confirm-address.tsx features/create-vault/create-vault-form/stages/confirmation/confirmation-data/confirmation-data-item/confirm-address.tsx renamed to features/create-vault/create-vault-form/stages/confirmation/confirmation-data/confirm-address.tsx

@@ -6,6 +6,7 @@ import { ConfirmDataItemProps } from './types';
 import invariant from 'tiny-invariant';
 
 export const ConfirmPercent: FC<ConfirmDataItemProps> = ({ payload }) => {
+  if (!payload) return null;
   invariant(
     typeof payload === 'number' || typeof payload === 'string',
     'Payload must be a string | number',