[pull] main from MetaMask:main

.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch → .yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch

@@ -1,64 +1,7 @@
-diff --git a/dist/TokenBalancesController.cjs b/dist/TokenBalancesController.cjs
-index 4918812dde60b8d0e24a7bded27d88f233968858..4e8018bce92b9e5d47fc40784409e16db22be615 100644
---- a/dist/TokenBalancesController.cjs
-+++ b/dist/TokenBalancesController.cjs
-@@ -535,14 +535,16 @@ class TokenBalancesController extends (0, polling_controller_1.StaticIntervalPol
-             }
-             // Update with actual fetched balances only if the value has changed
-             aggregated.forEach(({ success, value, account, token, chainId }) => {
--                var _a, _b, _c;
-+                var _a, _b;
-                 if (success && value !== undefined) {
-+                    // Ensure all accounts we add/update are in lower-case
-+                    const lowerCaseAccount = account.toLowerCase();
-                     const newBalance = (0, controller_utils_1.toHex)(value);
-                     const tokenAddress = checksum(token);
--                    const currentBalance = d.tokenBalances[account]?.[chainId]?.[tokenAddress];
-+                    const currentBalance = d.tokenBalances[lowerCaseAccount]?.[chainId]?.[tokenAddress];
-                     // Only update if the balance has actually changed
-                     if (currentBalance !== newBalance) {
--                        ((_c = ((_a = d.tokenBalances)[_b = account] ?? (_a[_b] = {})))[chainId] ?? (_c[chainId] = {}))[tokenAddress] = newBalance;
-+                        ((_b = ((_a = d.tokenBalances)[lowerCaseAccount] ?? (_a[lowerCaseAccount] = {})))[chainId] ?? (_b[chainId] = {}))[tokenAddress] = newBalance;
-                     }
-                 }
-             });
-diff --git a/dist/TokenBalancesController.mjs b/dist/TokenBalancesController.mjs
-index f64d13f8de56631345a44e6ebb025e62e03f51bc..99aa7f27c574c94b26daa56091ac50d15281dd30 100644
---- a/dist/TokenBalancesController.mjs
-+++ b/dist/TokenBalancesController.mjs
-@@ -531,14 +531,16 @@ export class TokenBalancesController extends StaticIntervalPollingController() {
-             }
-             // Update with actual fetched balances only if the value has changed
-             aggregated.forEach(({ success, value, account, token, chainId }) => {
--                var _a, _b, _c;
-+                var _a, _b;
-                 if (success && value !== undefined) {
-+                    // Ensure all accounts we add/update are in lower-case
-+                    const lowerCaseAccount = account.toLowerCase();
-                     const newBalance = toHex(value);
-                     const tokenAddress = checksum(token);
--                    const currentBalance = d.tokenBalances[account]?.[chainId]?.[tokenAddress];
-+                    const currentBalance = d.tokenBalances[lowerCaseAccount]?.[chainId]?.[tokenAddress];
-                     // Only update if the balance has actually changed
-                     if (currentBalance !== newBalance) {
--                        ((_c = ((_a = d.tokenBalances)[_b = account] ?? (_a[_b] = {})))[chainId] ?? (_c[chainId] = {}))[tokenAddress] = newBalance;
-+                        ((_b = ((_a = d.tokenBalances)[lowerCaseAccount] ?? (_a[lowerCaseAccount] = {})))[chainId] ?? (_b[chainId] = {}))[tokenAddress] = newBalance;
-                     }
-                 }
-             });
 diff --git a/dist/token-prices-service/codefi-v2.cjs b/dist/token-prices-service/codefi-v2.cjs
 index ba0f0c1bcbf0f231549b1ca9d3be2d1137a0d732..fd4851471fa0c2f07efbb527a3eea55cbfbc4743 100644
 --- a/dist/token-prices-service/codefi-v2.cjs
 +++ b/dist/token-prices-service/codefi-v2.cjs
-@@ -100,6 +100,8 @@ exports.SUPPORTED_CURRENCIES = [
-     'mxn',
-     // Malaysian Ringgit
-     'myr',
-+    // Monad
-+    'mon',
-     // Nigerian Naira
-     'ngn',
-     // Norwegian Krone
 @@ -220,43 +222,43 @@ exports.getNativeTokenAddress = getNativeTokenAddress;
  // Source: https://github.com/consensys-vertical-apps/va-mmcx-price-api/blob/main/src/constants/slip44.ts
  // We can only support PricesAPI V3 for EVM chains that have a CAIP-19 native asset mapping.

app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`BottomSheetHeader renders snapshot correctly with Compact variant 1`] =
   style={
     [
       {
-        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "gap": 16,
         "padding": 16,
@@ -48,7 +47,6 @@ exports[`BottomSheetHeader renders snapshot correctly with Display variant 1`] =
   style={
     [
       {
-        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "gap": 16,
         "padding": 16,
@@ -91,7 +89,6 @@ exports[`BottomSheetHeader should render snapshot correctly 1`] = `
   style={
     [
       {
-        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "gap": 16,
         "padding": 16,

app/component-library/components/HeaderBase/HeaderBase.styles.ts

@@ -22,7 +22,7 @@ const styleSheet = (params: {
   theme: Theme;
   vars: HeaderBaseStyleSheetVars;
 }) => {
-  const { vars, theme } = params;
+  const { vars } = params;
   const { style, startAccessorySize, endAccessorySize, variant } = vars;
 
   const isLeftAligned = variant === HeaderBaseVariant.Display;
@@ -36,7 +36,6 @@ const styleSheet = (params: {
   return StyleSheet.create({
     base: Object.assign(
       {
-        backgroundColor: theme.colors.background.default,
         flexDirection: 'row',
         gap: 16,
       } as ViewStyle,

app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap

@@ -5,7 +5,6 @@ exports[`HeaderBase should render snapshot correctly with Compact variant 1`] =
   style={
     [
       {
-        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "gap": 16,
       },
@@ -47,7 +46,6 @@ exports[`HeaderBase variant functionality renders snapshot correctly with Compac
   style={
     [
       {
-        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "gap": 16,
       },
@@ -89,7 +87,6 @@ exports[`HeaderBase variant functionality renders snapshot correctly with Displa
   style={
     [
       {
-        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "gap": 16,
       },

app/component-library/components/Skeleton/Skeleton.stories.tsx

@@ -56,28 +56,6 @@ export const WidthHeight = () => {
   );
 };
 
-export const WithChildren = () => {
-  const styles = StyleSheet.create({
-    container: {
-      display: 'flex',
-      flexDirection: 'column',
-      borderRadius: 12,
-      padding: 16,
-    },
-    skeleton: {
-      marginBottom: 8,
-    },
-  });
-
-  return (
-    <SkeletonComponent style={styles.container}>
-      <SkeletonComponent height={32} width="100%" style={styles.skeleton} />
-      <SkeletonComponent height={16} width="95%" style={styles.skeleton} />
-      <SkeletonComponent height={16} width="95%" />
-    </SkeletonComponent>
-  );
-};
-
 export const HideChildren = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   const styles = StyleSheet.create({

app/component-library/components/Skeleton/Skeleton.test.tsx

@@ -57,22 +57,6 @@ describe('Skeleton', () => {
     expect(skeletonElement.props.style.width).toBe('100%');
   });
 
-  it('should render with children', () => {
-    const childTestId = 'child-component';
-    const childrenWrapperId = 'children-wrapper';
-
-    const { getByTestId } = render(
-      <Skeleton childrenWrapperProps={{ testID: childrenWrapperId }}>
-        <View testID={childTestId} />
-      </Skeleton>,
-    );
-
-    const childElement = getByTestId(childTestId);
-    const childrenWrapper = getByTestId(childrenWrapperId);
-    expect(childElement).toBeDefined();
-    expect(childrenWrapper).toBeDefined();
-  });
-
   it('should hide children when hideChildren is true', () => {
     const childTestId = 'child-component';
     const childrenWrapperId = 'children-wrapper';
@@ -92,16 +76,14 @@ describe('Skeleton', () => {
 
   it('should display children normally when hideChildren is false', () => {
     const childTestId = 'child-component';
-    const childrenWrapperId = 'children-wrapper';
 
     const { getByTestId } = render(
-      <Skeleton childrenWrapperProps={{ testID: childrenWrapperId }}>
+      <Skeleton>
         <View testID={childTestId} />
       </Skeleton>,
     );
 
-    const childrenWrapper = getByTestId(childrenWrapperId);
-    expect(childrenWrapper.props.style[1]).toBe(undefined);
+    expect(getByTestId(childTestId)).toBeDefined();
   });
 
   it('should animate when no children are present', () => {

app/component-library/components/Skeleton/Skeleton.tsx

@@ -63,26 +63,32 @@ const Skeleton: React.FC<SkeletonProps> = ({
   }, [children, hideChildren]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <View style={styles.base} {...props}>
-      {/* Animated background always present */}
-      <Animated.View
-        style={[styles.background, { opacity: opacityAnim }]}
-        pointerEvents="none"
-        {...animatedViewProps}
-      />
+    <>
+      {!hideChildren && children ? (
+        children
+      ) : (
+        <View style={styles.base} {...props}>
+          {/* Animated background always present */}
+          <Animated.View
+            style={[styles.background, { opacity: opacityAnim }]}
+            pointerEvents="none"
+            {...animatedViewProps}
+          />
 
-      {children && (
-        <View
-          style={[
-            styles.childrenContainer,
-            hideChildren ? styles.hideChildren : undefined,
-          ]}
-          {...childrenWrapperProps}
-        >
-          {children}
+          {children && (
+            <View
+              style={[
+                styles.childrenContainer,
+                hideChildren ? styles.hideChildren : undefined,
+              ]}
+              {...childrenWrapperProps}
+            >
+              {children}
+            </View>
+          )}
         </View>
       )}
-    </View>
+    </>
   );
 };
 

app/components/Base/TokenIcon/index.test.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import TokenIcon from '.';
+
+// Mock RemoteImage component
+jest.mock('../RemoteImage', () => ({
+  __esModule: true,
+  default: ({ testID }: { testID?: string }) => {
+    const { View } = jest.requireActual('react-native');
+    return <View testID={testID || 'remote-image'} />;
+  },
+}));
+
+// Mock useTheme hook
+jest.mock('../../../util/theme', () => ({
+  useTheme: jest.fn(() => ({
+    colors: {
+      background: {
+        default: '#FFFFFF',
+        alternative: '#F2F4F6',
+      },
+      text: {
+        default: '#24292E',
+      },
+    },
+  })),
+}));
+
+// Mock image imports
+jest.mock('../../../images/image-icons', () => ({
+  SOLANA: { uri: 'solana.png' },
+  MATIC: { uri: 'matic.png' },
+}));
+
+jest.mock('../../../images/eth-logo-new.png', () => ({
+  uri: 'eth-logo.png',
+}));
+
+describe('TokenIcon', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders RemoteImage for ETH symbol', () => {
+      const { getByTestId } = render(
+        <TokenIcon symbol="ETH" testID="token-icon" />,
+      );
+
+      expect(getByTestId('token-icon')).toBeOnTheScreen();
+    });
+
+    it('renders RemoteImage for SOL symbol', () => {
+      const { getByTestId } = render(
+        <TokenIcon symbol="SOL" testID="token-icon" />,
+      );
+
+      expect(getByTestId('token-icon')).toBeOnTheScreen();
+    });
+
+    it('renders RemoteImage when icon URL is provided', () => {
+      const { getByTestId } = render(
+        <TokenIcon
+          symbol="DAI"
+          icon="https://example.com/dai.png"
+          testID="token-icon"
+        />,
+      );
+
+      expect(getByTestId('token-icon')).toBeOnTheScreen();
+    });
+
+    it('renders first letter of symbol when no image source available', () => {
+      const { getByText } = render(<TokenIcon symbol="DAI" />);
+
+      expect(getByText('D')).toBeOnTheScreen();
+    });
+
+    it('renders empty icon when no symbol provided', () => {
+      const { queryByText } = render(<TokenIcon />);
+
+      expect(queryByText(/[A-Z]/)).toBeNull();
+    });
+  });
+
+  describe('Size Variants', () => {
+    it('renders with medium size', () => {
+      const { getByTestId } = render(
+        <TokenIcon symbol="ETH" medium testID="token-icon" />,
+      );
+
+      expect(getByTestId('token-icon')).toBeOnTheScreen();
+    });
+
+    it('renders with big size', () => {
+      const { getByTestId } = render(
+        <TokenIcon symbol="ETH" big testID="token-icon" />,
+      );
+
+      expect(getByTestId('token-icon')).toBeOnTheScreen();
+    });
+
+    it('renders with biggest size', () => {
+      const { getByTestId } = render(
+        <TokenIcon symbol="ETH" biggest testID="token-icon" />,
+      );
+
+      expect(getByTestId('token-icon')).toBeOnTheScreen();
+    });
+  });
+
+  describe('Symbol Display', () => {
+    it('displays uppercase first letter of symbol', () => {
+      const { getByText } = render(<TokenIcon symbol="dai" />);
+
+      expect(getByText('D')).toBeOnTheScreen();
+    });
+
+    it('displays single character symbol as uppercase', () => {
+      const { getByText } = render(<TokenIcon symbol="X" />);
+
+      expect(getByText('X')).toBeOnTheScreen();
+    });
+  });
+});