feat(remote-mode): add feature slide

app/scripts/controllers/app-state-controller.ts

@@ -563,34 +563,27 @@ export class AppStateController extends BaseController<
   }
 
   /**
-   * Updates slides by adding new slides that don't already exist in state
+   * Replaces slides in state with new slides. If a slide with the same id
+   * already exists, it will be merged with the new slide.
    *
-   * @param slides - Array of new slides to add
+   * @param slides - Array of new slides
    */
   updateSlides(slides: CarouselSlide[]): void {
     this.update((state) => {
       const currentSlides = state.slides || [];
 
-      // Updates the undismissable property for slides that already exist in state
-      const updatedCurrentSlides = currentSlides.map((currentSlide) => {
-        const matchingNewSlide = slides.find((s) => s.id === currentSlide.id);
-        if (matchingNewSlide) {
+      const newSlides = slides.map((slide) => {
+        const existingSlide = currentSlides.find((s) => s.id === slide.id);
+        if (existingSlide) {
           return {
-            ...currentSlide,
-            undismissable: matchingNewSlide.undismissable,
+            ...existingSlide,
+            ...slide,
           };
         }
-        return currentSlide;
-      });
-
-      // Adds new slides that don't already exist in state
-      const newSlides = slides.filter((newSlide) => {
-        return !currentSlides.some(
-          (currentSlide) => currentSlide.id === newSlide.id,
-        );
+        return slide;
       });
 
-      state.slides = [...newSlides, ...updatedCurrentSlides];
+      state.slides = [...newSlides];
     });
   }
 

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

@@ -6,7 +6,6 @@ import { isEqual } from 'lodash';
 import { removeSlide } from '../../../store/actions';
 import { Carousel } from '..';
 import {
-  getSelectedAccountCachedBalance,
   getAppIsLoading,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getSwapsDefaultToken,
@@ -21,10 +20,7 @@ import {
   MetaMetricsEventCategory,
 } from '../../../../shared/constants/metametrics';
 import type { CarouselSlide } from '../../../../shared/constants/app-state';
-import {
-  useCarouselManagement,
-  ZERO_BALANCE,
-} from '../../../hooks/useCarouselManagement';
+import { useCarouselManagement } from '../../../hooks/useCarouselManagement';
 import {
   AccountOverviewTabsProps,
   AccountOverviewTabs,
@@ -39,7 +35,6 @@ export const AccountOverviewLayout = ({
   ...tabsProps
 }: AccountOverviewLayoutProps) => {
   const dispatch = useDispatch();
-  const totalBalance = useSelector(getSelectedAccountCachedBalance);
   const isLoading = useSelector(getAppIsLoading);
   const trackEvent = useContext(MetaMetricsContext);
   const [hasRendered, setHasRendered] = useState(false);
@@ -48,10 +43,7 @@ export const AccountOverviewLayout = ({
   const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
   ///: END:ONLY_INCLUDE_IF
 
-  const hasZeroBalance = totalBalance === ZERO_BALANCE;
-  const { slides } = useCarouselManagement({
-    hasZeroBalance,
-  });
+  const { slides } = useCarouselManagement();
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const { openBridgeExperience } = useBridging();
@@ -78,9 +70,6 @@ export const AccountOverviewLayout = ({
   };
 
   const handleRemoveSlide = (isLastSlide: boolean, id: string) => {
-    if (id === 'fund' && hasZeroBalance) {
-      return;
-    }
     if (isLastSlide) {
       trackEvent({
         event: MetaMetricsEventName.BannerCloseAll,

ui/hooks/useCarouselManagement/constants.ts

@@ -1,3 +1,12 @@
+export const REMOTE_MODE_SLIDE = {
+  id: 'remoteMode',
+  title: 'slideRemoteModeTitle',
+  description: 'slideRemoteModeDescription',
+  // TODO: Update image once we have a remote mode icon
+  image: './images/slide-fund-icon.svg',
+  href: '/home.html#remote',
+};
+
 export const SWEEPSTAKES_SLIDE = {
   id: 'sweepStake',
   title: 'slideSweepStakeTitle',
@@ -39,7 +48,7 @@ export const CASH_SLIDE = {
   href: 'https://portfolio.metamask.io/sell',
 };
 
-export const ZERO_BALANCE = '0x00';
+export const ZERO_BALANCE = '0x0';
 
 export const SWEEPSTAKES_START = new Date('2025-04-09T00:00:00Z');
 export const SWEEPSTAKES_END = new Date('2025-04-15T23:59:59Z');