Merge pull request #298 from lidofinance/develop

Merge develop to main

features/ipfs/index.ts

@@ -1,5 +1,8 @@
 export { HomePageIpfs } from './home-page-ipfs';
-
+export { IPFS_INFO_URL } from './rpc-availability-check-result-box';
 export { FaqPlaceholder } from './faq-placeholder';
-export { SecurityStatusBanner } from './security-status-banner';
+export {
+  SecurityStatusBanner,
+  useRemoteVersion,
+} from './security-status-banner';
 export { InsertIpfsBaseScript } from './ipfs-base-script';

features/ipfs/rpc-availability-check-result-box/rpc-availability-check-result-box.tsx

@@ -8,7 +8,7 @@ import { LinkArrow } from 'shared/components/link-arrow/link-arrow';
 
 import { Wrap, RpcStatusBox, Button, Text } from './styles';
 
-const IPFS_INFO_URL = 'https://docs.lido.fi/ipfs/about';
+export const IPFS_INFO_URL = 'https://docs.lido.fi/ipfs/about';
 
 export const RPCAvailabilityCheckResultBox = () => {
   const { isRPCAvailable, handleClickDismiss } = useIPFSInfoBoxStatuses();

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

@@ -1 +1,2 @@
 export { SecurityStatusBanner } from './security-status-banner';
+export { useRemoteVersion } from './use-remote-version';

features/ipfs/security-status-banner/use-remote-version.ts

@@ -0,0 +1,66 @@
+import { useLidoSWR } from '@lido-sdk/react';
+import { dynamics } from 'config';
+import { useMainnetStaticRpcProvider } from 'shared/hooks/use-mainnet-static-rpc-provider';
+import { standardFetcher } from 'utils/standardFetcher';
+import { STRATEGY_LAZY } from 'utils/swrStrategies';
+
+type EnsHashCheckReturn = {
+  cid: string;
+  ens?: string;
+  leastSafeVersion?: string;
+  link: string;
+} | null;
+
+type ReleaseInfoData = Record<string, ReleaseInfo>;
+
+type ReleaseInfo = {
+  cid?: string;
+  ens?: string;
+  leastSafeVersion?: string;
+};
+
+// 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 useRemoteVersion = () => {
+  const provider = useMainnetStaticRpcProvider();
+  // ens cid extraction
+  return useLidoSWR<EnsHashCheckReturn>(
+    ['swr:use-remote-version'],
+    async (): Promise<EnsHashCheckReturn> => {
+      const releaseInfoData = await standardFetcher<ReleaseInfoData>(
+        IPFS_RELEASE_URL,
+        {
+          headers: { Accept: 'application/json' },
+        },
+      );
+
+      const releaseInfo = releaseInfoData[dynamics.defaultChain.toString()];
+      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}.limo`,
+              leastSafeVersion: releaseInfo.leastSafeVersion,
+            };
+          }
+        }
+      }
+      if (releaseInfo?.cid) {
+        return {
+          cid: releaseInfo.cid,
+          link: `https://${releaseInfo.cid}.ipfs.cf-ipfs.com`,
+          leastSafeVersion: releaseInfo.leastSafeVersion,
+        };
+      }
+
+      throw new Error('invalid IPFS manifest content');
+    },
+    { ...STRATEGY_LAZY },
+  );
+};

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

@@ -4,47 +4,26 @@ 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 { STRATEGY_IMMUTABLE } from 'utils/swrStrategies';
 import { useClientConfig } from 'providers/client-config';
 import { overrideWithQAMockBoolean } from 'utils/qa';
 
 import { isVersionLess } from './utils';
 
 import buildInfo from 'build-info.json';
+import { useRemoteVersion } from './use-remote-version';
 
 export const NO_SAFE_VERSION = 'NONE_AVAILABLE';
 
-type EnsHashCheckReturn = {
-  cid: string;
-  ens?: string;
-  leastSafeVersion?: string;
-  link: string;
-} | null;
-
-type ReleaseInfoData = Record<string, ReleaseInfo>;
-
-type ReleaseInfo = {
-  cid?: string;
-  ens?: string;
-  leastSafeVersion?: 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 useVersionCheck = () => {
   const { active } = useWeb3();
   const { setIsWalletConnectionAllowed } = useClientConfig();
   const { forceDisconnect } = useForceDisconnect();
   const [areConditionsAccepted, setConditionsAccepted] = useState(false);
-  const provider = useMainnetStaticRpcProvider();
 
   // local cid extraction
   const currentCidSWR = useLidoSWR(
@@ -61,43 +40,7 @@ export const useVersionCheck = () => {
   );
 
   // ens cid extraction
-  const remoteVersionSWR = useLidoSWR<EnsHashCheckReturn>(
-    ['swr:ipfs-hash-check'],
-    async (): Promise<EnsHashCheckReturn> => {
-      const releaseInfoData = await standardFetcher<ReleaseInfoData>(
-        IPFS_RELEASE_URL,
-        {
-          headers: { Accept: 'application/json' },
-        },
-      );
-
-      const releaseInfo = releaseInfoData[dynamics.defaultChain.toString()];
-      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}.limo`,
-              leastSafeVersion: releaseInfo.leastSafeVersion,
-            };
-          }
-        }
-      }
-      if (releaseInfo?.cid) {
-        return {
-          cid: releaseInfo.cid,
-          link: `https://${releaseInfo.cid}.ipfs.cf-ipfs.com`,
-          leastSafeVersion: releaseInfo.leastSafeVersion,
-        };
-      }
-
-      throw new Error('invalid IPFS manifest content');
-    },
-    { ...STRATEGY_LAZY },
-  );
+  const remoteVersionSWR = useRemoteVersion();
 
   const isUpdateAvailable = overrideWithQAMockBoolean(
     Boolean(

features/stake/swap-discount-banner/swap-discount-banner.tsx

@@ -21,7 +21,7 @@ export const SwapDiscountBanner = ({ children }: React.PropsWithChildren) => {
   } = data;
   const Link = CustomLink ?? OverlayLink;
   return (
-    <Wrap>
+    <Wrap data-testid="oneInchDiscountBanner">
       <Icon />
       <TextWrap>
         <BannerText discountPercent={discountPercent} />

features/withdrawals/request/form/options/dex-options.tsx

@@ -14,7 +14,6 @@ import {
   DexOptionLoader,
   DexWarning,
 } from './styles';
-// @ts-expect-error https://www.npmjs.com/package/@svgr/webpack
 import { ReactComponent as AttentionTriangle } from 'assets/icons/attention-triangle.svg';
 
 type DexOptionProps = {

features/withdrawals/withdrawals-constants/index.ts

@@ -14,6 +14,6 @@ export const VALIDATION_CONTEXT_TIMEOUT = 4000;
 
 export const ENABLED_WITHDRAWAL_DEXES: DexWithdrawalApi[] =
   overrideWithQAMockArray(
-    ['one-inch', 'open-ocean', 'paraswap'],
+    ['one-inch', 'paraswap', 'bebop'],
     'mock-qa-helpers-enabled-withdrawal-dexes',
   );

global.d.ts

@@ -2,3 +2,16 @@ interface Window {
   // see _document.js for definition
   _paq: undefined | [string, ...unknown[]][];
 }
+
+declare module '*.svg' {
+  /**
+   * Use `any` to avoid conflicts with
+   * `@svgr/webpack` plugin or
+   * `babel-plugin-inline-react-svg` plugin.
+   */
+  const content: any;
+  export const ReactComponent: React.FunctionComponent<
+    React.ComponentProps<'svg'>
+  >;
+  export default content;
+}

shared/banners/l2-banner/l2-banner.tsx

@@ -15,7 +15,7 @@ type L2BannerProps = {
   buttonText: React.ReactNode;
   buttonHref?: string;
   isLocalLink?: boolean;
-  testidWrap?: string;
+  testId?: string;
   testidButton?: string;
   onClickButton?: () => void;
 };
@@ -28,7 +28,7 @@ export const L2Banner = ({
   buttonText,
   buttonHref = L2_DISCOVERY_LINK,
   isLocalLink,
-  testidWrap,
+  testId,
   testidButton,
   onClickButton,
 }: L2BannerProps) => {
@@ -51,7 +51,7 @@ export const L2Banner = ({
   );
 
   return (
-    <Wrapper data-testid={testidWrap}>
+    <Wrapper data-testid={testId}>
       {title && <TextHeader>{title}</TextHeader>}
       <TextWrap>{text}</TextWrap>
       <FooterWrap>

shared/banners/l2-banners/l2-after-stake.tsx

@@ -15,7 +15,7 @@ export const L2AfterStake: React.FC = () => {
       }
       buttonText="Learn more"
       buttonHref={L2_DISCOVERY_LINK}
-      testidWrap="l2LowFeeBanner"
+      testId="l2LowFeeBanner"
       testidButton="l2LowFee"
       onClickButton={linkClickHandler}
     />

shared/banners/l2-banners/l2-after-wrap.tsx

@@ -18,7 +18,7 @@ export const L2AfterWrap = () => {
       }
       buttonText="Learn more"
       buttonHref={L2_LEARN_MORE_AFTER_WRAP_LINK}
-      testidWrap="l2LowFeeBanner"
+      testId="l2LowFeeBanner"
       testidButton="l2LowFee"
       onClickButton={linkClickHandler}
     />

shared/banners/l2-banners/l2-from-stake-to-wrap.tsx

@@ -8,6 +8,7 @@ const linkClickHandler = () => trackEvent(...MATOMO_CLICK_EVENTS.l2BannerStake);
 export const L2FromStakeToWrap = () => {
   return (
     <L2Banner
+      testId="L2Banner"
       buttonText="Go to Wrap"
       buttonHref={URLS.WRAP_PATH}
       isLocalLink

shared/banners/l2-banners/l2-wsteth.tsx

@@ -16,7 +16,7 @@ export const L2Wsteth = ({ matomoEventLink }: L2WstethProps) => {
   );
   return (
     <L2Banner
-      testidWrap="L2wstETHbanner"
+      testId="L2wstETHbanner"
       testidButton="l2WSstethlearnMore"
       buttonText="Learn More"
       onClickButton={linkClickHandler}

shared/components/layout/footer/footer.tsx

@@ -9,6 +9,7 @@ import {
   Version,
   LinkDivider,
 } from './styles';
+import { LinkToIpfs } from './link-to-ipfs';
 
 const getVersionInfo = () => {
   const { version, branch } = buildInfo;
@@ -37,22 +38,26 @@ const getVersionInfo = () => {
 
 const { label, link } = getVersionInfo();
 
-export const Footer: FC = () => (
-  <FooterStyle size="full" forwardedAs="footer">
-    <LogoLidoStyle />
-    <FooterLink data-testid="termsOfUse" href="https://lido.fi/terms-of-use">
-      Terms of Use
-    </FooterLink>
-    <LinkDivider />
-    <FooterLink
-      data-testid="privacyNotice"
-      href="https://lido.fi/privacy-notice"
-    >
-      Privacy Notice
-    </FooterLink>
-    <Version data-testid="appVersion" href={link}>
-      {label}
-    </Version>
-    <FooterDivider />
-  </FooterStyle>
-);
+export const Footer: FC = () => {
+  return (
+    <FooterStyle size="full" forwardedAs="footer">
+      <LogoLidoStyle />
+      <FooterLink data-testid="termsOfUse" href="https://lido.fi/terms-of-use">
+        Terms of Use
+      </FooterLink>
+      <LinkDivider />
+      <FooterLink
+        data-testid="privacyNotice"
+        href="https://lido.fi/privacy-notice"
+        $marginRight="auto"
+      >
+        Privacy Notice
+      </FooterLink>
+      <LinkToIpfs />
+      <Version data-testid="appVersion" href={link}>
+        {label}
+      </Version>
+      <FooterDivider />
+    </FooterStyle>
+  );
+};

shared/components/layout/footer/link-to-ipfs.tsx

@@ -0,0 +1,15 @@
+import { IPFS_INFO_URL, useRemoteVersion } from 'features/ipfs';
+
+import { OnlyInfraRender } from 'shared/components/only-infra-render';
+import { ExternalLink } from './styles';
+
+export const LinkToIpfs = () => {
+  const { data } = useRemoteVersion();
+  return (
+    <OnlyInfraRender
+      renderIPFS={<ExternalLink href={IPFS_INFO_URL}>IPFS Docs</ExternalLink>}
+    >
+      {data && <ExternalLink href={data?.link}>IPFS</ExternalLink>}
+    </OnlyInfraRender>
+  );
+};