Merge pull request #40 from lidofinance/fix/create-vault

feat: readonly settings

Author: Jeday

features/settings/main/components/controllers/data-field.tsx

@@ -3,20 +3,15 @@ import { ReadonlyInput } from './readonly-input';
 import { DisplayAddress } from './display-address';
 import { GroupWrapper } from './styles';
 
-import { InputDataType } from 'features/settings/main/types';
-import { VaultInfo } from 'types';
+import type { MainSettingsOverview } from 'features/settings/main/types';
 import { EditProperty } from './edit-property';
 import { Text } from '@lidofinance/lido-ui';
+import {
+  useVaultConfirmingRoles,
+  useVaultPermissions,
+} from 'modules/vaults/hooks/use-vault-permissions';
 
-interface InputResolverProps {
-  name: string;
-  label: string;
-  editLabel: string;
-  title: string;
-  dataType: InputDataType;
-  vaultKey: keyof VaultInfo;
-  actionText?: string;
-}
+type InputResolverProps = MainSettingsOverview;
 
 export const DataField: FC<InputResolverProps> = ({
   label,
@@ -26,17 +21,30 @@ export const DataField: FC<InputResolverProps> = ({
   title,
   actionText = 'Initiate a change',
   vaultKey,
+  canEditRole,
 }) => {
   const isTypeAddress = dataType === 'address';
+  const isConfirmingRoles = canEditRole === 'confirmingRoles';
+  const { hasConfirmingRole } = useVaultConfirmingRoles();
+  const { hasPermission } = useVaultPermissions(
+    isConfirmingRoles ? undefined : canEditRole,
+  );
 
+  const isEditable = hasConfirmingRole || hasPermission;
   return (
     <GroupWrapper>
       <Text size="xs" strong>
         {title}
       </Text>
       {isTypeAddress && <DisplayAddress name={name} vaultKey={vaultKey} />}
       {!isTypeAddress && <ReadonlyInput label={label} vaultKey={vaultKey} />}
-      <EditProperty editLabel={editLabel} name={name} actionText={actionText} />
+      {isEditable && (
+        <EditProperty
+          editLabel={editLabel}
+          name={name}
+          actionText={actionText}
+        />
+      )}
     </GroupWrapper>
   );
 };

features/settings/main/consts.ts

@@ -58,6 +58,7 @@ export const fieldsForRender: MainSettingsOverview[] = [
     editLabel: 'Propose new Node Operator fee, %',
     dataType: 'percent',
     vaultKey: 'nodeOperatorFeeBP',
+    canEditRole: 'confirmingRoles',
   },
   {
     name: 'confirmExpiry',
@@ -66,6 +67,7 @@ export const fieldsForRender: MainSettingsOverview[] = [
     editLabel: 'Propose new Сonfirmation Lifetime, hours',
     dataType: 'time',
     vaultKey: 'confirmExpiry',
+    canEditRole: 'confirmingRoles',
   },
   {
     name: 'defaultAdmin',
@@ -75,6 +77,7 @@ export const fieldsForRender: MainSettingsOverview[] = [
     dataType: 'address',
     actionText: 'Add new address',
     vaultKey: 'defaultAdmins',
+    canEditRole: 'defaultAdmin',
   },
   {
     name: 'nodeOperatorManager',
@@ -84,5 +87,6 @@ export const fieldsForRender: MainSettingsOverview[] = [
     dataType: 'address',
     actionText: 'Add new address',
     vaultKey: 'nodeOperatorManagers',
+    canEditRole: 'nodeOperatorManager',
   },
 ];

features/settings/main/types.ts

@@ -2,6 +2,7 @@ import { Address, Hash, Hex } from 'viem';
 import { editMainSettingsSchema, SubmittingMainFormStepsEnum } from './consts';
 import { z } from 'zod';
 import { VaultInfo } from 'types';
+import { VAULT_ROOT_ROLES } from 'modules/vaults';
 
 export type SubmittingMainFormStep =
   | keyof typeof SubmittingMainFormStepsEnum
@@ -34,6 +35,7 @@ export type MainSettingsOverview = {
   dataType: InputDataType;
   actionText?: string;
   vaultKey: keyof VaultInfo;
+  canEditRole: VAULT_ROOT_ROLES | 'confirmingRoles';
 };
 
 export type TxData = {

features/settings/permissions/components/address-list/address-block/address-block.tsx

@@ -9,11 +9,15 @@ import {
   PermissionKeys,
 } from 'features/settings/permissions/types';
 
-export interface AddressBlockProps {
+export type AddressBlockProps = {
   permission: PermissionKeys;
-}
+  readonly?: boolean;
+};
 
-export const AddressBlock: FC<AddressBlockProps> = ({ permission }) => {
+export const AddressBlock: FC<AddressBlockProps> = ({
+  permission,
+  readonly,
+}) => {
   const { watch } = useFormContext();
   const fields = (watch(permission) ?? []) as FieldSchema[];
 
@@ -25,6 +29,7 @@ export const AddressBlock: FC<AddressBlockProps> = ({ permission }) => {
             key={field.account}
             field={field}
             index={index}
+            readonly={readonly}
             permission={permission}
           />
         );

features/settings/permissions/components/address-list/address-item/address-item.tsx

@@ -16,16 +16,18 @@ import {
 } from 'features/settings/permissions/types';
 import { useFormContext } from 'react-hook-form';
 
-export interface AddressItemProps {
+export type AddressItemProps = {
   index: number;
   field: FieldSchema;
   permission: PermissionKeys;
-}
+  readonly?: boolean;
+};
 
 export const AddressItem: FC<AddressItemProps> = ({
   index,
   field,
   permission,
+  readonly,
 }) => {
   const { setValue } = useFormContext();
   const { account, state, group } = field;
@@ -85,6 +87,7 @@ export const AddressItem: FC<AddressItemProps> = ({
         address={account}
         crossedText={isTextCrossed}
         bgColor={bgColor}
+        readonly={readonly}
         onToggle={handleUpdateFormItem}
         onClick={handleShowPopover}
       />

features/settings/permissions/components/address-list/address-list.tsx

@@ -10,13 +10,14 @@ import { PermissionKeys } from 'features/settings/permissions/types';
 
 export type AddressListProps = {
   permission: PermissionKeys;
+  readonly?: boolean;
 };
 
-export const AddressList: FC<AddressListProps> = ({ permission }) => {
+export const AddressList: FC<AddressListProps> = (props) => {
   return (
     <AddressListWrapper>
-      <AddressBlock permission={permission} />
-      <InputBlock permission={permission} />
+      <AddressBlock {...props} />
+      <InputBlock {...props} />
     </AddressListWrapper>
   );
 };

features/settings/permissions/components/address-list/input-block/input-block.tsx

@@ -13,11 +13,12 @@ import type {
   PermissionKeys,
 } from 'features/settings/permissions/types';
 
-export interface InputBlockProps {
+export type InputBlockProps = {
   permission: PermissionKeys;
-}
+  readonly?: boolean;
+};
 
-export const InputBlock: FC<InputBlockProps> = ({ permission }) => {
+export const InputBlock: FC<InputBlockProps> = ({ permission, readonly }) => {
   const { getValues } = useFormContext();
 
   const {
@@ -54,16 +55,18 @@ export const InputBlock: FC<InputBlockProps> = ({ permission }) => {
         />
       ))}
 
-      <AddAddress
-        color="primary"
-        icon={<Plus />}
-        size="md"
-        variant="ghost"
-        type="button"
-        onClick={() => append({ value: '' })}
-      >
-        Add new address
-      </AddAddress>
+      {!readonly && (
+        <AddAddress
+          color="primary"
+          icon={<Plus />}
+          size="md"
+          variant="ghost"
+          type="button"
+          onClick={() => append({ value: '' })}
+        >
+          Add new address
+        </AddAddress>
+      )}
     </InputBlockWrapper>
   );
 };

features/settings/permissions/permissions.tsx

@@ -16,47 +16,60 @@ import { PermissionsDataProvider, PermissionsFormProvider } from './contexts';
 import {
   VAULT_MANAGER_PERMISSIONS_LIST,
   NO_MANAGER_PERMISSION_LIST,
+  VAULT_ROOT_ROLES,
 } from 'modules/vaults';
+import { useVaultPermissions } from 'modules/vaults/hooks/use-vault-permissions';
 
-interface RenderPermissions {
+type PermissionSectionEntry = {
   permissionsTitle: string;
   payload: PermissionsRoles[];
-}
+  canEditRole: VAULT_ROOT_ROLES;
+};
 
-const renderPermissionsList: RenderPermissions[] = [
+const renderPermissionsList: PermissionSectionEntry[] = [
   {
     permissionsTitle: 'Vault Manager Permissions',
+    canEditRole: 'defaultAdmin',
     payload: VAULT_MANAGER_PERMISSIONS_LIST,
   },
   {
     permissionsTitle: 'Node Operator Manager Permissions',
+    canEditRole: 'nodeOperatorManager',
     payload: NO_MANAGER_PERMISSION_LIST,
   },
 ];
 
+const PermissionsSection = (props: PermissionSectionEntry) => {
+  const { hasPermission } = useVaultPermissions(props.canEditRole);
+
+  return (
+    <PermissionContainer>
+      <PermissionGroupTitle>{props.permissionsTitle}</PermissionGroupTitle>
+      <PermissionBlock>
+        {props.payload.map(({ role, title, tooltip }) => {
+          return (
+            <PermissionRoleWrapper key={role}>
+              <RoleDescription
+                permission={role}
+                description={title}
+                tooltip={tooltip}
+              />
+              <AddressList readonly={!hasPermission} permission={role} />
+            </PermissionRoleWrapper>
+          );
+        })}
+      </PermissionBlock>
+    </PermissionContainer>
+  );
+};
+
 export const PermissionsSettings = () => {
   return (
     <PermissionsDataProvider>
       <PermissionsFormProvider>
         <SectionContainer>
-          {renderPermissionsList.map(({ permissionsTitle, payload }) => (
-            <PermissionContainer key={permissionsTitle}>
-              <PermissionGroupTitle>{permissionsTitle}</PermissionGroupTitle>
-              <PermissionBlock>
-                {payload.map(({ role, title, tooltip }) => {
-                  return (
-                    <PermissionRoleWrapper key={role}>
-                      <RoleDescription
-                        permission={role}
-                        description={title}
-                        tooltip={tooltip}
-                      />
-                      <AddressList permission={role} />
-                    </PermissionRoleWrapper>
-                  );
-                })}
-              </PermissionBlock>
-            </PermissionContainer>
+          {renderPermissionsList.map((section) => (
+            <PermissionsSection key={section.permissionsTitle} {...section} />
           ))}
           <PermissionsAction />
         </SectionContainer>

modules/vaults/consts/roles.ts

@@ -15,6 +15,8 @@ export const VAULTS_ROOT_ROLES_MAP = {
   ),
 } as const;
 
+export type VAULT_ROOT_ROLES = keyof typeof VAULTS_ROOT_ROLES_MAP;
+
 export const VAULTS_OWNER_ROLES_MAP = {
   supplier: toRoleHash('vaults.Permissions.Fund'),
   withdrawer: toRoleHash('vaults.Permissions.Withdraw'),
@@ -47,13 +49,17 @@ export const VAULTS_OWNER_ROLES_MAP = {
   assetRecoverer: toRoleHash('vaults.Dashboard.RecoverAssets'),
 } as const;
 
+export type VAULT_OWNER_ROLES = keyof typeof VAULTS_OWNER_ROLES_MAP;
+
 export const VAULTS_NO_ROLES_MAP = {
   nodeOperatorFeeClaimer: toRoleHash('vaults.NodeOperatorFee.FeeClaimRole'),
   nodeOperatorRewardsAdjuster: toRoleHash(
     'vaults.NodeOperatorFee.RewardsAdjustRole',
   ),
 } as const;
 
+export type VAULTS_NO_ROLES = keyof typeof VAULTS_NO_ROLES_MAP;
+
 export const VAULT_MANAGER_PERMISSIONS_LIST: PermissionEntry<
   typeof VAULTS_OWNER_ROLES_MAP
 >[] = [

modules/vaults/hooks/use-vault-permissions.ts

@@ -7,11 +7,11 @@ import type { Address, Hash } from 'viem';
 
 export type DashboardRoles = keyof typeof VAULTS_ALL_ROLES_MAP;
 
-export const useVaultPermissions = (role: DashboardRoles) => {
+export const useVaultPermissions = (role?: DashboardRoles) => {
   const { activeVault } = useVaultInfo();
   const { address } = useAccount();
 
-  const roleHash = VAULTS_ALL_ROLES_MAP[role];
+  const roleHash = role && VAULTS_ALL_ROLES_MAP[role];
 
   const query = useReadContract({
     abi: dashboardAbi,
@@ -29,3 +29,19 @@ export const useVaultPermissions = (role: DashboardRoles) => {
     ...query,
   };
 };
+
+export const useVaultConfirmingRoles = () => {
+  // TODO: multicall/useReadContracts
+  const roleAdmin = useVaultPermissions('defaultAdmin');
+  const roleNOM = useVaultPermissions('nodeOperatorManager');
+
+  const hasAtLeastOne = roleAdmin.hasPermission || roleNOM.hasPermission;
+  return {
+    hasConfirmingRole: hasAtLeastOne,
+    hasAdmin: roleAdmin.hasPermission,
+    hasNodeOperatporManager: roleNOM.hasPermission,
+    hasBothConfirmingRoles: roleAdmin.hasPermission && roleNOM.hasPermission,
+    isLoading: !hasAtLeastOne && (roleAdmin.isLoading || roleNOM.isLoading),
+    error: roleAdmin.error || roleNOM.error,
+  };
+};