chore: fix Pay With sheet elevation mismatch for pure black (#32909)

<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## **Description**

Fixes elevation mismatches in the Pay With bottom sheet when
`MM_PURE_BLACK_PREVIEW` is enabled (TMCU-994 / 8.3.0 pure black soak
testing).

**Problem:** `PayWithBottomSheet` already uses `useElevatedSurface()`
(`bg-alternative`), but inner children still painted their own
`bg-default`. With pure black on, `bg-default` is `#000000`, so rows
appeared as black patches inside the elevated sheet.

**Approach (minimal, time-sensitive):**
- `PayWithSection` rows container — `useElevatedSurface()` instead of
hardcoded `bg-default`
- `PaymentMethodRow` unselected state — `bg-transparent` so the parent
container owns the surface; selected rows keep `bg-section` for
highlight

**Follow-up (not in this PR):** Refactor `PayWithSection` /
`PaymentMethodRow` to MMDS `ListItem` / `ListItemSelect` once pure black
QA lands. Keeping this diff small for the release timeline.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-994

## **Manual testing steps**

```gherkin
Feature: Pay With bottom sheet pure black theming

  Scenario: user opens Pay With selector with pure black enabled
    Given the app is in dark mode with MM_PURE_BLACK_PREVIEW=true
    And the user is on the Perps home page with funds available

    When user taps Add funds
    And user taps the Pay With asset dropdown
    Then the Pay With bottom sheet background matches the elevated pure black surface
    And unselected payment method rows do not show a mismatched bg-default patch
    And the selected row still shows a bg-section highlight

  Scenario: user opens Pay With selector with pure black disabled
    Given the app is in dark mode with MM_PURE_BLACK_PREVIEW unset or false

    When user opens the Pay With bottom sheet from Add funds
    Then the bottom sheet and rows render as before (no visual regression)
```

## **Screenshots/Recordings**

Manual verification on device/simulator with
`MM_PURE_BLACK_PREVIEW=true` — Pay With sheet rows align with elevated
sheet surface (Perps Add funds flow).

<img width="1230" height="911" alt="Screenshot 2026-07-07 at 12 47
53 PM"
src="https://github.com/user-attachments/assets/2e8bb2d8-89ae-4d57-bf61-a25d76c85cf7"
/>

### Before


https://github.com/user-attachments/assets/4933c046-c693-41be-b457-32ba4404e5df

### After

`MM_PURE_BLACK_PREVIEW="true"`


https://github.com/user-attachments/assets/a68fe0a5-85d2-4c93-a7f9-42e6c43636b3

`MM_PURE_BLACK_PREVIEW="false"`

<img width="300" alt="Simulator Screenshot - iPhone 17 Pro - 2026-07-07
at 13 16 02"
src="https://github.com/user-attachments/assets/2b77ed77-5944-47d2-aae3-e18c2a070cc0"
/>


https://github.com/user-attachments/assets/411099c2-be4c-4049-8790-ea9f7736e4cf

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

<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-f01309e7-2bfa-4125-9896-cebe556cd276"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-f01309e7-2bfa-4125-9896-cebe556cd276"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Author: georgewrmarshall

app/components/Views/confirmations/components/UI/pay-with-section/pay-with-section.tsx

@@ -27,7 +27,7 @@ const PayWithSection = ({ config }: PayWithSectionProps) => {
           {config.title.toUpperCase()}
         </Text>
       ) : null}
-      <Box twClassName="bg-default" testID={`${testID}-rows`}>
+      <Box testID={`${testID}-rows`}>
         {config.rows.map((row) => (
           <PaymentMethodRow key={row.id} {...row} />
         ))}

app/components/Views/confirmations/components/UI/payment-method-row/payment-method-row.tsx

@@ -75,6 +75,7 @@ const PaymentMethodRow = ({
 }: PaymentMethodRowProps) => {
   const tw = useTailwind();
   const resolvedTestID = testID ?? `payment-method-row-${id}`;
+  const rowBackgroundClass = isSelected ? 'bg-section' : 'bg-transparent';
   const iconSlotTestID = `${resolvedTestID}-icon-slot`;
   const tag = renderFirstTag(tagRenderers);
 
@@ -131,9 +132,9 @@ const PaymentMethodRow = ({
       <Box
         flexDirection={BoxFlexDirection.Row}
         alignItems={BoxAlignItems.Center}
-        twClassName={`px-4 py-3 ${
-          isSelected ? 'bg-section' : 'bg-default'
-        } ${disabled ? 'opacity-50' : ''}`}
+        twClassName={`px-4 py-3 ${rowBackgroundClass} ${
+          disabled ? 'opacity-50' : ''
+        }`}
         testID={resolvedTestID}
       >
         {content}
@@ -150,7 +151,7 @@ const PaymentMethodRow = ({
       style={({ pressed }) =>
         tw.style(
           'flex-row items-center px-4 py-3',
-          isSelected ? 'bg-section' : 'bg-default',
+          rowBackgroundClass,
           pressed && !disabled ? 'bg-pressed' : '',
           disabled ? 'opacity-50' : '',
         )