From f140ac5d25301b1e11480292016d87a42a14b58d Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Tue, 5 Nov 2024 18:25:15 +0100
Subject: [PATCH] feat(wallet): Wallet faq (#486)

* feat: common FAQ section

* feat: import FAQ content from CMS

* fix: undo unrelated changes
---
 src/components/Wallet/index.tsx        | 11 +++++++++--
 src/components/commonCMS/Faq/index.tsx | 14 ++++++--------
 src/content/wallet.json                |  3 +++
 src/contexts/FaqContentContext.ts      | 10 ++++++++++
 src/pages/wallet.tsx                   | 14 ++++++++++++--
 5 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 src/contexts/FaqContentContext.ts

diff --git a/src/components/Wallet/index.tsx b/src/components/Wallet/index.tsx
index 6532c9f37..6e3172a2b 100644
--- a/src/components/Wallet/index.tsx
+++ b/src/components/Wallet/index.tsx
@@ -1,4 +1,11 @@
-import walletContent from '@/content/wallet.json'
+import type { InferGetStaticPropsType } from 'next'
 import PageContent from '../common/PageContent'
+import type { getStaticProps } from '@/pages/wallet'
+import walletContent from '@/content/wallet.json'
+import FaqContentContext from '@/contexts/FaqContentContext'
 
-export const Wallet = () => <PageContent content={walletContent} path="wallet.json" />
+export const Wallet = ({ pageData }: InferGetStaticPropsType<typeof getStaticProps>) => (
+  <FaqContentContext.Provider value={pageData}>
+    <PageContent content={walletContent} path="wallet.json" />
+  </FaqContentContext.Provider>
+)
diff --git a/src/components/commonCMS/Faq/index.tsx b/src/components/commonCMS/Faq/index.tsx
index 92d8d96e9..81fb90217 100644
--- a/src/components/commonCMS/Faq/index.tsx
+++ b/src/components/commonCMS/Faq/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import {
   Accordion,
   AccordionDetails,
@@ -15,9 +15,12 @@ import RichText from '@/components/common/RichText'
 import { type BaseBlockEntry } from '@/config/types'
 import layoutCss from '@/components/common/styles.module.css'
 import css from './styles.module.css'
+import FaqContentContext from '@/contexts/FaqContentContext'
 
 const Faq = (props: BaseBlockEntry) => {
-  const { title, items } = props.fields
+  const contextProps = useContext(FaqContentContext)
+
+  const { title, items } = contextProps?.faqContent?.fields || props.fields
 
   // Tracks which accordion is open
   const [openMap, setOpenMap] = useState<Record<number, boolean>>()
@@ -54,12 +57,7 @@ const Faq = (props: BaseBlockEntry) => {
                 disableGutters
                 square
               >
-                <AccordionSummary
-                  expandIcon={expanded ? <MinusIcon /> : <PlusIcon />}
-                  onClick={() => {
-                    !expanded
-                  }}
-                >
+                <AccordionSummary expandIcon={expanded ? <MinusIcon /> : <PlusIcon />}>
                   <Typography variant="h5">
                     <RichText {...title} />
                   </Typography>
diff --git a/src/content/wallet.json b/src/content/wallet.json
index a142a43b3..f909cba13 100644
--- a/src/content/wallet.json
+++ b/src/content/wallet.json
@@ -211,6 +211,9 @@
       }
     ]
   },
+  {
+    "component": "commonCMS/Faq"
+  },
   {
     "title": "Introducing<br>Native Swaps",
     "caption": "New feature",
diff --git a/src/contexts/FaqContentContext.ts b/src/contexts/FaqContentContext.ts
new file mode 100644
index 000000000..226b84dd9
--- /dev/null
+++ b/src/contexts/FaqContentContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import type { BaseBlockEntry } from '@/config/types'
+
+const FaqContentContext = createContext<{
+  faqContent: BaseBlockEntry | null
+}>({
+  faqContent: null,
+})
+
+export default FaqContentContext
diff --git a/src/pages/wallet.tsx b/src/pages/wallet.tsx
index b47d71c33..750d849a7 100644
--- a/src/pages/wallet.tsx
+++ b/src/pages/wallet.tsx
@@ -1,6 +1,16 @@
-import type { NextPage } from 'next'
+import type { InferGetStaticPropsType, NextPage } from 'next'
+import client from '@/lib/contentful'
 import { Wallet } from '@/components/Wallet'
+import type { TypeBaseBlockSkeleton } from '@/contentful/types'
 
-const WalletPage: NextPage = () => <Wallet />
+const FAQ_CONTENT_TYPE_ID = '1jCIVFDUzFO1okK8b6TTxS'
+
+const WalletPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (props) => <Wallet {...props} />
+
+export async function getStaticProps() {
+  const faqContent = await client.getEntry<TypeBaseBlockSkeleton>(FAQ_CONTENT_TYPE_ID)
+
+  return { props: { pageData: { faqContent } } }
+}
 
 export default WalletPage