chore(runway): cherry-pick fix: [Explore] design issues cp-7.63.0 (#25193)

- fix: [Explore] design issues cp-7.63.0 (#25165)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Solved multiple bugs:
- [Explore] Arrow in subheads should be near titles and remove "View
More". Design is dark screen attached.
- [Explore] Rename "Tokens" to "Trending tokens"
- [Explore] Button corner radius for button row should be 12px, not
16px.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: solved multiple design issues in trending

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-2540 &
https://consensyssoftware.atlassian.net/browse/ASSETS-2541 &
https://consensyssoftware.atlassian.net/browse/ASSETS-2542

## **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**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/67338a81-72e2-459d-afb9-72ccdd931306


<!-- [screenshots/recordings] -->

## **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.

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Implements design tweaks for Explore/Trending.
> 
> - SectionHeader: header is now a `TouchableOpacity` that triggers
`viewAllAction`; shows title with right arrow; removes separate "View
all" text/button while keeping `testID` prefix
`section-header-view-all-...`
> - Rename "Tokens" to `trending.trending_tokens` ("Trending tokens") in
`sections.config.tsx`, tests, e2e selectors/mappings, and `en.json`
> - QuickActions: change chip style from `rounded-2xl` to `rounded-xl`
(12px)
> - Updated unit/e2e tests and selectors to align with new titles and
header interaction
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d51db76. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[b7e231d](b7e231d)

Co-authored-by: Juanmi <95381763+juanmigdr@users.noreply.github.com>

Author: runway-github[bot]

app/components/Views/TrendingView/components/ExploreSearchResults/ExploreSearchResults.test.tsx

@@ -104,7 +104,7 @@ describe('ExploreSearchResults', () => {
     );
 
     expect(getByTestId('trending-search-results-list')).toBeDefined();
-    expect(getByText('Tokens')).toBeDefined();
+    expect(getByText('Trending tokens')).toBeDefined();
     expect(getByText('Perps')).toBeDefined();
     expect(getByText('Predictions')).toBeDefined();
   });
@@ -129,7 +129,7 @@ describe('ExploreSearchResults', () => {
       <ExploreSearchResults searchQuery="btc" />,
     );
 
-    expect(getByText('Tokens')).toBeDefined();
+    expect(getByText('Trending tokens')).toBeDefined();
     expect(queryByText('Perps')).toBeNull();
     expect(queryByText('Predictions')).toBeNull();
   });

app/components/Views/TrendingView/components/QuickActions/QuickActions.tsx

@@ -45,7 +45,7 @@ const QuickActions: React.FC<QuickActionsProps> = ({ emptySections }) => {
               onPress={() => section.viewAllAction(navigation)}
               testID={`quick-action-${section.id}`}
               style={tw.style(
-                'flex-row items-center justify-center gap-1 rounded-2xl bg-background-section px-3 py-2',
+                'flex-row items-center justify-center gap-1 rounded-xl bg-background-section px-3 py-2',
               )}
             >
               <Icon

app/components/Views/TrendingView/components/SectionHeader/SectionHeader.test.tsx

@@ -24,43 +24,40 @@ describe('SectionHeader', () => {
     jest.clearAllMocks();
   });
 
-  it('renders title and view all text for predictions section', () => {
+  it('renders title for predictions section', () => {
     const { getByText } = renderWithProvider(
       <SectionHeader sectionId="predictions" />,
       { state: initialState },
     );
 
     expect(getByText('Predictions')).toBeOnTheScreen();
-    expect(getByText('View all')).toBeOnTheScreen();
   });
 
-  it('renders title and view all text for tokens section', () => {
+  it('renders title for tokens section', () => {
     const { getByText } = renderWithProvider(
       <SectionHeader sectionId="tokens" />,
       { state: initialState },
     );
 
-    expect(getByText('Tokens')).toBeOnTheScreen();
-    expect(getByText('View all')).toBeOnTheScreen();
+    expect(getByText('Trending tokens')).toBeOnTheScreen();
   });
 
-  it('renders title and view all text for perps section', () => {
+  it('renders title for perps section', () => {
     const { getByText } = renderWithProvider(
       <SectionHeader sectionId="perps" />,
       { state: initialState },
     );
 
     expect(getByText('Perps')).toBeOnTheScreen();
-    expect(getByText('View all')).toBeOnTheScreen();
   });
 
-  it('calls navigation action when view all button is pressed', () => {
-    const { getByText } = renderWithProvider(
+  it('calls navigation action when header is pressed', () => {
+    const { getByTestId } = renderWithProvider(
       <SectionHeader sectionId="perps" />,
       { state: initialState },
     );
 
-    fireEvent.press(getByText('View all'));
+    fireEvent.press(getByTestId('section-header-view-all-perps'));
 
     expect(mockNavigate).toHaveBeenCalledTimes(1);
   });

app/components/Views/TrendingView/components/SectionHeader/SectionHeader.tsx

@@ -3,18 +3,16 @@ import { TouchableOpacity } from 'react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   Box,
-  BoxFlexDirection,
-  BoxAlignItems,
-  BoxJustifyContent,
+  Text,
+  TextVariant,
+  TextColor,
   Icon,
   IconName,
   IconSize,
   IconColor,
-  Text,
-  TextVariant,
-  TextColor,
+  BoxFlexDirection,
+  BoxAlignItems,
 } from '@metamask/design-system-react-native';
-import { strings } from '../../../../../../locales/i18n';
 import { SectionId, SECTIONS_CONFIG } from '../../sections.config';
 import { useNavigation } from '@react-navigation/native';
 
@@ -35,28 +33,26 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({ sectionId }) => {
   const sectionConfig = SECTIONS_CONFIG[sectionId];
 
   return (
-    <Box
-      flexDirection={BoxFlexDirection.Row}
-      justifyContent={BoxJustifyContent.Between}
-      alignItems={BoxAlignItems.Center}
-      twClassName="mb-2"
+    <TouchableOpacity
+      testID={`section-header-view-all-${sectionId}`}
+      style={tw.style('flex-row items-center mb-2')}
+      onPress={() => sectionConfig.viewAllAction(navigation)}
     >
-      <Text variant={TextVariant.HeadingSm}>{sectionConfig.title}</Text>
-      <TouchableOpacity
-        testID={`section-header-view-all-${sectionId}`}
-        onPress={() => sectionConfig.viewAllAction(navigation)}
-        style={tw.style('flex-row items-center justify-center gap-1')}
+      <Box
+        flexDirection={BoxFlexDirection.Row}
+        alignItems={BoxAlignItems.Center}
+        gap={1}
       >
-        <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
-          {strings('trending.view_all')}
+        <Text variant={TextVariant.HeadingMd} color={TextColor.TextDefault}>
+          {sectionConfig.title}
         </Text>
         <Icon
           name={IconName.ArrowRight}
           size={IconSize.Sm}
           color={IconColor.IconAlternative}
         />
-      </TouchableOpacity>
-    </Box>
+      </Box>
+    </TouchableOpacity>
   );
 };
 

app/components/Views/TrendingView/sections.config.tsx

@@ -126,7 +126,7 @@ const PREDICTIONS_FUSE_OPTIONS: FuseOptions<PredictMarketType> = {
 export const SECTIONS_CONFIG: Record<SectionId, SectionConfig> = {
   tokens: {
     id: 'tokens',
-    title: strings('trending.tokens'),
+    title: strings('trending.trending_tokens'),
     icon: IconName.Ethereum,
     viewAllAction: (navigation) => {
       navigation.navigate(Routes.WALLET.TRENDING_TOKENS_FULL_VIEW);

e2e/pages/Trending/TrendingView.ts

@@ -133,7 +133,7 @@ class TrendingView {
    */
   private getSectionId(sectionTitle: string): string {
     const sectionIdMap: Record<string, string> = {
-      Tokens: 'tokens',
+      'Trending tokens': 'tokens',
       Sites: 'sites',
       Predictions: 'predictions',
       Perps: 'perps',
@@ -192,11 +192,11 @@ class TrendingView {
       `section-header-view-all-${id}`,
     );
 
-    // Determine scroll direction: Predictions and Tokens are usually near top
-    // But scrollToElement can handle both directions, so we try 'down' first
+    // Determine scroll direction: Predictions and Trending tokens are usually near top
+    // But scrollToElement can handle both directions, so we try 'up' first for top sections
     // and it will automatically adjust if needed
     const direction =
-      sectionTitle === 'Predictions' || sectionTitle === 'Tokens'
+      sectionTitle === 'Predictions' || sectionTitle === 'Trending tokens'
         ? 'up'
         : 'down';
 

e2e/selectors/Trending/TrendingView.selectors.ts

@@ -19,10 +19,9 @@ export const TrendingViewSelectorsIDs = {
 } as const;
 
 export const TrendingViewSelectorsText = {
-  VIEW_ALL: 'View all',
-  // Section titles might vary by localization, but these are for logical mapping
+  // Section titles - must match the actual localized strings from sections.config.tsx
   SECTION_PREDICTIONS: 'Predictions',
-  SECTION_TOKENS: 'Tokens',
+  SECTION_TOKENS: 'Trending tokens',
   SECTION_PERPS: 'Perps',
   SECTION_SITES: 'Sites',
 } as const;

locales/languages/en.json

@@ -7361,8 +7361,6 @@
   },
   "trending": {
     "title": "Explore",
-    "view_all": "View all",
-    "tokens": "Tokens",
     "trending_tokens": "Trending tokens",
     "price_change": "Price change",
     "all_networks": "All networks",