fix: advanced charts interactions (#28653)

## **Description**

Fix chart interaction lag on token details page by connecting the
advanced chart to the existing PriceChartContext to disable page scroll
during zoom/pan gestures.

## **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: Fix AC interactions in token details.

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3041

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **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/8906b9d2-9983-4a7c-91b7-dcf92a03678d


### **After**

<!-- [screenshots/recordings] -->




https://github.com/user-attachments/assets/c7c6fe72-6611-4a8f-a1aa-b866cfb28971


## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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](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.

## **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]
> **Medium Risk**
> Adds new touch handlers that mutate `PriceChartContext` state and
removes a local `PriceChartProvider` wrapper, so incorrect provider
placement could cause runtime errors or regress gesture/scroll behavior.
> 
> **Overview**
> Connects the advanced token overview chart to `PriceChartContext` by
toggling `setIsChartBeingTouched(true/false)` on touch start/end/cancel
via a new touchable container (`advanced-chart-touch-container`).
> 
> Updates `Price.advanced` tests to mock the context and assert the
touch lifecycle calls, and removes the now-redundant
`PriceChartProvider` wrapper around `Price` in token details
`AssetOverviewContent`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
ba54dd8. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: sahar-fehri

app/components/UI/AssetOverview/Price/Price.advanced.test.tsx

@@ -8,6 +8,14 @@ import { createMockUseAnalyticsHook } from '../../../../util/test/analyticsMock'
 
 jest.mock('../../../hooks/useAnalytics/useAnalytics');
 
+const mockSetIsChartBeingTouched = jest.fn();
+jest.mock('../PriceChart/PriceChart.context', () => ({
+  usePriceChart: () => ({
+    isChartBeingTouched: false,
+    setIsChartBeingTouched: mockSetIsChartBeingTouched,
+  }),
+}));
+
 jest.mock('react-redux', () => {
   const actual = jest.requireActual('react-redux');
   return {
@@ -283,4 +291,54 @@ describe('PriceAdvanced', () => {
     const { getByTestId } = render(<PriceAdvanced {...baseProps} />);
     expect(getByTestId('price-label')).toBeOnTheScreen();
   });
+
+  describe('touch gesture handling', () => {
+    it('sets isChartBeingTouched to true on touch start', () => {
+      const { getByTestId } = render(<PriceAdvanced {...baseProps} />);
+      const chartContainer = getByTestId('advanced-chart-touch-container');
+
+      fireEvent(chartContainer, 'touchStart');
+
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(true);
+    });
+
+    it('sets isChartBeingTouched to false on touch end', () => {
+      const { getByTestId } = render(<PriceAdvanced {...baseProps} />);
+      const chartContainer = getByTestId('advanced-chart-touch-container');
+
+      fireEvent(chartContainer, 'touchStart');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(true);
+
+      fireEvent(chartContainer, 'touchEnd');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(false);
+    });
+
+    it('sets isChartBeingTouched to false on touch cancel', () => {
+      const { getByTestId } = render(<PriceAdvanced {...baseProps} />);
+      const chartContainer = getByTestId('advanced-chart-touch-container');
+
+      fireEvent(chartContainer, 'touchStart');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(true);
+
+      fireEvent(chartContainer, 'touchCancel');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(false);
+    });
+
+    it('handles multiple touch start/end cycles', () => {
+      const { getByTestId } = render(<PriceAdvanced {...baseProps} />);
+      const chartContainer = getByTestId('advanced-chart-touch-container');
+
+      fireEvent(chartContainer, 'touchStart');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(true);
+
+      fireEvent(chartContainer, 'touchEnd');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(false);
+
+      fireEvent(chartContainer, 'touchStart');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(true);
+
+      fireEvent(chartContainer, 'touchEnd');
+      expect(mockSetIsChartBeingTouched).toHaveBeenCalledWith(false);
+    });
+  });
 });

app/components/UI/AssetOverview/Price/Price.advanced.tsx

@@ -45,6 +45,7 @@ import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { selectTokenOverviewChartType } from '../../../../reducers/user/selectors';
 import { setTokenOverviewChartType } from '../../../../actions/user';
+import { usePriceChart } from '../PriceChart/PriceChart.context';
 
 const EMPTY_INDICATORS: IndicatorType[] = [];
 
@@ -135,12 +136,21 @@ const PriceAdvanced = ({
   const [crosshairData, setCrosshairData] = useState<CrosshairData | null>(
     null,
   );
+  const { setIsChartBeingTouched } = usePriceChart();
 
   const handleCrosshairMove = useCallback(
     (data: CrosshairData | null) => setCrosshairData(data),
     [],
   );
 
+  const handleTouchStart = useCallback(() => {
+    setIsChartBeingTouched(true);
+  }, [setIsChartBeingTouched]);
+
+  const handleTouchEnd = useCallback(() => {
+    setIsChartBeingTouched(false);
+  }, [setIsChartBeingTouched]);
+
   const handleChartInteracted = useCallback(
     (payload: ChartInteractedPayload) => {
       trackEvent(
@@ -346,7 +356,13 @@ const PriceAdvanced = ({
         {crosshairData && chartType === ChartType.Candles && (
           <OHLCVBar data={crosshairData} currency={currentCurrency} />
         )}
-        <View style={[styles.chartContainer, { height: CHART_HEIGHT }]}>
+        <View
+          testID="advanced-chart-touch-container"
+          style={[styles.chartContainer, { height: CHART_HEIGHT }]}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+          onTouchCancel={handleTouchEnd}
+        >
           {showEmptyState ? (
             <NoDataOverlay
               hasInsufficientData={hasInsufficientData}

app/components/UI/TokenDetails/components/AssetOverviewContent.tsx

@@ -43,7 +43,6 @@ import Price from '../../AssetOverview/Price';
 import ChartNavigationButton from '../../AssetOverview/ChartNavigationButton';
 import Balance from '../../AssetOverview/Balance';
 import TokenDetails from '../../AssetOverview/TokenDetails';
-import { PriceChartProvider } from '../../AssetOverview/PriceChart/PriceChart.context';
 import AssetDetailsActions from '../../../Views/AssetDetails/AssetDetailsActions';
 import { TokenDetailsActions } from './TokenDetailsActions';
 import AssetOverviewClaimBonus from '../../Earn/components/AssetOverviewClaimBonus';
@@ -812,18 +811,16 @@ const AssetOverviewContent: React.FC<AssetOverviewContentProps> = ({
             </Box>
           )}
 
-          <PriceChartProvider>
-            <Price
-              asset={token}
-              prices={prices}
-              timePeriod={timePeriod}
-              priceDiff={priceDiff}
-              currentCurrency={currentCurrency}
-              currentPrice={currentPrice}
-              comparePrice={comparePrice}
-              isLoading={isLoading}
-            />
-          </PriceChartProvider>
+          <Price
+            asset={token}
+            prices={prices}
+            timePeriod={timePeriod}
+            priceDiff={priceDiff}
+            currentCurrency={currentCurrency}
+            currentPrice={currentPrice}
+            comparePrice={comparePrice}
+            isLoading={isLoading}
+          />
           {/* Same as main: chart period tabs under the legacy line chart. Omitted when the advanced chart is on (range selector lives inside Price). */}
           {!isTokenOverviewAdvancedChartEnabled && (
             <View style={styles.chartNavigationWrapper}>