Use of NewWhiteWrapper.tsx in Update Fee and a bit of enum refactor

ssvlabs · Jun 25, 2024 · 6a78f8b · 6a78f8b
1 parent 6b9614b
commit 6a78f8b
Show file tree

Hide file tree

Showing 22 changed files with 43 additions and 327 deletions.
diff --git a/src/app/components/applications/SSV/MyAccount/components/Deposit/Deposit.tsx b/src/app/components/applications/SSV/MyAccount/components/Deposit/Deposit.tsx
@@ -6,7 +6,7 @@ import NewRemainingDays from '~app/components/applications/SSV/MyAccount/common/
 import { useStyles } from '~app/components/applications/SSV/MyAccount/components/Deposit/Deposit.styles';
 import BorderScreen from '~app/components/common/BorderScreen';
 import IntegerInput from '~app/components/common/IntegerInput';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import TermsAndConditionsCheckbox from '~app/components/common/TermsAndConditionsCheckbox/TermsAndConditionsCheckbox';
 import { EClusterOperation } from '~app/enums/clusterOperation.enum';
 import { useAppDispatch, useAppSelector } from '~app/hooks/redux.hook';
@@ -136,7 +136,7 @@ const Deposit = () => {
 
   return (
     <Grid container>
-      <NewWhiteWrapper type={0} header={'Cluster'} />
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
       <BorderScreen
         withoutNavigation
         header={'Deposit'}

diff --git a/src/app/components/applications/SSV/MyAccount/components/EditFeeFlow/UpdateFee/UpdateFee.tsx b/src/app/components/applications/SSV/MyAccount/components/EditFeeFlow/UpdateFee/UpdateFee.tsx
@@ -6,9 +6,7 @@ import { useStyles } from '~app/components/applications/SSV/MyAccount/components
 import ChangeFee from '~app/components/applications/SSV/MyAccount/components/EditFeeFlow/UpdateFee/components/ChangeFee';
 import DecreaseFlow from '~app/components/applications/SSV/MyAccount/components/EditFeeFlow/UpdateFee/components/DecreaseFlow';
 import IncreaseFlow from '~app/components/applications/SSV/MyAccount/components/EditFeeFlow/UpdateFee/components/IncreaseFlow';
-import OperatorId from '~app/components/applications/SSV/MyAccount/components/OperatorId';
 import { ErrorType } from '~app/components/common/ConversionInput/ConversionInput';
-import WhiteWrapper from '~app/components/common/WhiteWrapper';
 import { useAppDispatch, useAppSelector } from '~app/hooks/redux.hook';
 import { setIsLoading } from '~app/redux/appState.slice';
 import { getStrategyRedirect } from '~app/redux/navigation.slice';
@@ -18,6 +16,7 @@ import { isOperatorPrivate } from '~lib/utils/operatorMetadataHelper';
 import { validateFeeUpdate } from '~lib/utils/validatesInputs';
 import { fromWei, getFeeForYear } from '~root/services/conversions.service';
 import { getOperator } from '~root/services/operator.service';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper.tsx';
 
 enum FeeUpdateSteps {
   START = 'Start',
@@ -30,7 +29,7 @@ const UpdateFee = () => {
   const [operator, setOperator] = useState<any>(null);
   const [newFee, setNewFee] = useState<any>(0);
   const [nextIsDisabled, setNextIsDisabled] = useState(true);
-  const { logo, id } = operator || {};
+  const { logo } = operator || {};
   const [oldFee, setOldFee] = useState('0');
   const classes = useStyles({ operatorLogo: logo });
   const [currency, setCurrency] = useState('SSV');
@@ -120,9 +119,7 @@ const UpdateFee = () => {
 
   return (
     <Grid container item>
-      <WhiteWrapper header={'Update Operator Fee'}>
-        <OperatorId id={id} />
-      </WhiteWrapper>
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.OPERATOR} header={'Update Operator Fee'} />
       <Grid className={classes.BodyWrapper}>
         <Component
           onNextHandler={onNextHandler}

diff --git a/.../components/applications/SSV/MyAccount/components/ReactivateCluster/ReactivateCluster.tsx b/.../components/applications/SSV/MyAccount/components/ReactivateCluster/ReactivateCluster.tsx
@@ -12,7 +12,7 @@ import ErrorMessage from '~app/components/common/ErrorMessage';
 import LinkText from '~app/components/common/LinkText/LinkText';
 import FundingSummary from '~app/components/common/FundingSummary';
 import { formatNumberToUi, propertyCostByPeriod } from '~lib/utils/numbers';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { fromWei } from '~root/services/conversions.service';
 import { getStoredNetwork } from '~root/providers/networkInfo.provider';
 import { getLiquidationCollateralPerValidator } from '~root/services/validator.service';
@@ -79,7 +79,7 @@ const ReactivateCluster = () => {
 
   return (
     <Grid container>
-      <NewWhiteWrapper type={0} header={'Cluster'} />
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
       <BorderScreen
         blackHeader
         withConversion

diff --git a/src/app/components/applications/SSV/MyAccount/components/RemoveOperator/RemoveOperator.tsx b/src/app/components/applications/SSV/MyAccount/components/RemoveOperator/RemoveOperator.tsx
@@ -6,7 +6,7 @@ import config from '~app/common/config';
 import { useStyles } from '~app/components/applications/SSV/MyAccount/components/RemoveOperator/RemoveOperator.styles';
 import BorderScreen from '~app/components/common/BorderScreen';
 import CheckBox from '~app/components/common/CheckBox';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { ButtonSize } from '~app/enums/Button.enum';
 import { useAppDispatch, useAppSelector } from '~app/hooks/redux.hook';
 import { fetchOperators, getSelectedOperator } from '~app/redux/account.slice';
@@ -46,7 +46,7 @@ const RemoveOperator = () => {
 
   return (
     <Grid container item>
-      <NewWhiteWrapper type={1} header={'Operator Details'} />
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.OPERATOR} header={'Operator Details'} />
       <Grid className={classes.BodyWrapper}>
         <BorderScreen
           marginTop={0}

diff --git a/src/app/components/applications/SSV/MyAccount/components/SingleOperator/SingleOperator.tsx b/src/app/components/applications/SSV/MyAccount/components/SingleOperator/SingleOperator.tsx
@@ -12,7 +12,7 @@ import OperatorDetails from '~app/components/applications/SSV/RegisterValidatorH
 import BorderScreen from '~app/components/common/BorderScreen';
 import ImageDiv from '~app/components/common/ImageDiv/ImageDiv';
 import LinkText from '~app/components/common/LinkText/LinkText';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import SsvAndSubTitle from '~app/components/common/SsvAndSubTitle';
 import Status from '~app/components/common/Status';
 import { Table } from '~app/components/common/Table/Table';
@@ -258,7 +258,7 @@ const SingleOperator = () => {
 
   return (
     <Grid container item style={{ gap: 26 }}>
-      <NewWhiteWrapper type={1} mainFlow stepBack={backToClustersDashboard} header={'Operator Details'}>
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.OPERATOR} mainFlow stepBack={backToClustersDashboard} header={'Operator Details'}>
         <Grid item container className={classes.ItemsWrapper}>
           {operatorView.map((item: any, index: number) => (
             <Grid item key={index}>

diff --git a/...mponents/applications/SSV/MyAccount/components/Validator/BulkActions/ConfirmationStep.tsx b/...mponents/applications/SSV/MyAccount/components/Validator/BulkActions/ConfirmationStep.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import styled from 'styled-components';
 import Checkbox from '~app/components/common/CheckBox';
 import WarningBox from '~app/components/common/WarningBox';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import Summary from '~app/components/applications/SSV/MyAccount/components/Validator/SummaryValidators/Summary';
 import { useAppSelector } from '~app/hooks/redux.hook';
 import { getIsLoading } from '~app/redux/appState.slice';
@@ -94,7 +94,7 @@ const ConfirmationStep = ({
 
   return (
     <Wrapper>
-      <NewWhiteWrapper type={0} header={'Cluster'} stepBack={stepBack} />
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} stepBack={stepBack} />
       <ConfirmationWrapper>
         <Confirmation>
           <ConfirmationTitle>{title}</ConfirmationTitle>

diff --git a/...components/applications/SSV/MyAccount/components/Validator/BulkActions/ExitFinishPage.tsx b/...components/applications/SSV/MyAccount/components/Validator/BulkActions/ExitFinishPage.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import Summary from '~app/components/applications/SSV/MyAccount/components/Validator/SummaryValidators/Summary';
 import ExitIndicator from '~app/components/applications/SSV/MyAccount/components/Validator/BulkActions/ExitIndicator';
 import { PrimaryButton } from '~app/atomicComponents';
@@ -53,7 +53,7 @@ const ExitTextBold = styled.span`
 
 const ExitFinishPage = ({ nextStep, selectedValidators }: { nextStep: Function; selectedValidators: string[] }) => (
   <Wrapper>
-    <NewWhiteWrapper type={0} header={'Cluster'} />
+    <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
     <ExitWrapper>
       <Exit>
         <ExitTitle>Exit Validator</ExitTitle>

diff --git a/...components/applications/SSV/MyAccount/components/Validator/BulkActions/NewBulkActions.tsx b/...components/applications/SSV/MyAccount/components/Validator/BulkActions/NewBulkActions.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import config from '~app/common/config';
 import { BulkValidatorData } from '~app/model/validator.model';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import AnchorTooltip from '~app/components/common/ToolTip/components/AnchorTooltip/AnchorTooltIp';
 import ValidatorsList from '~app/components/applications/SSV/MyAccount/components/Validator/ValidatorsList/ValidatorsList';
 import Spinner from '~app/components/common/Spinner';
@@ -132,7 +132,7 @@ const NewBulkActions = ({
 
   return (
     <Wrapper>
-      <NewWhiteWrapper type={0} header={'Cluster'} />
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
       <ValidatorsWrapper>
         <HeaderWrapper>
           <TitleWrapper>

diff --git a/...plications/SSV/MyAccount/components/Validator/FundingNewValidator/FundingNewValidator.tsx b/...plications/SSV/MyAccount/components/Validator/FundingNewValidator/FundingNewValidator.tsx
@@ -16,7 +16,7 @@ import ErrorMessage from '~app/components/common/ErrorMessage';
 import { fromWei, toWei } from '~root/services/conversions.service';
 import { ValidatorStore } from '~app/common/stores/applications/SsvWeb';
 import useValidatorRegistrationFlow from '~app/hooks/useValidatorRegistrationFlow';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { getClusterNewBurnRate, getClusterRunWay } from '~root/services/cluster.service';
 import { getStoredNetwork } from '~root/providers/networkInfo.provider';
 import { PrimaryButton } from '~app/atomicComponents';
@@ -143,7 +143,7 @@ const FundingNewValidator = () => {
 
   return (
     <Grid container>
-      <NewWhiteWrapper type={0} header={'Cluster'} />
+      <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
       <BorderScreen
         blackHeader
         withConversion

diff --git a/...omponents/applications/SSV/MyAccount/components/Validator/SingleCluster/SingleCluster.tsx b/...omponents/applications/SSV/MyAccount/components/Validator/SingleCluster/SingleCluster.tsx
@@ -10,7 +10,7 @@ import Balance from '~app/components/applications/SSV/MyAccount/components/Balan
 import OperatorBox from '~app/components/applications/SSV/MyAccount/components/Validator/SingleCluster/components/OperatorBox';
 import ActionsButton from '~app/components/applications/SSV/MyAccount/components/Validator/SingleCluster/components/actions/ActionsButton';
 import ValidatorsList from '~app/components/applications/SSV/MyAccount/components/Validator/ValidatorsList/ValidatorsList';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { Tooltip } from '~app/components/ui/tooltip';
 import { ButtonSize } from '~app/enums/Button.enum';
 import { useAppDispatch, useAppSelector } from '~app/hooks/redux.hook';
@@ -107,7 +107,7 @@ const SingleCluster = () => {
 
   return (
     <Grid container className={classes.Wrapper}>
-      <NewWhiteWrapper stepBack={backToClustersDashboard} type={0} header={'Cluster'} />
+      <NewWhiteWrapper stepBack={backToClustersDashboard} type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
       <Grid container item className={classes.Section}>
         {cluster.operators.map((operator, index) => (
           <OperatorBox key={index} operator={operator} />

diff --git a/src/app/components/applications/SSV/MyAccount/components/Withdraw/Withdraw.tsx b/src/app/components/applications/SSV/MyAccount/components/Withdraw/Withdraw.tsx
@@ -2,7 +2,7 @@ import Grid from '@mui/material/Grid';
 import { useEffect, useState } from 'react';
 import { useStyles } from '~app/components/applications/SSV/MyAccount/components/Withdraw/Withdraw.styles';
 import BorderScreen from '~app/components/common/BorderScreen';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { useAppSelector } from '~app/hooks/redux.hook';
 import { getNetworkFeeAndLiquidationCollateral } from '~app/redux/network.slice';
 import { getAccountAddress } from '~app/redux/wallet.slice';
@@ -35,7 +35,7 @@ const Withdraw = ({ isValidatorFlow }: { isValidatorFlow: boolean }) => {
 
   return (
     <Grid container item style={{ gap: 32 }}>
-      <NewWhiteWrapper type={isValidatorFlow ? 0 : 1} header={isValidatorFlow ? 'Cluster' : 'Operator Details'} />
+      <NewWhiteWrapper type={isValidatorFlow ? WhiteWrapperDisplayType.VALIDATOR : WhiteWrapperDisplayType.OPERATOR} header={isValidatorFlow ? 'Cluster' : 'Operator Details'} />
       <Grid container className={classes.ScreensWrapper} item xs={12}>
         <BorderScreen
           marginTop={0}

diff --git a/...ations/SSV/RegisterValidatorHome/components/AccountBalanceAndFee/AccountBalanceAndFee.tsx b/...ations/SSV/RegisterValidatorHome/components/AccountBalanceAndFee/AccountBalanceAndFee.tsx
@@ -7,7 +7,7 @@ import BorderScreen from '~app/components/common/BorderScreen';
 import Checkbox from '~app/components/common/CheckBox/CheckBox';
 import GoogleTagManager from '~lib/analytics/GoogleTag/GoogleTagManager';
 import validatorRegistrationFlow from '~app/hooks/useValidatorRegistrationFlow';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { useStyles } from '~app/components/applications/SSV/RegisterValidatorHome/components/AccountBalanceAndFee/AccountBalanceAndFee.styles';
 import { PrimaryButton } from '~app/atomicComponents';
 import { ButtonSize } from '~app/enums/Button.enum';
@@ -96,7 +96,7 @@ const AccountBalanceAndFee = () => {
   if (isSecondRegistration) {
     return (
       <Grid container>
-        <NewWhiteWrapper type={0} header={'Cluster'} />
+        <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
         {MainScreen}
       </Grid>
     );

diff --git a/...applications/SSV/RegisterValidatorHome/components/GenerateKeyShares/GenerateKeyShares.tsx b/...applications/SSV/RegisterValidatorHome/components/GenerateKeyShares/GenerateKeyShares.tsx
@@ -6,7 +6,7 @@ import BorderScreen from '~app/components/common/BorderScreen';
 import HeaderSubHeader from '~app/components/common/HeaderSubHeader';
 import { getStoredNetwork } from '~root/providers/networkInfo.provider';
 import ValidatorStore from '~app/common/stores/applications/SsvWeb/Validator.store';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import useValidatorRegistrationFlow, { EValidatorFlowAction } from '~app/hooks/useValidatorRegistrationFlow';
 import { useStyles } from '~app/components/applications/SSV/RegisterValidatorHome/components/GenerateKeyShares/GenerateKeyShares.styles';
 import { translations } from '~app/common/config';
@@ -136,7 +136,7 @@ const GenerateKeyShares = () => {
   if (isSecondRegistration) {
     return (
       <Grid container>
-        <NewWhiteWrapper type={0} header={'Cluster'} />
+        <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
         {MainScreen}
       </Grid>
     );

diff --git a/...mponents/applications/SSV/RegisterValidatorHome/components/ImportFile/flows/KeyShares.tsx b/...mponents/applications/SSV/RegisterValidatorHome/components/ImportFile/flows/KeyShares.tsx
@@ -48,6 +48,7 @@ import { getNetworkFeeAndLiquidationCollateral } from '~app/redux/network.slice'
 import { getClusterSize, getOperatorValidatorsLimit, getSelectedOperators, selectOperators, setClusterSize, unselectAllOperators } from '~app/redux/operator.slice.ts';
 import { canAccountUseOperator } from '~lib/utils/operatorMetadataHelper';
 import { getIsClusterSelected, getSelectedCluster, setExcludedCluster } from '~app/redux/account.slice.ts';
+import { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper.tsx';
 
 const KeyShareFlow = () => {
   const accountAddress = useAppSelector(getAccountAddress);
@@ -538,7 +539,7 @@ const KeyShareFlow = () => {
   if (isSecondRegistration) {
     return (
       <>
-        <NewWhiteWrapper type={0} header={'Cluster'} />
+        <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
         <Grid className={classes.KeysharesWrapper}>
           {MainScreen}
           {validatorStore.validatorsCount > 0 && !validationError.errorMessage && !processingFile && SecondScreen}

diff --git a/...omponents/applications/SSV/RegisterValidatorHome/components/ImportFile/flows/KeyStore.tsx b/...omponents/applications/SSV/RegisterValidatorHome/components/ImportFile/flows/KeyStore.tsx
@@ -11,7 +11,7 @@ import BorderScreen from '~app/components/common/BorderScreen';
 import ErrorMessage from '~app/components/common/ErrorMessage';
 import GoogleTagManager from '~lib/analytics/GoogleTag/GoogleTagManager';
 import ValidatorStore from '~app/common/stores/applications/SsvWeb/Validator.store';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { useStyles } from '~app/components/applications/SSV/RegisterValidatorHome/components/ImportFile/ImportFile.styles';
 import validatorRegistrationFlow, { EValidatorFlowAction } from '~app/hooks/useValidatorRegistrationFlow';
 import ImportInput from '~app/components/applications/SSV/RegisterValidatorHome/components/ImportFile/common';
@@ -206,7 +206,7 @@ const KeyStoreFlow = () => {
   if (isSecondRegistration) {
     return (
       <Grid container>
-        <NewWhiteWrapper type={0} header={'Cluster'} />
+        <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
         {MainScreen}
       </Grid>
     );

diff --git a/.../RegisterValidatorHome/components/OfflineKeyShareGeneration/OfflineKeyShareGeneration.tsx b/.../RegisterValidatorHome/components/OfflineKeyShareGeneration/OfflineKeyShareGeneration.tsx
@@ -16,7 +16,7 @@ import { validateAddressInput } from '~lib/utils/validatesInputs';
 import CustomTooltip from '~app/components/common/ToolTip/ToolTip';
 import { isDkgAddressValid } from '~lib/utils/operatorMetadataHelper';
 import { getStoredNetwork } from '~root/providers/networkInfo.provider';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import DkgOperator from '~app/components/applications/SSV/RegisterValidatorHome/components/DkgOperator/DkgOperator';
 import { useStyles } from '~app/components/applications/SSV/RegisterValidatorHome/components/OfflineKeyShareGeneration/OfflineKeyShareGeneration.styles';
 import Spinner from '~app/components/common/Spinner';
@@ -444,7 +444,7 @@ const OfflineKeyShareGeneration = () => {
   if (isSecondRegistration) {
     return (
       <Grid container>
-        <NewWhiteWrapper type={0} header={'Cluster'} />
+        <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
         {MainScreen}
       </Grid>
     );

diff --git a/...nts/applications/SSV/RegisterValidatorHome/components/SlashingWarning/SlashingWarning.tsx b/...nts/applications/SSV/RegisterValidatorHome/components/SlashingWarning/SlashingWarning.tsx
@@ -8,7 +8,7 @@ import BorderScreen from '~app/components/common/BorderScreen';
 import Checkbox from '~app/components/common/CheckBox/CheckBox';
 import ValidatorKeyInput from '~app/components/common/AddressKeyInput';
 import ValidatorStore from '~app/common/stores/applications/SsvWeb/Validator.store';
-import NewWhiteWrapper from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
+import NewWhiteWrapper, { WhiteWrapperDisplayType } from '~app/components/common/NewWhiteWrapper/NewWhiteWrapper';
 import { useStyles } from '~app/components/applications/SSV/RegisterValidatorHome/components/SlashingWarning/SlashingWarning.styles';
 import { PrimaryButton } from '~app/atomicComponents';
 import { ButtonSize } from '~app/enums/Button.enum';
@@ -73,7 +73,7 @@ const SlashingWarning = () => {
   if (isSecondRegistration) {
     return (
       <Grid container>
-        <NewWhiteWrapper type={0} header={'Cluster'} />
+        <NewWhiteWrapper type={WhiteWrapperDisplayType.VALIDATOR} header={'Cluster'} />
         {MainScreen}
       </Grid>
     );