Merge branch 'mmpay_recipient_update' of https://github.com/MetaMask/metamask-mobile into mmpay_recipient_update

Author: jpuri

app/components/Nav/Main/MainNavigator.js

@@ -123,6 +123,7 @@ import {
   TopTradersView,
   TraderProfileView,
   TraderPositionView,
+  NotificationPreferencesView,
 } from '../../Views/SocialLeaderboard';
 import { selectSocialLeaderboardEnabled } from '../../../selectors/featureFlagController/socialLeaderboard';
 import PerpsPositionTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView';
@@ -1309,6 +1310,13 @@ const MainNavigator = () => {
           options={{ headerShown: false, ...slideFromRightAnimation }}
         />
       )}
+      {isSocialLeaderboardEnabled && (
+        <Stack.Screen
+          name={Routes.SOCIAL_LEADERBOARD.NOTIFICATION_PREFERENCES}
+          component={NotificationPreferencesView}
+          options={{ headerShown: false, ...slideFromRightAnimation }}
+        />
+      )}
       <>
         <Stack.Screen
           name={Routes.EXPLORE_SEARCH}

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

@@ -44,6 +44,8 @@ import {
   TextColor,
   TextVariant,
 } from '@metamask/design-system-react-native';
+import { useTheme, LIGHT_MODE_SUCCESS_GREEN } from '../../../../util/theme';
+import { AppThemeKey } from '../../../../util/theme/models';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { selectTokenOverviewChartType } from '../../../../reducers/user/selectors';
@@ -285,6 +287,8 @@ const PriceAdvanced = ({
     : dateLabel;
 
   const { styles, theme } = useStyles(styleSheet);
+  const { themeAppearance } = useTheme();
+  const isLightMode = themeAppearance === AppThemeKey.light;
 
   const shouldFallbackToLegacy =
     !chartLoading &&
@@ -357,6 +361,11 @@ const PriceAdvanced = ({
                     ? TextColor.ErrorDefault
                     : TextColor.TextAlternative
               }
+              style={
+                isLightMode && displayDiff > 0
+                  ? { color: LIGHT_MODE_SUCCESS_GREEN }
+                  : undefined
+              }
               allowFontScaling={false}
             >
               {displayDiff > 0 ? '+' : ''}

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

@@ -17,6 +17,8 @@ import {
   TextColor,
   TextVariant,
 } from '@metamask/design-system-react-native';
+import { useTheme, LIGHT_MODE_SUCCESS_GREEN } from '../../../../util/theme';
+import { AppThemeKey } from '../../../../util/theme/models';
 
 import PriceChart from '../PriceChart/PriceChart';
 import { distributeDataPoints } from '../PriceChart/utils';
@@ -93,6 +95,8 @@ const PriceLegacy = ({
   const diffSign = displayDiff > 0 ? '+' : displayDiff < 0 ? '-' : '';
 
   const { styles, theme } = useStyles(styleSheet);
+  const { themeAppearance } = useTheme();
+  const isLightMode = themeAppearance === AppThemeKey.light;
 
   return (
     <>
@@ -145,6 +149,11 @@ const PriceLegacy = ({
                     ? TextColor.ErrorDefault
                     : TextColor.TextAlternative
               }
+              style={
+                isLightMode && displayDiff > 0
+                  ? { color: LIGHT_MODE_SUCCESS_GREEN }
+                  : undefined
+              }
               allowFontScaling={false}
             >
               {diffSign}

app/components/UI/AssetOverview/PriceChart/PriceChart.tsx

@@ -12,6 +12,8 @@ import { AreaChart } from 'react-native-svg-charts';
 
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useStyles } from '../../../../component-library/hooks';
+import { useTheme, LIGHT_MODE_SUCCESS_GREEN } from '../../../../util/theme';
+import { AppThemeKey } from '../../../../util/theme/models';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import {
@@ -63,14 +65,16 @@ const PriceChart = ({
   /** Laid-out width of the chart row — used for touch mapping and skeleton (not screen width). */
   const [chartRowWidth, setChartRowWidth] = useState(0);
   const { styles, theme } = useStyles(styleSheet, { chartHeight });
+  const { themeAppearance } = useTheme();
+  const chartColor =
+    themeAppearance === AppThemeKey.light
+      ? LIGHT_MODE_SUCCESS_GREEN
+      : theme.colors.success.default;
 
   useEffect(() => {
     setPositionX(-1);
   }, [prices]);
 
-  /** Align with AdvancedChart / TradingView line: success up, error down (not legacy primary blue). */
-  const chartColor = theme.colors.success.default;
-
   const apx = (size = 0) => {
     const width = Dimensions.get('window').width;
     return (width / 750) * size;

app/components/UI/Charts/AdvancedChart/AdvancedChartTemplate.ts

@@ -1,4 +1,5 @@
-import type { Theme } from '../../../../util/theme/models';
+import { AppThemeKey, type Theme } from '../../../../util/theme/models';
+import { LIGHT_MODE_SUCCESS_GREEN } from '../../../../util/theme';
 import {
   type LineChromeOptions,
   resolveLineChromeOptions,
@@ -43,6 +44,11 @@ const CHARTING_LIBRARY_ORIGIN = (() => {
 const stripHexAlpha = (hex: string): string =>
   hex.length === 9 && hex.startsWith('#') ? hex.slice(0, 7) : hex;
 
+const getChartSuccessColor = (theme: Theme): string =>
+  theme.themeAppearance === AppThemeKey.light
+    ? LIGHT_MODE_SUCCESS_GREEN
+    : theme.colors.success.default;
+
 interface ChartFeatures {
   enableDrawingTools?: boolean;
   disabledFeatures?: string[];
@@ -62,7 +68,7 @@ window.CONFIG = {
     backgroundColor: '${theme.colors.background.default}',
     borderColor: '${stripHexAlpha(theme.colors.border.muted)}',
     textColor: '${stripHexAlpha(theme.colors.text.muted)}',
-    successColor: '${theme.colors.success.default}',
+    successColor: '${getChartSuccessColor(theme)}',
     errorColor: '${theme.colors.error.default}',
     primaryColor: '${theme.colors.primary.default}'
   },
@@ -206,7 +212,7 @@ export const createAdvancedChartTemplate = (
          */
         #last-close-price-label {
             z-index: 50;
-            background: ${stripHexAlpha(theme.colors.success.default)};
+            background: ${stripHexAlpha(getChartSuccessColor(theme))};
             color: ${stripHexAlpha(theme.colors.success.inverse)};
         }
         /*
@@ -218,8 +224,8 @@ export const createAdvancedChartTemplate = (
         #custom-series-last-value-label {
             z-index: 55;
             background: transparent;
-            border: 1px solid ${stripHexAlpha(theme.colors.success.default)};
-            color: ${stripHexAlpha(theme.colors.success.default)};
+            border: 1px solid ${stripHexAlpha(getChartSuccessColor(theme))};
+            color: ${stripHexAlpha(getChartSuccessColor(theme))};
         }
         /*
          * Crosshair price pill draws above last-close when both share the same Y so text stays readable.