Support IPFS manifest subpath

.env.example

@@ -63,4 +63,3 @@ WIDGET_API_BASE_PATH_FOR_IPFS=
 
 # Actual for IPFS mode
 REWARDS_BACKEND_BASE_PATH=
-

IPFS.json

@@ -1,4 +1,6 @@
 {
-  "__warning__": "For testing purposes only",
-  "ens": "app.jeday.eth"
+  "17000": {
+    "__warning__": "For testing purposes only",
+    "ens": "app.jeday.eth"
+  }
 }

features/ipfs/faq-placeholder.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const FaqPlaceholder = styled.div`
+  margin-top: 32px;
+`;

features/ipfs/home-page-ipfs.tsx

@@ -37,7 +37,7 @@ const IPFS_ROUTABLE_PAGES = [
   getPathWithoutFirstSlash(SETTINGS_PATH),
 ];
 
-const HomePageIpfs: FC = () => {
+export const HomePageIpfs: FC = () => {
   const router = useRouter();
   const { asPath } = router;
 
@@ -114,5 +114,3 @@ const HomePageIpfs: FC = () => {
   // Fix for runtime of `dev-ipfs` (see: package.json scripts)
   return <NoSSRWrapper>{spaPage}</NoSSRWrapper>;
 };
-
-export default HomePageIpfs;

features/ipfs/index.ts

@@ -0,0 +1,5 @@
+export { HomePageIpfs } from './home-page-ipfs';
+
+export { FaqPlaceholder } from './faq-placeholder';
+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/security-status-banner/security-status-banner.tsx

@@ -0,0 +1,146 @@
+import { Button, Modal } from '@lidofinance/lido-ui';
+
+import { dynamics } from 'config';
+
+import {
+  WarningIcon,
+  Wrapper,
+  WarningText,
+  WarningSubText,
+  WarningBlock,
+  WarningTitle,
+} from './styles';
+import { useVersionCheck } from './use-version-check';
+import NoSsrWrapper from 'shared/components/no-ssr-wrapper';
+
+const LIDO_TWITTER_LINK = 'https://twitter.com/LidoFinance';
+
+type WarningContentOptions = {
+  isUpdateAvailable: boolean;
+  isVersionUnsafe: boolean;
+  isNotVerifiable: boolean;
+  isIpfs: boolean;
+};
+
+const warningContent = ({
+  isUpdateAvailable,
+  isVersionUnsafe,
+  isNotVerifiable,
+  isIpfs,
+}: WarningContentOptions) => {
+  switch (true) {
+    // not veryfiable, only for IPFS
+    case isIpfs && isNotVerifiable:
+      return {
+        content: (
+          <WarningBlock>
+            <WarningTitle>This IPFS version can’t be verified</WarningTitle>
+            <WarningSubText>Please try again later</WarningSubText>
+          </WarningBlock>
+        ),
+        canClose: false,
+      };
+    //  IPFS ver is less than leastSafeVersion, but new version is available
+    case isIpfs && isVersionUnsafe && isUpdateAvailable:
+      return {
+        content: (
+          <WarningText>
+            This IPFS version has issues that could impact your experience
+          </WarningText>
+        ),
+        canClose: false,
+      };
+    // we can show this banner on both infra and IPFS
+    case isVersionUnsafe && (!isIpfs || !isUpdateAvailable):
+      return {
+        content: (
+          <WarningText>
+            The Lido staking widget is currently down. A fix is in progress
+          </WarningText>
+        ),
+        canClose: false,
+        showTwitterLink: true,
+      };
+    // outdated IPFS
+    case isIpfs && isUpdateAvailable:
+      return {
+        content: (
+          <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>
+          </WarningBlock>
+        ),
+        canClose: true,
+      };
+    default:
+      return { content: null };
+  }
+};
+
+export const SecurityStatusBanner = () => {
+  const {
+    areConditionsAccepted,
+    setConditionsAccepted,
+    isUpdateAvailable,
+    isVersionUnsafe,
+    isNotVerifiable,
+    data,
+  } = useVersionCheck();
+
+  const { content, canClose, showTwitterLink } = warningContent({
+    isUpdateAvailable,
+    isVersionUnsafe,
+    isNotVerifiable,
+    isIpfs: dynamics.ipfsMode,
+  });
+
+  const showModal = !!content && !(canClose && areConditionsAccepted);
+
+  return (
+    <NoSsrWrapper>
+      <Modal open={showModal}>
+        <Wrapper>
+          <WarningIcon />
+          {content}
+          {showTwitterLink && (
+            <a
+              href={LIDO_TWITTER_LINK}
+              target="_self"
+              rel="noopener noreferrer"
+            >
+              <Button size="sm" fullwidth variant="filled">
+                Check X for more info
+              </Button>
+            </a>
+          )}
+          {isUpdateAvailable && (
+            <a
+              href={data.remoteCidLink}
+              target="_self"
+              rel="noopener noreferrer"
+            >
+              <Button size="sm" fullwidth variant="filled">
+                Click to update to the newest version
+              </Button>
+            </a>
+          )}
+          {canClose && (
+            <Button
+              size="sm"
+              fullwidth
+              color="warning"
+              variant="outlined"
+              onClick={() => setConditionsAccepted(true)}
+            >
+              Accept the possible issues and proceed
+            </Button>
+          )}
+        </Wrapper>
+      </Modal>
+    </NoSsrWrapper>
+  );
+};

features/ipfs/outdated-hash-banner/styles.tsx → features/ipfs/security-status-banner/styles.tsx

@@ -30,9 +30,33 @@ export const Wrapper = styled.div`
 
 export const WarningText = styled(Text).attrs({
   weight: 700,
-  size: 'lg',
 })`
+  font-size: 26px;
   text-align: center;
   margin: 12px 0 28px;
   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',
+  color: 'secondary',
+})`
+  text-align: center;
+  margin: 0;
+  margin-top: 12px;
+  text-wrap: wrap;
+`;