diff --git a/ui/components/multichain/account-overview/account-overview-layout.tsx b/ui/components/multichain/account-overview/account-overview-layout.tsx index eda777709d4a..cb0c094e1a76 100644 --- a/ui/components/multichain/account-overview/account-overview-layout.tsx +++ b/ui/components/multichain/account-overview/account-overview-layout.tsx @@ -10,6 +10,7 @@ import { import { Carousel } from '..'; import { getAppIsLoading, + getRemoteFeatureFlags, ///: BEGIN:ONLY_INCLUDE_IF(solana) hasCreatedSolanaAccount, ///: END:ONLY_INCLUDE_IF @@ -41,6 +42,8 @@ export const AccountOverviewLayout = ({ }: AccountOverviewLayoutProps) => { const dispatch = useDispatch(); const isLoading = useSelector(getAppIsLoading); + const remoteFeatureFlags = useSelector(getRemoteFeatureFlags); + const isCarouselEnabled = Boolean(remoteFeatureFlags?.carouselBanners); const trackEvent = useContext(MetaMetricsContext); const [hasRendered, setHasRendered] = useState(false); @@ -54,7 +57,7 @@ export const AccountOverviewLayout = ({ const [showDownloadMobileAppModal, setShowDownloadMobileAppModal] = useState(false); - const { slides } = useCarouselManagement(); + const { slides } = useCarouselManagement({ enabled: isCarouselEnabled }); const slideById = useMemo(() => { const m = new Map(); @@ -124,13 +127,16 @@ export const AccountOverviewLayout = ({ return ( <>
{children}
- + + {isCarouselEnabled && ( + + )} { ///: BEGIN:ONLY_INCLUDE_IF(solana) diff --git a/ui/hooks/useCarouselManagement/useCarouselManagement.ts b/ui/hooks/useCarouselManagement/useCarouselManagement.ts index d1698f05f35e..f71051e43d33 100644 --- a/ui/hooks/useCarouselManagement/useCarouselManagement.ts +++ b/ui/hooks/useCarouselManagement/useCarouselManagement.ts @@ -19,7 +19,7 @@ import { } from '../../selectors'; import { fetchCarouselSlidesFromContentful } from './fetchCarouselSlidesFromContentful'; -type UseSlideManagementProps = { testDate?: string }; +type UseSlideManagementProps = { testDate?: string; enabled?: boolean }; const ZERO_BALANCE = '0x0'; export function isActive( @@ -89,6 +89,7 @@ function orderByCardPlacement(slides: CarouselSlide[]): CarouselSlide[] { export const useCarouselManagement = ({ testDate, + enabled = true, }: UseSlideManagementProps = {}) => { const inTest = Boolean(process.env.IN_TEST); const dispatch = useDispatch(); @@ -104,6 +105,15 @@ export const useCarouselManagement = ({ ); useEffect(() => { + // If carousel is disabled, clear the slides + if (!enabled) { + const empty: CarouselSlide[] = []; + if (!isEqual(prevSlidesRef.current, empty)) { + dispatch(updateSlides(empty)); + prevSlidesRef.current = empty; + } + return; + } const maybeFetchContentful = async () => { const contentfulEnabled = remoteFeatureFlags?.contentfulCarouselEnabled ?? false; @@ -198,6 +208,7 @@ export const useCarouselManagement = ({ } })(); }, [ + enabled, dispatch, hasZeroBalance, remoteFeatureFlags,