refactor: faq props passing

lidofinance · Dec 26, 2023 · 3f684f7 · 3f684f7
1 parent 01088ca
commit 3f684f7
Show file tree

Hide file tree

Showing 17 changed files with 147 additions and 224 deletions.
diff --git a/features/ipfs/home-page-ipfs.tsx b/features/ipfs/home-page-ipfs.tsx
@@ -1,8 +1,6 @@
 import { FC, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/router';
 
-import { PageFAQ } from '@lidofinance/ui-faq';
-
 import {
   getPathWithoutFirstSlash,
   HOME_PATH,
@@ -15,13 +13,13 @@ import {
 } from 'config/urls';
 import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
 import { usePrefixedReplace } from 'shared/hooks/use-prefixed-history';
-
 import { StakePage } from 'features/stake';
 import WrapPage from 'pages/wrap/[[...mode]]';
 import WithdrawalsPage from 'pages/withdrawals/[mode]';
 import ReferralPage from 'pages/referral';
 import RewardsPage from 'pages/rewards';
 import SettingsPage from 'pages/settings';
+import { FaqWithMeta } from 'utils/faq';
 
 /**
  * We are using single index.html endpoint
@@ -40,29 +38,17 @@ const IPFS_ROUTABLE_PAGES = [
 ];
 
 export type HomePageIpfsProps = {
-  stakePage?: {
-    faq: PageFAQ | null;
-    eTag?: string | null;
-  };
-  wrapPage?: {
-    faq: PageFAQ | null;
-    eTag?: string | null;
-  };
-  withdrawalsPageRequest?: {
-    faq: PageFAQ | null;
-    eTag?: string | null;
-  };
-  withdrawalsPageClaim?: {
-    faq: PageFAQ | null;
-    eTag?: string | null;
-  };
+  faqWithMetaStakePage: FaqWithMeta | null;
+  faqWithMetaWrapPage: FaqWithMeta | null;
+  faqWithMetaWithdrawalsPageRequest: FaqWithMeta | null;
+  faqWithMetaWithdrawalsPageClaim: FaqWithMeta | null;
 };
 
 const HomePageIpfs: FC<HomePageIpfsProps> = ({
-  stakePage,
-  wrapPage,
-  withdrawalsPageRequest,
-  withdrawalsPageClaim,
+  faqWithMetaStakePage,
+  faqWithMetaWrapPage,
+  faqWithMetaWithdrawalsPageRequest,
+  faqWithMetaWithdrawalsPageClaim,
 }) => {
   const router = useRouter();
   const { asPath } = router;
@@ -102,20 +88,10 @@ const HomePageIpfs: FC<HomePageIpfsProps> = ({
     case getPathWithoutFirstSlash(WRAP_PATH): {
       if (parsedPath[1] === 'unwrap') {
         spaPage = (
-          <WrapPage
-            mode={'unwrap'}
-            pageFAQ={wrapPage?.faq}
-            faqETag={wrapPage?.eTag}
-          />
+          <WrapPage mode={'unwrap'} faqWithMeta={faqWithMetaWrapPage} />
         );
       } else {
-        spaPage = (
-          <WrapPage
-            mode={'wrap'}
-            pageFAQ={wrapPage?.faq}
-            faqETag={wrapPage?.eTag}
-          />
-        );
+        spaPage = <WrapPage mode={'wrap'} faqWithMeta={faqWithMetaWrapPage} />;
       }
       break;
     }
@@ -125,16 +101,20 @@ const HomePageIpfs: FC<HomePageIpfsProps> = ({
         spaPage = (
           <WithdrawalsPage
             mode={'claim'}
-            pageClaimFAQ={withdrawalsPageClaim?.faq}
-            faqETag={withdrawalsPageClaim?.eTag}
+            faqWithMetaWithdrawalsPageClaim={faqWithMetaWithdrawalsPageClaim}
+            faqWithMetaWithdrawalsPageRequest={
+              faqWithMetaWithdrawalsPageRequest
+            }
           />
         );
       } else {
         spaPage = (
           <WithdrawalsPage
             mode={'request'}
-            pageRequestFAQ={withdrawalsPageRequest?.faq}
-            faqETag={withdrawalsPageRequest?.eTag}
+            faqWithMetaWithdrawalsPageClaim={faqWithMetaWithdrawalsPageClaim}
+            faqWithMetaWithdrawalsPageRequest={
+              faqWithMetaWithdrawalsPageRequest
+            }
           />
         );
       }
@@ -157,9 +137,7 @@ const HomePageIpfs: FC<HomePageIpfsProps> = ({
     }
 
     default: {
-      spaPage = (
-        <StakePage pageFAQ={stakePage?.faq} faqETag={stakePage?.eTag} />
-      );
+      spaPage = <StakePage faqWithMeta={faqWithMetaStakePage} />;
     }
   }
 

diff --git a/features/stake/stake-faq/stake-faq.tsx b/features/stake/stake-faq/stake-faq.tsx
@@ -1,35 +1,28 @@
 import React, { FC } from 'react';
 
-import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
+import { FaqAccordion } from '@lidofinance/ui-faq';
 
-import { FAQ_STAKE_PAGE_PATH } from 'config';
 import { Section } from 'shared/components';
 import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
+import { FaqWithMeta } from 'utils/faq';
 
 type StakeFaqProps = {
-  pageFAQ?: PageFAQ;
-  eTag?: string | null;
+  faqWithMeta: FaqWithMeta;
 };
 
-export const StakeFaq: FC<StakeFaqProps> = ({ pageFAQ, eTag }) => {
-  // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useUpdatableFaq(FAQ_STAKE_PAGE_PATH, eTag);
-
-  if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) {
-    return null;
-  }
+export const StakeFaq: FC<StakeFaqProps> = ({ faqWithMeta }) => {
+  const { data: pageFAQ } = useUpdatableFaq(faqWithMeta);
+  if (!pageFAQ) return null;
 
   return (
     <>
       <Section title="FAQ">
         <FaqAccordion
-          faqList={pageFaqIpfsMode?.faq || pageFAQ?.faq}
+          faqList={pageFAQ.faq}
           onLinkClick={(props) => {
             faqAccordionOnLinkClick({
-              pageId:
-                pageFaqIpfsMode?.pageIdentification ||
-                pageFAQ?.pageIdentification,
+              pageId: pageFAQ.pageIdentification,
               ...props,
             });
           }}

diff --git a/features/stake/stake-page.tsx b/features/stake/stake-page.tsx
@@ -1,19 +1,17 @@
 import { FC } from 'react';
 import Head from 'next/head';
-import { PageFAQ } from '@lidofinance/ui-faq';
 
 import { Layout } from 'shared/components';
+import { FaqWithMeta } from 'utils/faq';
 
 import { StakeFaq } from './stake-faq/stake-faq';
 import { Stake } from './stake';
 
 export type StakePageProps = {
-  pageFAQ?: PageFAQ | null;
-  // IPFS actual only!
-  faqETag?: string | null;
+  faqWithMeta: FaqWithMeta | null;
 };
 
-export const StakePage: FC<StakePageProps> = ({ pageFAQ, faqETag }) => {
+export const StakePage: FC<StakePageProps> = ({ faqWithMeta }) => {
   return (
     <Layout
       title="Stake Ether"
@@ -23,7 +21,7 @@ export const StakePage: FC<StakePageProps> = ({ pageFAQ, faqETag }) => {
         <title>Stake with Lido | Lido</title>
       </Head>
       <Stake />
-      <StakeFaq pageFAQ={pageFAQ ?? undefined} eTag={faqETag ?? undefined} />
+      {faqWithMeta && <StakeFaq faqWithMeta={faqWithMeta} />}
     </Layout>
   );
 };
diff --git a/features/stake/stake.tsx b/features/stake/stake.tsx
@@ -1,7 +1,6 @@
 import { useWeb3Key } from 'shared/hooks/useWeb3Key';
 import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
 
-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';
@@ -15,7 +14,6 @@ export const Stake = () => {
         <StakeForm key={key} />
       </NoSSRWrapper>
       <LidoStats />
-      <StakeFaq />
     </>
   );
 };
diff --git a/features/withdrawals/claim/claim.tsx b/features/withdrawals/claim/claim.tsx
@@ -1,27 +1,24 @@
-import { PageFAQ } from '@lidofinance/ui-faq';
-
 import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context';
-import { ClaimFaq } from 'features/withdrawals/withdrawals-faq/claim-faq';
+import { FaqWithMeta } from 'utils/faq';
 
 import { ClaimForm } from './form';
 import { TxClaimModal } from './tx-modal';
 import { ClaimWallet } from './wallet';
 import { ClaimFormProvider } from './claim-form-context';
 
+import { ClaimFaq } from '../withdrawals-faq/claim-faq';
+
 type ClaimProps = {
-  faq?: {
-    pageFAQ?: PageFAQ;
-    eTag?: string | null;
-  };
+  faqWithMeta: FaqWithMeta | null;
 };
 
-export const Claim = ({ faq }: ClaimProps) => {
+export const Claim = ({ faqWithMeta }: ClaimProps) => {
   return (
     <TransactionModalProvider>
       <ClaimFormProvider>
         <ClaimWallet />
         <ClaimForm />
-        <ClaimFaq pageFAQ={faq?.pageFAQ} eTag={faq?.eTag} />
+        {faqWithMeta && <ClaimFaq faqWithMeta={faqWithMeta} />}
         <TxClaimModal />
       </ClaimFormProvider>
     </TransactionModalProvider>

diff --git a/features/withdrawals/request/request.tsx b/features/withdrawals/request/request.tsx
@@ -1,6 +1,5 @@
-import { PageFAQ } from '@lidofinance/ui-faq';
-
 import { TransactionModalProvider } from 'shared/transaction-modal';
+import { FaqWithMeta } from 'utils/faq';
 
 import { RequestForm } from './form';
 import { RequestFormProvider } from './request-form-context';
@@ -10,19 +9,16 @@ import { RequestWallet } from './wallet';
 import { RequestFaq } from '../withdrawals-faq/request-faq';
 
 type RequestProps = {
-  faq?: {
-    pageFAQ?: PageFAQ;
-    eTag?: string | null;
-  };
+  faqWithMeta: FaqWithMeta | null;
 };
 
-export const Request = ({ faq }: RequestProps) => {
+export const Request = ({ faqWithMeta }: RequestProps) => {
   return (
     <TransactionModalProvider>
       <RequestFormProvider>
         <RequestWallet />
         <RequestForm />
-        <RequestFaq pageFAQ={faq?.pageFAQ} eTag={faq?.eTag} />
+        {faqWithMeta && <RequestFaq faqWithMeta={faqWithMeta} />}
         <TxRequestModal />
       </RequestFormProvider>
     </TransactionModalProvider>

diff --git a/features/withdrawals/withdrawals-faq/claim-faq.tsx b/features/withdrawals/withdrawals-faq/claim-faq.tsx
@@ -1,27 +1,19 @@
 import React, { FC } from 'react';
 
-import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
+import { FaqAccordion } from '@lidofinance/ui-faq';
 
-import { FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH } from 'config';
 import { Section } from 'shared/components';
 import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
+import { FaqWithMeta } from 'utils/faq';
 
 type ClaimFaqProps = {
-  pageFAQ?: PageFAQ;
-  eTag?: string | null;
+  faqWithMeta: FaqWithMeta;
 };
 
-export const ClaimFaq: FC<ClaimFaqProps> = ({ pageFAQ, eTag }) => {
-  // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useUpdatableFaq(
-    FAQ_WITHDRAWALS_PAGE_CLAIM_TAB_PATH,
-    eTag,
-  );
-
-  if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) {
-    return null;
-  }
+export const ClaimFaq: FC<ClaimFaqProps> = ({ faqWithMeta }) => {
+  const { data: pageFAQ } = useUpdatableFaq(faqWithMeta);
+  if (!pageFAQ) return null;
 
   return (
     <>

diff --git a/features/withdrawals/withdrawals-faq/request-faq.tsx b/features/withdrawals/withdrawals-faq/request-faq.tsx
@@ -1,32 +1,24 @@
 import React, { FC } from 'react';
 
-import { FaqAccordion, PageFAQ, isPageFAQ } from '@lidofinance/ui-faq';
+import { FaqAccordion } from '@lidofinance/ui-faq';
 
-import { FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH } from 'config';
 import { Section } from 'shared/components';
 import { useUpdatableFaq } from 'shared/hooks/use-faq-on-client';
 import { faqAccordionOnLinkClick } from 'utils/faq-matomo';
+import { FaqWithMeta } from 'utils/faq';
 // import { ButtonLinkWrap } from './styles';
 
 // TODO: Replace this link when it will be finalized
 // const LEARN_MORE_LINK =
 //   'https://hackmd.io/@lido/SyaJQsZoj#Lido-on-Ethereum-Withdrawals-Landscape';
 
 type RequestFaqProps = {
-  pageFAQ?: PageFAQ;
-  eTag?: string | null;
+  faqWithMeta: FaqWithMeta;
 };
 
-export const RequestFaq: FC<RequestFaqProps> = ({ pageFAQ, eTag }) => {
-  // This hook actual on IPFS only (see: the `eTag` prop drilling)!
-  const { data: pageFaqIpfsMode } = useUpdatableFaq(
-    FAQ_WITHDRAWALS_PAGE_REQUEST_TAB_PATH,
-    eTag,
-  );
-
-  if (!pageFAQ || (!isPageFAQ(pageFAQ) && !pageFaqIpfsMode)) {
-    return null;
-  }
+export const RequestFaq: FC<RequestFaqProps> = ({ faqWithMeta }) => {
+  const { data: pageFAQ } = useUpdatableFaq(faqWithMeta);
+  if (!pageFAQ) return null;
 
   return (
     <>