feat: add metametrics events to carousel

shared/constants/metametrics.ts

@@ -644,6 +644,9 @@ export enum MetaMetricsEventName {
   AppUnlockedFailed = 'App Unlocked Failed',
   AppLocked = 'App Locked',
   AppWindowExpanded = 'App Window Expanded',
+  BannerDisplay = 'Banner Display',
+  BannerCloseAll = 'Banner Close All',
+  BannerSelect = 'Banner Select',
   BridgeLinkClicked = 'Bridge Link Clicked',
   BitcoinSupportToggled = 'Bitcoin Support Toggled',
   BitcoinTestnetSupportToggled = 'Bitcoin Testnet Support Toggled',
@@ -910,6 +913,7 @@ export enum MetaMetricsEventCategory {
   App = 'App',
   Auth = 'Auth',
   Background = 'Background',
+  Banner = 'Banner',
   // The TypeScript ESLint rule is incorrectly marking this line.
   /* eslint-disable-next-line @typescript-eslint/no-shadow */
   Error = 'Error',

ui/components/multichain/account-overview/account-overview-layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useContext, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { removeSlide, updateSlides } from '../../../store/actions';
 import { Carousel } from '..';
@@ -16,6 +16,12 @@ import {
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
 ///: END:ONLY_INCLUDE_IF
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import {
+  MetaMetricsEventName,
+  MetaMetricsEventCategory,
+} from '../../../../shared/constants/metametrics';
+import type { CarouselSlide } from '../../../../shared/constants/app-state';
 import {
   AccountOverviewTabsProps,
   AccountOverviewTabs,
@@ -42,6 +48,8 @@ export const AccountOverviewLayout = ({
   const slides = useSelector(getSlides);
   const totalBalance = useSelector(getSelectedAccountCachedBalance);
   const isLoading = useSelector(getAppIsLoading);
+  const trackEvent = useContext(MetaMetricsContext);
+  const [hasRendered, setHasRendered] = useState(false);
 
   const hasZeroBalance = totalBalance === ZERO_BALANCE;
 
@@ -75,8 +83,8 @@ export const AccountOverviewLayout = ({
     dispatch(updateSlides(defaultSlides));
   }, [hasZeroBalance]);
 
-  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const handleCarouselClick = (id: string) => {
+    ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
     if (id === 'bridge') {
       const portfolioUrl = getPortfolioUrl(
         'bridge',
@@ -90,26 +98,57 @@ export const AccountOverviewLayout = ({
         url: `${portfolioUrl}&token=${defaultSwapsToken}`,
       });
     }
+    ///: END:ONLY_INCLUDE_IF
+
+    trackEvent({
+      event: MetaMetricsEventName.BannerSelect,
+      category: MetaMetricsEventCategory.Banner,
+      properties: {
+        banner_name: id,
+      },
+    });
   };
-  ///: END:ONLY_INCLUDE_IF
 
   const handleRemoveSlide = (id: string) => {
     if (id === 'fund' && hasZeroBalance) {
       return;
     }
+    if (slides.length === 1) {
+      trackEvent({
+        event: MetaMetricsEventName.BannerCloseAll,
+        category: MetaMetricsEventCategory.Banner,
+      });
+    }
     dispatch(removeSlide(id));
   };
 
+  const handleRenderSlides = useCallback(
+    (renderedSlides: CarouselSlide[]) => {
+      if (!hasRendered) {
+        renderedSlides.forEach((slide) => {
+          trackEvent({
+            event: MetaMetricsEventName.BannerDisplay,
+            category: MetaMetricsEventCategory.Banner,
+            properties: {
+              banner_name: slide.id,
+            },
+          });
+        });
+        setHasRendered(true);
+      }
+    },
+    [hasRendered, trackEvent],
+  );
+
   return (
     <>
       <div className="account-overview__balance-wrapper">{children}</div>
       <Carousel
         slides={slides}
         isLoading={isLoading}
-        ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
         onClick={handleCarouselClick}
-        ///: END:ONLY_INCLUDE_IF
         onClose={handleRemoveSlide}
+        onRenderSlides={handleRenderSlides}
       />
       <AccountOverviewTabs {...tabsProps}></AccountOverviewTabs>
     </>

ui/components/multichain/carousel/carousel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Carousel as ResponsiveCarousel } from 'react-responsive-carousel';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { Box, BoxProps, BannerBase } from '../../component-library';
@@ -24,6 +24,7 @@ export const Carousel = React.forwardRef(
       isLoading = false,
       onClose,
       onClick,
+      onRenderSlides,
       ...props
     }: CarouselProps,
     ref: React.Ref<HTMLDivElement>,
@@ -44,6 +45,17 @@ export const Carousel = React.forwardRef(
       })
       .slice(0, MAX_SLIDES);
 
+    useEffect(() => {
+      if (
+        visibleSlides &&
+        visibleSlides.length > 0 &&
+        onRenderSlides &&
+        !isLoading
+      ) {
+        onRenderSlides(visibleSlides);
+      }
+    }, [visibleSlides, onRenderSlides, isLoading]);
+
     const handleClose = (e: React.MouseEvent<HTMLElement>, slideId: string) => {
       e.preventDefault();
       e.stopPropagation();

ui/components/multichain/carousel/carousel.types.ts

@@ -5,4 +5,5 @@ export type CarouselProps = {
   isLoading?: boolean;
   onClose?: (id: string) => void;
   onClick?: (id: string) => void;
+  onRenderSlides?: (slides: CarouselSlide[]) => void;
 };