feat: move sources under the main text (#30035)

joaosantos15 · zone-live · web-flow · commit de98c477a3a7 · 2026-05-13T13:16:19.000Z
## **Description**  In What's Happening the sources will now be displayed right under the main text, instead of being sticky at the bottom. <img width="392" height="839" alt="image" src="https://github.com/user-attachments/assets/2deb72ad-d730-4cdc-b374-b0e465698c5a" /> ## **Changelog**  CHANGELOG entry: no-changelog ## **Related issues** Fixes: ## **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**  ### **After**  ## **Pre-merge author checklist**  - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I've included tests if applicable - [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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] > **Low Risk** > Low risk UI/layout change limited to the expanded card; main risk is minor regressions in press target/spacing or date rendering in the new inline sources row. > > **Overview** > **UI change:** The expanded What’s Happening card now renders the sources row *inline under the description* (within the scroll area) instead of as a fixed/sticky footer, while keeping the same `onSourcesPress` behavior. > > Adds a memoized `formattedDate` for the inline row and updates the unit test to mock `formatRelativeTime` and assert the relative date text is shown when sources are present. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 3249a52. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>  Co-authored-by: António Regadas <antonio.regadas@consensys.net>
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.test.tsx
@@ -247,7 +247,7 @@ describe('WhatsHappeningExpandedCard', () => {
     });
   });
 
-  it('calls onSourcesPress with the item articles when the sources footer is pressed', () => {
+  it('calls onSourcesPress with the item articles when the sources row is pressed', () => {
     const mockOnSourcesPress = jest.fn();
     const article = {
       title: 'Test article',
@@ -257,9 +257,10 @@ describe('WhatsHappeningExpandedCard', () => {
     };
     const item = { ...baseItem, articles: [article] };
 
-    const { getUniqueSourcesByFavicon } = jest.requireMock(
+    const { formatRelativeTime, getUniqueSourcesByFavicon } = jest.requireMock(
       '../../../UI/MarketInsights/utils/marketInsightsFormatting',
     );
+    (formatRelativeTime as jest.Mock).mockReturnValueOnce('1d ago');
     (getUniqueSourcesByFavicon as jest.Mock).mockReturnValueOnce([
       { name: 'coindesk.com', type: 'news', url: 'https://coindesk.com' },
     ]);
@@ -277,6 +278,7 @@ describe('WhatsHappeningExpandedCard', () => {
 
     fireEvent.press(screen.getByText('coindesk.com'));
     expect(mockOnSourcesPress).toHaveBeenCalledWith([article]);
+    expect(screen.getByText('1d ago')).toBeOnTheScreen();
   });
 
   it('passes perpsPriceBySymbol from hook to PerpsRow', () => {
diff --git a/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx b/app/components/Views/WhatsHappeningDetailView/components/WhatsHappeningExpandedCard.tsx
@@ -42,7 +42,7 @@ interface WhatsHappeningExpandedCardProps {
   cardHeight: number;
   source: WhatsHappeningSourceValue;
   /**
-   * Called when the user taps the sources footer row. The parent is responsible
+   * Called when the user taps the sources row. The parent is responsible
    * for rendering the bottom sheet so it is anchored to the screen root rather
    * than the card's positioning context.
    */
@@ -81,6 +81,11 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
     return remaining > 0 ? `${first.name} +${remaining}` : first.name;
   }, [uniqueSources]);
 
+  const formattedDate = useMemo(
+    () => (item.date ? formatRelativeTime(item.date, { nowLabel: 'now' }) : ''),
+    [item.date],
+  );
+
   const { perpsPriceBySymbol } = useWhatsHappeningAssetPrices(item);
 
   const scrollBottomFadeColors = useMemo((): string[] => {
@@ -166,14 +171,66 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
               {item.title}
             </Text>
 
-            {/* Description */}
-            {item.description && (
-              <Text
-                variant={TextVariant.BodyMd}
-                color={TextColor.TextAlternative}
-              >
-                {item.description}
-              </Text>
+            {/* Description + sources */}
+            {(item.description || uniqueSources.length > 0) && (
+              <Box>
+                {item.description && (
+                  <Text
+                    variant={TextVariant.BodyMd}
+                    color={TextColor.TextAlternative}
+                  >
+                    {item.description}
+                  </Text>
+                )}
+
+                {uniqueSources.length > 0 && (
+                  <Pressable
+                    onPress={() => onSourcesPress?.(item.articles)}
+                    accessibilityRole="button"
+                  >
+                    {({ pressed }) => (
+                      <Box
+                        flexDirection={BoxFlexDirection.Row}
+                        alignItems={BoxAlignItems.Center}
+                        justifyContent={BoxJustifyContent.Between}
+                        gap={2}
+                        twClassName={
+                          pressed ? 'pt-2 pb-4 opacity-60' : 'pt-2 pb-4'
+                        }
+                      >
+                        <Box
+                          flexDirection={BoxFlexDirection.Row}
+                          alignItems={BoxAlignItems.Center}
+                          gap={2}
+                          twClassName="flex-shrink"
+                        >
+                          <SourceLogoGroup sources={uniqueSources} />
+                          {sourceLabel ? (
+                            <Text
+                              variant={TextVariant.BodySm}
+                              color={TextColor.TextAlternative}
+                              numberOfLines={1}
+                            >
+                              {sourceLabel}
+                            </Text>
+                          ) : null}
+                        </Box>
+
+                        {formattedDate ? (
+                          <Text
+                            variant={TextVariant.BodySm}
+                            color={TextColor.TextAlternative}
+                            numberOfLines={1}
+                            twClassName="shrink-0"
+                          >
+                            {formattedDate}
+                          </Text>
+                        ) : null}
+                      </Box>
+                    )}
+                  </Pressable>
+                )}
+              </Box>
             )}
 
             {/* Related assets section */}
@@ -207,50 +264,6 @@ const WhatsHappeningExpandedCard: React.FC<WhatsHappeningExpandedCardProps> = ({
             style={tw.style('absolute left-0 right-0 bottom-0 h-10')}
           />
         </Box>
-
-        {/* Fixed sources footer */}
-        {uniqueSources.length > 0 && (
-          <Box twClassName="px-5 pb-5 pt-4" gap={4}>
-            <Pressable
-              onPress={() => onSourcesPress?.(item.articles)}
-              accessibilityRole="button"
-            >
-              {({ pressed }) => (
-                <Box
-                  flexDirection={BoxFlexDirection.Row}
-                  alignItems={BoxAlignItems.Center}
-                  justifyContent={BoxJustifyContent.Between}
-                  twClassName={pressed ? 'opacity-60' : ''}
-                >
-                  <Box
-                    flexDirection={BoxFlexDirection.Row}
-                    alignItems={BoxAlignItems.Center}
-                    gap={2}
-                  >
-                    <SourceLogoGroup sources={uniqueSources} />
-                    {sourceLabel ? (
-                      <Text
-                        variant={TextVariant.BodySm}
-                        color={TextColor.TextAlternative}
-                      >
-                        {sourceLabel}
-                      </Text>
-                    ) : null}
-                  </Box>
-
-                  {item.date ? (
-                    <Text
-                      variant={TextVariant.BodySm}
-                      color={TextColor.TextAlternative}
-                    >
-                      {formatRelativeTime(item.date, { nowLabel: 'now' })}
-                    </Text>
-                  ) : null}
-                </Box>
-              )}
-            </Pressable>
-          </Box>
-        )}
       </Box>
     </Box>
   );
