Skip to content

Commit 8a7bced

Browse files
authored
fix: hides perps buttons in ai insights when user has a position cp-7.71.0 (MetaMask#27919)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** This PR is a bug fix for MetaMask#27916 where: - In the AI Market Insights in Perps, the action buttons are wrong when user has an open position: the action buttons should be the same in AI market insight page and market page, ie. “modify” and “Close” when user has an open position Fix: - When the user has an existing perps position, the MarketInsights footer action buttons (Long/Short) are hidden since the relevant actions (modify/close) live on the Perps market details page - The "AI summary for information only" disclaimer is moved inline below the feedback section when the footer is hidden, so it remains visible - Position state is passed via route params (hasPerpsPosition) from the caller rather than fetched async inside MarketInsightsView, preventing a flash where buttons briefly appear then disappear while the position loads <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: Fixed a bug that was causing incorrect Perps action buttons to be displayed ## **Related issues** Fixes: MetaMask#27916 ## **Manual testing steps** ```gherkin - Open MarketInsights from token details → Swap/Buy buttons visible with disclaimer in footer - Open MarketInsights from perps with no position → Long/Short buttons visible with disclaimer in footer - Open MarketInsights from perps with an existing position → no footer buttons, disclaimer shown below "Was this helpful?" - Verify no flash/layout shift on the perps + position flow ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> https://github.com/user-attachments/assets/0373c1bb-d433-4c9a-8768-117a40d98f9e ### **After** <!-- [screenshots/recordings] --> <img width="3699" height="3090" alt="SCR-20260325-nzfa" src="https://github.com/user-attachments/assets/4b058c59-6df0-4d16-acf7-8d6bb839183f" /> ## **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 - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. ## **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_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk UI/navigation tweak that changes which CTAs are shown based on a new route param; main risk is incorrect param wiring causing missing actions or disclaimer placement in the Perps insights flow. > > **Overview** > Fixes Perps AI Market Insights showing inappropriate `Long`/`Short` CTAs when the user already has an open position. > > Adds a `hasPerpsPosition` route param (set by `PerpsMarketDetailsView`) and uses it in `MarketInsightsView` to **hide the footer action buttons** for Perps-with-position while **keeping the informational disclaimer visible** by moving it inline under the feedback section for that case. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 833593b. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent ad3b7a5 commit 8a7bced

2 files changed

Lines changed: 62 additions & 44 deletions

File tree

app/components/UI/MarketInsights/Views/MarketInsightsView/MarketInsightsView.tsx

Lines changed: 60 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ interface MarketInsightsRouteParams {
153153
tokenChainId?: string;
154154
/** When true, indicates the view was opened from the Perps market details view */
155155
isPerps?: boolean;
156+
/** When true, the user has an existing perps position for this asset */
157+
hasPerpsPosition?: boolean;
156158
}
157159

158160
/**
@@ -182,6 +184,7 @@ const MarketInsightsView: React.FC = () => {
182184
tokenName,
183185
tokenChainId,
184186
isPerps = false,
187+
hasPerpsPosition = false,
185188
} = route.params;
186189

187190
const isMarketInsightsEnabled = isPerps
@@ -660,65 +663,79 @@ const MarketInsightsView: React.FC = () => {
660663
>
661664
{strings('market_insights.helpful_prompt')}
662665
</Text>
666+
{isPerps && hasPerpsPosition && (
667+
<Text
668+
variant={TextVariant.BodySm}
669+
color={TextColor.TextAlternative}
670+
twClassName="pt-3"
671+
>
672+
{strings('market_insights.footer_disclaimer')}
673+
</Text>
674+
)}
663675
</Box>
664676
</ScrollView>
665677

666-
<Box
667-
twClassName={`border-t border-muted bg-default px-4 pt-4 pb-[${insets.bottom + 8}px]`}
668-
>
669-
{isPerps ? (
670-
<Box flexDirection={BoxFlexDirection.Row} gap={3}>
671-
<Button
672-
variant={ButtonVariant.Primary}
673-
size={ButtonSize.Lg}
674-
twClassName="flex-1"
675-
onPress={() => handlePerpsDirectionPress('long')}
676-
testID={MarketInsightsSelectorsIDs.LONG_BUTTON}
677-
>
678-
{strings('perps.market.long')}
679-
</Button>
680-
<Button
681-
variant={ButtonVariant.Primary}
682-
size={ButtonSize.Lg}
683-
twClassName="flex-1"
684-
onPress={() => handlePerpsDirectionPress('short')}
685-
testID={MarketInsightsSelectorsIDs.SHORT_BUTTON}
686-
>
687-
{strings('perps.market.short')}
688-
</Button>
689-
</Box>
690-
) : (
691-
<Box flexDirection={BoxFlexDirection.Row} gap={3}>
692-
<Box twClassName="flex-1">
678+
{!(isPerps && hasPerpsPosition) && (
679+
<Box
680+
twClassName={`border-t border-muted bg-default px-4 pt-4 pb-[${insets.bottom + 8}px]`}
681+
>
682+
{isPerps ? (
683+
<Box flexDirection={BoxFlexDirection.Row} gap={3}>
693684
<Button
694685
variant={ButtonVariant.Primary}
695686
size={ButtonSize.Lg}
696-
isFullWidth
697-
onPress={handleSwapPress}
698-
testID={MarketInsightsSelectorsIDs.SWAP_BUTTON}
687+
twClassName="flex-1"
688+
onPress={() => handlePerpsDirectionPress('long')}
689+
testID={MarketInsightsSelectorsIDs.LONG_BUTTON}
699690
>
700-
{strings('market_insights.swap_button')}
691+
{strings('perps.market.long')}
701692
</Button>
702-
</Box>
703-
<Box twClassName="flex-1">
704693
<Button
705694
variant={ButtonVariant.Primary}
706695
size={ButtonSize.Lg}
707-
isFullWidth
708-
onPress={handleBuyPress}
709-
testID={MarketInsightsSelectorsIDs.BUY_BUTTON}
696+
twClassName="flex-1"
697+
onPress={() => handlePerpsDirectionPress('short')}
698+
testID={MarketInsightsSelectorsIDs.SHORT_BUTTON}
710699
>
711-
{strings('market_insights.buy_button')}
700+
{strings('perps.market.short')}
712701
</Button>
713702
</Box>
703+
) : (
704+
<Box flexDirection={BoxFlexDirection.Row} gap={3}>
705+
<Box twClassName="flex-1">
706+
<Button
707+
variant={ButtonVariant.Primary}
708+
size={ButtonSize.Lg}
709+
isFullWidth
710+
onPress={handleSwapPress}
711+
testID={MarketInsightsSelectorsIDs.SWAP_BUTTON}
712+
>
713+
{strings('market_insights.swap_button')}
714+
</Button>
715+
</Box>
716+
<Box twClassName="flex-1">
717+
<Button
718+
variant={ButtonVariant.Primary}
719+
size={ButtonSize.Lg}
720+
isFullWidth
721+
onPress={handleBuyPress}
722+
testID={MarketInsightsSelectorsIDs.BUY_BUTTON}
723+
>
724+
{strings('market_insights.buy_button')}
725+
</Button>
726+
</Box>
727+
</Box>
728+
)}
729+
<Box twClassName="pt-3" alignItems={BoxAlignItems.Center}>
730+
<Text
731+
variant={TextVariant.BodySm}
732+
color={TextColor.TextAlternative}
733+
>
734+
{strings('market_insights.footer_disclaimer')}
735+
</Text>
714736
</Box>
715-
)}
716-
<Box twClassName="pt-3" alignItems={BoxAlignItems.Center}>
717-
<Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
718-
{strings('market_insights.footer_disclaimer')}
719-
</Text>
720737
</Box>
721-
</Box>
738+
)}
722739

723740
{selectedTrend ? (
724741
<MarketInsightsTrendSourcesBottomSheet

app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1041,8 +1041,9 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
10411041
assetSymbol: market.symbol,
10421042
assetIdentifier: market.symbol,
10431043
isPerps: true,
1044+
hasPerpsPosition: !!existingPosition,
10441045
});
1045-
}, [market?.symbol, navigation, track]);
1046+
}, [market?.symbol, navigation, track, existingPosition]);
10461047

10471048
// Handler for order selection - navigates to order details
10481049
const handleOrderSelect = useCallback(

0 commit comments

Comments
 (0)