feat: scaffold hub page discovery tabs A/B test (coreMCU589)

vinnyhoward · vinnyhoward · commit ff88a6969cbf · 2026-04-22T09:40:30.000-06:00
- Add HomepageDiscoveryTabs component with Portfolio, Perpetuals, and Predictions tabs
- Wire A/B test gate in Wallet — treatment renders discovery tabs, control renders existing homepage
- Lazy-mount Perps and Predictions inline as tab content with hideHeader prop to suppress duplicate headers
- Extend TabsList/TabsBar/Tab to support per-tab icons using local icon system
- Register portfolio and predict custom SVG icons
- Add per-tab gradient overlay that bleeds into wallet header with color per tab
- Fix Perps safe area top inset when rendered as embedded tab
diff --git a/app/component-library/components-temp/Tabs/Tab/Tab.tsx b/app/component-library/components-temp/Tabs/Tab/Tab.tsx
@@ -8,13 +8,19 @@ import {
   Text,
   TextVariant,
   FontWeight,
+  Box,
+  BoxFlexDirection,
+  BoxAlignItems,
+  BoxJustifyContent,
 } from '@metamask/design-system-react-native';
+import Icon, { IconSize, IconColor } from '../../../components/Icons/Icon';
 
 // Internal dependencies.
 import { TabProps } from './Tab.types';
 
 const Tab: React.FC<TabProps> = ({
   label,
+  iconName,
   isActive,
   isDisabled = false,
   onPress,
@@ -42,42 +48,83 @@ const Tab: React.FC<TabProps> = ({
     >
       <Pressable
         style={tw.style(
-          'px-0 py-1 flex-row items-center justify-center relative',
+          'px-0 py-1 flex-col items-center justify-center relative',
           isDisabled && 'opacity-50',
         )}
         onPress={isDisabled ? undefined : onPress}
         disabled={isDisabled}
         testID={testID}
         {...pressableProps}
       >
-        {/* Hidden bold text that determines layout size */}
-        <Text
-          variant={TextVariant.BodyMd}
-          fontWeight={FontWeight.Bold}
-          numberOfLines={1}
-          style={tw.style('opacity-0')}
-        >
-          {label}
-        </Text>
-
-        {/* Visible text positioned absolutely over the hidden text */}
-        <Text
-          variant={TextVariant.BodyMd}
-          fontWeight={
-            isActive && !isDisabled ? FontWeight.Bold : FontWeight.Regular
-          }
-          twClassName={
-            isDisabled
-              ? 'text-muted'
-              : isActive
-                ? 'text-default'
-                : 'text-alternative'
-          }
-          numberOfLines={1}
-          style={tw.style('absolute inset-0 flex items-center justify-center')}
-        >
-          {label}
-        </Text>
+        {iconName ? (
+          // Icon mode: simple column stack, no layout-shift trick needed
+          <Box
+            twClassName="mb-1"
+            flexDirection={BoxFlexDirection.Column}
+            alignItems={BoxAlignItems.Center}
+            justifyContent={BoxJustifyContent.Center}
+          >
+            <Icon
+              name={iconName}
+              size={IconSize.Lg}
+              color={
+                isDisabled
+                  ? IconColor.Muted
+                  : isActive
+                    ? IconColor.Default
+                    : IconColor.Alternative
+              }
+              style={tw.style('mb-1')}
+            />
+            <Text
+              variant={TextVariant.BodySm}
+              fontWeight={
+                isActive && !isDisabled ? FontWeight.Bold : FontWeight.Regular
+              }
+              twClassName={
+                isDisabled
+                  ? 'text-muted'
+                  : isActive
+                    ? 'text-default'
+                    : 'text-alternative'
+              }
+              numberOfLines={1}
+            >
+              {label}
+            </Text>
+          </Box>
+        ) : (
+          // No icon: use hidden/visible text trick to prevent layout shift on bold toggle
+          <>
+            <Text
+              variant={TextVariant.BodyMd}
+              fontWeight={FontWeight.Bold}
+              numberOfLines={1}
+              style={tw.style('opacity-0')}
+            >
+              {label}
+            </Text>
+            <Text
+              variant={TextVariant.BodyMd}
+              fontWeight={
+                isActive && !isDisabled ? FontWeight.Bold : FontWeight.Regular
+              }
+              twClassName={
+                isDisabled
+                  ? 'text-muted'
+                  : isActive
+                    ? 'text-default'
+                    : 'text-alternative'
+              }
+              numberOfLines={1}
+              style={tw.style(
+                'absolute inset-0 flex items-center justify-center',
+              )}
+            >
+              {label}
+            </Text>
+          </>
+        )}
       </Pressable>
     </View>
   );
diff --git a/app/component-library/components-temp/Tabs/Tab/Tab.types.ts b/app/component-library/components-temp/Tabs/Tab/Tab.types.ts
@@ -1,6 +1,9 @@
 // Third party dependencies.
 import { PressableProps, LayoutChangeEvent } from 'react-native';
 
+// Internal dependencies.
+import { IconName } from 'app/component-library/components/Icons/Icon/Icon.types';
+
 /**
  * Tab component props
  */
@@ -9,6 +12,10 @@ export interface TabProps extends PressableProps {
    * The label text for the tab
    */
   label: string;
+  /**
+   * Optional icon rendered above the label.
+   */
+  iconName?: IconName;
   /**
    * Whether the tab is currently active
    */
diff --git a/app/component-library/components-temp/Tabs/TabsBar/TabsBar.tsx b/app/component-library/components-temp/Tabs/TabsBar/TabsBar.tsx
@@ -281,7 +281,7 @@ const TabsBar: React.FC<TabsBarProps> = ({
 
   return (
     <Box
-      twClassName={`relative overflow-hidden px-4 ${twClassName || ''}`}
+      twClassName={`relative overflow-hidden px-4 border-b border-border-default ${twClassName || ''}`}
       testID={testID}
       onLayout={handleContainerLayout as (layoutEvent: unknown) => void}
       {...boxProps}
@@ -304,21 +304,26 @@ const TabsBar: React.FC<TabsBarProps> = ({
               <Tab
                 key={tab.key}
                 label={tab.label}
+                iconName={tab.iconName}
                 isActive={index === activeIndex}
                 isDisabled={tab.isDisabled}
                 onPress={() => handleTabPress(index)}
                 onLayout={(layoutEvent) => handleTabLayout(index, layoutEvent)}
                 testID={tab.testID ?? `${testID}-tab-${index}`}
+                style={tw.style('py-2')}
               />
             ))}
 
             {/* Animated underline for scrollable tabs */}
             {activeIndex >= 0 && isInitialized && (
               <Animated.View
-                style={tw.style('absolute bottom-0 h-0.5 bg-icon-default', {
-                  width: underlineWidthAnimated,
-                  transform: [{ translateX: underlineAnimated }],
-                })}
+                style={tw.style(
+                  'absolute -bottom-px h-0.5 bg-icon-default z-1',
+                  {
+                    width: underlineWidthAnimated,
+                    transform: [{ translateX: underlineAnimated }],
+                  },
+                )}
               />
             )}
           </Box>
@@ -333,6 +338,7 @@ const TabsBar: React.FC<TabsBarProps> = ({
             <Tab
               key={tab.key}
               label={tab.label}
+              iconName={tab.iconName}
               isActive={index === activeIndex}
               isDisabled={tab.isDisabled}
               onPress={() => handleTabPress(index)}
@@ -344,7 +350,7 @@ const TabsBar: React.FC<TabsBarProps> = ({
           {/* Animated underline for non-scrollable tabs */}
           {activeIndex >= 0 && isInitialized && (
             <Animated.View
-              style={tw.style('absolute bottom-0 h-0.5 bg-icon-default', {
+              style={tw.style('absolute -bottom-px h-0.5 bg-icon-default', {
                 width: underlineWidthAnimated,
                 transform: [{ translateX: underlineAnimated }],
               })}
diff --git a/app/component-library/components-temp/Tabs/TabsBar/TabsBar.types.ts b/app/component-library/components-temp/Tabs/TabsBar/TabsBar.types.ts
@@ -4,6 +4,9 @@ import React from 'react';
 // External dependencies.
 import { BoxProps } from '@metamask/design-system-react-native';
 
+// Internal dependencies.
+import { IconName } from 'app/component-library/components/Icons/Icon/Icon.types';
+
 /**
  * Individual tab item data interface
  */
@@ -13,6 +16,10 @@ export interface TabItem {
   content: React.ReactNode;
   isDisabled?: boolean;
   testID?: string;
+  /**
+   * Optional icon rendered above the tab label.
+   */
+  iconName?: IconName;
 }
 
 /**
diff --git a/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx b/app/component-library/components-temp/Tabs/TabsList/TabsList.tsx
@@ -14,6 +14,7 @@ import { runOnJS } from 'react-native-reanimated';
 import { InteractionManager } from 'react-native';
 
 import TabsBar from '../TabsBar';
+import type { IconName } from '../../../components/Icons/Icon/Icon.types';
 import { TabsListProps, TabsListRef, TabItem } from './TabsList.types';
 
 const TAB_LOAD_FALLBACK_TIMEOUT_MS = 250;
@@ -38,6 +39,7 @@ const TabsList = forwardRef<TabsListRef, TabsListProps>(
           .map((child, index) => {
             const props = (child as React.ReactElement).props as {
               tabLabel?: string;
+              tabIcon?: IconName;
               isDisabled?: boolean;
               testID?: string;
             };
@@ -47,6 +49,7 @@ const TabsList = forwardRef<TabsListRef, TabsListProps>(
               key:
                 (child as React.ReactElement).key?.toString() || `tab-${index}`,
               label: tabLabel,
+              iconName: props.tabIcon,
               content: child,
               isDisabled,
               isLoaded: false,
diff --git a/app/component-library/components-temp/Tabs/TabsList/TabsList.types.ts b/app/component-library/components-temp/Tabs/TabsList/TabsList.types.ts
@@ -6,6 +6,7 @@ import { BoxProps } from '@metamask/design-system-react-native';
 
 // Internal dependencies.
 import { TabsBarProps } from '../TabsBar/TabsBar.types';
+import { IconName } from '../../../components/Icons/Icon/Icon.types';
 
 /**
  * Individual tab item data interface
@@ -16,6 +17,7 @@ export interface TabItem {
   content: React.ReactNode;
   isDisabled?: boolean;
   testID?: string;
+  iconName?: IconName;
 }
 
 /**
diff --git a/app/component-library/components/Icons/Icon/Icon.assets.ts b/app/component-library/components/Icons/Icon/Icon.assets.ts
@@ -177,6 +177,8 @@ import peopleSVG from './assets/people.svg';
 import personcancelSVG from './assets/person-cancel.svg';
 import pinSVG from './assets/pin.svg';
 import plantSVG from './assets/plant.svg';
+import portfolioSVG from './assets/portfolio.svg';
+import predictSVG from './assets/predict.svg';
 import plugSVG from './assets/plug.svg';
 import plusandminusSVG from './assets/plus-and-minus.svg';
 import policyalertSVG from './assets/policy-alert.svg';
@@ -461,6 +463,8 @@ export const assetByIconName: AssetByIconName = {
   [IconName.PersonCancel]: personcancelSVG,
   [IconName.Pin]: pinSVG,
   [IconName.Plant]: plantSVG,
+  [IconName.Portfolio]: portfolioSVG,
+  [IconName.Predict]: predictSVG,
   [IconName.Plug]: plugSVG,
   [IconName.PlusAndMinus]: plusandminusSVG,
   [IconName.PolicyAlert]: policyalertSVG,
diff --git a/app/component-library/components/Icons/Icon/Icon.types.ts b/app/component-library/components/Icons/Icon/Icon.types.ts
@@ -247,6 +247,8 @@ export enum IconName {
   PersonCancel = 'PersonCancel',
   Pin = 'Pin',
   Plant = 'Plant',
+  Portfolio = 'Portfolio',
+  Predict = 'Predict',
   Plug = 'Plug',
   PlusAndMinus = 'PlusAndMinus',
   PolicyAlert = 'PolicyAlert',
diff --git a/app/component-library/components/Icons/Icon/assets/portfolio.svg b/app/component-library/components/Icons/Icon/assets/portfolio.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 11H19.95C19.7 9.16667 18.9375 7.6125 17.6625 6.3375C16.3875 5.0625 14.8333 4.3 13 4.05V11ZM11 19.95V4.05C8.98333 4.3 7.3125 5.17917 5.9875 6.6875C4.6625 8.19583 4 9.96667 4 12C4 14.0333 4.6625 15.8042 5.9875 17.3125C7.3125 18.8208 8.98333 19.7 11 19.95ZM13 19.95C14.8333 19.7167 16.3917 18.9583 17.675 17.675C18.9583 16.3917 19.7167 14.8333 19.95 13H13V19.95ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6792 2.2625 15.8875 2.7875C17.0958 3.3125 18.1542 4.02917 19.0625 4.9375C19.9708 5.84583 20.6875 6.90417 21.2125 8.1125C21.7375 9.32083 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.975 18.1542 19.075 19.0625C18.175 19.9708 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="currentColor"/>
+</svg>
diff --git a/app/component-library/components/Icons/Icon/assets/predict.svg b/app/component-library/components/Icons/Icon/assets/predict.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 9C15.5 9 15.2645 10.173 14.7188 10.7188C14.173 11.2645 13 11.5 13 11.5C13 11.5 14.173 11.7355 14.7188 12.2812C15.2645 12.827 15.5 14 15.5 14C15.5 14 15.7355 12.827 16.2812 12.2812C16.827 11.7355 18 11.5 18 11.5C18 11.5 16.827 11.2645 16.2812 10.7188C15.7355 10.173 15.5 9 15.5 9Z" fill="currentColor"/>
+<path d="M13 6C13 6 12.8116 6.93838 12.375 7.375C11.9384 7.81162 11 8 11 8C11 8 11.9384 8.18838 12.375 8.625C12.8116 9.06162 13 10 13 10C13 10 13.1884 9.06162 13.625 8.625C14.0616 8.18838 15 8 15 8C15 8 14.0616 7.81162 13.625 7.375C13.1884 6.93838 13 6 13 6Z" fill="currentColor"/>
+<path d="M6.98553 18.5C4.72683 16.9348 3.25 14.3409 3.25 11.4057C3.25 6.62531 7.16751 2.75 12 2.75C16.8325 2.75 20.75 6.62531 20.75 11.4057C20.75 14.3409 19.2732 16.9348 17.0145 18.5M6.75 18.75L5.75 21.25H18.25L17.25 18.75H6.75Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
+</svg>
diff --git a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx
@@ -72,7 +72,11 @@ import PerpsNavigationCard, {
   NavigationItem,
 } from '../../components/PerpsNavigationCard/PerpsNavigationCard';
 
-const PerpsHomeView = () => {
+interface PerpsHomeViewProps {
+  hideHeader?: boolean;
+}
+
+const PerpsHomeView = ({ hideHeader = false }: PerpsHomeViewProps) => {
   const { styles } = useStyles(styleSheet, {});
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
@@ -417,13 +421,18 @@ const PerpsHomeView = () => {
   const handleBackPress = perpsNavigation.navigateToWallet;
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView
+      style={styles.container}
+      edges={hideHeader ? { bottom: 'additive' } : undefined}
+    >
       {/* Header */}
-      <PerpsHomeHeader
-        onBack={handleBackPress}
-        onSearchToggle={handleSearchToggle}
-        testID="perps-home"
-      />
+      {!hideHeader && (
+        <PerpsHomeHeader
+          onBack={handleBackPress}
+          onSearchToggle={handleSearchToggle}
+          testID="perps-home"
+        />
+      )}
 
       {/* Main Content - ScrollView with all carousels */}
       <ScrollView
diff --git a/app/components/UI/Predict/views/PredictFeed/PredictFeed.tsx b/app/components/UI/Predict/views/PredictFeed/PredictFeed.tsx
diff --git a/app/components/Views/Homepage/components/HomepageDiscoveryTabs/HomepageDiscoveryTabs.styles.ts b/app/components/Views/Homepage/components/HomepageDiscoveryTabs/HomepageDiscoveryTabs.styles.ts
diff --git a/app/components/Views/Homepage/components/HomepageDiscoveryTabs/HomepageDiscoveryTabs.tsx b/app/components/Views/Homepage/components/HomepageDiscoveryTabs/HomepageDiscoveryTabs.tsx
diff --git a/app/components/Views/Homepage/components/HomepageDiscoveryTabs/index.ts b/app/components/Views/Homepage/components/HomepageDiscoveryTabs/index.ts
diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
