Merge pull request #97 from lidofinance/feature/si-1982-no-fee-recepient

Node Operator fee recipient

Author: Jeday

features/claim/claim-form/form/claim-inputs.tsx

@@ -1,11 +1,19 @@
-import { vaultTexts } from 'modules/vaults';
-import { AddressInputHookForm } from 'shared/hook-form/controls';
+import { Input, Loader } from '@lidofinance/lido-ui';
+
+import { useVaultInfo, vaultTexts } from 'modules/vaults';
+
+const label = vaultTexts.actions.claim.addressLabel;
 
 export const ClaimInputs = () => {
+  const { activeVault, isLoadingVault } = useVaultInfo();
+
   return (
-    <AddressInputHookForm
-      label={vaultTexts.actions.claim.addressLabel}
-      fieldName="recipient"
+    <Input
+      leftDecorator={isLoadingVault ? <Loader /> : null}
+      label={label}
+      value={activeVault?.nodeOperatorFeeRecipient}
+      readOnly
+      disabled
     />
   );
 };

features/settings/main/components/controllers/radio-selector/radio-selector.styles.ts

@@ -5,10 +5,3 @@ export const RadioSelectorContainer = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spaceMap.sm}px;
 `;
-
-export const RadioSelectorTitle = styled.div`
-  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;
-  line-height: 24px;
-  color: ${({ theme }) => theme.colors.textDark};
-  font-weight: 700;
-`;

features/settings/main/components/controllers/radio-selector/radio-selector.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
 import { useFormContext, useFormState } from 'react-hook-form';
+import { Text } from '@lidofinance/lido-ui';
 
 import { RadioInput, RadioWithInput } from 'shared/components';
 import { useVaultConfirmingRoles, useVaultPermission } from 'modules/vaults';
 import { VaultInfo } from 'types';
 
 import { ReadonlyView } from '../readonly-view';
-import {
-  RadioSelectorContainer,
-  RadioSelectorTitle,
-} from './radio-selector.styles';
+import { RadioSelectorContainer } from './radio-selector.styles';
 import { Skeleton } from 'features/settings/main/styles';
 
 export type RadioFormData = {
@@ -46,7 +44,9 @@ export const RadioSelector: FC<VotingSelectorProps> = ({
 
   return (
     <RadioSelectorContainer>
-      <RadioSelectorTitle>{title}</RadioSelectorTitle>
+      <Text size="xs" strong>
+        {title}
+      </Text>
       {isLoading && <Skeleton />}
       {isEditable && !isLoading && (
         <>

features/settings/main/components/index.ts

@@ -1,5 +1,6 @@
 export { MainSettingsAction } from './main-settings-action';
 export { NodeOperator } from './node-operator';
+export { NodeOperatorFeeRecipient } from './no-fee-recipient';
 export * from './controllers';
 export * from './admins';
 export * from './voting';

features/settings/main/components/no-fee-recipient/edit-recipient.tsx

@@ -0,0 +1,14 @@
+import { vaultTexts } from 'modules/vaults';
+import { AddressInputHookForm } from 'shared/hook-form/controls';
+
+const texts = vaultTexts.actions.settings.fields.nodeOperatorFeeRecipient;
+
+export const EditRecipient = () => {
+  return (
+    <AddressInputHookForm
+      label={texts.editLabel}
+      fieldName="nodeOperatorFeeRecipient"
+      showRightDecorator={false}
+    />
+  );
+};

features/settings/main/components/no-fee-recipient/index.ts

@@ -0,0 +1 @@
+export { NodeOperatorFeeRecipient } from './no-fee-recipient';

features/settings/main/components/no-fee-recipient/no-fee-recipient.tsx

@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { useFormState } from 'react-hook-form';
+import { Text } from '@lidofinance/lido-ui';
+
+import { useVaultInfo, useVaultPermission, vaultTexts } from 'modules/vaults';
+import { AddressBadge } from 'shared/components';
+
+import { Skeleton } from 'features/settings/main/styles';
+
+import { Wrapper } from './styles';
+import { EditRecipient } from './edit-recipient';
+
+const texts = vaultTexts.actions.settings.fields.nodeOperatorFeeRecipient;
+
+export const NodeOperatorFeeRecipient: FC = () => {
+  const { isLoading: isFormLoading } = useFormState();
+  const { activeVault } = useVaultInfo();
+  const { hasPermission, isLoading: isPermissionLoading } = useVaultPermission(
+    'nodeOperatorManager',
+  );
+  const isLoading = isFormLoading || isPermissionLoading;
+
+  return (
+    <Wrapper>
+      <Text size="xs" strong>
+        {texts.title}
+      </Text>
+      {isLoading && <Skeleton />}
+      {hasPermission && !isLoading && <EditRecipient />}
+      {!hasPermission && !isLoading && (
+        <AddressBadge
+          weight={400}
+          address={activeVault?.nodeOperatorFeeRecipient}
+          symbols={21}
+        />
+      )}
+    </Wrapper>
+  );
+};

features/settings/main/components/no-fee-recipient/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+import { Block } from '@lidofinance/lido-ui';
+
+export const Wrapper = styled(Block)`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spaceMap.sm}px;
+  padding: 0;
+`;

features/settings/main/consts.ts

@@ -67,6 +67,7 @@ export const votingLifetimeSchema = z.coerce
 
 export const editMainSettingsSchema = z.object({
   nodeOperatorManagers: z.array(addressSchema),
+  nodeOperatorFeeRecipient: accountSchema,
   defaultAdmins: z.array(addressSchema),
   nodeOperatorFeeBP: z.string(),
   nodeOperatorFeeBPCustom: z

features/settings/main/contexts/main-settings-data-provider.tsx

@@ -118,6 +118,7 @@ export const MainSettingsDataProvider: FC<PropsWithChildren> = ({
     return {
       defaultAdmins,
       nodeOperatorManagers,
+      nodeOperatorFeeRecipient: activeVault.nodeOperatorFeeRecipient,
       nodeOperatorFeeBP: nodeOperatorFeeBP.sort((a, b) => {
         if (a.type === 'My proposal') return 1;
         if (b.type === 'My proposal') return -1;