refactor: Aligned more section across wallet and perps

[brianacnguyen]

Description

Perps used a grouped navigation card for support/feedback/learn actions, which did not match the wallet homepage "More" pattern (section header + flat icon rows) and had inconsistent spacing and icons versus other entry points.

This PR aligns Perps home and market details with the wallet "More" section model, and standardizes Contact support and feedback icons across related surfaces.

What changed:

• Added reusable PerpsMoreSection (SectionHeader + flat MMDS icon rows) and wired it into PerpsHomeView and PerpsMarketDetailsView via PerpsHomeSectionList so spacing matches other Perps sections
• Removed PerpsNavigationCard
• Perps More icons: Contact support → IconName.Sms, Give us feedback → IconName.Mail, Learn → IconName.Book
• Updated Contact support leading icon to IconName.Sms on wallet More, Money More sheet, Accounts menu, and Ramp build-quote settings modal
• Removed the trailing export icon from wallet Contact support

Changelog

CHANGELOG entry: Updated the Perps More section and Contact support icons to match the wallet homepage pattern

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3567

Manual testing steps

Feature: Aligned More section and Contact support icons

  Scenario: user sees the Perps home More section
    Given the user is on Perps home with content scrolled to the bottom
    When the More section is visible
    Then it shows a "More" header with Contact support (SMS icon), optional Give us feedback (mail icon when feedback flag is enabled), and Learn the basics of perps (book icon)
    And section spacing matches nearby Perps sections (Activity / Recently added)

  Scenario: user opens Contact support from Perps home
    Given the user is on Perps home More section
    When the user taps Contact support
    Then MetaMask Support opens in the in-app browser

  Scenario: user sees the market details More section
    Given the user is on a Perps market details screen scrolled near the bottom
    When the More section is visible
    Then it shows a "More" header and Learn the basics of perps with a book icon above the risk disclaimer

  Scenario: user sees Contact support SMS icon on wallet More
    Given the user is on Wallet home scrolled to the More section
    When Contact support is visible
    Then it uses the SMS icon and has no trailing export icon

  Scenario: user sees Contact support SMS icon in Accounts menu
    Given the user opens the Accounts menu from the wallet hamburger
    When Contact support is visible near the bottom
    Then it uses the SMS icon

  Scenario: user sees Contact support SMS icon in Ramp settings
    Given the user is on Ramp Build Quote and opens the settings gear
    When Contact support is shown for the selected provider
    Then it uses the SMS icon

Unit tests (optional verification):

yarn jest app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.test.tsx
yarn jest app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx
yarn jest app/components/Views/Homepage/Sections/More/MoreSection.test.tsx

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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
UI-only alignment and icon swaps; navigation handlers and support URLs are unchanged.

Overview
Replaces Perps’ grouped PerpsNavigationCard with a new PerpsMoreSection that matches the wallet homepage pattern: SectionHeader (“More”) plus flat MMDS rows with leading icons. Perps home and market details now render that block inside PerpsHomeSectionList (after recent activity / before the risk disclaimer) instead of a standalone card at the scroll bottom.

Perps More rows get explicit icons: Contact support IconName.Sms, optional feedback Mail, learn Book. Contact support leading icon is switched to Sms on wallet More (trailing export removed), Money more sheet, Accounts menu, and Ramp settings modal.

PerpsNavigationCard and its tests/styles are deleted; PerpsMoreSection adds unit tests and a market-details test ID.

^{Reviewed by Cursor Bugbot for commit aa2970e. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeMoney, SmokeConfirmations, SmokeAccounts
• Selected Performance tags: @PerformancePreps
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:

Perps UI Refactoring (Primary Change):

• PerpsHomeView.tsx and PerpsMarketDetailsView.tsx replaced PerpsNavigationCard with a new PerpsMoreSection component. The "More" section (Support, Feedback, Learn More / Tutorial) is now rendered as a section within the scrollable list rather than outside it. This is a structural UI change that could affect E2E tests that interact with these navigation items.
• New PerpsMoreSection component created with new testID values (PerpsMoreSectionTestIds.SECTION).
• Old PerpsNavigationCard component deleted.
• startIconName properties added to navigation items (Sms, Mail, Book icons).
• SmokePerps is directly impacted — the Perps home and market details views have structural changes.
• Per SmokePerps tag description: "When selecting SmokePerps, also select SmokeWalletPlatform (Trending section) and SmokeConfirmations (Add Funds deposits are on-chain transactions)."

Icon Changes Across Multiple Components:

• MoneyMoreSheet.tsx: IconName.MessageQuestion → IconName.Sms (contact support icon in Ramp/Money more sheet) → SmokeMoney
• MoreSection.tsx (Homepage): IconName.MessageQuestion → IconName.Sms, removed endIconName={IconName.Export} → SmokeWalletPlatform
• AccountsMenu.tsx: IconName.MessageQuestion → IconName.Sms (support button icon) → SmokeAccounts
• SettingsModal.tsx (Ramp): IconName.Messages → IconName.Sms → SmokeMoney

These icon changes are minor visual updates but touch components used in account management and money flows, warranting smoke test coverage.

Dependent Tags:

• SmokePerps requires SmokeWalletPlatform and SmokeConfirmations per tag description.
• SmokeMoney is selected for Ramp/Money component changes.
• SmokeAccounts for AccountsMenu change.

Performance Test Selection:
The PerpsHomeView and PerpsMarketDetailsView had structural changes - the PerpsNavigationCard was replaced with PerpsMoreSection and moved into the section list. This changes how the Perps home view renders its sections, which could affect perps market loading and position management performance measured by @PerformancePreps. No other performance-sensitive flows (onboarding, login, swaps, asset loading, launch) were affected by these changes.

View GitHub Actions results

[github-actions]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx	0/122	0/170	0/374

AI-detected flaky patterns

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx

• J9 — Module-level mutable let binding not reset in beforeEach (high)
  • mockRouteParams is a module-level mutable let binding used inside the @react-navigation/native mock factory (via a closure). Any test that reassigns or mutates mockRouteParams (e.g. to add transactionActiveAbTests or change the source field) will leave the modified value in place for every subsequent test in the file, because the outer beforeEach only calls jest.clearAllMocks() and individual mock.mockClear() calls — it never resets mockRouteParams back to its initial value. This causes order-dependent failures: tests that expect the default { source: 'main_action_button' } shape will see stale values from a prior test that mutated the object.
  • Suggested fix in app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx:36:

    -let mockRouteParams: Record<string, unknown> = {
    -  source: 'main_action_button',
    -};
    +let mockRouteParams: Record<string, unknown> = {
    +  source: 'main_action_button',
    +};
    +
    +// Inside the outer beforeEach:
    +beforeEach(() => {
    +  jest.clearAllMocks();
    +  mockRouteParams = { source: 'main_action_button' }; // ← reset to default before every test
    +  mockNavigateBack.mockClear();
    +  mockNavigateToWallet.mockClear();
    +  mockNavigateToMarketList.mockClear();
    +  // ... rest of existing beforeEach setup
    +});

This check is informational only and does not block merging.

[sonarqubecloud]

Quality Gate failed

Failed conditions
18.5% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

✅ All tests passed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

✅ Passed Tests (2)

Test	Platform	Device	Duration	Team	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	7.60s	@mm-perps-engineering-team	📹 Watch
Perps open position and close it	Android	Google Pixel 8 Pro (v14.0)	18.45s	@mm-perps-engineering-team	📹 Watch

---

Branch: refactor/sections-more · Build: Normal · Commit: 420113c · View full run