feat(Rewards): Put Earn Rewards banners in a carousel (#30170)

Montoya · web-flow · commit c23ca533c1e5 · 2026-05-14T14:18:07.000Z
## **Description** This puts the banners in the Earn Rewards section of the Rewards tab into a carousel, so they only take up 1 line of vertical real estate at most, ensuring other content gets more visibility.  ## **Changelog**  CHANGELOG entry: null ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/RWDS-1300 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**  ### **Before** <img width="1179" height="2556" alt="IMG_2114" src="https://github.com/user-attachments/assets/ecfc3319-7a3a-445f-ad63-68f5973d101e" /> ### **After** <img width="1170" height="2532" alt="Simulator Screenshot - iPhone 16e - 2026-05-14 at 00 42 18" src="https://github.com/user-attachments/assets/ca5bca85-5160-4b64-9b2d-b8da05de6b5b" /> ## **Pre-merge author checklist**  - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. #### Performance checks (if applicable) - [ ] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [ ] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist**  - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > **Medium Risk** > Moderate UI/UX change that replaces static cards with a custom snap-offset carousel and gesture-based press suppression, which could introduce layout/tap regressions across screen sizes. > > **Overview** > Converts the `EarnRewardsPreview` banners from stacked full-width cards into a horizontal “peek” carousel using `ScrollView` with explicit `snapToOffsets`, dynamic card sizing via `useWindowDimensions`, and consistent inter-card spacing/padding. > > Preserves existing visibility rules (mUSD card vs skeleton based on geo, Card banner always present) while building the carousel slots dynamically, and disables banner presses only during active drag to prevent accidental taps while swiping. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 7888b5d. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
diff --git a/app/components/UI/Rewards/components/EarnRewards/EarnRewardsPreview.tsx b/app/components/UI/Rewards/components/EarnRewards/EarnRewardsPreview.tsx
@@ -1,10 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   Image,
   ImageSourcePropType,
   Pressable,
+  ScrollView,
   StyleSheet,
+  useWindowDimensions,
+  View,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
@@ -36,9 +39,20 @@ import cardImage from '../../../../../images/rewards/rewards-card-earn.png';
 
 const AVATAR_SIZE = 78;
 const UK_COUNTRY_CODE = 'GB';
+// Horizontal padding matches px-4 (16 px per side). CARD_GAP is the space
+// between adjacent carousel slides. PEEK_WIDTH is how many pixels of the
+// next card show on the right edge as a swipe affordance.
+const HORIZONTAL_PADDING = 16;
+const CARD_GAP = 12;
+const PEEK_WIDTH = 24;
 
 const styles = StyleSheet.create({
   avatar: { width: AVATAR_SIZE, height: AVATAR_SIZE },
+  cardGap: { marginRight: CARD_GAP },
+  // Symmetric padding so the first card snaps flush to the left edge (peek on
+  // the right) and the last card snaps flush to the right edge (peek on the
+  // left). Snap points are defined explicitly via snapToOffsets.
+  carouselContent: { paddingHorizontal: HORIZONTAL_PADDING },
 });
 
 interface EarnCardProps {
@@ -47,6 +61,12 @@ interface EarnCardProps {
   subtitle: string;
   onPress: () => void;
   testID: string;
+  /**
+   * When true the card cannot be pressed and will not show pressed state.
+   * Used to suppress accidental taps while the user is actively dragging
+   * the carousel.
+   */
+  disabled?: boolean;
 }
 
 const EarnCard: React.FC<EarnCardProps> = ({
@@ -55,12 +75,14 @@ const EarnCard: React.FC<EarnCardProps> = ({
   subtitle,
   onPress,
   testID,
+  disabled,
 }) => {
   const tw = useTailwind();
 
   return (
     <Pressable
       testID={testID}
+      disabled={disabled}
       style={({ pressed }) =>
         tw.style(
           'rounded-xl bg-muted flex-row items-center p-4 gap-4',
@@ -88,19 +110,32 @@ const EarnCard: React.FC<EarnCardProps> = ({
   );
 };
 
+type CarouselSlotKey = 'musd-skeleton' | 'musd' | 'card';
+
 /**
  * EarnRewardsPreview shows the "Earn rewards" section on the dashboard.
  *
- * - mUSD calculator card: shown when geoLocation has settled AND is not UK.
- * 'UNKNOWN' is treated as non-UK so mUSD is shown. Hidden only when undefined (loading)
- * or 'GB' to prevent flash for UK users.
- * - MetaMask Card card: shown when card geo is loaded (no country restriction).
- * - While geo is loading (status 'idle' or 'loading'): skeletons shown; title always visible
+ * mUSD calculator card: shown when geoLocation has settled AND is not UK.
+ * 'UNKNOWN' is treated as non-UK so mUSD is shown. Hidden only when undefined
+ * (loading) or 'GB' to prevent flash for UK users.
+ * MetaMask Card card: always shown.
+ * While geo is loading (status 'idle' or 'loading'): a skeleton occupies the
+ * mUSD slot; the Card slot is always present.
+ * Cards are displayed in a horizontal peek carousel that scales to any
+ * number of items: every card except the last snaps flush-left with the next
+ * card peeking on the right; the last card snaps flush-right with the
+ * previous card peeking on the left. No pagination dots. If there are no
+ * items at all the entire section is not rendered.
  */
 const EarnRewardsPreview: React.FC = () => {
   const tw = useTailwind();
   const navigation = useNavigation();
   const { colors } = useTheme();
+  const { width: screenWidth } = useWindowDimensions();
+  // Only the left padding consumes viewport space at scroll position 0.
+  // The right side is filled by CARD_GAP + the next card's peek, so only one
+  // HORIZONTAL_PADDING is subtracted.
+  const cardWidth = screenWidth - HORIZONTAL_PADDING - CARD_GAP - PEEK_WIDTH;
 
   // mUSD geo check - hide for UK users, require positive geo confirmation to avoid flash
   const geoLocation = useSelector(selectGeolocationLocation);
@@ -109,7 +144,7 @@ const EarnRewardsPreview: React.FC = () => {
   const showMusdCard =
     geoLocation !== undefined && geoLocation !== UK_COUNTRY_CODE;
 
-  // Card check — isCardGeoLoaded flips true when loadCardholderAccounts settles
+  // Card check — subtitle varies by cardholder status; card is always rendered
   const isCardholder = useSelector(selectIsCardholder);
   const isAuthenticatedCard = useSelector(selectIsCardAuthenticated);
   const cardSubtitle =
@@ -125,15 +160,54 @@ const EarnRewardsPreview: React.FC = () => {
     handleDeeplink({ uri: 'metamask://card-onboarding' });
   }, []);
 
+  // Disable presses only while the user is actively dragging the carousel.
+  // We intentionally do NOT include momentum-scroll state here so that taps
+  // during deceleration still register and stop the scroll.
+  const [isDragging, setIsDragging] = useState(false);
+  const handleScrollBeginDrag = useCallback(() => setIsDragging(true), []);
+  const handleScrollEndDrag = useCallback(() => setIsDragging(false), []);
+
+  // Build the ordered list of carousel slots, preserving existing visibility logic.
+  const items: CarouselSlotKey[] = [];
+  if (isMusdGeoLoading && !showMusdCard) {
+    items.push('musd-skeleton');
+  } else if (showMusdCard) {
+    items.push('musd');
+  }
+  items.push('card');
+  const itemCount = items.length;
+
+  // Explicit snap offsets give the first card a flush-left snap (peek on right)
+  // and the last card a flush-right snap (peek on left). With symmetric
+  // padding, the trailing edge is at:
+  //   contentWidth = 2 * HORIZONTAL_PADDING
+  //                + itemCount * cardWidth
+  //                + (itemCount - 1) * CARD_GAP
+  // and maxScroll = contentWidth - screenWidth.
+  const snapOffsets = useMemo(() => {
+    const contentWidth =
+      HORIZONTAL_PADDING * 2 +
+      itemCount * cardWidth +
+      Math.max(0, itemCount - 1) * CARD_GAP;
+    const maxScroll = Math.max(0, contentWidth - screenWidth);
+    return Array.from({ length: itemCount }, (_, i) =>
+      i === itemCount - 1 ? maxScroll : i * (cardWidth + CARD_GAP),
+    );
+  }, [itemCount, cardWidth, screenWidth]);
+
+  if (itemCount === 0) return null;
+
+  const cardStyle = { width: cardWidth };
+
   return (
     <Box
-      twClassName="gap-3 px-4 pb-3"
+      twClassName="gap-3 pb-3"
       testID={REWARDS_VIEW_SELECTORS.EARN_REWARDS_PREVIEW}
     >
       <Box
         flexDirection={BoxFlexDirection.Row}
         alignItems={BoxAlignItems.Center}
-        twClassName="gap-2"
+        twClassName="gap-2 px-4"
       >
         {isMusdGeoLoading && (
           <ActivityIndicator size="small" color={colors.primary.default} />
@@ -143,26 +217,46 @@ const EarnRewardsPreview: React.FC = () => {
         </Text>
       </Box>
 
-      {isMusdGeoLoading && !showMusdCard ? (
-        <Skeleton style={tw.style('h-28 rounded-xl')} />
-      ) : (
-        showMusdCard && (
-          <EarnCard
-            testID={REWARDS_VIEW_SELECTORS.EARN_REWARDS_MUSD_CARD}
-            image={musdImage}
-            title={strings('rewards.earn_rewards.musd_title')}
-            subtitle={strings('rewards.earn_rewards.musd_subtitle')}
-            onPress={handleMusdPress}
-          />
-        )
-      )}
-      <EarnCard
-        testID={REWARDS_VIEW_SELECTORS.EARN_REWARDS_CARD_CARD}
-        image={cardImage}
-        title={strings('rewards.earn_rewards.card_title')}
-        subtitle={cardSubtitle}
-        onPress={handleCardPress}
-      />
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        decelerationRate="fast"
+        snapToOffsets={snapOffsets}
+        onScrollBeginDrag={handleScrollBeginDrag}
+        onScrollEndDrag={handleScrollEndDrag}
+        contentContainerStyle={styles.carouselContent}
+      >
+        {items.map((item, index) => (
+          <View
+            key={item}
+            style={[cardStyle, index < items.length - 1 && styles.cardGap]}
+          >
+            {item === 'musd-skeleton' && (
+              <Skeleton style={tw.style('h-28 rounded-xl')} />
+            )}
+            {item === 'musd' && (
+              <EarnCard
+                testID={REWARDS_VIEW_SELECTORS.EARN_REWARDS_MUSD_CARD}
+                image={musdImage}
+                title={strings('rewards.earn_rewards.musd_title')}
+                subtitle={strings('rewards.earn_rewards.musd_subtitle')}
+                onPress={handleMusdPress}
+                disabled={isDragging}
+              />
+            )}
+            {item === 'card' && (
+              <EarnCard
+                testID={REWARDS_VIEW_SELECTORS.EARN_REWARDS_CARD_CARD}
+                image={cardImage}
+                title={strings('rewards.earn_rewards.card_title')}
+                subtitle={cardSubtitle}
+                onPress={handleCardPress}
+                disabled={isDragging}
+              />
+            )}
+          </View>
+        ))}
+      </ScrollView>
     </Box>
   );
 };
