Merge pull request #242 from lidofinance/develop

Merge develop to main
lidofinance · Feb 20, 2024 · ff72eb3 · ff72eb3
2 parents 894f740 + 2948c2a
commit ff72eb3
Show file tree

Hide file tree

Showing 24 changed files with 274 additions and 45 deletions.
diff --git a/.env.example b/.env.example
@@ -57,3 +57,4 @@ WALLETCONNECT_PROJECT_ID=
 
 # ETH Stake Widget API for IPFS mode
 WIDGET_API_BASE_PATH_FOR_IPFS=
+
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "useTabs": false,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "printWidth": 80
 }
diff --git a/IPFS.json b/IPFS.json
@@ -0,0 +1,4 @@
+{
+  "__warning__": "For testing purposes only",
+  "cid": "bafybeightexodcodz3srlseidd6olah7lezz4tmyeiy7qod6oz2ol45r3i"
+}
diff --git a/assets/icons/attention-triangle-ipfs.svg b/assets/icons/attention-triangle-ipfs.svg
diff --git a/env-dynamics.mjs b/env-dynamics.mjs
@@ -37,13 +37,17 @@ export const walletconnectProjectId = process.env.WALLETCONNECT_PROJECT_ID;
 export const ipfsMode = toBoolean(process.env.IPFS_MODE);
 
 /** @type string[] */
-export const prefillUnsafeElRpcUrls1 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_1?.split(',') ?? [];
+export const prefillUnsafeElRpcUrls1 =
+  process.env.PREFILL_UNSAFE_EL_RPC_URLS_1?.split(',') ?? [];
 
 /** @type string[] */
-export const prefillUnsafeElRpcUrls5 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_5?.split(',') ?? [];
+export const prefillUnsafeElRpcUrls5 =
+  process.env.PREFILL_UNSAFE_EL_RPC_URLS_5?.split(',') ?? [];
 
 /** @type string[] */
-export const prefillUnsafeElRpcUrls17000 = process.env.PREFILL_UNSAFE_EL_RPC_URLS_17000?.split(',') ?? [];
+export const prefillUnsafeElRpcUrls17000 =
+  process.env.PREFILL_UNSAFE_EL_RPC_URLS_17000?.split(',') ?? [];
 
 /** @type string */
-export const widgetApiBasePathForIpfs = process.env.WIDGET_API_BASE_PATH_FOR_IPFS;
+export const widgetApiBasePathForIpfs =
+  process.env.WIDGET_API_BASE_PATH_FOR_IPFS;
diff --git a/features/ipfs/ipfs-base-script.tsx b/features/ipfs/ipfs-base-script.tsx
@@ -6,9 +6,9 @@ let ipfsBaseScript = '';
 // #!if IPFS_MODE === "true"
 ipfsBaseScript = `
 (function () {
-  const base = document.createElement('base')
-  base.href = window.location.pathname
-  document.head.append(base)
+  const base = document.createElement('base');
+  base.href = window.location.pathname;
+  document.head.append(base);
 })();
 `;
 // #!endif

diff --git a/features/ipfs/outdated-hash-banner/index.ts b/features/ipfs/outdated-hash-banner/index.ts
@@ -0,0 +1 @@
+export { OutdatedHashBanner } from './outdated-hash-banner';
diff --git a/features/ipfs/outdated-hash-banner/outdated-hash-banner.tsx b/features/ipfs/outdated-hash-banner/outdated-hash-banner.tsx
@@ -0,0 +1,43 @@
+import { Button, Modal } from '@lidofinance/lido-ui';
+import { dynamics } from 'config';
+import { WarningIcon, Wrapper, WarningText } from './styles';
+import { useIpfsHashCheck } from './use-ipfs-hash-check';
+import NoSsrWrapper from 'shared/components/no-ssr-wrapper';
+
+export const OutdatedHashBanner = dynamics.ipfsMode
+  ? () => {
+      const { isUpdateAvailable, data, setConditionsAccepted } =
+        useIpfsHashCheck();
+
+      return (
+        <NoSsrWrapper>
+          <Modal open={isUpdateAvailable}>
+            <Wrapper>
+              <WarningIcon />
+              <WarningText>
+                This is not the most recent version of IPFS Widget
+              </WarningText>
+              <a
+                href={data.remoteCidLink}
+                target="_self"
+                rel="noopener noreferrer"
+              >
+                <Button size="sm" fullwidth variant="filled">
+                  Get to the actual version
+                </Button>
+              </a>
+              <Button
+                size="sm"
+                fullwidth
+                color="error"
+                variant="outlined"
+                onClick={() => setConditionsAccepted(true)}
+              >
+                Accept risks and use the current version
+              </Button>
+            </Wrapper>
+          </Modal>
+        </NoSsrWrapper>
+      );
+    }
+  : () => null;
diff --git a/features/ipfs/outdated-hash-banner/styles.tsx b/features/ipfs/outdated-hash-banner/styles.tsx
@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import WarningIconSrc from 'assets/icons/attention-triangle-ipfs.svg';
+import { Text } from '@lidofinance/lido-ui';
+
+export const WarningIcon = styled.img.attrs({
+  src: WarningIconSrc,
+  alt: 'warning',
+})`
+  display: block;
+  width: 58px;
+  height: 51px;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0px;
+
+  button {
+    white-space: unset;
+  }
+
+  a {
+    align-self: stretch;
+    width: 100%;
+  }
+`;
+
+export const WarningText = styled(Text).attrs({
+  weight: 700,
+  size: 'lg',
+})`
+  text-align: center;
+  margin: 12px 0 28px;
+  text-wrap: balance;
+`;
diff --git a/features/ipfs/outdated-hash-banner/use-ipfs-hash-check.ts b/features/ipfs/outdated-hash-banner/use-ipfs-hash-check.ts
@@ -0,0 +1,103 @@
+import { useLidoSWR } from '@lido-sdk/react';
+import { BASE_PATH_ASSET, dynamics } from 'config';
+import { useState } from 'react';
+import { useMainnetStaticRpcProvider } from 'shared/hooks/use-mainnet-static-rpc-provider';
+import { standardFetcher } from 'utils/standardFetcher';
+import { STRATEGY_IMMUTABLE, STRATEGY_LAZY } from 'utils/swrStrategies';
+
+type EnsHashCheckReturn = {
+  cid: string;
+  ens?: string;
+  link: string;
+} | null;
+
+type ReleaseInfo = {
+  cid?: string;
+  ens?: string;
+};
+
+// works with any type of IPFS hash
+const URL_CID_REGEX =
+  /[/.](?<cid>Qm[1-9A-HJ-NP-Za-km-z]{44,}|b[A-Za-z2-7]{58,}|B[A-Z2-7]{58,}|z[1-9A-HJ-NP-Za-km-z]{48,}|F[0-9A-F]{50,})([./#?]|$)/;
+
+// for dev and local testing you can set to '/runtime/IPFS.json' and have file at /public/runtime/
+const IPFS_RELEASE_URL =
+  'https://raw.githubusercontent.com/lidofinance/ethereum-staking-widget/main/IPFS.json';
+
+export const useIpfsHashCheck = () => {
+  const [areConditionsAccepted, setConditionsAccepted] = useState(false);
+  const provider = useMainnetStaticRpcProvider();
+
+  // local cid extraction
+  const currentCidSWR = useLidoSWR(
+    ['swr:ipfs-cid-extraction'],
+    async () => {
+      const urlCid = URL_CID_REGEX.exec(window.location.href)?.groups?.cid;
+      if (urlCid) return urlCid;
+      const headers = await fetch(`${BASE_PATH_ASSET}/runtime/window-env.js`, {
+        method: 'HEAD',
+      });
+      return headers.headers.get('X-Ipfs-Roots');
+    },
+    { ...STRATEGY_IMMUTABLE, isPaused: () => !dynamics.ipfsMode },
+  );
+
+  // ens cid extraction
+  const remoteCidSWR = useLidoSWR<EnsHashCheckReturn>(
+    ['swr:ipfs-hash-check'],
+    async (): Promise<EnsHashCheckReturn> => {
+      const releaseInfo = await standardFetcher<ReleaseInfo>(IPFS_RELEASE_URL, {
+        headers: { Accept: 'application/json' },
+      });
+      if (releaseInfo.ens) {
+        const resolver = await provider.getResolver(releaseInfo.ens);
+        if (resolver) {
+          const contentHash = await resolver.getContentHash();
+          if (contentHash) {
+            return {
+              cid: contentHash,
+              ens: releaseInfo.ens,
+              link: `https://${releaseInfo.ens}.link`,
+            };
+          }
+        }
+      }
+      if (releaseInfo.cid) {
+        return {
+          cid: releaseInfo.cid,
+          link: `https://${releaseInfo.cid}.ipfs.cf-ipfs.com`,
+        };
+      }
+      return null;
+    },
+    { ...STRATEGY_LAZY, isPaused: () => !dynamics.ipfsMode },
+  );
+
+  const isUpdateAvailable = Boolean(
+    !areConditionsAccepted &&
+      remoteCidSWR.data &&
+      currentCidSWR.data &&
+      remoteCidSWR.data.cid !== currentCidSWR.data,
+  );
+
+  return {
+    isUpdateAvailable,
+    setConditionsAccepted,
+    get data() {
+      return {
+        remoteCid: remoteCidSWR.data?.cid,
+        currentCid: currentCidSWR.data,
+        remoteCidLink: remoteCidSWR.data?.link,
+      };
+    },
+    get initialLoading() {
+      return remoteCidSWR.initialLoading || currentCidSWR.initialLoading;
+    },
+    get loading() {
+      return remoteCidSWR.loading || currentCidSWR.loading;
+    },
+    get error() {
+      return remoteCidSWR.error || currentCidSWR.error;
+    },
+  };
+};
diff --git a/features/stake/stake.tsx b/features/stake/stake.tsx
@@ -1,10 +1,11 @@
+import { dynamics } from 'config';
 import { useWeb3Key } from 'shared/hooks/useWeb3Key';
 import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
+import { GoerliSunsetBanner } from 'shared/banners/goerli-sunset';
 
 import { StakeFaq } from './stake-faq/stake-faq';
 import { LidoStats } from './lido-stats/lido-stats';
 import { StakeForm } from './stake-form';
-import { GoerliSunsetBanner } from 'shared/banners/goerli-sunset';
 
 export const Stake = () => {
   const key = useWeb3Key();
@@ -15,7 +16,7 @@ export const Stake = () => {
         <StakeForm key={key} />
       </NoSSRWrapper>
       <LidoStats />
-      <StakeFaq />
+      {!dynamics.ipfsMode && <StakeFaq />}
     </>
   );
 };
diff --git a/features/withdrawals/claim/claim.tsx b/features/withdrawals/claim/claim.tsx
@@ -1,3 +1,4 @@
+import { dynamics } from 'config';
 import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context';
 import { ClaimFaq } from 'features/withdrawals/withdrawals-faq/claim-faq';
 
@@ -12,7 +13,7 @@ export const Claim = () => {
       <ClaimFormProvider>
         <ClaimWallet />
         <ClaimForm />
-        <ClaimFaq />
+        {!dynamics.ipfsMode && <ClaimFaq />}
         <TxClaimModal />
       </ClaimFormProvider>
     </TransactionModalProvider>

diff --git a/features/withdrawals/request/form/options/lido-option.tsx b/features/withdrawals/request/form/options/lido-option.tsx
@@ -19,6 +19,7 @@ import {
   LidoOptionValue,
   LidoOptionInlineLoader,
 } from './styles';
+import { OnlyInfraRender } from 'shared/components/only-infra-render';
 
 const TooltipWithdrawalAmount = () => {
   const { navigateInpageAnchor } = useInpageNavigation();
@@ -29,19 +30,21 @@ const TooltipWithdrawalAmount = () => {
       title={
         <>
           The final amount of claimable ETH can differ
-          <br /> For more info, please read{' '}
-          <a
-            data-testid="lidoOptionToolTipFAQ"
-            href="#amountDifferentFromRequested"
-            onClick={(e) => {
-              trackMatomoEvent(
-                MATOMO_CLICK_EVENTS_TYPES.withdrawalFAQtooltipEthAmount,
-              );
-              navigateInpageAnchor(e);
-            }}
-          >
-            FAQ
-          </a>
+          <OnlyInfraRender>
+            <br /> For more info, please read{' '}
+            <a
+              data-testid="lidoOptionToolTipFAQ"
+              href="#amountDifferentFromRequested"
+              onClick={(e) => {
+                trackMatomoEvent(
+                  MATOMO_CLICK_EVENTS_TYPES.withdrawalFAQtooltipEthAmount,
+                );
+                navigateInpageAnchor(e);
+              }}
+            >
+              FAQ
+            </a>
+          </OnlyInfraRender>
         </>
       }
     >

diff --git a/features/withdrawals/request/request.tsx b/features/withdrawals/request/request.tsx
@@ -1,3 +1,4 @@
+import { dynamics } from 'config';
 import { RequestFormProvider } from './request-form-context';
 import { RequestFaq } from '../withdrawals-faq/request-faq';
 import { RequestForm } from './form';
@@ -11,7 +12,7 @@ export const Request = () => {
       <RequestFormProvider>
         <RequestWallet />
         <RequestForm />
-        <RequestFaq />
+        {!dynamics.ipfsMode && <RequestFaq />}
         <TxRequestModal />
       </RequestFormProvider>
     </TransactionModalProvider>

diff --git a/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx b/features/withdrawals/request/wallet/wallet-queue-tooltip.tsx
@@ -10,6 +10,8 @@ import {
 import { QueueInfoStyled, DataTableRowStyled } from './styles';
 import { useRequestFormData } from '../request-form-context';
 import { useInpageNavigation } from 'providers/inpage-navigation';
+import { OnlyIpfsRender } from 'shared/components/only-ipfs-render';
+import { OnlyInfraRender } from 'shared/components/only-infra-render';
 
 export const WalletQueueTooltip = () => {
   const waitingTime = useWaitingTime('');
@@ -38,19 +40,21 @@ export const WalletQueueTooltip = () => {
   const tooltipTitle = (
     <>
       The withdrawal request time depends on the mode, overall amount of stETH
-      in queue and{' '}
-      <a
-        href="#withdrawalsPeriod"
-        data-testid="otherFactorsLink"
-        onClick={(e) => {
-          trackMatomoEvent(
-            MATOMO_CLICK_EVENTS_TYPES.withdrawalOtherFactorsTooltipMode,
-          );
-          navigateInpageAnchor(e);
-        }}
-      >
-        other factors
-      </a>
+      in queue and <OnlyIpfsRender>other factors</OnlyIpfsRender>
+      <OnlyInfraRender>
+        <a
+          href="#withdrawalsPeriod"
+          data-testid="otherFactorsLink"
+          onClick={(e) => {
+            trackMatomoEvent(
+              MATOMO_CLICK_EVENTS_TYPES.withdrawalOtherFactorsTooltipMode,
+            );
+            navigateInpageAnchor(e);
+          }}
+        >
+          other factors
+        </a>
+      </OnlyInfraRender>
       .{queueInfo}
     </>
   );

diff --git a/features/withdrawals/withdrawals-tabs.tsx b/features/withdrawals/withdrawals-tabs.tsx
@@ -24,6 +24,7 @@ export const WithdrawalsTabs = () => {
   return (
     <ClaimDataProvider>
       <Switch checked={isClaimTab} routes={withdrawalRoutes} />
+
       <GoerliSunsetBanner />
       {isClaimTab ? <Claim /> : <Request />}
     </ClaimDataProvider>