refactor: make UI updates after QA review

Author: ev-d

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

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { InlineLoader, Text } from '@lidofinance/lido-ui';
+import { Text } from '@lidofinance/lido-ui';
 import { useFormState } from 'react-hook-form';
 
 import { useVaultConfirmingRoles, useVaultPermission } from 'modules/vaults';
@@ -8,6 +8,7 @@ import { Hint } from 'shared/components';
 import { EditPropertyAddress } from './edit-property-address';
 import { DisplayAddress } from './display-address';
 import { GroupWrapper } from './styles';
+import { Skeleton } from 'features/settings/main/styles';
 
 import type {
   MainSettingsOverview,
@@ -40,7 +41,7 @@ export const ManagerAddressField: FC<InputResolverProps> = ({
         {title}
         <Hint text={hint} />
       </Text>
-      {isLoading && <InlineLoader />}
+      {isLoading && <Skeleton />}
       <DisplayAddress isEditable={isEditable} vaultKey={vaultKey} />
       {isEditable && (
         <EditPropertyAddress

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

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { useFormContext, useFormState } from 'react-hook-form';
-import { InlineLoader } from '@lidofinance/lido-ui';
 
 import { RadioInput, RadioWithInput } from 'shared/components';
 import { useVaultConfirmingRoles, useVaultPermission } from 'modules/vaults';
@@ -11,6 +10,7 @@ import {
   RadioSelectorContainer,
   RadioSelectorTitle,
 } from './radio-selector.styles';
+import { Skeleton } from 'features/settings/main/styles';
 
 export type RadioFormData = {
   type: string;
@@ -42,7 +42,7 @@ export const RadioSelector: FC<VotingSelectorProps> = ({
   return (
     <RadioSelectorContainer>
       <RadioSelectorTitle>{title}</RadioSelectorTitle>
-      {isLoading && <InlineLoader />}
+      {isLoading && <Skeleton />}
       {isEditable && !isLoading && (
         <>
           {data?.map(

features/settings/main/components/main-settings-action/main-settings-action.tsx

@@ -3,7 +3,7 @@ import { useFormContext, useFormState } from 'react-hook-form';
 import { Button } from '@lidofinance/lido-ui';
 
 import { ConnectWalletButton } from 'shared/wallet';
-import { vaultTexts } from 'modules/vaults';
+import { useVaultConfirmingRoles, vaultTexts } from 'modules/vaults';
 
 import { RoleFieldSchema } from 'features/settings/main/types';
 import { multipleDataFields } from 'features/settings/main/consts';
@@ -19,6 +19,10 @@ export const MainSettingsAction: FC = () => {
   const isClearDisabled = !isDirty;
   const mainSettingsData = useMainSettingsData();
   const isSubmitDisabled = isSubmitting || disabled || isValidating;
+  const { hasConfirmingRole, hasAdmin, hasNodeOperatorManager } =
+    useVaultConfirmingRoles();
+  const showActionButtons =
+    hasConfirmingRole || hasAdmin || hasNodeOperatorManager;
 
   const formFields = watch();
 
@@ -78,6 +82,10 @@ export const MainSettingsAction: FC = () => {
 
   const hasChanges = counter > 0;
 
+  if (!showActionButtons) {
+    return null;
+  }
+
   return (
     <Container>
       <ConnectWalletButton>

features/settings/main/components/node-operator/node-operator.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'react';
+import { useVaultInfo, vaultTexts } from 'modules/vaults';
+import { useFormState } from 'react-hook-form';
+import { Text } from '@lidofinance/lido-ui';
 
-import { InlineLoader, Text } from '@lidofinance/lido-ui';
 import { AddressBadge } from 'shared/components';
+import { Skeleton } from 'features/settings/main/styles';
 
 import { Wrapper } from './styles';
 
-import { useVaultInfo, vaultTexts } from 'modules/vaults';
-import { useFormState } from 'react-hook-form';
-
 const texts = vaultTexts.actions.settings.fields.nodeOperator;
 
 export const NodeOperator: FC = () => {
@@ -20,7 +20,7 @@ export const NodeOperator: FC = () => {
         {texts.title}
       </Text>
       {isLoading ? (
-        <InlineLoader />
+        <Skeleton />
       ) : (
         <AddressBadge
           weight={400}

features/settings/main/styles.ts

@@ -1,8 +1,20 @@
 import styled from 'styled-components';
+import { InlineLoader } from '@lidofinance/lido-ui';
+
+import { devicesHeaderMedia } from 'styles/global';
 
 export const SectionContainer = styled.section`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spaceMap.xl}px;
   width: 100%;
 `;
+
+export const Skeleton = styled(InlineLoader)`
+  height: 36px;
+  max-width: 50%;
+
+  @media ${devicesHeaderMedia.mobile} {
+    max-width: 100%;
+  }
+`;

modules/vaults/consts/texts.ts

@@ -95,19 +95,19 @@ export const vaultTexts = {
         nodeOperatorFee: {
           title: 'Node Operator Fee',
           label: 'Node Operator fee, %',
-          editLabel: 'Propose new Node Operator fee, %',
+          editLabel: 'Propose new, %',
           hint: 'The share of Gross staking rewards that the Node Operator charges for provided validation service.\nMandatory parameter, [0% .. 100.00%].',
         },
         confirmationLifetime: {
           title: 'Confirmation Lifetime',
           label: 'Confirmation Lifetime, hours',
-          editLabel: 'Propose new Confirmation Lifetime, hours',
+          editLabel: 'Propose new, hours',
           hint: 'The time period in which the Node Operator has to confirm the report.\nMandatory parameter, [0 hours .. 24 hours].\nIf the Node Operator does not confirm the report within this time period, it will be automatically confirmed.',
         },
         vaultManager: {
-          title: 'Vault Manager',
-          label: 'Vault Manager address',
-          editLabel: 'Vault Manager address',
+          title: 'Vault Owner',
+          label: 'Vault Owner address',
+          editLabel: 'Vault Owner address',
           actionText: 'Add new address',
           hint: 'One of the two admin roles for the stVault. Allows to manage permissions and change key vault parameters from the Vault Owner (Staker) perspective.\nMultiple addresses supported.',
         },

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

@@ -78,7 +78,7 @@ export const useVaultConfirmingRoles = () => {
   return {
     hasConfirmingRole: hasAtLeastOne,
     hasAdmin: roleAdmin.hasPermission,
-    hasNodeOperatporManager: roleNOM.hasPermission,
+    hasNodeOperatorManager: roleNOM.hasPermission,
     hasBothConfirmingRoles: roleAdmin.hasPermission && roleNOM.hasPermission,
     isLoading: !hasAtLeastOne && (roleAdmin.isLoading || roleNOM.isLoading),
     error: roleAdmin.error || roleNOM.error,