Merge pull request #45 from lidofinance/feature/settings-remove-admins

Add opportunity to remove admins in settings

Author: ev-d

features/overview/contexts/vault-provider.tsx

@@ -18,6 +18,7 @@ type VaultContextType = {
   isLoadingVault?: boolean;
   error: Error | null;
   refetch: () => void;
+  isRefetching: boolean;
 };
 
 const VaultContext = createContext<VaultContextType | null>(null);
@@ -46,13 +47,15 @@ export const VaultProvider: FC<PropsWithChildren> = ({ children }) => {
       isLoadingVault: query.isPending,
       error: query.error,
       refetch: query.refetch,
+      isRefetching: query.isRefetching,
     }),
     [
       sanitizedVaultAddress,
       query.data,
       query.isPending,
       query.error,
       query.refetch,
+      query.isRefetching,
     ],
   );
 

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

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { ReadonlyInput } from './readonly-input';
-import { DisplayAddress } from './display-address';
 import { GroupWrapper } from './styles';
 
 import type { MainSettingsOverview } from 'features/settings/main/types';
@@ -17,13 +16,11 @@ export const DataField: FC<InputResolverProps> = ({
   label,
   editLabel,
   name,
-  dataType,
   title,
   actionText = 'Initiate a change',
   vaultKey,
   canEditRole,
 }) => {
-  const isTypeAddress = dataType === 'address';
   const isConfirmingRoles = canEditRole === 'confirmingRoles';
   const { hasConfirmingRole } = useVaultConfirmingRoles();
   const { hasPermission } = useVaultPermissions(
@@ -36,8 +33,7 @@ export const DataField: FC<InputResolverProps> = ({
       <Text size="xs" strong>
         {title}
       </Text>
-      {isTypeAddress && <DisplayAddress name={name} vaultKey={vaultKey} />}
-      {!isTypeAddress && <ReadonlyInput label={label} vaultKey={vaultKey} />}
+      <ReadonlyInput label={label} vaultKey={vaultKey} />
       {isEditable && (
         <EditProperty
           editLabel={editLabel}

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

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { DisplayAddress } from './display-address';
+import { GroupWrapper } from './styles';
+
+import {
+  MainSettingsOverview,
+  ManagersKeys,
+} from 'features/settings/main/types';
+import { EditPropertyAddress } from './edit-property-address';
+import { Text } from '@lidofinance/lido-ui';
+import {
+  useVaultConfirmingRoles,
+  useVaultPermissions,
+} from 'modules/vaults/hooks/use-vault-permissions';
+
+type InputResolverProps = MainSettingsOverview;
+
+export const DataManagerField: FC<InputResolverProps> = ({
+  editLabel,
+  name,
+  title,
+  vaultKey,
+  canEditRole,
+}) => {
+  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>
+      <DisplayAddress isEditable={isEditable} vaultKey={vaultKey} />
+      {isEditable && (
+        <EditPropertyAddress
+          editLabel={editLabel}
+          name={name as ManagersKeys}
+        />
+      )}
+    </GroupWrapper>
+  );
+};

features/settings/main/components/controllers/display-address/display-address.tsx

@@ -1,30 +1,37 @@
-import { FC, useMemo } from 'react';
-import { Address } from 'viem';
+import { FC } from 'react';
 
-import { useVaultInfo } from 'features/overview/contexts';
 import { VaultInfo } from 'types';
 import { RoleAddress } from './role-address';
+import { RoleFieldSchema } from '../../../types';
+import { useFormContext } from 'react-hook-form';
 
 interface DisplayAddressProps {
-  name: string;
   vaultKey: keyof VaultInfo;
+  isEditable: boolean;
 }
 
-export const DisplayAddress: FC<DisplayAddressProps> = ({ vaultKey }) => {
-  const { activeVault } = useVaultInfo();
-  const renderData = useMemo(() => {
-    return activeVault?.[vaultKey] as Address[] | Address | undefined;
-  }, [activeVault, vaultKey]);
+export const DisplayAddress: FC<DisplayAddressProps> = ({
+  isEditable,
+  vaultKey,
+}) => {
+  const { watch } = useFormContext();
+  const roles = watch(vaultKey) as RoleFieldSchema[];
 
-  if (Array.isArray(renderData)) {
-    return (
-      <>
-        {renderData.map((address) => (
-          <RoleAddress key={address} address={address} />
-        ))}
-      </>
-    );
-  }
-
-  return <RoleAddress address={renderData} />;
+  return (
+    <>
+      {!!roles &&
+        roles.map((role, index) => {
+          return (
+            <RoleAddress
+              key={role.value}
+              role={role}
+              roles={roles}
+              index={index}
+              vaultKey={vaultKey}
+              isEditable={isEditable}
+            />
+          );
+        })}
+    </>
+  );
 };

features/settings/main/components/controllers/display-address/role-address.tsx

@@ -1,15 +1,56 @@
 import { FC } from 'react';
-import { Address } from 'viem';
 
 import { AddressBadge } from 'shared/components';
 import { AddressWrapper } from './styles';
+import { RoleFieldSchema } from 'features/settings/main/types';
+import { useFormContext } from 'react-hook-form';
+import { VaultInfo } from 'types';
 
 interface RoleAddressProps {
-  address: Address | undefined;
+  vaultKey: keyof VaultInfo;
+  index: number;
+  isEditable: boolean;
+  role: RoleFieldSchema;
+  roles: RoleFieldSchema[];
 }
 
-export const RoleAddress: FC<RoleAddressProps> = ({ address }) => (
-  <AddressWrapper>
-    <AddressBadge weight={400} address={address} symbols={21} />
-  </AddressWrapper>
-);
+export const RoleAddress: FC<RoleAddressProps> = ({
+  vaultKey,
+  index,
+  isEditable,
+  role,
+  roles,
+}) => {
+  const { getValues, setValue } = useFormContext();
+  const itemFormKey = `${vaultKey}.${index}`;
+  if (!('isGranted' in role)) {
+    return null;
+  }
+
+  const toRemove = role.state === 'remove';
+  const bgColor = toRemove ? 'error' : 'default';
+  const isLast = roles.filter((role) => role.state === 'display').length === 1;
+  const canToggle = (roles.length > 1 && !isLast) || toRemove;
+  const onToggle = () => {
+    const { state, ...rest } = getValues(itemFormKey) as RoleFieldSchema;
+    const updatedItem = {
+      ...rest,
+      state: state === 'display' ? 'remove' : 'display',
+    };
+
+    setValue(itemFormKey, updatedItem, { shouldDirty: true });
+  };
+
+  return (
+    <AddressWrapper>
+      <AddressBadge
+        weight={400}
+        address={role.value}
+        crossedText={toRemove}
+        bgColor={bgColor}
+        symbols={21}
+        onToggle={canToggle && isEditable ? () => onToggle() : undefined}
+      />
+    </AddressWrapper>
+  );
+};

features/settings/main/components/controllers/edit-property-address/edit-property-address.tsx

@@ -0,0 +1,82 @@
+import { FC, useEffect } from 'react';
+
+import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
+
+import { Plus } from '@lidofinance/lido-ui';
+import { InputItem } from './input-item';
+import { ButtonContainer, EditWrapper } from './styles';
+import {
+  ManagersKeys,
+  ManagersNewAddresses,
+} from 'features/settings/main/types';
+import { Address } from 'viem';
+import { validateManagers } from 'features/settings/main/consts';
+import { useVaultInfo } from 'features/overview/contexts';
+
+interface EditPropertyAddressProps {
+  name: ManagersKeys;
+  editLabel: string;
+}
+
+export const EditPropertyAddress: FC<EditPropertyAddressProps> = ({
+  name,
+  editLabel,
+}) => {
+  const { isRefetching } = useVaultInfo();
+  const { getValues } = useFormContext();
+  const {
+    control,
+    register,
+    trigger,
+    watch,
+    formState: { errors },
+  } = useForm<ManagersNewAddresses>({
+    defaultValues: {
+      addresses: {
+        [name]: [],
+      },
+    },
+    resolver: validateManagers(getValues),
+    mode: 'all',
+  });
+  const { append, fields, remove } = useFieldArray({
+    control,
+    name: `addresses.${name}`,
+  });
+
+  useEffect(() => {
+    if (isRefetching) {
+      remove();
+    }
+  }, [remove, isRefetching]);
+
+  return (
+    <EditWrapper>
+      {fields.map((field, index) => {
+        return (
+          <InputItem
+            name={name}
+            editLabel={editLabel}
+            key={field.id}
+            register={register}
+            remove={remove}
+            trigger={trigger}
+            watch={watch}
+            error={errors.addresses?.[name]}
+            index={index}
+          />
+        );
+      })}
+      <ButtonContainer
+        color="primary"
+        icon={<Plus />}
+        size="md"
+        variant="ghost"
+        type="button"
+        onClick={() => append({ value: '' as Address, state: 'grant' })}
+      >
+        Add new address
+      </ButtonContainer>
+    </EditWrapper>
+  );
+};

features/settings/main/components/controllers/edit-property-address/index.ts

@@ -0,0 +1 @@
+export { EditPropertyAddress } from './edit-property-address';

features/settings/main/components/controllers/edit-property-address/input-item/index.ts

@@ -0,0 +1 @@
+export { InputItem } from './input-item';