fix: Fix accordion label inconsistency in stablecoins page

src/components/StablecoinAccordion/AccordionCustomItem.tsx

@@ -1,4 +1,4 @@
-import { BaseHTMLAttributes, ReactNode, useState } from "react"
+import { BaseHTMLAttributes, ReactNode } from "react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 
@@ -51,15 +51,26 @@ interface AccordionCustomItemProps {
    * The category name of each accordion section
    */
   category: CategoryNameType
+  /**
+   * Whether the accordion item is open
+   */
+  isOpen?: boolean
+  /**
+   * Callback when open state changes
+   */
+  onOpenChange?: (isOpen: boolean) => void
   children: ReactNode
 }
 
 export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
-  const { category, children } = props
+  const { category, children, isOpen = false, onOpenChange } = props
   const { t } = useTranslation("page-stablecoins")
-  const [open, setOpen] = useState(false)
 
-  const handleOpen = () => setOpen(!open)
+  const handleOpen = () => {
+    if (onOpenChange) {
+      onOpenChange(!isOpen)
+    }
+  }
 
   const contentObj = accordionButtonContent[category]
 
@@ -97,7 +108,7 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
             </p>
           </div>
         </Flex>
-        <MoreOrLessLink isOpen={open} />
+        <MoreOrLessLink isOpen={isOpen} />
       </AccordionTrigger>
       <AccordionContent className="-mx-px -mb-px mt-0 border border-border bg-background p-0 text-md md:p-0">
         <Flex className="flex-col justify-between p-8 lg:flex-row">

src/components/StablecoinAccordion/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { MdArrowForward } from "react-icons/md"
 
 import { ChildOnlyProp, TranslationKey } from "@/lib/types"
@@ -18,6 +19,7 @@ import {
   RightColumnPanel,
 } from "./AccordionCustomItem"
 import { useStablecoinAccordion } from "./useStablecoinAccordion"
+import { CategoryNameType } from "./utils"
 
 import { useTranslation } from "@/hooks/useTranslation"
 
@@ -61,13 +63,18 @@ const H4 = (props: ChildOnlyProp) => (
 const StablecoinAccordion = () => {
   const { cardListGroups } = useStablecoinAccordion()
   const { t } = useTranslation("page-stablecoins")
+  const [openItem, setOpenItem] = useState<CategoryNameType | null>(null)
 
   // Overrides CardList default image width
   const DEFAULT_IMAGE_WIDTH = 24
 
   return (
     <Accordion type="single" className="w-full rounded" collapsible>
-      <AccordionCustomItem category="dapps">
+      <AccordionCustomItem
+        category="dapps"
+        isOpen={openItem === "dapps"}
+        onOpenChange={(isOpen) => setOpenItem(isOpen ? "dapps" : null)}
+      >
         <LeftColumnPanel>
           <SectionTitle>
             {t("page-stablecoins-accordion-requirements")}
@@ -110,7 +117,11 @@ const StablecoinAccordion = () => {
           />
         </RightColumnPanel>
       </AccordionCustomItem>
-      <AccordionCustomItem category="buy">
+      <AccordionCustomItem
+        category="buy"
+        isOpen={openItem === "buy"}
+        onOpenChange={(isOpen) => setOpenItem(isOpen ? "buy" : null)}
+      >
         <LeftColumnPanel>
           <SectionTitle>
             {t("page-stablecoins-accordion-requirements")}
@@ -139,7 +150,11 @@ const StablecoinAccordion = () => {
           />
         </RightColumnPanel>
       </AccordionCustomItem>
-      <AccordionCustomItem category="earn">
+      <AccordionCustomItem
+        category="earn"
+        isOpen={openItem === "earn"}
+        onOpenChange={(isOpen) => setOpenItem(isOpen ? "earn" : null)}
+      >
         <LeftColumnPanel>
           <SectionTitle>
             {t("page-stablecoins-accordion-requirements")}
@@ -168,7 +183,11 @@ const StablecoinAccordion = () => {
           />
         </RightColumnPanel>
       </AccordionCustomItem>
-      <AccordionCustomItem category="generate">
+      <AccordionCustomItem
+        category="generate"
+        isOpen={openItem === "generate"}
+        onOpenChange={(isOpen) => setOpenItem(isOpen ? "generate" : null)}
+      >
         <LeftColumnPanel>
           <SectionTitle>
             {t("page-stablecoins-accordion-requirements")}