diff --git a/app/components/RefreshMyStampsModalContentCard.tsx b/app/components/RefreshMyStampsModalContentCard.tsx index 546d2e40d..d4cb1acb0 100644 --- a/app/components/RefreshMyStampsModalContentCard.tsx +++ b/app/components/RefreshMyStampsModalContentCard.tsx @@ -1,5 +1,5 @@ // --- React hooks -import { useMemo } from "react"; +import { useMemo, useState, useRef } from "react"; // --- Types import { ValidatedProviderGroup } from "../signer/utils"; @@ -26,6 +26,10 @@ export const RefreshMyStampsModalContentCard = ({ selectedProviders, setSelectedProviders, }: RefreshMyStampsModalCardProps): JSX.Element => { + const [disableExpand, setDisableExpand] = useState(false); + const [accordionExpanded, setAccordionExpanded] = useState(false); + + const accordionButton = useRef(null); const platformProviders = useMemo( () => platformGroups.map(({ providers }) => providers?.map(({ name }) => name)).flat(2), [platformGroups] @@ -39,22 +43,31 @@ export const RefreshMyStampsModalContentCard = ({ return (
- - -
- {currentPlatform?.name} -

{currentPlatform?.name}

+ +
+
+ setAccordionExpanded(!accordionExpanded)} + > + {currentPlatform?.name} +

{currentPlatform?.name}

+
-
+
{ + if (!e.target.checked && accordionExpanded) { + // collapse before disabling accordion + accordionButton.current?.click(); + setAccordionExpanded(false); + } + setDisableExpand(!disableExpand); if (e.target.checked) { setSelectedProviders((selectedProviders || []).concat(platformProviders)); } else { @@ -64,9 +77,16 @@ export const RefreshMyStampsModalContentCard = ({ } }} /> - + { + accordionButton.current?.click(); + }} + />
- +
{provider.title}
-
+