fix: styles and naming

features/ipfs/index.ts

@@ -1,5 +1,5 @@
 export { HomePageIpfs } from './home-page-ipfs';
 
 export { FaqPlaceholder } from './faq-placeholder';
-export { UpgradePromtBanner } from './update-promt-banner';
+export { SecurityStatusBanner } from './security-status-banner';
 export { InsertIpfsBaseScript } from './ipfs-base-script';

features/ipfs/security-status-banner/index.ts

@@ -0,0 +1 @@
+export { SecurityStatusBanner } from './security-status-banner';

features/ipfs/update-promt-banner/update-promt-banner.tsx → features/ipfs/security-status-banner/security-status-banner.tsx

@@ -2,7 +2,14 @@ import { Button, Modal } from '@lidofinance/lido-ui';
 
 import { dynamics } from 'config';
 
-import { WarningIcon, Wrapper, WarningText, WarningSubText } from './styles';
+import {
+  WarningIcon,
+  Wrapper,
+  WarningText,
+  WarningSubText,
+  WarningBlock,
+  WarningTitle,
+} from './styles';
 import { useVersionCheck } from './use-version-check';
 import NoSsrWrapper from 'shared/components/no-ssr-wrapper';
 
@@ -26,11 +33,10 @@ const warningContent = ({
     case isIpfs && isNotVerifiable:
       return {
         content: (
-          <WarningText>
-            This IPFS version can’t be verified
-            <br />
+          <WarningBlock>
+            <WarningTitle>This IPFS version can’t be verified</WarningTitle>
             <WarningSubText>Please try again later</WarningSubText>
-          </WarningText>
+          </WarningBlock>
         ),
         canClose: false,
       };
@@ -59,13 +65,14 @@ const warningContent = ({
     case isIpfs && isUpdateAvailable:
       return {
         content: (
-          <WarningText>
-            This is not the most up to date version of the IPFS widget
-            <br />
+          <WarningBlock>
+            <WarningTitle>
+              This is not the most up to date version of the IPFS widget
+            </WarningTitle>
             <WarningSubText>
               Please note that the functionality of this version may be lacking
             </WarningSubText>
-          </WarningText>
+          </WarningBlock>
         ),
         canClose: true,
       };
@@ -74,7 +81,7 @@ const warningContent = ({
   }
 };
 
-export const UpgradePromtBanner = () => {
+export const SecurityStatusBanner = () => {
   const {
     areConditionsAccepted,
     setConditionsAccepted,

features/ipfs/update-promt-banner/styles.tsx → features/ipfs/security-status-banner/styles.tsx

@@ -37,10 +37,22 @@ export const WarningText = styled(Text).attrs({
   text-wrap: balance;
 `;
 
+export const WarningBlock = styled.p`
+  text-align: center;
+  margin: 12px 0 28px;
+`;
+
+export const WarningTitle = styled(Text).attrs({
+  weight: 700,
+})`
+  font-size: 26px;
+  text-align: center;
+  text-wrap: balance;
+`;
+
 export const WarningSubText = styled(Text).attrs({
   weight: 400,
   size: 'xs',
-  as: 'span',
   color: 'secondary',
 })`
   text-align: center;

features/ipfs/update-promt-banner/use-version-check.ts → features/ipfs/security-status-banner/use-version-check.ts

@@ -1,15 +1,17 @@
 import { useEffect, useState } from 'react';
 import { useLidoSWR } from '@lido-sdk/react';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { useForceDisconnect } from 'reef-knot/core-react';
 
 import { BASE_PATH_ASSET, dynamics } from 'config';
 import { useMainnetStaticRpcProvider } from 'shared/hooks/use-mainnet-static-rpc-provider';
 import { standardFetcher } from 'utils/standardFetcher';
 import { STRATEGY_IMMUTABLE, STRATEGY_LAZY } from 'utils/swrStrategies';
+import { useClientConfig } from 'providers/client-config';
+
+import { isVersionLess } from './utils';
 
 import buildInfo from 'build-info.json';
-import { useClientConfig } from 'providers/client-config';
-import { useWeb3 } from 'reef-knot/web3-react';
 
 export const NO_SAFE_VERSION = 'NONE_AVAILABLE';
 
@@ -36,29 +38,6 @@ const URL_CID_REGEX =
 const IPFS_RELEASE_URL =
   'https://raw.githubusercontent.com/lidofinance/ethereum-staking-widget/main/IPFS.json';
 
-const isVersionLess = (versionA: string, versionB: string): boolean => {
-  const verA = versionA
-    .trim()
-    .split('.')
-    .map((v) => parseInt(v));
-  const verB = versionB
-    .trim()
-    .split('.')
-    .map((v) => parseInt(v));
-
-  // eslint-disable-next-line unicorn/no-for-loop
-  for (let index = 0; index < verA.length; index++) {
-    const a = verA[index];
-    const b = verB[index];
-    // validation
-    if (b === undefined || isNaN(a) || isNaN(b)) return false;
-    if (a > b) return false;
-    if (a < b) return true;
-  }
-  // versions are  equal
-  return false;
-};
-
 export const useVersionCheck = () => {
   const { active } = useWeb3();
   const { setIsWalletConnectionAllowed } = useClientConfig();

features/ipfs/security-status-banner/utils.ts

@@ -0,0 +1,22 @@
+export const isVersionLess = (versionA: string, versionB: string): boolean => {
+  const verA = versionA
+    .trim()
+    .split('.')
+    .map((v) => parseInt(v));
+  const verB = versionB
+    .trim()
+    .split('.')
+    .map((v) => parseInt(v));
+
+  // eslint-disable-next-line unicorn/no-for-loop
+  for (let index = 0; index < verA.length; index++) {
+    const a = verA[index];
+    const b = verB[index];
+    // validation
+    if (b === undefined || isNaN(a) || isNaN(b)) return false;
+    if (a > b) return false;
+    if (a < b) return true;
+  }
+  // versions are  equal
+  return false;
+};

features/stake/stake.tsx

@@ -17,7 +17,7 @@ export const Stake = () => {
         <StakeForm key={key} />
       </NoSSRWrapper>
       <LidoStats />
-      <OnlyInfraRender placeholder={<FaqPlaceholder />}>
+      <OnlyInfraRender renderIPFS={<FaqPlaceholder />}>
         <StakeFaq />
       </OnlyInfraRender>
     </>

features/withdrawals/claim/claim.tsx

@@ -11,7 +11,7 @@ export const Claim = () => {
     <ClaimFormProvider>
       <ClaimWallet />
       <ClaimForm />
-      <OnlyInfraRender placeholder={<FaqPlaceholder />}>
+      <OnlyInfraRender renderIPFS={<FaqPlaceholder />}>
         <ClaimFaq />
       </OnlyInfraRender>
     </ClaimFormProvider>

features/withdrawals/request/request.tsx

@@ -11,7 +11,7 @@ export const Request = () => {
     <RequestFormProvider>
       <RequestWallet />
       <RequestForm />
-      <OnlyInfraRender placeholder={<FaqPlaceholder />}>
+      <OnlyInfraRender renderIPFS={<FaqPlaceholder />}>
         <RequestFaq />
       </OnlyInfraRender>
     </RequestFormProvider>

features/wsteth/wrap-unwrap-tabs.tsx

@@ -29,7 +29,7 @@ export const WrapUnwrapTabs = ({ mode }: WrapUnwrapLayoutProps) => {
         <Wallet />
         {isUnwrapMode ? <UnwrapForm /> : <WrapForm />}
       </NoSsrWrapper>
-      <OnlyInfraRender placeholder={<FaqPlaceholder />}>
+      <OnlyInfraRender renderIPFS={<FaqPlaceholder />}>
         <WrapFaq />
       </OnlyInfraRender>
     </>

pages/_app.tsx

@@ -15,7 +15,7 @@ import { Providers } from 'providers';
 import { BackgroundGradient } from 'shared/components/background-gradient/background-gradient';
 import { nprogress, COOKIES_ALLOWED_FULL_KEY } from 'utils';
 import { withCsp } from 'utilsApi/withCSP';
-import { UpgradePromtBanner } from 'features/ipfs';
+import { SecurityStatusBanner } from 'features/ipfs';
 
 // Migrations old theme cookies to new cross domain cookies
 migrationThemeCookiesToCrossDomainCookiesClientSide();
@@ -56,7 +56,7 @@ const AppWrapper = (props: AppProps): JSX.Element => {
       <ToastContainer />
       <MemoApp {...rest} />
       <CookiesTooltip />
-      <UpgradePromtBanner />
+      <SecurityStatusBanner />
     </Providers>
   );
 };

shared/components/only-infra-render/only-infra-render.tsx

@@ -1,12 +1,12 @@
 import { dynamics } from 'config';
 
 type OnlyInfraRenderProps = {
-  placeholder?: React.ReactNode;
+  renderIPFS?: React.ReactNode;
 };
 
 export const OnlyInfraRender = ({
   children,
-  placeholder = null,
+  renderIPFS = null,
 }: React.PropsWithChildren<OnlyInfraRenderProps>) => {
-  return <>{dynamics.ipfsMode ? placeholder : children}</>;
+  return <>{dynamics.ipfsMode ? renderIPFS : children}</>;
 };