feat(wallet): Wallet faq (#486)

* feat: common FAQ section

* feat: import FAQ content from CMS

* fix: undo unrelated changes

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>
+)

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>

src/content/wallet.json

@@ -211,6 +211,9 @@
       }
     ]
   },
+  {
+    "component": "commonCMS/Faq"
+  },
   {
     "title": "Introducing<br>Native Swaps",
     "caption": "New feature",

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

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