Skip to content

refactor(predict): use MMDS HeaderStandard #29704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brianacnguyen merged 3 commits into from
May 7, 2026
+6 −9
Merged

refactor(predict): use MMDS HeaderStandard #29704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f00630c
refactor(predict): use MMDS HeaderStandard
brianacnguyen May 5, 2026
f74a1d2
Merge branch 'main' into refactor/headerstandard-titles-predict
brianacnguyen May 5, 2026
391f93a
Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…
brianacnguyen May 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/components/UI/Predict/components/PredictActivityDetail/PredictActivityDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ import {
BoxFlexDirection,
BoxAlignItems,
BoxJustifyContent,
HeaderStandard,
} from '@metamask/design-system-react-native';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
import UsdcIcon from './usdc.svg';
import { PredictActivityDetailsSelectorsIDs } from '../../Predict.testIds';
interface PredictActivityDetailProps {}
Expand Down Expand Up @@ -413,7 +413,7 @@ const PredictActivityDetails: React.FC<PredictActivityDetailProps> = () => {
testID={PredictActivityDetailsSelectorsIDs.CONTAINER}
>
<Box twClassName="flex-1">
<HeaderCompactStandard
<HeaderStandard
title={
activityDetails?.headerTitle ??
strings('predict.transactions.activity_details')
Expand Down
4 changes: 2 additions & 2 deletions app/components/UI/Predict/components/PredictUnavailable/PredictUnavailable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
TextVariant,
BoxAlignItems,
BoxJustifyContent,
HeaderStandard,
} from '@metamask/design-system-react-native';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import { InteractionManager, TouchableOpacity } from 'react-native';
Expand All @@ -22,7 +23,6 @@ import { strings } from '../../../../../../locales/i18n';
import BottomSheet from '../../../../../component-library/components/BottomSheets/BottomSheet/BottomSheet';
import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet/BottomSheet.types';
import BottomSheetFooter from '../../../../../component-library/components/BottomSheets/BottomSheetFooter/BottomSheetFooter';
import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
import { ButtonVariants } from '../../../../../component-library/components/Buttons/Button/Button.types';
import { PREDICT_UNAVAILABLE_TEST_IDS } from './PredictUnavailable.testIds';

Expand Down Expand Up @@ -116,7 +116,7 @@ const PredictUnavailable = forwardRef<
isInteractable
onClose={handleSheetClosed}
>
<HeaderCompactStandard
<HeaderStandard
Copy link
Copy Markdown
Contributor

@cursor cursor Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Close button may vanish if HeaderStandard lacks onClose

High Severity

The old HeaderCompactStandard explicitly converted its onClose prop into an endButtonIconProps entry with IconName.Close, rendering a visible close button. HeaderStandard from @metamask/design-system-react-native is used elsewhere in the codebase (MoneyHeader, PerpsHomeHeader) but none of those usages pass onClose — they all use endButtonIconProps for end-side actions. If HeaderStandard does not implement the same onClose-to-close-button convenience, this bottom sheet header silently loses its close button, breaking dismiss behavior.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit f00630c. Configure here.

testID="header"
title={strings('predict.unavailable.title')}
onClose={handleClose}
Expand Down
7 changes: 2 additions & 5 deletions app/components/UI/Predict/views/PredictFeed/PredictFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ import {
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import {
Box,
Icon,
IconColor,
HeaderStandard,
IconName,
IconSize,
Text,
TextColor,
TextVariant,
Expand Down Expand Up @@ -84,7 +82,6 @@ import {
TabItem,
TabsBar,
} from '../../../../../component-library/components-temp/Tabs';
import HeaderCompactStandard from '../../../../../component-library/components-temp/HeaderCompactStandard';
import HeaderSearch, {
HeaderSearchVariant,
} from '../../../../../component-library/components-temp/HeaderSearch';
Expand Down Expand Up @@ -729,7 +726,7 @@ const PredictFeed: React.FC<PredictFeedProps> = ({
backgroundColor: colors.background.default,
})}
>
<HeaderCompactStandard
<HeaderStandard
includesTopInset
title={strings('wallet.predict')}
onBack={handleBackPress}
Expand Down
Loading