Merge branch 'main' into perps/tat-1984-perps-home-back-arrow

Author: gambinish

.yarnrc.yml

@@ -7,6 +7,7 @@ enableScripts: false
 nodeLinker: node-modules
 
 npmAuditIgnoreAdvisories:
+  - 1109627  # TODO: Upgrade @react-native-community/cli to 17.0.1+ when ready. Suppressing for now to unblock CI.
 
 yarnPath: .yarn/releases/yarn-4.10.3.cjs
 

app/component-library/components/List/ListItemSelect/ListItemSelect.test.tsx

@@ -174,4 +174,21 @@ describe('ListItemSelect', () => {
     const component = getByTestId('list-item-select');
     expect(component).toBeOnTheScreen();
   });
+
+  it('passes through custom listItemProps', () => {
+    const { getByTestId } = render(
+      <ListItemSelect
+        onPress={() => null}
+        listItemProps={{
+          accessibilityHint: 'Custom Hint',
+          testID: 'nested-list-item',
+        }}
+      >
+        <View testID="test-content">Test Content</View>
+      </ListItemSelect>,
+    );
+
+    const component = getByTestId('nested-list-item');
+    expect(component.props.accessibilityHint).toBe('Custom Hint');
+  });
 });

app/component-library/components/List/ListItemSelect/ListItemSelect.tsx

@@ -22,6 +22,7 @@ const ListItemSelect: React.FC<ListItemSelectProps> = ({
   onLongPress,
   gap = DEFAULT_SELECTITEM_GAP,
   verticalAlignment,
+  listItemProps,
   ...props
 }) => {
   const { styles } = useStyles(styleSheet, { style, isDisabled });
@@ -34,7 +35,7 @@ const ListItemSelect: React.FC<ListItemSelectProps> = ({
       onLongPress={onLongPress}
       {...props}
     >
-      <ListItem gap={gap} style={styles.listItem}>
+      <ListItem gap={gap} style={styles.listItem} {...listItemProps}>
         {children}
       </ListItem>
       {isSelected && (

app/component-library/components/List/ListItemSelect/ListItemSelect.types.ts

@@ -18,6 +18,10 @@ export interface ListItemSelectProps
    * Optional prop to determine if the item is disabled.
    */
   isDisabled?: boolean;
+  /**
+   * Optional prop to configure the prop of nested ListItem
+   */
+  listItemProps?: Partial<ListItemProps>;
 }
 
 /**

app/components/Nav/Main/MainNavigator.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Image, StyleSheet, Keyboard, Platform } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useSelector } from 'react-redux';
@@ -271,6 +271,15 @@ const RewardsHome = () => (
   </Stack.Navigator>
 );
 
+// Persist the last trending screen across unmounts
+export const lastTrendingScreenRef = { current: 'TrendingFeed' };
+
+// Callback to update the last trending screen (outside component to persist)
+export const updateLastTrendingScreen = (screenName) => {
+  // eslint-disable-next-line react-compiler/react-compiler
+  lastTrendingScreenRef.current = screenName;
+};
+
 const TrendingHome = () => (
   <Stack.Navigator mode="modal" screenOptions={clearStackNavigatorOptions}>
     <Stack.Screen
@@ -667,23 +676,26 @@ const HomeTabs = () => {
         options={options.home}
         component={WalletTabModalFlow}
       />
-      {isAssetsTrendingTokensEnabled && (
+      {isAssetsTrendingTokensEnabled ? (
         <Tab.Screen
           name={Routes.TRENDING_VIEW}
           options={options.trending}
           component={TrendingHome}
           layout={({ children }) => UnmountOnBlurComponent(children)}
         />
+      ) : (
+        <Tab.Screen
+          name={Routes.BROWSER.HOME}
+          options={{
+            ...options.browser,
+            tabBarButton: isAssetsTrendingTokensEnabled
+              ? () => null
+              : undefined,
+          }}
+          component={BrowserFlow}
+          layout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
+        />
       )}
-      <Tab.Screen
-        name={Routes.BROWSER.HOME}
-        options={{
-          ...options.browser,
-          tabBarButton: isAssetsTrendingTokensEnabled ? () => null : undefined,
-        }}
-        component={BrowserFlow}
-        layout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
-      />
       <Tab.Screen
         name={Routes.MODAL.TRADE_WALLET_ACTIONS}
         options={options.trade}

app/components/UI/Perps/hooks/usePerpsPositionData.ts

@@ -224,12 +224,13 @@ export const usePerpsPositionData = ({
       clearInterval(intervalId);
       DevLogger.log('Cleared candle refresh interval');
     };
+    // Note: candleData is intentionally excluded from deps to prevent infinite loop
+    // This effect only needs to re-run when the interval settings change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    candleData,
     isLoadingHistory,
     selectedInterval,
     fetchHistoricalCandles,
-    initializationState,
     isControllerInitialized,
   ]);
 

app/components/UI/Predict/components/PredictConsentSheet/PredictConsentSheet.test.tsx

@@ -1,12 +1,32 @@
 import React, { useRef, useEffect } from 'react';
 import { render, fireEvent, act } from '@testing-library/react-native';
+import { InteractionManager } from 'react-native';
 
 // Internal dependencies
 import PredictConsentSheet, {
   PredictConsentSheetRef,
 } from './PredictConsentSheet';
 import { usePredictAgreement } from '../../hooks/usePredictAgreement';
 
+const mockNavigate = jest.fn();
+const runAfterInteractionsCallbacks: (() => void)[] = [];
+const mockRunAfterInteractions = jest.spyOn(
+  InteractionManager,
+  'runAfterInteractions',
+);
+const runAfterInteractionsMockImpl: typeof InteractionManager.runAfterInteractions =
+  (task) => {
+    if (typeof task === 'function') {
+      runAfterInteractionsCallbacks.push(task as () => void);
+    }
+
+    return {
+      then: jest.fn(),
+      done: jest.fn(),
+      cancel: jest.fn(),
+    } as ReturnType<typeof InteractionManager.runAfterInteractions>;
+  };
+
 // Mock dependencies
 jest.mock('react-native/Libraries/Linking/Linking', () => ({
   openURL: jest.fn(),
@@ -36,7 +56,7 @@ jest.mock('@metamask/design-system-twrnc-preset', () => ({
 
 jest.mock('@react-navigation/native', () => ({
   useNavigation: () => ({
-    navigate: jest.fn(),
+    navigate: mockNavigate,
     goBack: jest.fn(),
   }),
 }));
@@ -184,14 +204,21 @@ describe('PredictConsentSheet', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    runAfterInteractionsCallbacks.length = 0;
+    mockRunAfterInteractions.mockImplementation(runAfterInteractionsMockImpl);
     (usePredictAgreement as jest.Mock).mockReturnValue({
       isAgreementAccepted: false,
       acceptAgreement: mockAcceptAgreement,
     });
   });
 
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
+    mockRunAfterInteractions.mockReset();
+  });
+
+  afterAll(() => {
+    mockRunAfterInteractions.mockRestore();
   });
 
   describe('visibility behavior', () => {
@@ -526,4 +553,79 @@ describe('PredictConsentSheet', () => {
       expect(customAcceptAgreement).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('Terms Link', () => {
+    it('renders learn more text', () => {
+      const TestComponent = () => {
+        const ref = useRef<PredictConsentSheetRef>(null);
+
+        useEffect(() => {
+          act(() => {
+            ref.current?.onOpenBottomSheet();
+          });
+        }, []);
+
+        return (
+          <PredictConsentSheet
+            ref={ref}
+            providerId={mockProviderId}
+            onDismiss={mockOnDismiss}
+            onAgree={mockOnAgree}
+          />
+        );
+      };
+
+      const { getByText } = render(<TestComponent />);
+
+      expect(getByText('Learn more')).toBeOnTheScreen();
+    });
+
+    it('navigates to polymarket terms webview when description is pressed', () => {
+      const TestComponent = () => {
+        const ref = useRef<PredictConsentSheetRef>(null);
+
+        useEffect(() => {
+          act(() => {
+            ref.current?.onOpenBottomSheet();
+          });
+        }, []);
+
+        return (
+          <PredictConsentSheet
+            ref={ref}
+            providerId={mockProviderId}
+            onDismiss={mockOnDismiss}
+            onAgree={mockOnAgree}
+          />
+        );
+      };
+
+      const { getByText } = render(<TestComponent />);
+
+      const learnMoreText = getByText('Learn more');
+      const touchableParent = learnMoreText.parent;
+
+      expect(touchableParent).toBeTruthy();
+
+      act(() => {
+        if (touchableParent) {
+          fireEvent.press(touchableParent);
+        }
+      });
+
+      expect(mockRunAfterInteractions).toHaveBeenCalledTimes(1);
+      const callback = runAfterInteractionsCallbacks[0];
+      expect(callback).toBeDefined();
+
+      callback?.();
+
+      expect(mockNavigate).toHaveBeenCalledWith('Webview', {
+        screen: 'SimpleWebview',
+        params: {
+          url: 'https://polymarket.com/tos',
+          title: 'Terms and Conditions',
+        },
+      });
+    });
+  });
 });

app/components/UI/Predict/components/PredictConsentSheet/PredictConsentSheet.tsx

@@ -4,8 +4,8 @@ import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { Linking } from 'react-native';
+import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
+import { InteractionManager, TouchableOpacity } from 'react-native';
 import { strings } from '../../../../../../locales/i18n';
 
 // Internal dependencies.
@@ -19,6 +19,7 @@ import {
   usePredictBottomSheet,
   type PredictBottomSheetRef,
 } from '../../hooks/usePredictBottomSheet';
+import { useNavigation } from '@react-navigation/native';
 
 interface PredictConsentSheetProps {
   providerId: string;
@@ -33,6 +34,7 @@ const PredictConsentSheet = forwardRef<
   PredictConsentSheetProps
 >(({ providerId, onDismiss, onAgree }, ref) => {
   const tw = useTailwind();
+  const navigation = useNavigation();
   const { acceptAgreement } = usePredictAgreement({ providerId });
   const { sheetRef, isVisible, closeSheet, handleSheetClosed, getRefHandlers } =
     usePredictBottomSheet({ onDismiss });
@@ -49,6 +51,18 @@ const PredictConsentSheet = forwardRef<
 
   useImperativeHandle(ref, getRefHandlers, [getRefHandlers]);
 
+  const handlePolymarketTerms = useCallback(() => {
+    InteractionManager.runAfterInteractions(() => {
+      navigation.navigate('Webview', {
+        screen: 'SimpleWebview',
+        params: {
+          url: 'https://polymarket.com/tos',
+          title: strings('predict.consent_sheet.title'),
+        },
+      });
+    });
+  }, [navigation]);
+
   if (!isVisible) {
     return null;
   }
@@ -66,19 +80,18 @@ const PredictConsentSheet = forwardRef<
         </Text>
       </BottomSheetHeader>
       <Box twClassName="px-6 pb-6">
-        <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
-          {strings('predict.consent_sheet.description')}{' '}
-        </Text>
-        <Text
-          variant={TextVariant.BodyMD}
-          style={tw.style('text-info-default')}
-          onPress={() => {
-            Linking.openURL('https://polymarket.com/tos');
-          }}
-          suppressHighlighting
-        >
-          {strings('predict.consent_sheet.learn_more')}
-        </Text>
+        <TouchableOpacity onPress={handlePolymarketTerms}>
+          <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+            {strings('predict.consent_sheet.description')}{' '}
+            <Text
+              variant={TextVariant.BodyMD}
+              style={tw.style('text-info-default')}
+              suppressHighlighting
+            >
+              {strings('predict.consent_sheet.learn_more')}
+            </Text>
+          </Text>
+        </TouchableOpacity>
       </Box>
       <BottomSheetFooter
         buttonPropsArray={[

app/components/UI/Predict/components/PredictDetailsChart/PredictDetailsChart.test.tsx

@@ -164,9 +164,10 @@ describe('PredictDetailsChart', () => {
     });
 
     it('renders loading state when isLoading is true', () => {
-      const { getByText } = setupTest({ isLoading: true });
+      const { getByTestId } = setupTest({ isLoading: true });
 
-      expect(getByText('Loading price history...')).toBeOnTheScreen();
+      const lineChart = getByTestId('line-chart');
+      expect(lineChart).toBeOnTheScreen();
     });
 
     it('renders empty state when no data provided', () => {