refactor: make updates after review

ev-d · ev-d · commit 46d322851773 · 2025-06-04T00:38:43.000+03:00
diff --git a/features/settings/main/components/controllers/radio-selector/radio-selector.tsx b/features/settings/main/components/controllers/radio-selector/radio-selector.tsx
@@ -22,20 +22,20 @@ export type RadioFormData = {
 
 type VotingSelectorProps = {
   data?: RadioFormData[];
-  radioType: keyof VaultInfo;
+  vaultKey: keyof VaultInfo;
   title: string;
 };
 
 export const RadioSelector: FC<VotingSelectorProps> = ({
   data,
-  radioType,
+  vaultKey,
   title,
 }) => {
   const { isLoading, errors, disabled } = useFormState();
   const { hasConfirmingRole } = useVaultConfirmingRoles();
   const { hasPermission } = useVaultPermission();
   const { register, setValue } = useFormContext();
-  const inputError = errors[radioType];
+  const inputError = errors[vaultKey];
   const isEditable = !disabled && (hasConfirmingRole || hasPermission);
 
   return (
@@ -45,7 +45,7 @@ export const RadioSelector: FC<VotingSelectorProps> = ({
       {isEditable && !isLoading ? (
         <>
           {data?.map(({ type, value, tags, symbol, placeholder }, index) => {
-            const key = `${radioType}-${type}-${index}-${value}`;
+            const key = `${vaultKey}-${type}-${index}-${value}`;
             const isCustom = type === 'custom';
             const isMy = type === 'My proposal';
 
@@ -58,9 +58,9 @@ export const RadioSelector: FC<VotingSelectorProps> = ({
                     symbol: symbol,
                     tags: tags,
                     id: key,
-                    ...register(radioType),
+                    ...register(vaultKey),
                   }}
-                  type={radioType}
+                  type={vaultKey}
                   placeholder={placeholder}
                   setRadioValue={setValue}
                   error={inputError?.message as string}
@@ -74,14 +74,14 @@ export const RadioSelector: FC<VotingSelectorProps> = ({
                 tags={tags}
                 id={key}
                 symbol={symbol}
-                {...register(radioType)}
+                {...register(vaultKey)}
                 disabled={isMy}
               />
             );
           })}
         </>
       ) : (
-        <ReadonlyView vaultKey={radioType} />
+        <ReadonlyView vaultKey={vaultKey} />
       )}
     </RadioSelectorContainer>
   );
diff --git a/features/settings/main/components/voting/voting.tsx b/features/settings/main/components/voting/voting.tsx
@@ -1,31 +1,32 @@
 import { FC, useMemo } from 'react';
 
+import { vaultTexts } from 'modules/vaults';
+
 import { useMainSettingsData } from 'features/settings/main/contexts';
 import { RadioSelector } from '../controllers/radio-selector';
 import { VotingBlock } from './styles';
 
 export const Voting: FC = () => {
   const mainSettingsData = useMainSettingsData();
 
-  const nodeOperatorFeeBP = useMemo(() => {
-    return mainSettingsData?.nodeOperatorFeeBP;
-  }, [mainSettingsData]);
-
-  const confirmExpiry = useMemo(() => {
-    return mainSettingsData?.confirmExpiry;
+  const [nodeOperatorFeeBP, confirmExpiry] = useMemo(() => {
+    return [
+      mainSettingsData?.nodeOperatorFeeBP,
+      mainSettingsData?.confirmExpiry,
+    ];
   }, [mainSettingsData]);
 
   return (
     <VotingBlock>
       <RadioSelector
         data={nodeOperatorFeeBP}
-        radioType="nodeOperatorFeeBP"
-        title="Node Operator Fee"
+        vaultKey="nodeOperatorFeeBP"
+        title={vaultTexts.actions.settings.fields.nodeOperatorFee.title}
       />
       <RadioSelector
         data={confirmExpiry}
-        radioType="confirmExpiry"
-        title="Confirmation Lifetime"
+        vaultKey="confirmExpiry"
+        title={vaultTexts.actions.settings.fields.confirmationLifetime.title}
       />
     </VotingBlock>
   );
diff --git a/features/settings/main/consts.ts b/features/settings/main/consts.ts
@@ -2,7 +2,6 @@ import { z } from 'zod';
 import { isValidAnyAddress } from 'utils/address-validation';
 import {
   MainSettingsOverview,
-  MainSettingsVoting,
   ManagersKeys,
   ManagersNewAddresses,
   RoleFieldSchema,
@@ -25,6 +24,7 @@ const INVALID_NUMBER_MAX_MESSAGE = `Must be ${MAX_FEE_VALUE} or less`;
 const INVALID_NUMBER_EXPIRY_MIN_MESSAGE = `Must be ${MIN_CONFIRM_EXPIRY} or above`;
 const INVALID_NUMBER_EXPIRY_MAX_MESSAGE = `Must be ${MAX_CONFIRM_EXPIRY} or less`;
 const INVALID_NUMBER_DATA_OBJECT_MESSAGE = { message: 'Only number is valid' };
+const INVALID_EMPTY_STRING = 'Value cannot be empty';
 
 export const accountSchema = z
   .string()
@@ -56,35 +56,16 @@ export const editMainSettingsSchema = z.object({
   defaultAdmins: z.array(addressSchema),
   nodeOperatorFeeBP: z
     .string()
-    .refine((val) => val !== '', { message: 'Value cannot be empty' })
+    .refine((val) => val !== '', { message: INVALID_EMPTY_STRING })
     .pipe(votingFeeSchema)
     .transform((val) => String(val)),
   confirmExpiry: z
     .string()
-    .refine((val) => val !== '', { message: 'Value cannot be empty' })
+    .refine((val) => val !== '', { message: INVALID_EMPTY_STRING })
     .pipe(votingLifetimeSchema)
     .transform((val) => String(val)),
 });
 
-export const indicatorsForRender: MainSettingsVoting[] = [
-  {
-    name: 'nodeOperatorFeeBP',
-    textFieldName: 'nodeOperatorFeeBPCustom',
-    unitIndicator: '%',
-    vaultKey: 'nodeOperatorFeeBP',
-    canEditRole: 'confirmingRoles',
-    ...vaultTexts.actions.settings.fields.nodeOperatorFee,
-  },
-  {
-    name: 'confirmExpiry',
-    textFieldName: 'confirmExpiryCustom',
-    unitIndicator: ' hours',
-    vaultKey: 'confirmExpiry',
-    canEditRole: 'confirmingRoles',
-    ...vaultTexts.actions.settings.fields.confirmationLifetime,
-  },
-];
-
 export const adminsForRender: MainSettingsOverview[] = [
   {
     name: 'defaultAdmins',
diff --git a/features/settings/main/contexts/main-settings-data-provider.tsx b/features/settings/main/contexts/main-settings-data-provider.tsx
@@ -35,7 +35,7 @@ export const MainSettingsDataProvider: FC<PropsWithChildren> = ({
     }
 
     // Current values for voting
-    const currentConfirmExpiry = activeVault.confirmExpiry / (60n * 60n);
+    const currentConfirmExpiry = Number(activeVault.confirmExpiry) / 3600;
     const currentNodeOperatorFeeBP = Number(
       (activeVault.nodeOperatorFeeBP * 100n) / VAULT_TOTAL_BASIS_POINTS_BN,
     );
diff --git a/features/settings/main/types.ts b/features/settings/main/types.ts
@@ -36,15 +36,6 @@ export type MainSettingsOverview = {
   canEditRole: VAULT_ROOT_ROLES | 'confirmingRoles';
 };
 
-export type MainSettingsVoting = Omit<
-  MainSettingsOverview,
-  'dataType' | 'name'
-> & {
-  unitIndicator: '%' | ' hours';
-  name: VotingKeys;
-  textFieldName: VotingCustomKeys;
-};
-
 export type TxData = {
   grantRoles?: GrantOrRevokeRole[];
   revokeRoles?: GrantOrRevokeRole[];
@@ -54,16 +45,10 @@ export type TxData = {
 
 export type RoleFieldSchema = z.infer<typeof addressSchema>;
 export type ManagersKeys = 'nodeOperatorManagers' | 'defaultAdmins';
-export type VotingKeys = 'nodeOperatorFeeBP' | 'confirmExpiry';
-export type VotingCustomKeys =
-  | 'nodeOperatorFeeBPCustom'
-  | 'confirmExpiryCustom';
 export type ManagersNewAddresses = {
   addresses: Record<ManagersKeys, RoleFieldSchema[]>;
 };
 
-export type ChipBadge = Date | string | undefined;
-
 export type MainSettingsDataContextValue = {
   defaultAdmins: RoleFieldSchema[];
   nodeOperatorManagers: RoleFieldSchema[];
diff --git a/features/settings/main/utils.ts b/features/settings/main/utils.ts
@@ -8,10 +8,6 @@ export const shouldIncrementTxCounter = (
   return value !== defaultValue;
 };
 
-export const getHoursDifference = (dateA: Date, dateB: Date) => {
-  return Math.ceil((dateA.getTime() - dateB.getTime()) / (1000 * 60 * 60));
-};
-
 export const prepareDefaultValues = (
   promisifiedSettingsData: Promise<MainSettingsDataContextValue | null>,
 ) => {
@@ -40,3 +36,15 @@ export const prepareDefaultValues = (
     };
   };
 };
+
+export const formatInputValue = (
+  value: string,
+  symbol: string | undefined,
+  isFocused: boolean,
+) => {
+  if (symbol && value) {
+    return isFocused ? value : `${value}${symbol}`;
+  }
+
+  return value;
+};
diff --git a/shared/components/radio-input/radio-with-input/radio-with-input.tsx b/shared/components/radio-input/radio-with-input/radio-with-input.tsx
@@ -1,11 +1,4 @@
-import {
-  useRef,
-  forwardRef,
-  useState,
-  ChangeEvent,
-  useCallback,
-  useMemo,
-} from 'react';
+import { useRef, forwardRef, useState, ChangeEvent, useCallback } from 'react';
 import { UseFormSetValue, FieldValues } from 'react-hook-form';
 import { mergeRefs } from 'utils';
 import { InputProps } from '@lidofinance/lido-ui';
@@ -14,6 +7,8 @@ import { RadioInput, RadioInputProps } from '../radio';
 
 import { InputStyled } from './radio-with-input.styles';
 
+import { formatInputValue } from 'features/settings/main/utils';
+
 type RadioWithInputProps = Omit<InputProps, 'type'> & {
   radioProps: RadioInputProps;
   setRadioValue: UseFormSetValue<FieldValues>;
@@ -26,18 +21,10 @@ export const RadioWithInput = forwardRef<HTMLInputElement, RadioWithInputProps>(
 
     const [value, setValue] = useState<string>('');
     const [isFocused, setIsFocused] = useState(false);
-
-    const displayValue = useMemo(() => {
-      if (radioProps.symbol && value) {
-        return isFocused ? value : `${value}${radioProps.symbol}`;
-      }
-
-      return value;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value, radioProps.symbol, isFocused]);
-
     const radioRef = useRef<HTMLInputElement>(null);
 
+    const displayValue = formatInputValue(value, radioProps.symbol, isFocused);
+
     const updateRadioValue = useCallback(
       (value: string) => {
         setRadioValue(type, String(value), {

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export const MainSettingsDataProvider: FC<PropsWithChildren> = ({`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`// Current values for voting`
`38`		`- const currentConfirmExpiry = activeVault.confirmExpiry / (60n * 60n);`
	`38`	`+ const currentConfirmExpiry = Number(activeVault.confirmExpiry) / 3600;`
`39`	`39`	`const currentNodeOperatorFeeBP = Number(`
`40`	`40`	`(activeVault.nodeOperatorFeeBP * 100n) / VAULT_TOTAL_BASIS_POINTS_BN,`
`41`	`41`	`);`