Merge pull request #32 from lidofinance/feature/si-1877-permission-form-restore-icon

ev-d · web-flow · commit 27653528cb41 · 2025-04-24T17:57:26.000+03:00
diff --git a/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-address.tsx b/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-address.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { Address } from 'viem';
 
 import { AddressBadge } from 'shared/components';
 import { AddressList } from './styles';
@@ -10,8 +9,14 @@ export const ConfirmAddress: FC<ConfirmDataItemProps> = ({ payload }) => {
   if (Array.isArray(payload)) {
     return (
       <AddressList>
-        {(payload as Address[]).map((address) => {
-          return <AddressBadge key={address} address={address} symbols={6} />;
+        {payload.map((field) => {
+          return (
+            <AddressBadge
+              key={field.account}
+              address={field.account}
+              symbols={6}
+            />
+          );
         })}
       </AddressList>
     );
diff --git a/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-number.tsx b/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-number.tsx
@@ -3,7 +3,12 @@ import { FC } from 'react';
 import { TextBold } from './styles';
 
 import { ConfirmDataItemProps } from './types';
+import invariant from 'tiny-invariant';
 
 export const ConfirmNumber: FC<ConfirmDataItemProps> = ({ payload }) => {
+  invariant(
+    typeof payload === 'string',
+    '[ConfirmNumber] payload should be a string',
+  );
   return <TextBold>{payload}</TextBold>;
 };
diff --git a/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-percent.tsx b/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-percent.tsx
@@ -3,7 +3,12 @@ import { FC } from 'react';
 import { TextBold } from './styles';
 
 import { ConfirmDataItemProps } from './types';
+import invariant from 'tiny-invariant';
 
 export const ConfirmPercent: FC<ConfirmDataItemProps> = ({ payload }) => {
+  invariant(
+    typeof payload === 'string',
+    '[ConfirmPercent] payload should be a string',
+  );
   return <TextBold>{payload}%</TextBold>;
 };
diff --git a/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-time.tsx b/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/confirm-time.tsx
@@ -3,7 +3,12 @@ import { FC } from 'react';
 import { TextBold } from './styles';
 
 import { ConfirmDataItemProps } from './types';
+import invariant from 'tiny-invariant';
 
 export const ConfirmTime: FC<ConfirmDataItemProps> = ({ payload }) => {
+  invariant(
+    typeof payload === 'string',
+    '[ConfirmTime] payload should be a string',
+  );
   return <TextBold>{payload} hours</TextBold>;
 };
diff --git a/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/types.ts b/features/create-vault/create-vault-form/confirmation/confirmation-data/confirmation-data-item/types.ts
@@ -1,3 +1,5 @@
+import { PermissionField } from 'features/create-vault/types';
+
 export interface ConfirmDataItemProps {
-  payload: string | string[];
+  payload: string | PermissionField[];
 }
diff --git a/features/create-vault/create-vault-form/create-vault-form-context/create-vault-form-context.tsx b/features/create-vault/create-vault-form/create-vault-form-context/create-vault-form-context.tsx
@@ -35,6 +35,7 @@ import {
 import { SubmitStepEnum } from 'features/create-vault/types';
 import { formatCreateVaultData } from 'features/create-vault/utils/format-data';
 import { simulateCreateVault } from 'modules/vaults/contracts/vault-factory';
+import { Address } from 'viem';
 
 const CreateVaultDataContext =
   createContext<CreateVaultDataContextValue | null>(null);
@@ -85,11 +86,11 @@ export const CreateFormProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const formObject = useForm<CreateVaultSchema>({
     defaultValues: {
-      nodeOperator: '',
-      nodeOperatorManager: '',
+      nodeOperator: '' as Address,
+      nodeOperatorManager: '' as Address,
       nodeOperatorFeeBP: 5,
       confirmExpiry: 36,
-      defaultAdmin: '',
+      defaultAdmin: '' as Address,
       roles: {},
     },
     resolver: validateFormWithZod(createVaultSchema),
@@ -111,8 +112,8 @@ export const CreateFormProvider: FC<PropsWithChildren> = ({ children }) => {
 
       setSubmitStep({ step: SubmitStepEnum.confirming });
       try {
-        const response = await callCreateVault(payload);
-        setSubmitStep({ step: SubmitStepEnum.success, tx: response });
+        const { address, tx } = await callCreateVault(payload);
+        setSubmitStep({ step: SubmitStepEnum.success, tx, address });
       } catch (err) {
         console.error('[CreateFormProvider] Error sending create vault', err);
 
diff --git a/features/create-vault/create-vault-form/create-vault-form-context/validation.ts b/features/create-vault/create-vault-form/create-vault-form-context/validation.ts
@@ -32,7 +32,13 @@ const validateAddress = (value: string) => isValidAnyAddress(value);
 
 const addressSchema = z
   .string()
-  .refine(validateAddress, { message: INVALID_ADDRESS_MESSAGE });
+  .refine(validateAddress, { message: INVALID_ADDRESS_MESSAGE })
+  .transform((value) => value as Address);
+
+const permissionSchema = z.object({
+  state: z.union([z.literal('restore'), z.literal('grant')]),
+  account: addressSchema,
+});
 
 const roleKeys = [
   ...Object.keys(VAULTS_OWNER_ROLES_MAP),
@@ -53,9 +59,11 @@ export const createVaultSchema = z.object({
   defaultAdmin: addressSchema,
   roles: z.object(
     Object.fromEntries(
-      roleKeys.map((key) => [key, z.array(addressSchema).optional()]),
+      roleKeys.map((key) => [key, z.array(permissionSchema).optional()]),
     ) as unknown as {
-      [key in PermissionKeys]: z.ZodOptional<z.ZodArray<z.ZodString>>;
+      [key in PermissionKeys]: z.ZodOptional<
+        z.ZodArray<typeof permissionSchema>
+      >;
     },
   ),
 });
@@ -68,24 +76,28 @@ export const formatCreateVaultData = (
   values: CreateVaultSchema,
 ): VaultFactoryArgs => {
   return {
-    defaultAdmin: values.defaultAdmin as Address,
-    nodeOperator: values.nodeOperator as Address,
-    nodeOperatorManager: values.nodeOperatorManager as Address,
+    defaultAdmin: values.defaultAdmin,
+    nodeOperator: values.nodeOperator,
+    nodeOperatorManager: values.nodeOperatorManager,
     nodeOperatorFeeBP: BigInt(values.nodeOperatorFeeBP),
     confirmExpiry: BigInt(values.confirmExpiry * 60 * 60),
 
-    roles: Object.entries(values.roles).flatMap(([roleName, roleAddresses]) => {
-      const roleHash = JOINT_ROLE_MAP[roleName as PermissionKeys];
-      invariant(
-        roleHash,
-        `[formatCreateVaultData] no role hash found for ${roleName}`,
-      );
-      if (!roleAddresses) return [];
-      return roleAddresses.map((address) => ({
-        role: roleHash,
-        account: address as Address,
-      }));
-    }),
+    roles: Object.entries(values.roles)
+      .filter(([_, roleData]) => {
+        return roleData.filter((item) => item.state === 'grant');
+      })
+      .flatMap(([roleName, roleData]) => {
+        const roleHash = JOINT_ROLE_MAP[roleName as PermissionKeys];
+        invariant(
+          roleHash,
+          `[formatCreateVaultData] no role hash found for ${roleName}`,
+        );
+        if (!roleData) return [];
+        return roleData.map((item) => ({
+          role: roleHash,
+          account: item.account,
+        }));
+      }),
   };
 };
 
diff --git a/features/create-vault/create-vault-form/permissions/address-list/address-block/address-block.tsx b/features/create-vault/create-vault-form/permissions/address-list/address-block/address-block.tsx
@@ -1,39 +1,31 @@
-import { FC, useCallback } from 'react';
-import { useFormContext, useFieldArray } from 'react-hook-form';
+import { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
 
 import { AddressItem } from 'features/create-vault/create-vault-form/permissions/address-list/address-item';
 import { Wrapper } from './styles';
-import { FieldName, PermissionKeys } from 'features/create-vault/types';
+import { PermissionField, PermissionKeys } from 'features/create-vault/types';
 
 export interface AddressBlockProps {
   permission: PermissionKeys;
 }
 
 export const AddressBlock: FC<AddressBlockProps> = ({ permission }) => {
-  const { control, watch } = useFormContext();
-  const { remove } = useFieldArray({ control, name: permission });
-  const fieldsWatch = watch(`roles.${permission}`) as FieldName[];
-
-  const handleRemove = useCallback(
-    (index: number) => {
-      remove(index);
-    },
-    [remove],
-  );
+  const { watch } = useFormContext();
+  const fieldsWatch = watch(`roles.${permission}`) as PermissionField[];
 
   if (!fieldsWatch?.length) {
     return null;
   }
 
   return (
     <Wrapper>
-      {fieldsWatch.map((value, index) => {
+      {fieldsWatch.map((field, index) => {
         return (
           <AddressItem
-            key={value}
-            address={value}
+            key={field.account}
             index={index}
-            remove={handleRemove}
+            permission={permission}
+            field={field}
           />
         );
       })}
diff --git a/features/create-vault/create-vault-form/permissions/address-list/address-item/address-item.tsx b/features/create-vault/create-vault-form/permissions/address-list/address-item/address-item.tsx
@@ -1,5 +1,4 @@
-import { FC, useState, useRef } from 'react';
-import { Address } from 'viem';
+import { FC, useState, useRef, useMemo, MouseEvent } from 'react';
 
 import { Copy, External, ToastSuccess } from '@lidofinance/lido-ui';
 import {
@@ -16,28 +15,57 @@ import {
 } from './styles';
 
 import { truncateAddress } from 'utils/truncate-address';
+import { useFormContext } from 'react-hook-form';
+import { PermissionField, PermissionKeys } from 'features/create-vault/types';
 
 export interface AddressItemProps {
   index: number;
-  address: string;
-  remove: (index: number) => void;
+  permission: PermissionKeys;
+  field: PermissionField;
 }
 
 export const AddressItem: FC<AddressItemProps> = ({
   index,
-  address,
-  remove,
+  permission,
+  field,
 }) => {
+  const { setValue } = useFormContext();
+  const { account, state } = field;
   const [showPopover, showPopoverVisibility] = useState(false);
   const badgeRef = useRef<HTMLDivElement>(null);
 
+  const isTextCrossed = state === 'restore';
+  const bgColor = useMemo(() => {
+    if (isTextCrossed) return 'error';
+    if (state === 'grant') return 'success';
+    return 'default';
+  }, [isTextCrossed, state]);
+
+  const handleUpdateFormItem = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const newState = state === 'grant' ? 'restore' : 'grant';
+
+    setValue(
+      `roles.${permission}.${index}`,
+      {
+        account,
+        state: newState,
+      },
+      { shouldDirty: true },
+    );
+  };
+
   const handleShowPopover = () => {
     showPopoverVisibility(true);
   };
 
   const handleCopyLink = () => {
-    void navigator.clipboard.writeText(address);
-    ToastSuccess(`Address ${truncateAddress({ address })} have been copied`);
+    void navigator.clipboard.writeText(account);
+    ToastSuccess(
+      `Address ${truncateAddress({ address: account })} have been copied`,
+    );
   };
 
   const handleClosePopover = () => {
@@ -48,12 +76,11 @@ export const AddressItem: FC<AddressItemProps> = ({
     <>
       <AddressBadge
         ref={badgeRef}
-        address={address}
-        onRemove={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          remove(index);
-        }}
+        crossedText={isTextCrossed}
+        bgColor={bgColor}
+        address={account}
+        isActive={showPopover}
+        onToggle={handleUpdateFormItem}
         onClick={handleShowPopover}
       />
       {!!badgeRef?.current && (
@@ -68,15 +95,15 @@ export const AddressItem: FC<AddressItemProps> = ({
           open={showPopover}
         >
           <PopoverContent>
-            <AddressBadge address={address} symbols={21} />
+            <AddressBadge address={account} symbols={21} />
             <ActionGroup>
               <ActionWrapper>
                 <Copy fill="var(--lido-color-primary)" />
                 <ButtonLink onClick={handleCopyLink}>Copy address</ButtonLink>
               </ActionWrapper>
               <ActionWrapper>
                 <External fill="var(--lido-color-primary)" />
-                <AddressLinkEtherscan address={address as Address} />
+                <AddressLinkEtherscan address={account} />
               </ActionWrapper>
             </ActionGroup>
           </PopoverContent>
diff --git a/features/create-vault/create-vault-form/permissions/address-list/input-block/input-item/input-item.tsx b/features/create-vault/create-vault-form/permissions/address-list/input-block/input-item/input-item.tsx
@@ -57,7 +57,14 @@ export const InputItem: FC<InputItemProps> = ({
       const output = await trigger(inputKey);
       if (output) {
         const value = (e.currentTarget || (e.target as HTMLInputElement)).value;
-        setValue(`roles.${permission}.${values?.length ?? 0}`, value);
+        setValue(
+          `roles.${permission}.${values?.length ?? 0}`,
+          {
+            account: value,
+            state: 'grant',
+          },
+          { shouldDirty: true },
+        );
         remove(index);
       }
     }
diff --git a/features/create-vault/create-vault-form/submit-modal/submit-modal.tsx b/features/create-vault/create-vault-form/submit-modal/submit-modal.tsx
@@ -18,6 +18,7 @@ import { ButtonLink, TxLinkEtherscan } from 'shared/components';
 import { Content } from './styles';
 
 import { SubmitStepEnum, SubmitStep } from 'features/create-vault/types';
+import { AppPaths } from '../../../../consts/urls';
 
 const getIconComponent = (step: SubmitStep) => {
   if (step === SubmitStepEnum.success)
@@ -58,7 +59,7 @@ export const SubmitModal: FC<ModalProps> = () => {
 
   const handleNavigateToVault = () => {
     // TODO: add for responsive buttons onClick = () => Promise and handle promise there
-    void router.push(`/${address}`);
+    void router.push(`/${address}/${AppPaths.overview}`);
   };
 
   return (
diff --git a/features/create-vault/types.ts b/features/create-vault/types.ts
@@ -91,3 +91,8 @@ export type CreateVaultDataContextValue = {
 
 export type CreateVaultStep =
   (typeof CREATE_VAULT_FORM_STEPS)[keyof typeof CREATE_VAULT_FORM_STEPS];
+
+export type PermissionField = {
+  account: Address;
+  state: 'grant' | 'restore';
+};
diff --git a/features/create-vault/utils/format-data.ts b/features/create-vault/utils/format-data.ts
diff --git a/features/overview/contexts/vault-overview.tsx b/features/overview/contexts/vault-overview.tsx
diff --git a/features/settings/permissions/components/address-list/address-item/address-item.tsx b/features/settings/permissions/components/address-list/address-item/address-item.tsx
diff --git a/modules/vaults/hooks/use-create-vault-with-dashboard.ts b/modules/vaults/hooks/use-create-vault-with-dashboard.ts
diff --git a/shared/components/address-badge/address-badge.tsx b/shared/components/address-badge/address-badge.tsx
diff --git a/shared/components/address-badge/styles.ts b/shared/components/address-badge/styles.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import { PermissionField } from 'features/create-vault/types';`
	`2`	`+`
`1`	`3`	`export interface ConfirmDataItemProps {`
`2`		`- payload: string \| string[];`
	`4`	`+ payload: string \| PermissionField[];`
`3`	`5`	`}`