fix: Launchdarkly flag added carousel-banners

Author: mcbridemarci

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<string, CarouselSlide>();
@@ -124,13 +127,16 @@ export const AccountOverviewLayout = ({
   return (
     <>
       <div className="account-overview__balance-wrapper">{children}</div>
-      <Carousel
-        slides={slides}
-        isLoading={isLoading}
-        onClick={handleCarouselClick}
-        onClose={handleRemoveSlide}
-        onRenderSlides={handleRenderSlides}
-      />
+
+      {isCarouselEnabled && (
+        <Carousel
+          slides={slides}
+          isLoading={isLoading}
+          onClick={handleCarouselClick}
+          onClose={handleRemoveSlide}
+          onRenderSlides={handleRenderSlides}
+        />
+      )}
       <AccountOverviewTabs {...tabsProps}></AccountOverviewTabs>
       {
         ///: BEGIN:ONLY_INCLUDE_IF(solana)

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,