fix(social): remove useElevatedSurface shim from Quick Buy BottomSheet (TMCU-1050)

[georgewrmarshall]

Description

MMDS BottomSheetDialog now handles pure-black elevated surface styling internally. This PR removes the redundant useElevatedSurface() shim from the Social Leaderboard Quick Buy bottom sheet so it relies on the design-system component instead of duplicating surface logic.

Updated file:

• app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/QuickBuyRoot.tsx

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-1050

Manual testing steps

Feature: Pure black Social Quick Buy bottom sheet

  Scenario: Quick Buy sheet renders with correct elevated surface in pure black mode
    Given the app is running with MM_PURE_BLACK_PREVIEW enabled in dark mode
    And the user navigates to the Social Leaderboard

    When the user opens the Quick Buy bottom sheet for a trader position
    Then the sheet should display with the correct elevated surface background (not collapsing into the pure-black screen background)

N/A for automated-only cleanup; visual QA recommended on device with pure black preview enabled.

Screenshots/Recordings

N/A — internal styling cleanup with no user-facing copy or layout changes. Pure black visual QA should be done on device.

Before

N/A

After

N/A

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 (N/A — removal-only change, no new APIs)
• 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 (N/A — styling-only change)
• I've tested with a power user scenario (N/A — no performance-sensitive paths touched)
• I've instrumented key operations with Sentry traces for production performance metrics (N/A — no new traced operations)

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.

  

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
The change is in QuickBuyRoot.tsx within the SocialLeaderboard/TraderPositionView feature. The diff shows:

1. Removal of useElevatedSurface import from themeUtils
2. Removal of const surfaceClass = useElevatedSurface() usage
3. Removal of twClassName={surfaceClass} prop from BottomSheetDialog

This is a minor visual/styling change that removes an elevated surface styling class from the QuickBuy bottom sheet dialog. While primarily cosmetic (removing a CSS class), it does affect the visual appearance of the QuickBuy bottom sheet in the Trader Position flow.

The QuickBuy component is part of the SocialLeaderboard/TraderPositionView feature which relates to the Perps trading functionality. SmokePerps covers the Add Funds flow and perps interface, which likely exercises this QuickBuy component. SmokeWalletPlatform is selected because Perps is a section inside the Trending tab.

No performance tests are warranted as this is a styling-only change with no impact on rendering performance, data fetching, or app responsiveness.

Performance Test Selection:
The change only removes a CSS class (twClassName prop) from a BottomSheetDialog component. This is a purely visual/styling change with no impact on rendering performance, data fetching, asset loading, or any other performance-sensitive operations.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[georgewrmarshall]

MMDS BottomSheetDialog applies elevated surface styling internally since design-system-react-native 0.33, so twClassName={surfaceClass} was redundant here. useElevatedSurface returned bg-alternative in pure-black dark mode, which BottomSheetDialog now applies via usePureBlack without callsite overrides.