fix(TMCU-1045): Remove useElevatedSurface shim from Core UX bottom sheets#33162
fix(TMCU-1045): Remove useElevatedSurface shim from Core UX bottom sheets#33162georgewrmarshall wants to merge 5 commits into
Conversation
…eets MMDS BottomSheet now handles pure-black elevated surfaces internally. Remove redundant useElevatedSurface() calls and related pure-black border workarounds from Core UX bottom sheet callsites. - AddressSelector, DeleteNetworkModal, FundActionMenu: drop twClassName shim - CustomNetworkSelector, NetworkMultiSelectorList: drop elevated cell styling - TradeWalletActions: remove usePureBlack border workaround and simplify BottomShape Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
mm-token-exchange-service
Bot
added
team-design-system
PR template — items to address before "Ready for review"Warnings — informational, address before merging:
See docs/readme/ready-for-review.md for the full Definition of Ready for Review. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
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: Trade menu loses elevated surface
- Restored elevated-surface theming by using useElevatedSurface for backgrounds and getElevatedSurfaceColor for the BottomShape fill to preserve elevation under pure-black preview.
Or push these changes by commenting:
@cursor push 575cbd9658
Preview (575cbd9658)
diff --git a/app/components/Views/TradeWalletActions/TradeWalletActions.tsx b/app/components/Views/TradeWalletActions/TradeWalletActions.tsx
--- a/app/components/Views/TradeWalletActions/TradeWalletActions.tsx
+++ b/app/components/Views/TradeWalletActions/TradeWalletActions.tsx
@@ -62,6 +62,10 @@
import { isHardwareAccount } from '../../../util/address';
import { getDecimalChainId } from '../../../util/networks';
import {
+ getElevatedSurfaceColor,
+ useElevatedSurface,
+} from '../../../util/theme/themeUtils';
+import {
SwapBridgeNavigationLocation,
useSwapBridgeNavigation,
} from '../../UI/Bridge/hooks/useSwapBridgeNavigation';
@@ -115,6 +119,7 @@
const tw = useTailwind();
const theme = useTheme();
const { colors } = theme;
+ const surfaceClass = useElevatedSurface();
const backdropOpacity = useSharedValue(0);
const backdropAnimatedStyle = useAnimatedStyle(() => ({
@@ -382,23 +387,23 @@
<View style={tw.style('px-4')}>
<View
testID={WalletActionsBottomSheetSelectorsIDs.MENU_CONTAINER}
- style={tw.style('bg-default p-4 rounded-t-2xl px-0')}
+ style={tw.style(surfaceClass, 'p-4 rounded-t-2xl px-0')}
>
{actionList}
</View>
<View
style={tw.style('flex-row mt-[-1px]', { height: bottomMaskHeight })}
>
- <View style={tw.style('bg-default flex-1 rounded-bl-2xl')} />
+ <View style={tw.style(surfaceClass, 'flex-1 rounded-bl-2xl')} />
<BottomShape
width={buttonLayout.width * 4}
height={bottomMaskHeight}
peakHeight={16}
peakBezierLength={25}
baseBezierLength={55}
- fill={colors.background.default}
+ fill={getElevatedSurfaceColor(theme)}
/>
- <View style={tw.style('bg-default flex-1 rounded-br-2xl')} />
+ <View style={tw.style(surfaceClass, 'flex-1 rounded-br-2xl')} />
</View>
</View>
</Animated.View>You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 3fb3c08. Configure here.
| /> | ||
| </View> | ||
| ) : null} | ||
| <View style={tw.style('bg-default flex-1 rounded-br-2xl')} /> |
There was a problem hiding this comment.
Trade menu loses elevated surface
Low Severity
The custom trade actions sheet is not an MMDS BottomSheet, but it now paints the menu container, side masks, and BottomShape fill with bg-default and colors.background.default instead of the elevated-surface helpers. With MM_PURE_BLACK_PREVIEW on in dark mode, the panel no longer uses the elevated alternative background it had before, so it can blend into the pure-black wallet backdrop.
Reviewed by Cursor Bugbot for commit 3fb3c08. Configure here.
- Run Prettier on AddressSelector and TradeWalletActions - Keep useElevatedSurface on custom TradeWalletActions sheet (not MMDS BottomSheet) while still removing the pure-black border workaround Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
mm-token-exchange-service
Bot
removed
the
INVALID-PR-TEMPLATE
| <Path d={pathData} fill={fill} /> | ||
| </Svg> | ||
| ); | ||
| } |
There was a problem hiding this comment.
@cursoragent revert the changes to this file
There was a problem hiding this comment.
Reverted BottomShape.tsx to its original version from main, restoring the strokeOnly and pathProps support that was removed in the earlier cleanup.
Pushed in commit a8b92b9ee1 on the PR branch.
| ).toBeNull(); | ||
| }); | ||
|
|
||
| it('should render earn button if the stablecoin lending feature is enabled', () => { |
There was a problem hiding this comment.
Revert the changes to this file
There was a problem hiding this comment.
@cursoragent Revert the changes to this file
There was a problem hiding this comment.
Reverted TradeWalletActions.test.tsx to its original version from main, restoring:
- The
usePureBlackmock - The two pure-black bottom cutout stroke tests
Pushed in commit b47313245b.
Note: Those two tests will fail until the related changes are also reverted in:
TradeWalletActions.tsx(pure-black border rendering /MENU_BOTTOM_STROKE)WalletActionsBottomSheet.testIds.ts(MENU_BOTTOM_STROKEtest ID)
BottomShape.tsx was already reverted. Say the word if you want those two files restored as well.
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
| /> | ||
| </View> | ||
| ) : null} | ||
| <View style={tw.style(surfaceClass, 'flex-1 rounded-br-2xl')} /> |
There was a problem hiding this comment.
@cursoragent revert the changes to this file
There was a problem hiding this comment.
Reverted TradeWalletActions.tsx to its original version from main, restoring:
usePureBlack()and conditionalborder-mutedstyling- The
MENU_BOTTOM_STROKEbottom cutout stroke rendering elevatedSurfaceColorviagetElevatedSurfaceColor()
Also restored MENU_BOTTOM_STROKE in WalletActionsBottomSheet.testIds.ts so the reverted tests compile and pass.
All 22 TradeWalletActions tests pass. Pushed in commit 6a83c1606b.
…dback Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Also restore MENU_BOTTOM_STROKE test ID required by the reverted tests. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection: Affected components and their test coverage:
Risk assessment: Low risk. The Dependent tags: Per tag descriptions, SmokeMultiChainAPI requires SmokeNetworkAbstractions and SmokeNetworkExpansion (already included). Performance Test Selection: |
|
2 participants
Description
Removes the redundant
useElevatedSurface()shim from Core UX MMDSBottomSheetcallsites now that MMDS handles pure-black elevated surfaces internally.The custom
TradeWalletActionssheet is not an MMDSBottomSheetand is out of scope for this cleanup — it retains its existing elevated-surface and pure-black border styling.Changelog
CHANGELOG entry: null
Related issues
Fixes: TMCU-1045
Manual testing steps
N/A — styling cleanup with existing unit test coverage. No user-facing behavior change when
MM_PURE_BLACK_PREVIEWis off.Screenshots/Recordings
N/A — internal theming cleanup; visual QA for pure-black trade menu should be done on device with
MM_PURE_BLACK_PREVIEWenabled.Before
N/A
After
N/A
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an examplePre-merge reviewer checklist
Testing
All 6 test suites pass (108 tests).
Related