[pull] main from MetaMask:main

app/component-library/components-temp/ButtonFilter/ButtonFilter.tsx

@@ -5,6 +5,12 @@ import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 import { ButtonFilterProps } from './ButtonFilter.types';
 
+/**
+ * @deprecated Please update your code to use `ButtonFilter` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonFilter/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const ButtonFilter = ({
   children,
   isActive = false,

app/component-library/components-temp/MainActionButton/MainActionButton.tsx

@@ -13,6 +13,12 @@ import { useAnimatedPressable, useStyles } from '../../hooks';
 import { MainActionButtonProps } from './MainActionButton.types';
 import styleSheet from './MainActionButton.styles';
 
+/**
+ * @deprecated Please update your code to use `MainActionButton` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/MainActionButton/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const MainActionButton = ({
   iconName,
   label,

app/component-library/components-temp/TabEmptyState/TabEmptyState.tsx

@@ -14,6 +14,12 @@ import {
 
 import type { TabEmptyStateProps } from './TabEmptyState.types';
 
+/**
+ * @deprecated Please update your code to use `TabEmptyState` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TabEmptyState/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 export const TabEmptyState: React.FC<TabEmptyStateProps> = ({
   icon,
   description,

app/component-library/components/Banners/Banner/Banner.tsx

@@ -7,6 +7,14 @@ import BannerTip from './variants/BannerTip';
 // Internal dependencies.
 import { BannerProps, BannerVariant } from './Banner.types';
 
+/**
+ * @deprecated Please update your code to use `BannerAlert` from `@metamask/design-system-react-native`.
+ * The `BannerVariant.Tip` variant is unused and will be removed.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerAlert/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const Banner = (bannerProps: BannerProps) => {
   switch (bannerProps.variant) {
     case BannerVariant.Alert:

app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx

@@ -24,6 +24,12 @@ import {
   TESTID_BANNER_CLOSE_BUTTON_ICON,
 } from './BannerBase.constants';
 
+/**
+ * @deprecated Please update your code to use `BannerBase` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerBase/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BannerBase: React.FC<BannerBaseProps> = ({
   style,
   startAccessory,

app/component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.tsx

@@ -18,6 +18,13 @@ import {
   BANNERALERT_TEST_ID,
 } from './BannerAlert.constants';
 
+/**
+ * @deprecated Please update your code to use `BannerAlert` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerAlert/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BannerAlert: React.FC<BannerAlertProps> = ({
   style,
   severity = DEFAULT_BANNERALERT_SEVERITY,

app/component-library/components/Banners/Banner/variants/BannerTip/BannerTip.tsx

@@ -17,6 +17,12 @@ import {
   BANNERTIP_TEST_ID,
 } from './BannerTip.constants';
 
+/**
+ * @deprecated This component is unused and will be removed.
+ * Please use `BannerBase` from `@metamask/design-system-react-native` instead.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BannerBase/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BannerTip: React.FC<BannerTipProps> = ({
   style,
   logoType = DEFAULT_BANNERTIP_LOGOTYPE,

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx

@@ -31,6 +31,12 @@ import BottomSheetDialog, {
   BottomSheetDialogRef,
 } from './foundation/BottomSheetDialog';
 
+/**
+ * @deprecated Please update your code to use `BottomSheet` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheet/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   (
     {

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx

@@ -47,6 +47,12 @@ import {
   BottomSheetDialogProps,
 } from './BottomSheetDialog.types';
 
+/**
+ * @deprecated Please update your code to use `BottomSheetDialog` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheetDialog/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const BottomSheetDialog = forwardRef<
   BottomSheetDialogRef,
   BottomSheetDialogProps

app/component-library/components/Icons/Icon/Icon.tsx

@@ -16,6 +16,7 @@ import { DEFAULT_ICON_SIZE, DEFAULT_ICON_COLOR } from './Icon.constants';
  * @deprecated Please update your code to use `Icon` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Icon/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
  */
 const Icon = ({
   size = DEFAULT_ICON_SIZE,

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

@@ -16,6 +16,12 @@ import {
   TESTID_LISTITEM_GAP,
 } from './ListItem.constants';
 
+/**
+ * @deprecated Please update your code to use `ListItem` from `@metamask/design-system-react-native`.
+ * The API may have changed — compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ListItem/README.md}
+ * @since @metamask/design-system-react-native@0.11.0
+ */
 const ListItem: React.FC<ListItemProps> = ({
   style,
   children,

app/component-library/components/Texts/Text/Text.tsx

@@ -16,6 +16,7 @@ import { DEFAULT_TEXT_COLOR, DEFAULT_TEXT_VARIANT } from './Text.constants';
  * @deprecated Please update your code to use `Text` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/Text/README.md}
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/MIGRATION.md Migration docs}
  */
 const Text: React.FC<TextProps> = ({
   variant = DEFAULT_TEXT_VARIANT,

app/components/Nav/Main/MainNavigator.js

@@ -52,6 +52,7 @@ import ActivityView from '../../Views/ActivityView';
 import RewardsNavigator from '../../UI/Rewards/RewardsNavigator';
 import { ExploreFeed } from '../../Views/TrendingView/TrendingView';
 import ExploreSearchScreen from '../../Views/TrendingView/Views/ExploreSearchScreen/ExploreSearchScreen';
+import ExploreSectionResultsFullView from '../../Views/TrendingView/Views/ExploreSectionResultsFullView/ExploreSectionResultsFullView';
 import TrendingFeedSessionManager from '../../UI/Trending/services/TrendingFeedSessionManager';
 import CollectiblesDetails from '../../UI/CollectibleModal';
 import OptinMetrics from '../../UI/OptinMetrics';
@@ -1181,6 +1182,11 @@ const MainNavigator = () => {
           component={SitesFullView}
           options={{ headerShown: false, ...slideFromRightAnimation }}
         />
+        <Stack.Screen
+          name={Routes.EXPLORE_SECTION_RESULTS_FULL_VIEW}
+          component={ExploreSectionResultsFullView}
+          options={{ headerShown: false, ...slideFromRightAnimation }}
+        />
         <Stack.Screen
           name={Routes.BROWSER.HOME}
           component={BrowserFlow}

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -315,6 +315,17 @@ exports[`MainNavigator Tab Bar Visibility hides tab bar when browser is active 1
       }
     }
   />
+  <Screen
+    component={[Function]}
+    name="ExploreSectionResultsFullView"
+    options={
+      {
+        "animationEnabled": true,
+        "cardStyleInterpolator": [Function],
+        "headerShown": false,
+      }
+    }
+  />
   <Screen
     component={[Function]}
     name="BrowserTabHome"
@@ -716,6 +727,17 @@ exports[`MainNavigator Tab Bar Visibility shows tab bar when not in browser 1`]
       }
     }
   />
+  <Screen
+    component={[Function]}
+    name="ExploreSectionResultsFullView"
+    options={
+      {
+        "animationEnabled": true,
+        "cardStyleInterpolator": [Function],
+        "headerShown": false,
+      }
+    }
+  />
   <Screen
     component={[Function]}
     name="BrowserTabHome"
@@ -1117,6 +1139,17 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
       }
     }
   />
+  <Screen
+    component={[Function]}
+    name="ExploreSectionResultsFullView"
+    options={
+      {
+        "animationEnabled": true,
+        "cardStyleInterpolator": [Function],
+        "headerShown": false,
+      }
+    }
+  />
   <Screen
     component={[Function]}
     name="BrowserTabHome"

app/components/UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.tsx

@@ -29,7 +29,7 @@ import Routes from '../../../../constants/navigation/Routes';
 import NotificationsService from '../../../../util/notifications/services/NotificationService';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useEnableNotifications } from '../../../../util/notifications/hooks/useNotifications';
-import { useMetrics } from '../../../hooks/useMetrics';
+import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
 import { selectIsMetamaskNotificationsEnabled } from '../../../../selectors/notifications';
 import { selectIsBackupAndSyncEnabled } from '../../../../selectors/identity';
 import useThunkDispatch from '../../../hooks/useThunkDispatch';
@@ -43,7 +43,7 @@ interface Props {
 }
 
 const BasicFunctionalityModal = ({ route }: Props) => {
-  const { trackEvent, createEventBuilder } = useMetrics();
+  const { trackEvent, createEventBuilder } = useAnalytics();
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const bottomSheetRef = useRef<BottomSheetRef>(null);

app/components/UI/Bridge/components/InputStepper/index.tsx

@@ -4,6 +4,7 @@ import Input from '../../../../../component-library/components/Form/TextField/fo
 import {
   ButtonIcon,
   ButtonIconSize,
+  ButtonIconVariant,
   IconColor,
   IconName,
   Text,
@@ -42,7 +43,7 @@ export const InputStepper = ({
         <ButtonIcon
           size={ButtonIconSize.Lg}
           iconName={IconName.Minus}
-          isFloating
+          variant={ButtonIconVariant.Floating}
           style={tw.style(minusPressed ? 'bg-muted-pressed' : 'bg-muted')}
           iconProps={{ color: IconColor.IconDefault }}
           onPressIn={() => setMinusPressed(true)}
@@ -72,7 +73,7 @@ export const InputStepper = ({
         <ButtonIcon
           size={ButtonIconSize.Lg}
           iconName={IconName.Add}
-          isFloating
+          variant={ButtonIconVariant.Floating}
           style={tw.style(plusPressed ? 'bg-muted-pressed' : 'bg-muted')}
           iconProps={{ color: IconColor.IconDefault }}
           onPressIn={() => setPlusPressed(true)}

app/components/UI/Card/Views/SpendingLimit/SpendingLimit.tsx

@@ -301,7 +301,7 @@ const SpendingLimit: React.FC<SpendingLimitProps> = ({ route }) => {
                     {accountGroupName ?? selectedAccount.metadata.name}
                   </Text>
                   <Icon
-                    name={IconName.ArrowRight}
+                    name={IconName.ArrowDown}
                     size={IconSize.Md}
                     color={IconColor.IconDefault}
                     style={tw.style('self-center shrink-0')}
@@ -355,7 +355,7 @@ const SpendingLimit: React.FC<SpendingLimitProps> = ({ route }) => {
                   {tokenLabel}
                 </Text>
                 <Icon
-                  name={IconName.ArrowRight}
+                  name={IconName.ArrowDown}
                   size={IconSize.Md}
                   color={IconColor.IconDefault}
                   style={tw.style('self-center shrink-0')}
@@ -386,7 +386,7 @@ const SpendingLimit: React.FC<SpendingLimitProps> = ({ route }) => {
                   {spendingLimitLabel}
                 </Text>
                 <Icon
-                  name={IconName.ArrowRight}
+                  name={IconName.ArrowDown}
                   size={IconSize.Md}
                   color={IconColor.IconDefault}
                   style={tw.style('self-center shrink-0')}

app/components/UI/Card/hooks/useCardDetails.test.ts

@@ -25,6 +25,7 @@ const mockRefetch = jest.fn();
 jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn().mockReturnValue({
     data: undefined,
+    isFetching: false,
     isLoading: false,
     error: null,
     refetch: jest.fn(),
@@ -63,6 +64,7 @@ describe('useCardDetails', () => {
 
     (useQuery as jest.Mock).mockReturnValue({
       data: undefined,
+      isFetching: false,
       isLoading: false,
       error: null,
       refetch: mockRefetch,
@@ -90,6 +92,7 @@ describe('useCardDetails', () => {
       };
       (useQuery as jest.Mock).mockReturnValue({
         data: cardDetailsResult,
+        isFetching: false,
         isLoading: false,
         error: null,
         refetch: mockRefetch,
@@ -106,6 +109,7 @@ describe('useCardDetails', () => {
     it('returns loading state from useQuery', () => {
       (useQuery as jest.Mock).mockReturnValue({
         data: undefined,
+        isFetching: true,
         isLoading: true,
         error: null,
         refetch: mockRefetch,
@@ -141,6 +145,7 @@ describe('useCardDetails', () => {
       const mockError = new Error('Test error');
       (useQuery as jest.Mock).mockReturnValue({
         data: undefined,
+        isFetching: false,
         isLoading: false,
         error: mockError,
         refetch: mockRefetch,

app/components/UI/Card/hooks/useCardDetails.ts

@@ -23,6 +23,7 @@ const useCardDetails = () => {
   const {
     data: cardDetailsData,
     isLoading,
+    isFetching,
     error,
     refetch,
   } = useQuery<CardDetailsResult | null>({
@@ -69,7 +70,7 @@ const useCardDetails = () => {
   return {
     cardDetails: cardDetailsData?.cardDetails ?? null,
     warning: cardDetailsData?.warning ?? null,
-    isLoading,
+    isLoading: isLoading && isFetching,
     error: error as Error | null,
     fetchCardDetails,
   };

app/components/UI/Card/hooks/useCardPinToken.ts

@@ -34,7 +34,11 @@ const useCardPinToken = (): UseCardPinTokenResult => {
     [theme.themeAppearance],
   );
 
-  const { mutateAsync, isPending, error, data, reset } = useMutation({
+  const { mutateAsync, isPending, error, data, reset } = useMutation<
+    CardPinTokenResponse,
+    Error,
+    { customCss: typeof customCss }
+  >({
     mutationKey: cardQueries.pin.keys.token(),
     mutationFn: cardQueries.pin.tokenMutationFn(sdk),
   });

app/components/UI/Card/hooks/useCashbackWallet.ts

@@ -124,7 +124,7 @@ const useCashbackWallet = () => {
 
   return {
     cashbackWallet: walletQuery.data ?? null,
-    isLoading: walletQuery.isLoading,
+    isLoading: walletQuery.isLoading && walletQuery.isFetching,
     error: walletQuery.error,
     fetchCashbackWallet: walletQuery.refetch,
 

app/components/UI/Card/hooks/useGetCardExternalWalletDetails.ts

@@ -69,7 +69,7 @@ const useGetCardExternalWalletDetails = (
   const sdkRef = useRef(sdk);
   sdkRef.current = sdk;
 
-  const { data, isLoading, error, refetch } = useQuery({
+  const { data, isLoading, isFetching, error, refetch } = useQuery({
     queryKey: cardQueries.dashboard.keys.externalWalletDetails(),
     queryFn: async () => {
       const currentDelegationSettings =
@@ -155,7 +155,7 @@ const useGetCardExternalWalletDetails = (
 
   return {
     data: data ?? null,
-    isLoading,
+    isLoading: isLoading && isFetching,
     error: error as Error | null,
     fetchData,
   };

app/components/UI/Card/hooks/useGetDelegationSettings.test.ts

@@ -369,6 +369,7 @@ describe('useGetDelegationSettings', () => {
     it('returns loading state from useQuery', () => {
       (useQuery as jest.Mock).mockReturnValue({
         data: undefined,
+        isFetching: true,
         isLoading: true,
         error: null,
       });