fix(TMCU-1046): remove useElevatedSurface shim from onboarding BottomSheets

[georgewrmarshall]

Description

MMDS BottomSheet now handles pure-black elevated surface styling internally. This PR removes the redundant useElevatedSurface() shim from the onboarding-related BottomSheet callsites scoped to @MetaMask/web3auth.

Changes:

• app/components/Views/OnboardingSheet/index.tsx — removed useElevatedSurface import, surfaceClass variable, and twClassName prop from BottomSheet; consolidated duplicate useTheme() calls
• app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx — removed useElevatedSurface import, surfaceClass variable, and twClassName prop from BottomSheet

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

N/A — internal styling cleanup with no user-facing behavior change. MMDS BottomSheet now applies the elevated surface class internally. Unit tests pass for both modified components.

Screenshots/Recordings

N/A — no visual change expected; pure-black elevated surface is now handled by MMDS BottomSheet internally.

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
• 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

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: SmokeSeedlessOnboarding, SmokeAccounts, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
The two changed files make purely visual/styling changes by removing the useElevatedSurface hook and its associated twClassName={surfaceClass} prop from two bottom sheet components:

1. OnboardingSheet/index.tsx: Removes elevated surface styling from the onboarding bottom sheet used in the seedless social login (Google/Apple) onboarding flow. This affects SmokeSeedlessOnboarding.

2. SelectSRPBottomSheet.tsx: Removes elevated surface styling from the SRP selection bottom sheet used in multi-SRP wallet management flows. This affects SmokeAccounts and SmokeWalletPlatform (multi-SRP architecture).

The changes are styling-only — no logic, navigation, callbacks, or data flow is modified. The useElevatedSurface hook no longer exists anywhere in the codebase (grep returned no matches), confirming this is a cleanup of a removed utility. While these are close to cosmetic changes, they do alter the visual appearance of user-facing bottom sheets in important onboarding and account management flows, warranting a light smoke run to confirm the UI renders correctly and no regressions were introduced in the affected flows.

Performance Test Selection:
The changes are purely visual/styling — removing a CSS class from bottom sheet wrappers. There is no impact on rendering performance, data fetching, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Pure-black sheet loses elevation
  • Reintroduced useElevatedSurface() and twClassName on both onboarding BottomSheets to restore elevated bg-alternative styling in pure-black dark mode.

Or push these changes by commenting:

@cursor push 6dac7eac86

Preview (6dac7eac86)

diff --git a/app/components/Views/OnboardingSheet/index.tsx b/app/components/Views/OnboardingSheet/index.tsx
--- a/app/components/Views/OnboardingSheet/index.tsx
+++ b/app/components/Views/OnboardingSheet/index.tsx
@@ -30,6 +30,7 @@
   BottomSheetRef,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { useElevatedSurface } from '../../../util/theme/themeUtils';
 
 export interface OnboardingSheetParams {
   onPressCreate?: () => void;
@@ -59,6 +60,7 @@
   } = params ?? {};
   const { colors, themeAppearance } = useTheme();
   const tw = useTailwind();
+  const surfaceClass = useElevatedSurface();
   const onPressCreateAction = () => {
     if (onPressCreate) {
       onPressCreate();
@@ -112,7 +114,7 @@
   const isDark = themeAppearance === AppThemeKey.dark;
 
   return (
-    <BottomSheet goBack={navigation.goBack} ref={sheetRef}>
+    <BottomSheet goBack={navigation.goBack} ref={sheetRef} twClassName={surfaceClass}>
       <Box
         flexDirection={BoxFlexDirection.Column}
         alignItems={BoxAlignItems.Center}

diff --git a/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx b/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx
--- a/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx
+++ b/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx
@@ -11,16 +11,18 @@
 import { strings } from '../../../../locales/i18n';
 import { SelectSRPBottomSheetTestIds } from './SelectSRPBottomSheet.testIds';
 import { goBackIfFocused } from './SelectSRPBottomSheet.utils';
+import { useElevatedSurface } from '../../../util/theme/themeUtils';
 
 export const SelectSRPBottomSheet = () => {
   const bottomSheetRef = useRef<BottomSheetRef>(null);
   const navigation = useNavigation();
+  const surfaceClass = useElevatedSurface();
   const goBack = useCallback(() => {
     goBackIfFocused(navigation);
   }, [navigation]);
 
   return (
-    <BottomSheet ref={bottomSheetRef} goBack={goBack}>
+    <BottomSheet ref={bottomSheetRef} goBack={goBack} twClassName={surfaceClass}>
       <BottomSheetHeader
         onBack={goBack}
         backButtonProps={{

_{You can send follow-ups to the cloud agent here.}

^{Reviewed by Cursor Bugbot for commit 5337b2d. Configure here.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.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 the useElevatedSurface twClassName shim is no longer needed on onboarding sheets. SelectSRPBottomSheet follows the same pattern in this PR.