[pull] main from MetaMask:main

app/components/UI/NftGrid/NftGrid.tsx

@@ -54,11 +54,13 @@ const NftGridContent = ({
   nftRowList,
   goToAddCollectible,
   isAddNFTEnabled,
+  isFullView = false,
 }: {
   allFilteredCollectibles: Nft[];
   nftRowList: React.ReactNode;
   goToAddCollectible: () => void;
   isAddNFTEnabled: boolean;
+  isFullView?: boolean;
 }) => {
   const isNftFetchingProgress = useSelector(isNftFetchingProgressSelector);
 
@@ -67,7 +69,7 @@ const NftGridContent = ({
   }
 
   if (isNftFetchingProgress) {
-    return <NftGridSkeleton />;
+    return <NftGridSkeleton isFullView={isFullView} />;
   }
 
   return (
@@ -300,6 +302,7 @@ const NftGrid = forwardRef<TabRefreshHandle, NftGridProps>(
           nftRowList={nftRowList}
           goToAddCollectible={goToAddCollectible}
           isAddNFTEnabled={isAddNFTEnabled}
+          isFullView={isFullView}
         />
 
         {/* View all NFTs button - shown when there are more items than maxItems */}

app/components/UI/NftGrid/NftGridSkeleton.tsx

@@ -4,12 +4,12 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useTheme } from '../../../util/theme';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
-const NftGridSkeleton = () => {
+const NftGridSkeleton = ({ isFullView = false }: { isFullView?: boolean }) => {
   const { colors } = useTheme();
   const tw = useTailwind();
 
   return (
-    <View style={tw.style('flex-1 p-1')}>
+    <View style={tw.style('flex-1 pt-1', isFullView ? 'px-4' : 'px-1')}>
       <SkeletonPlaceholder
         backgroundColor={colors.background.section}
         highlightColor={colors.background.subsection}

app/components/UI/Perps/utils/amountConversion.test.ts

@@ -14,8 +14,8 @@ describe('convertPerpsAmountToUSD', () => {
   });
 
   it('handles hex wei values correctly', () => {
-    // 1 ETH in wei (0xde0b6b3a7640000)
-    expect(convertPerpsAmountToUSD('0xde0b6b3a7640000')).toBe('$20,000');
+    // Hex wei is not supported in Perps flow; all inputs return '$0'
+    expect(convertPerpsAmountToUSD('0xde0b6b3a7640000')).toBe('$0');
   });
 
   it('handles numeric strings correctly', () => {

app/components/UI/Perps/utils/amountConversion.ts

@@ -1,5 +1,4 @@
 import { formatPerpsFiat } from '../utils/formatUtils';
-import BN from 'bnjs4';
 import { ensureError } from '../../../../util/errorUtils';
 import { PERPS_CONSTANTS, type PerpsLogger } from '@metamask/perps-controller';
 
@@ -13,7 +12,7 @@ export type AmountConversionLogger = PerpsLogger | undefined;
  * Converts various amount formats to USD display string for Perps
  * Uses existing Perps formatting utilities for consistency
  *
- * @param amount - Amount in various formats (USD string, hex wei, or numeric string)
+ * @param amount - Amount in various formats (USD string or numeric string)
  * @param logger - Optional logger for error reporting
  * @returns Formatted USD string using Perps formatting standards
  */
@@ -33,18 +32,9 @@ export const convertPerpsAmountToUSD = (
       return formatPerpsFiat(numericValue);
     }
 
-    // Check if it's a hex value (starts with 0x) - treat as wei
+    // Hex wei input is not supported in the Perps flow (all deposits use ERC-20 USDC)
     if (amount.startsWith('0x')) {
-      const weiBN = new BN(amount, 16);
-      const ethBN = weiBN.div(new BN(10).pow(new BN(18)));
-      const ethValue = ethBN.toNumber();
-
-      // For now, use a placeholder ETH price since we don't have real-time price data
-      // In a real implementation, this should come from a price feed
-      const ethPriceUSD = 2000; // TODO: Replace with actual ETH price from price feed
-      const usdValue = ethValue * ethPriceUSD;
-      // Preserve decimals for converted amounts
-      return formatPerpsFiat(usdValue);
+      return '$0';
     }
 
     // Otherwise, treat as a direct USD amount (e.g., "1.30" = $1.30)

app/components/Views/Homepage/Sections/Perpetuals/PerpsSection.test.tsx

@@ -811,7 +811,7 @@ describe('PerpsSection', () => {
       fireEvent.press(screen.getByTestId('perps-view-more-card'));
 
       expect(mockNavigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
-        screen: Routes.PERPS.PERPS_HOME,
+        screen: Routes.PERPS.MARKET_LIST,
         params: { source: 'home_section' },
       });
     });

app/components/Views/Homepage/Sections/Perpetuals/PerpsSection.tsx

@@ -212,6 +212,13 @@ const PerpsSection = forwardRef<SectionRefreshHandle, PerpsSectionProps>(
       });
     }, [navigation]);
 
+    const handleViewMorePerps = useCallback(() => {
+      navigation.navigate(Routes.PERPS.ROOT, {
+        screen: Routes.PERPS.MARKET_LIST,
+        params: { source: PERPS_EVENT_VALUE.SOURCE.HOME_SECTION },
+      });
+    }, [navigation]);
+
     const handlePositionPress = useCallback(
       (position: Position) => {
         track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
@@ -330,7 +337,7 @@ const PerpsSection = forwardRef<SectionRefreshHandle, PerpsSectionProps>(
                     />
                   ))}
                   <ViewMoreCard
-                    onPress={handleViewAllPerps}
+                    onPress={handleViewMorePerps}
                     twClassName="w-[180px] flex-1"
                     testID="perps-view-more-card"
                   />

app/components/Views/Homepage/Sections/Predictions/PredictionsSection.tsx

@@ -8,7 +8,7 @@ import { ScrollView, View } from 'react-native';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { Box, TextVariant } from '@metamask/design-system-react-native';
+import { Box } from '@metamask/design-system-react-native';
 import SectionTitle from '../../components/SectionTitle';
 import ErrorState from '../../components/ErrorState';
 import FadingScrollContainer from '../../components/FadingScrollContainer';
@@ -276,8 +276,7 @@ const PredictionsSection = forwardRef<
                   ))}
                   <ViewMoreCard
                     onPress={handleViewAllPredictions}
-                    twClassName="w-[180px] h-[180px]"
-                    textVariant={TextVariant.BodyLg}
+                    twClassName="w-[180px] flex-1"
                   />
                 </>
               )}

app/components/Views/Homepage/components/ErrorState/ErrorState.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
+import { Image } from 'react-native';
 import {
   Box,
   Text,
-  Icon,
-  IconName,
-  IconSize,
-  IconColor,
   TextVariant,
   TextColor,
   BoxAlignItems,
   Button,
   ButtonVariant,
   ButtonSize,
 } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { useAssetFromTheme } from '../../../../../util/theme';
 import { strings } from '../../../../../../locales/i18n';
+import errorStateLight from '../../../../../images/error-state-no-connection-light.png';
+import errorStateDark from '../../../../../images/error-state-no-connection-dark.png';
 
 interface ErrorStateProps {
   /** Text describing what failed to load (e.g., "Unable to load predictions") */
@@ -24,9 +25,12 @@ interface ErrorStateProps {
 
 /**
  * Generic error state for homepage sections.
- * Shows a wifi-off icon, error message, and a retry button.
+ * Shows a no-connection illustration, error message, and a retry button.
  */
 const ErrorState: React.FC<ErrorStateProps> = ({ title, onRetry }) => {
+  const tw = useTailwind();
+  const noConnectionImage = useAssetFromTheme(errorStateLight, errorStateDark);
+
   const handleRetry = () => {
     try {
       const result = onRetry();
@@ -42,10 +46,10 @@ const ErrorState: React.FC<ErrorStateProps> = ({ title, onRetry }) => {
 
   return (
     <Box alignItems={BoxAlignItems.Center} gap={3} padding={4}>
-      <Icon
-        name={IconName.WifiOff}
-        size={IconSize.Xl}
-        color={IconColor.IconMuted}
+      <Image
+        source={noConnectionImage}
+        resizeMode="contain"
+        style={tw.style('w-[72px] h-[72px]')}
       />
       <Text
         variant={TextVariant.BodyMd}

app/components/Views/Homepage/components/ViewMoreCard/ViewMoreCard.tsx

@@ -26,7 +26,7 @@ interface ViewMoreCardProps {
 
 /**
  * Shared "View more" card shown at the end of a horizontal carousel.
- * Renders a circular ArrowRight icon above a label, blending with the background.
+ * Renders an ArrowRight icon above a label on a muted background.
  */
 const ViewMoreCard: React.FC<ViewMoreCardProps> = ({
   onPress,
@@ -41,22 +41,16 @@ const ViewMoreCard: React.FC<ViewMoreCardProps> = ({
     testID={testID}
   >
     <Box
-      twClassName={twClassName}
+      twClassName={`rounded-xl bg-background-muted ${twClassName}`}
       alignItems={BoxAlignItems.Center}
       justifyContent={BoxJustifyContent.Center}
       gap={2}
     >
-      <Box
-        twClassName="w-8 h-8 rounded-full bg-background-muted"
-        alignItems={BoxAlignItems.Center}
-        justifyContent={BoxJustifyContent.Center}
-      >
-        <Icon
-          name={IconName.ArrowRight}
-          size={IconSize.Md}
-          color={IconColor.IconDefault}
-        />
-      </Box>
+      <Icon
+        name={IconName.ArrowRight}
+        size={IconSize.Md}
+        color={IconColor.IconDefault}
+      />
       <Text
         variant={textVariant}
         fontWeight={FontWeight.Medium}