diff --git a/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch b/.yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch
similarity index 70%
rename from .yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch
rename to .yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch
index f27d4cd8d2e..82d2534242c 100644
--- a/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch
+++ b/.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.
diff --git a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap b/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap
index 2f27985b13f..73e744408c7 100644
--- a/app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap
+++ b/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,
diff --git a/app/component-library/components/HeaderBase/HeaderBase.styles.ts b/app/component-library/components/HeaderBase/HeaderBase.styles.ts
index 1d7f2fbe3ed..20a8bb16880 100644
--- a/app/component-library/components/HeaderBase/HeaderBase.styles.ts
+++ b/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,
diff --git a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap b/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap
index 841396b0b38..d9418a88637 100644
--- a/app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap
+++ b/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,
},
diff --git a/app/component-library/components/Skeleton/Skeleton.stories.tsx b/app/component-library/components/Skeleton/Skeleton.stories.tsx
index 5e7c7e08c9e..ac8aaba2275 100644
--- a/app/component-library/components/Skeleton/Skeleton.stories.tsx
+++ b/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 (
-
-
-
-
-
- );
-};
-
export const HideChildren = () => {
const [isLoaded, setIsLoaded] = useState(false);
const styles = StyleSheet.create({
diff --git a/app/component-library/components/Skeleton/Skeleton.test.tsx b/app/component-library/components/Skeleton/Skeleton.test.tsx
index e47189ed5da..0d3ea519e39 100644
--- a/app/component-library/components/Skeleton/Skeleton.test.tsx
+++ b/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(
-
-
- ,
- );
-
- 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(
-
+
,
);
- const childrenWrapper = getByTestId(childrenWrapperId);
- expect(childrenWrapper.props.style[1]).toBe(undefined);
+ expect(getByTestId(childTestId)).toBeDefined();
});
it('should animate when no children are present', () => {
diff --git a/app/component-library/components/Skeleton/Skeleton.tsx b/app/component-library/components/Skeleton/Skeleton.tsx
index 865207b483e..4c7121a06e6 100644
--- a/app/component-library/components/Skeleton/Skeleton.tsx
+++ b/app/component-library/components/Skeleton/Skeleton.tsx
@@ -63,26 +63,32 @@ const Skeleton: React.FC = ({
}, [children, hideChildren]); // eslint-disable-line react-hooks/exhaustive-deps
return (
-
- {/* Animated background always present */}
-
+ <>
+ {!hideChildren && children ? (
+ children
+ ) : (
+
+ {/* Animated background always present */}
+
- {children && (
-
- {children}
+ {children && (
+
+ {children}
+
+ )}
)}
-
+ >
);
};
diff --git a/app/components/Base/TokenIcon/index.test.tsx b/app/components/Base/TokenIcon/index.test.tsx
new file mode 100644
index 00000000000..a7bfb25eb76
--- /dev/null
+++ b/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 ;
+ },
+}));
+
+// 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(
+ ,
+ );
+
+ expect(getByTestId('token-icon')).toBeOnTheScreen();
+ });
+
+ it('renders RemoteImage for SOL symbol', () => {
+ const { getByTestId } = render(
+ ,
+ );
+
+ expect(getByTestId('token-icon')).toBeOnTheScreen();
+ });
+
+ it('renders RemoteImage when icon URL is provided', () => {
+ const { getByTestId } = render(
+ ,
+ );
+
+ expect(getByTestId('token-icon')).toBeOnTheScreen();
+ });
+
+ it('renders first letter of symbol when no image source available', () => {
+ const { getByText } = render();
+
+ expect(getByText('D')).toBeOnTheScreen();
+ });
+
+ it('renders empty icon when no symbol provided', () => {
+ const { queryByText } = render();
+
+ expect(queryByText(/[A-Z]/)).toBeNull();
+ });
+ });
+
+ describe('Size Variants', () => {
+ it('renders with medium size', () => {
+ const { getByTestId } = render(
+ ,
+ );
+
+ expect(getByTestId('token-icon')).toBeOnTheScreen();
+ });
+
+ it('renders with big size', () => {
+ const { getByTestId } = render(
+ ,
+ );
+
+ expect(getByTestId('token-icon')).toBeOnTheScreen();
+ });
+
+ it('renders with biggest size', () => {
+ const { getByTestId } = render(
+ ,
+ );
+
+ expect(getByTestId('token-icon')).toBeOnTheScreen();
+ });
+ });
+
+ describe('Symbol Display', () => {
+ it('displays uppercase first letter of symbol', () => {
+ const { getByText } = render();
+
+ expect(getByText('D')).toBeOnTheScreen();
+ });
+
+ it('displays single character symbol as uppercase', () => {
+ const { getByText } = render();
+
+ expect(getByText('X')).toBeOnTheScreen();
+ });
+ });
+});
diff --git a/app/components/UI/Swaps/components/TokenIcon.js b/app/components/Base/TokenIcon/index.tsx
similarity index 73%
rename from app/components/UI/Swaps/components/TokenIcon.js
rename to app/components/Base/TokenIcon/index.tsx
index f3db8260c5a..fa09882130a 100644
--- a/app/components/UI/Swaps/components/TokenIcon.js
+++ b/app/components/Base/TokenIcon/index.tsx
@@ -1,15 +1,19 @@
-import React, { useCallback, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useState } from 'react';
import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
-
-import RemoteImage from '../../../Base/RemoteImage';
-import Text from '../../../Base/Text';
-import { useTheme } from '../../../../util/theme';
-import imageIcons from '../../../../images/image-icons';
-
-/* eslint-disable import/no-commonjs */
-const ethLogo = require('../../../../images/eth-logo-new.png');
-/* eslint-enable import/no-commonjs */
+import {
+ ImageSourcePropType,
+ StyleSheet,
+ TextStyle,
+ View,
+ ViewStyle,
+} from 'react-native';
+
+import RemoteImage from '../RemoteImage';
+import Text from '../Text';
+import { useTheme } from '../../../util/theme';
+import imageIcons from '../../../images/image-icons';
+import ethLogo from '../../../images/eth-logo-new.png';
+import { ThemeColors } from '@metamask/design-tokens';
const REGULAR_SIZE = 24;
const REGULAR_RADIUS = 12;
@@ -20,7 +24,7 @@ const BIG_RADIUS = 25;
const BIGGEST_SIZE = 70;
const BIGGEST_RADIUS = 35;
-const createStyles = (colors) =>
+const createStyles = (colors: ThemeColors) =>
StyleSheet.create({
icon: {
width: REGULAR_SIZE,
@@ -61,9 +65,23 @@ const createStyles = (colors) =>
fontSize: 26,
color: colors.text.default,
},
+ tokenSymbolBiggest: {},
});
-const EmptyIcon = ({ medium, big, biggest, style, ...props }) => {
+interface EmptyIconProps {
+ medium?: boolean;
+ big?: boolean;
+ biggest?: boolean;
+ style?: ViewStyle;
+}
+
+const EmptyIcon = ({
+ medium,
+ big,
+ biggest,
+ style,
+ ...props
+}: PropsWithChildren) => {
const { colors } = useTheme();
const styles = createStyles(colors);
@@ -90,6 +108,13 @@ EmptyIcon.propTypes = {
testID: PropTypes.string,
};
+interface TokenIconProps extends EmptyIconProps {
+ symbol?: string;
+ icon?: string;
+ emptyIconTextStyle?: TextStyle;
+ testID?: string;
+}
+
function TokenIcon({
symbol,
icon,
@@ -99,7 +124,7 @@ function TokenIcon({
style,
emptyIconTextStyle,
testID,
-}) {
+}: TokenIconProps) {
const [showFallback, setShowFallback] = useState(false);
const { colors } = useTheme();
const styles = createStyles(colors);
@@ -113,16 +138,21 @@ function TokenIcon({
return imageIcons.SOLANA;
}
- if (Object.keys(imageIcons).includes(symbol)) {
- return imageIcons[symbol];
+ if (symbol && Object.keys(imageIcons).includes(symbol)) {
+ const imageIcon = imageIcons[symbol as keyof typeof imageIcons];
+ // Skip SVG components (functions) and strings, only return valid image sources
+ if (typeof imageIcon !== 'function' && typeof imageIcon !== 'string') {
+ return imageIcon as ImageSourcePropType;
+ }
}
if (icon) {
return { uri: icon };
}
- return null;
+ return undefined;
}, [symbol, icon]);
+
const source = getSource();
if (source && !showFallback) {
diff --git a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap
index 945dbe158f6..853cdf5724e 100644
--- a/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap
+++ b/app/components/Snaps/SnapUIRenderer/components/__snapshots__/form.test.ts.snap
@@ -938,7 +938,6 @@ exports[`SnapUIForm will render with fields 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1669,7 +1668,6 @@ exports[`SnapUIForm will render with fields 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Assets/components/Balance/AccountGroupBalance.styles.ts b/app/components/UI/Assets/components/Balance/AccountGroupBalance.styles.ts
index 9cb81b12d30..82831ccc7a3 100644
--- a/app/components/UI/Assets/components/Balance/AccountGroupBalance.styles.ts
+++ b/app/components/UI/Assets/components/Balance/AccountGroupBalance.styles.ts
@@ -5,12 +5,9 @@ const createStyles = () =>
marginHorizontal: 16,
},
balanceContainer: {
- flexDirection: 'row',
- alignItems: 'center',
- },
- skeletonContainer: {
flexDirection: 'column',
gap: 4,
+ alignItems: 'flex-start',
},
});
diff --git a/app/components/UI/Assets/components/Balance/AccountGroupBalance.test.tsx b/app/components/UI/Assets/components/Balance/AccountGroupBalance.test.tsx
index 0a298ab25f6..a71f47467af 100644
--- a/app/components/UI/Assets/components/Balance/AccountGroupBalance.test.tsx
+++ b/app/components/UI/Assets/components/Balance/AccountGroupBalance.test.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { act } from '@testing-library/react-native';
import AccountGroupBalance from './AccountGroupBalance';
import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
import renderWithProvider from '../../../../../util/test/renderWithProvider';
@@ -56,15 +57,41 @@ const testState = {
};
describe('AccountGroupBalance', () => {
- it('renders loader when balance is not ready', () => {
- const { queryByTestId } = renderWithProvider(, {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ // Reset mock implementations to default (null) before each test
+ const {
+ selectBalanceBySelectedAccountGroup,
+ selectAccountGroupBalanceForEmptyState,
+ selectBalanceChangeBySelectedAccountGroup,
+ } = jest.requireMock('../../../../../selectors/assets/balances');
+ (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+ () => null,
+ );
+ (selectAccountGroupBalanceForEmptyState as jest.Mock).mockImplementation(
+ () => null,
+ );
+ (selectBalanceChangeBySelectedAccountGroup as jest.Mock).mockImplementation(
+ () => () => null,
+ );
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.runOnlyPendingTimers();
+ jest.useRealTimers();
+ });
+
+ it('renders without crashing when balance is not ready', () => {
+ const { getByTestId } = renderWithProvider(, {
state: testState,
});
- expect(queryByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeNull();
+ // Component should render the balance container even when loading
+ expect(getByTestId('balance-container')).toBeOnTheScreen();
});
- it('renders formatted balance when selector returns data', () => {
+ it('renders formatted balance when selector returns data and timeout expires', () => {
const { selectBalanceBySelectedAccountGroup } = jest.requireMock(
'../../../../../selectors/assets/balances',
);
@@ -81,20 +108,27 @@ describe('AccountGroupBalance', () => {
state: testState,
});
+ // After timeout expires (3 seconds), balance should display
+ act(() => {
+ jest.advanceTimersByTime(3000);
+ });
+
const el = getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT);
- expect(el).toBeTruthy();
+ expect(el).toBeOnTheScreen();
});
- it('renders empty state when account group balance is zero', () => {
+ it('renders empty state when account group balance is zero after timeout', () => {
const {
selectAccountGroupBalanceForEmptyState,
selectBalanceBySelectedAccountGroup,
} = jest.requireMock('../../../../../selectors/assets/balances');
- // Mock the regular balance selector to return data (prevents skeleton loader)
+ // Mock the regular balance selector to return zero balance data
(selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
() => ({
- totalBalanceInUserCurrency: 100, // Some non-zero amount for current network
+ walletId: 'wallet-1',
+ groupId: 'wallet-1/group-1',
+ totalBalanceInUserCurrency: 0, // Zero on current network
userCurrency: 'usd',
}),
);
@@ -107,8 +141,21 @@ describe('AccountGroupBalance', () => {
}),
);
- const { getByTestId } = renderWithProvider(, {
- state: testState,
+ const { getByTestId, queryByTestId } = renderWithProvider(
+ ,
+ {
+ state: testState,
+ },
+ );
+
+ // Initially shows loader because hasBalanceFetched is false
+ expect(
+ queryByTestId(WalletViewSelectorsIDs.BALANCE_EMPTY_STATE_CONTAINER),
+ ).toBeNull();
+
+ // After timeout expires (3 seconds), empty state should display
+ act(() => {
+ jest.advanceTimersByTime(3000);
});
const el = getByTestId(
@@ -116,4 +163,120 @@ describe('AccountGroupBalance', () => {
);
expect(el).toBeOnTheScreen();
});
+
+ it('renders balance immediately when balance changes from 0 to non-zero before timeout', () => {
+ const {
+ selectBalanceBySelectedAccountGroup,
+ selectAccountGroupBalanceForEmptyState,
+ } = jest.requireMock('../../../../../selectors/assets/balances');
+
+ // Start with zero balance
+ (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+ () => ({
+ walletId: 'wallet-1',
+ groupId: 'wallet-1/group-1',
+ totalBalanceInUserCurrency: 0,
+ userCurrency: 'usd',
+ }),
+ );
+
+ (selectAccountGroupBalanceForEmptyState as jest.Mock).mockImplementation(
+ () => ({
+ totalBalanceInUserCurrency: 0,
+ userCurrency: 'usd',
+ }),
+ );
+
+ const { getByTestId, rerender } = renderWithProvider(
+ ,
+ {
+ state: testState,
+ },
+ );
+
+ // Update mocks to return non-zero balance (simulating balance fetch completing)
+ (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+ () => ({
+ walletId: 'wallet-1',
+ groupId: 'wallet-1/group-1',
+ totalBalanceInUserCurrency: 123.45,
+ userCurrency: 'usd',
+ }),
+ );
+
+ (selectAccountGroupBalanceForEmptyState as jest.Mock).mockImplementation(
+ () => ({
+ totalBalanceInUserCurrency: 123.45,
+ userCurrency: 'usd',
+ }),
+ );
+
+ // Trigger re-render with new balance
+ rerender();
+
+ // Balance should display immediately without waiting for timeout
+ const el = getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT);
+ expect(el).toBeOnTheScreen();
+ });
+
+ it('renders balance after updating when initially zero', () => {
+ const {
+ selectBalanceBySelectedAccountGroup,
+ selectAccountGroupBalanceForEmptyState,
+ } = jest.requireMock('../../../../../selectors/assets/balances');
+
+ // Start with zero balance (simulates account with no funds or just switched)
+ (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+ () => ({
+ walletId: 'wallet-1',
+ groupId: 'wallet-1/group-1',
+ totalBalanceInUserCurrency: 0,
+ userCurrency: 'usd',
+ }),
+ );
+
+ (selectAccountGroupBalanceForEmptyState as jest.Mock).mockImplementation(
+ () => ({
+ totalBalanceInUserCurrency: 0,
+ userCurrency: 'usd',
+ }),
+ );
+
+ const { getByTestId, rerender } = renderWithProvider(
+ ,
+ {
+ state: testState,
+ },
+ );
+
+ // Advance time less than timeout
+ act(() => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ // Update mocks to show balance has loaded with funds
+ (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+ () => ({
+ walletId: 'wallet-1',
+ groupId: 'wallet-1/group-1',
+ totalBalanceInUserCurrency: 150,
+ userCurrency: 'usd',
+ }),
+ );
+
+ (selectAccountGroupBalanceForEmptyState as jest.Mock).mockImplementation(
+ () => ({
+ totalBalanceInUserCurrency: 150,
+ userCurrency: 'usd',
+ }),
+ );
+
+ // Trigger re-render
+ rerender();
+
+ // Should show balance immediately after update (hasChanged condition)
+ expect(
+ getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT),
+ ).toBeOnTheScreen();
+ });
});
diff --git a/app/components/UI/Assets/components/Balance/AccountGroupBalance.tsx b/app/components/UI/Assets/components/Balance/AccountGroupBalance.tsx
index 2780a44a137..7eae142d5a3 100644
--- a/app/components/UI/Assets/components/Balance/AccountGroupBalance.tsx
+++ b/app/components/UI/Assets/components/Balance/AccountGroupBalance.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useRef, useEffect } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { useSelector } from 'react-redux';
import Engine from '../../../../../core/Engine';
@@ -22,6 +22,13 @@ import { useFormatters } from '../../../../hooks/useFormatters';
import AccountGroupBalanceChange from '../../components/BalanceChange/AccountGroupBalanceChange';
import BalanceEmptyState from '../../../BalanceEmptyState';
+/**
+ * Timeout for account group balance fetch
+ * This is to prevent a flash of empty state when the balance is not yet fetched
+ * !TODO: This is a temporary fix for an artificial loading state and should be refactored after Account API v4 integration
+ */
+const ACCOUNT_GROUP_BALANCE_FETCH_TIMEOUT = 3000;
+
const AccountGroupBalance = () => {
const { PreferencesController } = Engine.context;
const styles = createStyles();
@@ -39,6 +46,71 @@ const AccountGroupBalance = () => {
);
const selectedChainId = useSelector(selectEvmChainId);
+ // Track if balance has been fetched to prevent flash of empty state
+ const [hasBalanceFetched, setHasBalanceFetched] = useState(false);
+ const initialBalanceRef = useRef(null);
+ const timeoutRef = useRef();
+ const currentGroupIdRef = useRef(null);
+
+ useEffect(() => {
+ const groupId = groupBalance?.groupId ?? null;
+
+ // Check if groupId has changed (account switch)
+ if (currentGroupIdRef.current !== groupId) {
+ // Reset all tracking state for new account
+ setHasBalanceFetched(false);
+ initialBalanceRef.current = null;
+ currentGroupIdRef.current = groupId;
+
+ // Clear existing timeout
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+
+ // Start new timeout for this account (3 seconds)
+ timeoutRef.current = setTimeout(() => {
+ setHasBalanceFetched(true);
+ }, ACCOUNT_GROUP_BALANCE_FETCH_TIMEOUT);
+ }
+
+ // Store initial balance when it first appears
+ if (initialBalanceRef.current === null && groupBalance) {
+ initialBalanceRef.current = groupBalance.totalBalanceInUserCurrency;
+ }
+
+ // Track balance changes - if EITHER balance updates from initial value, mark as fetched
+ // We track both groupBalance AND accountGroupBalance since empty state uses accountGroupBalance
+ if (groupBalance && initialBalanceRef.current !== null) {
+ const currentBalance = groupBalance.totalBalanceInUserCurrency;
+ const accountGroupCurrentBalance =
+ accountGroupBalance?.totalBalanceInUserCurrency ?? null;
+
+ // Mark as fetched if either balance has changed from initial 0, or if both exist and are non-zero
+ const hasChanged = currentBalance !== initialBalanceRef.current;
+ const bothExistAndNonZero =
+ currentBalance > 0 &&
+ accountGroupCurrentBalance !== null &&
+ accountGroupCurrentBalance > 0;
+
+ if (hasChanged || bothExistAndNonZero) {
+ setHasBalanceFetched(true);
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ }
+ }
+ }, [groupBalance, accountGroupBalance]);
+
+ // Cleanup timeout on unmount
+ useEffect(
+ () => () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ },
+ [],
+ );
+
const togglePrivacy = useCallback(
(value: boolean) => {
PreferencesController.setPrivacyMode(value);
@@ -63,32 +135,34 @@ const AccountGroupBalance = () => {
isHomepageRedesignV1Enabled &&
!isCurrentNetworkTestnet;
+ // Show skeleton while loading: either no groupBalance OR balance not fetched yet
+ // We rely on balance change tracking + timeout instead of isBalanceDataReady
+ // because controllers have persisted state that makes them appear "ready" even with stale data
+ const isLoading = !groupBalance || !hasBalanceFetched;
+
return (
-
- {!groupBalance ? (
-
-
-
-
- ) : shouldShowEmptyState ? (
-
- ) : (
- togglePrivacy(!privacyMode)}
- testID="balance-container"
- >
-
-
- {displayBalance}
-
-
- {balanceChange1d && (
+ {!isLoading && shouldShowEmptyState ? (
+
+ ) : (
+ togglePrivacy(!privacyMode)}
+ testID="balance-container"
+ style={styles.balanceContainer}
+ >
+
+
+ {displayBalance}
+
+
+
+ {balanceChange1d && (
+
{
percentChange={balanceChange1d.percentChange}
userCurrency={balanceChange1d.userCurrency}
/>
- )}
-
- )}
-
+
+ )}
+
+ )}
);
};
diff --git a/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap
index 3009db56cb9..5b6873b749f 100644
--- a/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap
+++ b/app/components/UI/Bridge/components/BridgeDestNetworkSelector/__snapshots__/BridgeDestNetworkSelector.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`BridgeDestNetworkSelector renders with initial state and displays netwo
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap
index 9b6c87cf2cb..642a448224a 100644
--- a/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap
+++ b/app/components/UI/Bridge/components/BridgeDestTokenSelector/__snapshots__/BridgeDestTokenSelector.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`BridgeDestTokenSelector renders with initial state and displays tokens
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap
index 3f3294f695f..aca4fccf242 100644
--- a/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap
+++ b/app/components/UI/Bridge/components/BridgeSourceNetworkSelector/__snapshots__/BridgeSourceNetworkSelector.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`BridgeSourceNetworkSelector renders with initial state and displays net
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap b/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap
index 385a6d4ad64..ed92091f927 100644
--- a/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap
+++ b/app/components/UI/Bridge/components/BridgeSourceTokenSelector/__snapshots__/BridgeSourceTokenSelector.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`BridgeSourceTokenSelector renders with initial state and displays token
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap b/app/components/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap
index 39421b22114..01f84174ddf 100644
--- a/app/components/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap
+++ b/app/components/UI/Bridge/components/QuoteExpiredModal/__snapshots__/QuoteExpiredModal.test.tsx.snap
@@ -133,7 +133,6 @@ exports[`QuoteExpiredModal renders correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap b/app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap
index 9e6c79dac2a..a9e28eb27ea 100644
--- a/app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap
+++ b/app/components/UI/Bridge/components/SlippageModal/__snapshots__/SlippageModal.test.tsx.snap
@@ -133,7 +133,6 @@ exports[`SlippageModal renders all UI elements with the proper slippage options
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Bridge/components/TokenButton.tsx b/app/components/UI/Bridge/components/TokenButton.tsx
index 142baf0802e..d677d6fb189 100644
--- a/app/components/UI/Bridge/components/TokenButton.tsx
+++ b/app/components/UI/Bridge/components/TokenButton.tsx
@@ -17,7 +17,7 @@ import BadgeWrapper, {
import Badge, {
BadgeVariant,
} from '../../../../component-library/components/Badges/Badge';
-import TokenIcon from '../../Swaps/components/TokenIcon';
+import TokenIcon from '../../../Base/TokenIcon';
interface TokenProps {
symbol?: string;
diff --git a/app/components/UI/Bridge/components/TokenInsightsSheet/TokenInsightsSheet.tsx b/app/components/UI/Bridge/components/TokenInsightsSheet/TokenInsightsSheet.tsx
index 3c14992005e..a025b4659a7 100644
--- a/app/components/UI/Bridge/components/TokenInsightsSheet/TokenInsightsSheet.tsx
+++ b/app/components/UI/Bridge/components/TokenInsightsSheet/TokenInsightsSheet.tsx
@@ -28,7 +28,7 @@ import {
AlignItems as BoxAlignItems,
FlexDirection as BoxFlexDirection,
} from '../../../Box/box.types';
-import TokenIcon from '../../../Swaps/components/TokenIcon';
+import TokenIcon from '../../../../Base/TokenIcon';
import { BridgeToken } from '../../types';
import i18n, { strings } from '../../../../../../locales/i18n';
import ClipboardManager from '../../../../../core/ClipboardManager';
diff --git a/app/components/UI/Bridge/components/TokenSelectorItem.tsx b/app/components/UI/Bridge/components/TokenSelectorItem.tsx
index 17ccb0f26bc..dfa4b48c86a 100644
--- a/app/components/UI/Bridge/components/TokenSelectorItem.tsx
+++ b/app/components/UI/Bridge/components/TokenSelectorItem.tsx
@@ -18,7 +18,7 @@ import Text, {
TextVariant,
TextColor,
} from '../../../../component-library/components/Texts/Text';
-import TokenIcon from '../../Swaps/components/TokenIcon';
+import TokenIcon from '../../../Base/TokenIcon';
import { Box } from '../../Box/Box';
import { AlignItems, FlexDirection } from '../../Box/box.types';
import { useStyles } from '../../../../component-library/hooks';
diff --git a/app/components/UI/Bridge/components/TransactionDetails/TransactionAsset.tsx b/app/components/UI/Bridge/components/TransactionDetails/TransactionAsset.tsx
index 66514450793..bc164e4b4dc 100644
--- a/app/components/UI/Bridge/components/TransactionDetails/TransactionAsset.tsx
+++ b/app/components/UI/Bridge/components/TransactionDetails/TransactionAsset.tsx
@@ -24,7 +24,7 @@ import {
NETWORK_TO_SHORT_NETWORK_NAME_MAP,
} from '../../../../../constants/bridge';
import { StyleSheet } from 'react-native';
-import TokenIcon from '../../../Swaps/components/TokenIcon';
+import TokenIcon from '../../../../Base/TokenIcon';
import { BridgeToken } from '../../types';
import { TransactionType } from '@metamask/transaction-controller';
import { isNativeAddress } from '@metamask/bridge-controller';
diff --git a/app/components/UI/Card/components/AddFundsBottomSheet/__snapshots__/AddFundsBottomSheet.test.tsx.snap b/app/components/UI/Card/components/AddFundsBottomSheet/__snapshots__/AddFundsBottomSheet.test.tsx.snap
index d127d484cce..faca77e63e6 100644
--- a/app/components/UI/Card/components/AddFundsBottomSheet/__snapshots__/AddFundsBottomSheet.test.tsx.snap
+++ b/app/components/UI/Card/components/AddFundsBottomSheet/__snapshots__/AddFundsBottomSheet.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`AddFundsBottomSheet renders with both options enabled and matches snaps
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1245,7 +1244,6 @@ exports[`AddFundsBottomSheet renders with no options when both are disabled and
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1840,7 +1838,6 @@ exports[`AddFundsBottomSheet renders with only deposit option when swaps are not
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2543,7 +2540,6 @@ exports[`AddFundsBottomSheet renders with only swap option when deposit is disab
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Earn/LendingLearnMoreModal/__snapshots__/LendingLearnMoreModal.test.tsx.snap b/app/components/UI/Earn/LendingLearnMoreModal/__snapshots__/LendingLearnMoreModal.test.tsx.snap
index c2ee572468b..a4e1fc44d46 100644
--- a/app/components/UI/Earn/LendingLearnMoreModal/__snapshots__/LendingLearnMoreModal.test.tsx.snap
+++ b/app/components/UI/Earn/LendingLearnMoreModal/__snapshots__/LendingLearnMoreModal.test.tsx.snap
@@ -113,7 +113,6 @@ exports[`LendingLearnMoreModal render lending history apy chart 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Earn/components/EarnTokenList/__snapshots__/EarnTokenList.test.tsx.snap b/app/components/UI/Earn/components/EarnTokenList/__snapshots__/EarnTokenList.test.tsx.snap
index 7604ee8dfb8..d02ebbb0ff3 100644
--- a/app/components/UI/Earn/components/EarnTokenList/__snapshots__/EarnTokenList.test.tsx.snap
+++ b/app/components/UI/Earn/components/EarnTokenList/__snapshots__/EarnTokenList.test.tsx.snap
@@ -133,7 +133,6 @@ exports[`EarnTokenList render matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Earn/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap b/app/components/UI/Earn/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap
index ce9a4430691..86de205d395 100644
--- a/app/components/UI/Earn/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap
+++ b/app/components/UI/Earn/components/MaxInputModal/__snapshots__/MaxInputModal.test.tsx.snap
@@ -440,7 +440,6 @@ exports[`MaxInputModal render matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Earn/modals/LendingMaxWithdrawalModal/__snapshots__/LendingMaxWithdrawalModal.test.tsx.snap b/app/components/UI/Earn/modals/LendingMaxWithdrawalModal/__snapshots__/LendingMaxWithdrawalModal.test.tsx.snap
index 49410902501..1644582afe1 100644
--- a/app/components/UI/Earn/modals/LendingMaxWithdrawalModal/__snapshots__/LendingMaxWithdrawalModal.test.tsx.snap
+++ b/app/components/UI/Earn/modals/LendingMaxWithdrawalModal/__snapshots__/LendingMaxWithdrawalModal.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`LendingMaxWithdrawalModal should render correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/NetworkAssetLogo/index.test.tsx b/app/components/UI/NetworkAssetLogo/index.test.tsx
index d283daa77d1..45e403493bc 100644
--- a/app/components/UI/NetworkAssetLogo/index.test.tsx
+++ b/app/components/UI/NetworkAssetLogo/index.test.tsx
@@ -1,11 +1,11 @@
import React from 'react';
import { render } from '@testing-library/react-native';
import NetworkAssetLogo from '.';
-import TokenIcon from '../Swaps/components/TokenIcon';
+import TokenIcon from '../../Base/TokenIcon';
import { ChainId } from '@metamask/controller-utils';
// Mock the TokenIcon component
-jest.mock('../Swaps/components/TokenIcon', () => jest.fn(() => null));
+jest.mock('../../Base/TokenIcon', () => jest.fn(() => null));
describe('NetworkAssetLogo Component', () => {
it('matches the snapshot for non-mainnet', () => {
diff --git a/app/components/UI/NetworkAssetLogo/index.tsx b/app/components/UI/NetworkAssetLogo/index.tsx
index 6d8cd7614d0..f8896f1e585 100644
--- a/app/components/UI/NetworkAssetLogo/index.tsx
+++ b/app/components/UI/NetworkAssetLogo/index.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { ChainId } from '@metamask/controller-utils';
-import TokenIcon from '../Swaps/components/TokenIcon';
+import TokenIcon from '../../Base/TokenIcon';
interface NetworkAssetLogoProps {
big: boolean;
diff --git a/app/components/UI/NetworkMainAssetLogo/index.js b/app/components/UI/NetworkMainAssetLogo/index.js
index abfce750a73..5d066e06726 100644
--- a/app/components/UI/NetworkMainAssetLogo/index.js
+++ b/app/components/UI/NetworkMainAssetLogo/index.js
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { ChainId } from '@metamask/controller-utils';
import { connect } from 'react-redux';
-import TokenIcon from '../Swaps/components/TokenIcon';
+import TokenIcon from '../../Base/TokenIcon';
import {
selectChainId,
selectEvmTicker,
diff --git a/app/components/UI/NetworkMainAssetLogo/index.test.tsx b/app/components/UI/NetworkMainAssetLogo/index.test.tsx
index 84a625a7c16..4f848075f5e 100644
--- a/app/components/UI/NetworkMainAssetLogo/index.test.tsx
+++ b/app/components/UI/NetworkMainAssetLogo/index.test.tsx
@@ -7,8 +7,8 @@ import { render } from '@testing-library/react-native';
import NetworkMainAssetLogo from '.';
import { backgroundState } from '../../../util/test/initial-root-state';
-jest.mock('../Swaps/components/TokenIcon', () => {
- const originalModule = jest.requireActual('../Swaps/components/TokenIcon');
+jest.mock('../../Base/TokenIcon', () => {
+ const originalModule = jest.requireActual('../../Base/TokenIcon');
return {
...originalModule,
__esModule: true,
diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
index 13cbb844243..44a87ae5222 100644
--- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
@@ -150,7 +150,6 @@ exports[`NetworkDetails renders correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
index 5c0957a9768..964ca61dc8d 100644
--- a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
+++ b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
@@ -8,7 +8,6 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -539,7 +538,6 @@ exports[`NetworkVerificationInfo renders updated details when isNetworkRpcUpdate
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Perps/components/PerpsBottomSheetTooltip/__snapshots__/PerpsBottomSheetTooltip.test.tsx.snap b/app/components/UI/Perps/components/PerpsBottomSheetTooltip/__snapshots__/PerpsBottomSheetTooltip.test.tsx.snap
index 84bd5c4ad11..6e0482d4a24 100644
--- a/app/components/UI/Perps/components/PerpsBottomSheetTooltip/__snapshots__/PerpsBottomSheetTooltip.test.tsx.snap
+++ b/app/components/UI/Perps/components/PerpsBottomSheetTooltip/__snapshots__/PerpsBottomSheetTooltip.test.tsx.snap
@@ -134,7 +134,6 @@ exports[`PerpsBottomSheetTooltip renders correctly when visible 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.test.tsx b/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.test.tsx
index a43dc548353..8bf5b5096b9 100644
--- a/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.test.tsx
+++ b/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.test.tsx
@@ -20,7 +20,7 @@ jest.mock('../../../../../util/theme', () => ({
})),
}));
-jest.mock('../../../Swaps/components/TokenIcon', () => 'TokenIcon');
+jest.mock('../../../../Base/TokenIcon', () => 'TokenIcon');
jest.mock('../../../../../../locales/i18n', () => ({
strings: jest.fn((key) => {
diff --git a/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap
index 356b0cfd1aa..5ee2a6b0c01 100644
--- a/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/Views/Checkout/__snapshots__/Checkout.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`Checkout displays WebView when url is present and no errors 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -978,7 +977,6 @@ exports[`Checkout displays and tracks error if no url or errors 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1675,7 +1673,6 @@ exports[`Checkout displays sdkError when present 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2431,7 +2428,6 @@ exports[`Checkout displays sell WebView when url is present and no errors 1`] =
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2975,7 +2971,6 @@ exports[`Checkout handles get order error gracefully 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3731,7 +3726,6 @@ exports[`Checkout handles undefined order gracefully 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -4487,7 +4481,6 @@ exports[`Checkout ignores irrelevant error on http error in WebView for callback
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -5031,7 +5024,6 @@ exports[`Checkout sets and displays error on http error in WebView 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -5787,7 +5779,6 @@ exports[`Checkout sets and displays error on http error in WebView for callback
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -6543,7 +6534,6 @@ exports[`Checkout sets error when handling url navigation state change and selec
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/Views/Modals/Settings/__snapshots__/SettingsModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/Modals/Settings/__snapshots__/SettingsModal.test.tsx.snap
index d1d6a8eced3..362ef235ddd 100644
--- a/app/components/UI/Ramp/Aggregator/Views/Modals/Settings/__snapshots__/SettingsModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/Views/Modals/Settings/__snapshots__/SettingsModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`SettingsModal renders snapshot correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
index 1436c28f2f0..7bdddbc3751 100644
--- a/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/Views/Quotes/__snapshots__/Quotes.test.tsx.snap
@@ -1162,7 +1162,6 @@ exports[`Quotes custom action renders correctly after animation with the recomme
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3458,7 +3457,6 @@ exports[`Quotes renders correctly after animation with expanded quotes 2`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -5385,7 +5383,6 @@ exports[`Quotes renders correctly after animation with the recommended quote 1`]
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap
index 8fb31f4f033..c947ebb7b87 100644
--- a/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/components/FiatSelectorModal/__snapshots__/FiatSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`FiatSelectorModal renders the modal with currency list 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1372,7 +1371,6 @@ exports[`FiatSelectorModal search displays filtered currencies when search strin
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2311,7 +2309,6 @@ exports[`FiatSelectorModal search displays filtered currencies when search strin
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3250,7 +3247,6 @@ exports[`FiatSelectorModal search displays max 20 results 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/components/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap
index 54b73180e32..c3a0d3a3e45 100644
--- a/app/components/UI/Ramp/Aggregator/components/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/components/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`IncompatibleAccountTokenModal renders the modal with the correct title
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/components/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
index 839042c4230..a3ef707256c 100644
--- a/app/components/UI/Ramp/Aggregator/components/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/components/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`PaymentMethodSelectorModal renders correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1579,7 +1578,6 @@ exports[`PaymentMethodSelectorModal renders for sell flow 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2725,7 +2723,6 @@ exports[`PaymentMethodSelectorModal renders without disclaimer when selected pay
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap
index 13ba907771d..eba9d2fb081 100644
--- a/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`RegionSelectorModal clears search when clear button is pressed 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1296,7 +1295,6 @@ exports[`RegionSelectorModal clears search when clear button is pressed 2`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2497,7 +2495,6 @@ exports[`RegionSelectorModal filters regions based on search input 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3360,7 +3357,6 @@ exports[`RegionSelectorModal handles empty regions list gracefully 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -4091,7 +4087,6 @@ exports[`RegionSelectorModal handles undefined regions gracefully 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -4822,7 +4817,6 @@ exports[`RegionSelectorModal navigates back to country view when back button is
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -5675,7 +5669,6 @@ exports[`RegionSelectorModal navigates back to country view when back button is
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -6876,7 +6869,6 @@ exports[`RegionSelectorModal renders the modal with region list 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -8077,7 +8069,6 @@ exports[`RegionSelectorModal renders the modal with selected region in list 1`]
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -9306,7 +9297,6 @@ exports[`RegionSelectorModal renders the modal with selected state in list 1`] =
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -10535,7 +10525,6 @@ exports[`RegionSelectorModal shows empty state when search returns no results 1`
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap
index 036607a0a8e..3f4d764628a 100644
--- a/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/components/TokenSelectModal/__snapshots__/TokenSelectModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`TokenSelectModal renders the modal with token list 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Aggregator/components/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap b/app/components/UI/Ramp/Aggregator/components/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap
index e18a00a509e..74b577b2dbf 100644
--- a/app/components/UI/Ramp/Aggregator/components/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/components/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap
@@ -413,7 +413,6 @@ exports[`UnsupportedRegionModal renders correctly for buy flow 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1000,7 +999,6 @@ exports[`UnsupportedRegionModal renders correctly for sell flow 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/ConfigurationModal/__snapshots__/ConfigurationModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/ConfigurationModal/__snapshots__/ConfigurationModal.test.tsx.snap
index 5a0e3401743..6c35990355a 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/ConfigurationModal/__snapshots__/ConfigurationModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/ConfigurationModal/__snapshots__/ConfigurationModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`ConfigurationModal render matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/ErrorDetailsModal/__snapshots__/ErrorDetailsModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/ErrorDetailsModal/__snapshots__/ErrorDetailsModal.test.tsx.snap
index 092cce55fa8..a0b13bdfc62 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/ErrorDetailsModal/__snapshots__/ErrorDetailsModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/ErrorDetailsModal/__snapshots__/ErrorDetailsModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`ErrorDetailsModal renders correctly and matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap
index df9efd0a050..210f0923a60 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/IncompatibleAccountTokenModal/__snapshots__/IncompatibleAccountTokenModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`IncompatibleAccountTokenModal renders the modal with the correct title
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
index 8856ed57eaf..932b653a6db 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/PaymentMethodSelectorModal/__snapshots__/PaymentMethodSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`PaymentMethodSelectorModal Component renders correctly and matches snap
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap
index 749eabef850..033aba3a546 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/RegionSelectorModal/__snapshots__/RegionSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`RegionSelectorModal Component handles empty regions array from navigati
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1143,7 +1142,6 @@ exports[`RegionSelectorModal Component receives and uses regions from navigation
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2049,7 +2047,6 @@ exports[`RegionSelectorModal Component render matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3199,7 +3196,6 @@ exports[`RegionSelectorModal Component render matches snapshot when search has n
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3950,7 +3946,6 @@ exports[`RegionSelectorModal Component render matches snapshot when searching fo
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -4789,7 +4784,6 @@ exports[`RegionSelectorModal Component render matches snapshot with allRegionsSe
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -5939,7 +5933,6 @@ exports[`RegionSelectorModal Component render matches snapshot with custom selec
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -7089,7 +7082,6 @@ exports[`RegionSelectorModal Component sorts recommended regions to the top when
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/SsnInfoModal/__snapshots__/SsnInfoModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/SsnInfoModal/__snapshots__/SsnInfoModal.test.tsx.snap
index 96f52fb8308..9b82d24489a 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/SsnInfoModal/__snapshots__/SsnInfoModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/SsnInfoModal/__snapshots__/SsnInfoModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`SsnInfoModal Component renders correctly and matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap
index e528e6a4234..a40ececc347 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/StateSelectorModal/__snapshots__/StateSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`StateSelectorModal Component Snapshot Tests renders cleared search stat
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1237,7 +1236,6 @@ exports[`StateSelectorModal Component Snapshot Tests renders empty state when no
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1985,7 +1983,6 @@ exports[`StateSelectorModal Component Snapshot Tests renders filtered state when
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2789,7 +2786,6 @@ exports[`StateSelectorModal Component Snapshot Tests renders filtered state when
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -3593,7 +3589,6 @@ exports[`StateSelectorModal Component Snapshot Tests renders initial state corre
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -4660,7 +4655,6 @@ exports[`StateSelectorModal Component Snapshot Tests renders partial search resu
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap
index 3e26cbfb81e..a37b1d024e7 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/TokenSelectorModal/__snapshots__/TokenSelectorModal.test.tsx.snap
@@ -433,7 +433,6 @@ exports[`TokenSelectorModal Component displays empty state when no tokens match
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1390,7 +1389,6 @@ exports[`TokenSelectorModal Component displays network filter selector when pres
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -2547,7 +2545,6 @@ exports[`TokenSelectorModal Component renders correctly and matches snapshot 1`]
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap
index abc1642d11e..e166994a5b1 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedRegionModal/__snapshots__/UnsupportedRegionModal.test.tsx.snap
@@ -413,7 +413,6 @@ exports[`UnsupportedRegionModal handles missing region gracefully 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -1086,7 +1085,6 @@ exports[`UnsupportedRegionModal render match snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedStateModal/__snapshots__/UnsupportedStateModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedStateModal/__snapshots__/UnsupportedStateModal.test.tsx.snap
index 5fe4ca6d2f7..a115d1981ef 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedStateModal/__snapshots__/UnsupportedStateModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/UnsupportedStateModal/__snapshots__/UnsupportedStateModal.test.tsx.snap
@@ -413,7 +413,6 @@ exports[`UnsupportedStateModal render match snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/Deposit/Views/Modals/WebviewModal/__snapshots__/WebviewModal.test.tsx.snap b/app/components/UI/Ramp/Deposit/Views/Modals/WebviewModal/__snapshots__/WebviewModal.test.tsx.snap
index f7e9984c555..7ed1170bb04 100644
--- a/app/components/UI/Ramp/Deposit/Views/Modals/WebviewModal/__snapshots__/WebviewModal.test.tsx.snap
+++ b/app/components/UI/Ramp/Deposit/Views/Modals/WebviewModal/__snapshots__/WebviewModal.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`WebviewModal Component renders correctly and matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
@@ -998,7 +997,6 @@ exports[`WebviewModal Component should display error view when webview HTTP erro
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/components/EligibilityFailedModal/__snapshots__/EligibilityFailedModal.test.tsx.snap b/app/components/UI/Ramp/components/EligibilityFailedModal/__snapshots__/EligibilityFailedModal.test.tsx.snap
index 72329542648..45a7bc9f50c 100644
--- a/app/components/UI/Ramp/components/EligibilityFailedModal/__snapshots__/EligibilityFailedModal.test.tsx.snap
+++ b/app/components/UI/Ramp/components/EligibilityFailedModal/__snapshots__/EligibilityFailedModal.test.tsx.snap
@@ -316,7 +316,6 @@ exports[`EligibilityFailedModal renders modal with title and description 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/components/RampUnsupportedModal/__snapshots__/RampUnsupportedModal.test.tsx.snap b/app/components/UI/Ramp/components/RampUnsupportedModal/__snapshots__/RampUnsupportedModal.test.tsx.snap
index 9afffac6ea3..83de7174784 100644
--- a/app/components/UI/Ramp/components/RampUnsupportedModal/__snapshots__/RampUnsupportedModal.test.tsx.snap
+++ b/app/components/UI/Ramp/components/RampUnsupportedModal/__snapshots__/RampUnsupportedModal.test.tsx.snap
@@ -316,7 +316,6 @@ exports[`RampUnsupportedModal renders modal with title and description 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Ramp/components/UnsupportedTokenModal/__snapshots__/UnsupportedTokenModal.test.tsx.snap b/app/components/UI/Ramp/components/UnsupportedTokenModal/__snapshots__/UnsupportedTokenModal.test.tsx.snap
index 4921f95ceba..946cf0ccd31 100644
--- a/app/components/UI/Ramp/components/UnsupportedTokenModal/__snapshots__/UnsupportedTokenModal.test.tsx.snap
+++ b/app/components/UI/Ramp/components/UnsupportedTokenModal/__snapshots__/UnsupportedTokenModal.test.tsx.snap
@@ -316,7 +316,6 @@ exports[`UnsupportedTokenModal renders the modal with correct title and descript
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap
index 3fa51f72c81..3fb2d7a677b 100644
--- a/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap
+++ b/app/components/UI/Stake/components/GasImpactModal/__snapshots__/GasImpactModal.test.tsx.snap
@@ -140,7 +140,6 @@ exports[`GasImpactModal render matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap
index 641e13c6638..19f7713624c 100644
--- a/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap
+++ b/app/components/UI/Stake/components/PoolStakingLearnMoreModal/__snapshots__/PoolStakingLearnMoreModal.test.tsx.snap
@@ -117,7 +117,6 @@ exports[`PoolStakingLearnMoreModal render matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js
index 625de4d7432..9a084831335 100644
--- a/app/components/UI/Swaps/QuotesView.js
+++ b/app/components/UI/Swaps/QuotesView.js
@@ -60,7 +60,7 @@ import Alert, { AlertType } from '../../Base/Alert';
import StyledButton from '../StyledButton';
import LoadingAnimation from './components/LoadingAnimation';
-import TokenIcon from './components/TokenIcon';
+import TokenIcon from '../../Base/TokenIcon';
import QuotesSummary from './components/QuotesSummary';
import QuotesModal from './components/QuotesModal';
import Ratio from './components/Ratio';
diff --git a/app/components/UI/Swaps/components/TokenIcon.test.js b/app/components/UI/Swaps/components/TokenIcon.test.js
deleted file mode 100644
index 476343f4329..00000000000
--- a/app/components/UI/Swaps/components/TokenIcon.test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import TokenIcon from './TokenIcon';
-
-describe('TokenIcon component', () => {
- it('should Render correctly', () => {
- const empty = shallow();
- expect(empty).toMatchSnapshot();
- const eth = shallow();
- expect(eth).toMatchSnapshot();
- const symbol = shallow();
- expect(symbol).toMatchSnapshot();
- const icon = shallow(
- ,
- );
- expect(icon).toMatchSnapshot();
- const emptyMedium = shallow();
- expect(emptyMedium).toMatchSnapshot();
- const ethMedium = shallow();
- expect(ethMedium).toMatchSnapshot();
- const symbolMedium = shallow();
- expect(symbolMedium).toMatchSnapshot();
- const iconMedium = shallow(
- ,
- );
- expect(iconMedium).toMatchSnapshot();
- });
-});
diff --git a/app/components/UI/Swaps/components/TokenImportModal.js b/app/components/UI/Swaps/components/TokenImportModal.js
index ef4282b3097..8a1df07004e 100644
--- a/app/components/UI/Swaps/components/TokenImportModal.js
+++ b/app/components/UI/Swaps/components/TokenImportModal.js
@@ -6,7 +6,7 @@ import FAIcon from 'react-native-vector-icons/FontAwesome5';
import ModalDragger from '../../../Base/ModalDragger';
import Text from '../../../Base/Text';
import Alert, { AlertType } from '../../../Base/Alert';
-import TokenIcon from './TokenIcon';
+import TokenIcon from '../../../Base/TokenIcon';
import StyledButton from '../../StyledButton';
import { strings } from '../../../../../locales/i18n';
import { useTheme } from '../../../../util/theme';
diff --git a/app/components/UI/Swaps/components/TokenSelectButton.js b/app/components/UI/Swaps/components/TokenSelectButton.js
index 19f236ac1d7..4a35df58f16 100644
--- a/app/components/UI/Swaps/components/TokenSelectButton.js
+++ b/app/components/UI/Swaps/components/TokenSelectButton.js
@@ -4,7 +4,7 @@ import { View, StyleSheet } from 'react-native';
import SelectorButton from '../../../Base/SelectorButton';
import Text from '../../../Base/Text';
-import TokenIcon from './TokenIcon';
+import TokenIcon from '../../../Base/TokenIcon';
const styles = StyleSheet.create({
icon: {
diff --git a/app/components/UI/Swaps/components/TokenSelectModal.js b/app/components/UI/Swaps/components/TokenSelectModal.js
index 53b971ff1ed..edc74fc5f8a 100644
--- a/app/components/UI/Swaps/components/TokenSelectModal.js
+++ b/app/components/UI/Swaps/components/TokenSelectModal.js
@@ -26,7 +26,7 @@ import { fontStyles } from '../../../../styles/common';
import Text from '../../../Base/Text';
import ListItem from '../../../Base/ListItem';
import ModalDragger from '../../../Base/ModalDragger';
-import TokenIcon from './TokenIcon';
+import TokenIcon from '../../../Base/TokenIcon';
import Alert from '../../../Base/Alert';
import useBlockExplorer from '../utils/useBlockExplorer';
import useFetchTokenMetadata from '../utils/useFetchTokenMetadata';
diff --git a/app/components/UI/Swaps/components/__snapshots__/TokenIcon.test.js.snap b/app/components/UI/Swaps/components/__snapshots__/TokenIcon.test.js.snap
deleted file mode 100644
index 3a958ec5918..00000000000
--- a/app/components/UI/Swaps/components/__snapshots__/TokenIcon.test.js.snap
+++ /dev/null
@@ -1,160 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TokenIcon component should Render correctly 1`] = ``;
-
-exports[`TokenIcon component should Render correctly 2`] = `
-
-`;
-
-exports[`TokenIcon component should Render correctly 3`] = `
-
-
- C
-
-
-`;
-
-exports[`TokenIcon component should Render correctly 4`] = `
-
-`;
-
-exports[`TokenIcon component should Render correctly 5`] = `
-
-`;
-
-exports[`TokenIcon component should Render correctly 6`] = `
-
-`;
-
-exports[`TokenIcon component should Render correctly 7`] = `
-
-
- C
-
-
-`;
-
-exports[`TokenIcon component should Render correctly 8`] = `
-
-`;
diff --git a/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap b/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap
index faa6737ab0b..016f2baec6c 100644
--- a/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap
+++ b/app/components/UI/UpdateNeeded/__snapshots__/UpdateNeeded.test.tsx.snap
@@ -396,7 +396,6 @@ exports[`UpdateNeeded should render snapshot correctly 1`] = `
[
{
"alignItems": "center",
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
diff --git a/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap b/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap
index 29833a7d5c8..688f72fc3fc 100644
--- a/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap
+++ b/app/components/Views/AccountPermissions/AccountPermissionsConfirmRevokeAll/__snapshots__/AccountPermissionsConfirmRevokeAll.test.tsx.snap
@@ -130,7 +130,6 @@ exports[`AccountPermissionsConfirmRevokeAll renders correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/Views/AccountPermissions/ConnectionDetails/__snapshots__/ConnectionDetails.test.tsx.snap b/app/components/Views/AccountPermissions/ConnectionDetails/__snapshots__/ConnectionDetails.test.tsx.snap
index 5bcc9f877e5..89cafa31da2 100644
--- a/app/components/Views/AccountPermissions/ConnectionDetails/__snapshots__/ConnectionDetails.test.tsx.snap
+++ b/app/components/Views/AccountPermissions/ConnectionDetails/__snapshots__/ConnectionDetails.test.tsx.snap
@@ -13,7 +13,6 @@ exports[`ConnectionDetails renders correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/__snapshots__/PermittedNetworksInfoSheet.test.tsx.snap b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/__snapshots__/PermittedNetworksInfoSheet.test.tsx.snap
index e2da4804d2e..1d1a2d66e61 100644
--- a/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/__snapshots__/PermittedNetworksInfoSheet.test.tsx.snap
+++ b/app/components/Views/AccountPermissions/PermittedNetworksInfoSheet/__snapshots__/PermittedNetworksInfoSheet.test.tsx.snap
@@ -14,7 +14,6 @@ exports[`PermittedNetworksInfoSheet should render correctly 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/Views/AddressSelector/__snapshots__/AddressSelector.test.tsx.snap b/app/components/Views/AddressSelector/__snapshots__/AddressSelector.test.tsx.snap
index 737c9efd91d..58a190e9122 100644
--- a/app/components/Views/AddressSelector/__snapshots__/AddressSelector.test.tsx.snap
+++ b/app/components/Views/AddressSelector/__snapshots__/AddressSelector.test.tsx.snap
@@ -434,7 +434,6 @@ exports[`AccountSelector renders correctly and matches snapshot 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/Views/Asset/__snapshots__/index.test.js.snap b/app/components/Views/Asset/__snapshots__/index.test.js.snap
index 517c21a3156..1dad64a7f75 100644
--- a/app/components/Views/Asset/__snapshots__/index.test.js.snap
+++ b/app/components/Views/Asset/__snapshots__/index.test.js.snap
@@ -279,7 +279,6 @@ exports[`Asset Multichain Functionality should exclude mixed token/SOL transacti
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -2067,7 +2066,6 @@ exports[`Asset Multichain Functionality should exclude transactions with empty a
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -3855,7 +3853,6 @@ exports[`Asset Multichain Functionality should filter SPL token transactions cor
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -5684,7 +5681,6 @@ exports[`Asset Multichain Functionality should filter native SOL transactions co
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -7472,7 +7468,6 @@ exports[`Asset Multichain Functionality should handle state with no multichain t
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -9260,7 +9255,6 @@ exports[`Asset Multichain Functionality should handle unknown SPL token filterin
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -11089,7 +11083,6 @@ exports[`Asset Multichain Functionality should render EVM assets with Transactio
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -11619,7 +11612,6 @@ exports[`Asset Multichain Functionality should render non-EVM assets with Multic
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -13407,7 +13399,6 @@ exports[`Asset Multichain Functionality should sort filtered transactions by tim
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
@@ -15195,7 +15186,6 @@ exports[`Asset Multichain Functionality should use EVM transactions for EVM acco
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
},
diff --git a/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap b/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap
index 9acce52b03a..75e7eaf8597 100644
--- a/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap
+++ b/app/components/Views/NetworkSelector/RpcSelectionModal/__snapshots__/RpcSelectionModal.test.tsx.snap
@@ -122,7 +122,6 @@ exports[`RpcSelectionModal should render correctly when visible 1`] = `
style={
[
{
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"padding": 16,
diff --git a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
index 610c7cafec7..373d1dca613 100644
--- a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
@@ -40,7 +40,6 @@ exports[`Wallet Conditional Rendering should render banner when basic functional
[
{
"alignItems": "center",
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"height": 72,
@@ -1216,7 +1215,6 @@ exports[`Wallet Conditional Rendering should render loader when no selected acco
[
{
"alignItems": "center",
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"height": 72,
@@ -2392,7 +2390,6 @@ exports[`Wallet should render correctly 1`] = `
[
{
"alignItems": "center",
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"height": 72,
@@ -3568,7 +3565,6 @@ exports[`Wallet should render correctly when Solana support is enabled 1`] = `
[
{
"alignItems": "center",
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"height": 72,
@@ -4744,7 +4740,6 @@ exports[`Wallet should render correctly when there are no detected tokens 1`] =
[
{
"alignItems": "center",
- "backgroundColor": "#ffffff",
"flexDirection": "row",
"gap": 16,
"height": 72,
diff --git a/app/components/Views/confirmations/components/token-icon/token-icon.tsx b/app/components/Views/confirmations/components/token-icon/token-icon.tsx
index ab1a8ac7797..48816bb9f02 100644
--- a/app/components/Views/confirmations/components/token-icon/token-icon.tsx
+++ b/app/components/Views/confirmations/components/token-icon/token-icon.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Hex } from '@metamask/utils';
-import SwapsTokenIcon from '../../../../UI/Swaps/components/TokenIcon';
+import BaseTokenIcon from '../../../../Base/TokenIcon';
import styleSheet from './token-icon.styles';
import { useStyles } from '../../../../hooks/useStyles';
import BadgeWrapper, {
@@ -57,7 +57,7 @@ export const TokenIcon: React.FC = ({
)
}
>
- {
allowExternalServices: expect.any(Function),
queryMultipleAccounts: expect.any(Boolean),
accountsApiChainIds: expect.any(Function),
+ platform: 'mobile',
});
});
});
diff --git a/app/core/Engine/controllers/token-balances-controller-init.ts b/app/core/Engine/controllers/token-balances-controller-init.ts
index d09f90d3d5f..d2e1b9438bd 100644
--- a/app/core/Engine/controllers/token-balances-controller-init.ts
+++ b/app/core/Engine/controllers/token-balances-controller-init.ts
@@ -31,6 +31,7 @@ export const tokenBalancesControllerInit: ControllerInitFunction<
selectAssetsAccountApiBalancesEnabled({
engine: { backgroundState: persistedState as EngineState },
}) as `0x${string}`[],
+ platform: 'mobile',
});
return {
diff --git a/app/core/Engine/controllers/token-list-controller-init.ts b/app/core/Engine/controllers/token-list-controller-init.ts
index a4ef78a3acd..f805e6152e3 100644
--- a/app/core/Engine/controllers/token-list-controller-init.ts
+++ b/app/core/Engine/controllers/token-list-controller-init.ts
@@ -24,7 +24,14 @@ export const tokenListControllerInit: ControllerInitFunction<
messenger: controllerMessenger,
chainId: getGlobalChainId(networkController),
onNetworkStateChange: (listener) =>
- initMessenger.subscribe('NetworkController:stateChange', listener),
+ initMessenger.subscribe(
+ 'NetworkController:stateChange',
+ // TODO: Remove type assertion once @metamask/network-controller versions are aligned.
+ // Currently there's a version mismatch between the direct dependency and the one
+ // nested in @metamask/transaction-controller, causing NetworkState type incompatibility.
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (networkState) => listener(networkState as any),
+ ),
});
return {
diff --git a/app/core/Engine/messengers/token-balances-controller-messenger.ts b/app/core/Engine/messengers/token-balances-controller-messenger.ts
index dcb9f6bab5d..4676bc81604 100644
--- a/app/core/Engine/messengers/token-balances-controller-messenger.ts
+++ b/app/core/Engine/messengers/token-balances-controller-messenger.ts
@@ -38,6 +38,7 @@ export function getTokenBalancesControllerMessenger(
'AccountTrackerController:updateNativeBalances',
'AccountTrackerController:updateStakedBalances',
'TokenDetectionController:addDetectedTokensViaWs',
+ 'AuthenticationController:getBearerToken',
],
events: [
'TokensController:stateChange',
diff --git a/app/core/Engine/messengers/token-detection-controller-messenger.ts b/app/core/Engine/messengers/token-detection-controller-messenger.ts
index 1f4ffd81875..3ff9ea659dc 100644
--- a/app/core/Engine/messengers/token-detection-controller-messenger.ts
+++ b/app/core/Engine/messengers/token-detection-controller-messenger.ts
@@ -42,6 +42,7 @@ export function getTokenDetectionControllerMessenger(
'AccountsController:getAccount',
'TokensController:addTokens',
'NetworkController:findNetworkClientIdByChainId',
+ 'AuthenticationController:getBearerToken',
],
events: [
'KeyringController:lock',
diff --git a/package.json b/package.json
index 2679b798f9c..aa35855c7a3 100644
--- a/package.json
+++ b/package.json
@@ -177,8 +177,7 @@
"@scure/bip32": "1.7.0",
"@metamask/snaps-sdk": "^10.0.0",
"react-native@0.76.9": "patch:react-native@npm%3A0.76.9#./.yarn/patches/react-native-npm-0.76.9-1c25352097.patch",
- "@metamask/transaction-controller@npm:^62.3.1": "patch:@metamask/transaction-controller@npm%3A62.3.1#~/.yarn/patches/@metamask-transaction-controller-npm-61.0.0-cccac388c7.patch",
- "@metamask/assets-controllers@npm:^91.0.0": "patch:@metamask/assets-controllers@npm%3A91.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch"
+ "@metamask/transaction-controller@npm:^62.3.1": "patch:@metamask/transaction-controller@npm%3A62.3.1#~/.yarn/patches/@metamask-transaction-controller-npm-61.0.0-cccac388c7.patch"
},
"dependencies": {
"@config-plugins/detox": "^9.0.0",
@@ -199,7 +198,7 @@
"@metamask/address-book-controller": "^7.0.0",
"@metamask/app-metadata-controller": "^2.0.0",
"@metamask/approval-controller": "^8.0.0",
- "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A91.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch",
+ "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A92.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch",
"@metamask/base-controller": "^9.0.0",
"@metamask/bitcoin-wallet-snap": "^1.8.0",
"@metamask/bridge-controller": "^61.0.0",
diff --git a/yarn.lock b/yarn.lock
index 9d48dd75f0d..56efc2ede01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7393,9 +7393,9 @@ __metadata:
languageName: node
linkType: hard
-"@metamask/assets-controllers@npm:91.0.0":
- version: 91.0.0
- resolution: "@metamask/assets-controllers@npm:91.0.0"
+"@metamask/assets-controllers@npm:92.0.0, @metamask/assets-controllers@npm:^92.0.0":
+ version: 92.0.0
+ resolution: "@metamask/assets-controllers@npm:92.0.0"
dependencies:
"@ethereumjs/util": "npm:^9.1.0"
"@ethersproject/abi": "npm:^5.7.0"
@@ -7404,17 +7404,30 @@ __metadata:
"@ethersproject/contracts": "npm:^5.7.0"
"@ethersproject/providers": "npm:^5.7.0"
"@metamask/abi-utils": "npm:^2.0.3"
+ "@metamask/account-tree-controller": "npm:^4.0.0"
+ "@metamask/accounts-controller": "npm:^35.0.0"
+ "@metamask/approval-controller": "npm:^8.0.0"
"@metamask/base-controller": "npm:^9.0.0"
"@metamask/contract-metadata": "npm:^2.4.0"
"@metamask/controller-utils": "npm:^11.16.0"
+ "@metamask/core-backend": "npm:^5.0.0"
"@metamask/eth-query": "npm:^4.0.0"
"@metamask/keyring-api": "npm:^21.0.0"
+ "@metamask/keyring-controller": "npm:^25.0.0"
"@metamask/messenger": "npm:^0.3.0"
"@metamask/metamask-eth-abis": "npm:^3.1.1"
+ "@metamask/multichain-account-service": "npm:^4.0.0"
+ "@metamask/network-controller": "npm:^26.0.0"
+ "@metamask/permission-controller": "npm:^12.1.1"
+ "@metamask/phishing-controller": "npm:^16.1.0"
"@metamask/polling-controller": "npm:^16.0.0"
+ "@metamask/preferences-controller": "npm:^22.0.0"
+ "@metamask/profile-sync-controller": "npm:^27.0.0"
"@metamask/rpc-errors": "npm:^7.0.2"
+ "@metamask/snaps-controllers": "npm:^14.0.1"
"@metamask/snaps-sdk": "npm:^9.0.0"
"@metamask/snaps-utils": "npm:^11.0.0"
+ "@metamask/transaction-controller": "npm:^62.3.0"
"@metamask/utils": "npm:^11.8.1"
"@types/bn.js": "npm:^5.1.5"
"@types/uuid": "npm:^8.3.0"
@@ -7428,26 +7441,15 @@ __metadata:
single-call-balance-checker-abi: "npm:^1.0.0"
uuid: "npm:^8.3.2"
peerDependencies:
- "@metamask/account-tree-controller": ^4.0.0
- "@metamask/accounts-controller": ^35.0.0
- "@metamask/approval-controller": ^8.0.0
- "@metamask/core-backend": ^5.0.0
- "@metamask/keyring-controller": ^25.0.0
- "@metamask/network-controller": ^26.0.0
- "@metamask/permission-controller": ^12.0.0
- "@metamask/phishing-controller": ^16.0.0
- "@metamask/preferences-controller": ^22.0.0
"@metamask/providers": ^22.0.0
- "@metamask/snaps-controllers": ^14.0.0
- "@metamask/transaction-controller": ^62.0.0
webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
- checksum: 10/8e43d631a5ae86fc4801912e79d944ad087a605bb7a5e2813de64b6e068dc26482d25d37c3e2272e435a71ee8a7dafe875edb46cbfbcd150fb474588b45e6ff4
+ checksum: 10/fa6d43e9397654ed504f76d19f74a343bf937171dcf639cf203a6135d7e7e31617ff98d302283d3cabcb2d39767632cbad5717580bb40fcd63e2aa0f948d6bb4
languageName: node
linkType: hard
-"@metamask/assets-controllers@npm:^92.0.0":
- version: 92.0.0
- resolution: "@metamask/assets-controllers@npm:92.0.0"
+"@metamask/assets-controllers@npm:^91.0.0":
+ version: 91.0.0
+ resolution: "@metamask/assets-controllers@npm:91.0.0"
dependencies:
"@ethereumjs/util": "npm:^9.1.0"
"@ethersproject/abi": "npm:^5.7.0"
@@ -7456,30 +7458,17 @@ __metadata:
"@ethersproject/contracts": "npm:^5.7.0"
"@ethersproject/providers": "npm:^5.7.0"
"@metamask/abi-utils": "npm:^2.0.3"
- "@metamask/account-tree-controller": "npm:^4.0.0"
- "@metamask/accounts-controller": "npm:^35.0.0"
- "@metamask/approval-controller": "npm:^8.0.0"
"@metamask/base-controller": "npm:^9.0.0"
"@metamask/contract-metadata": "npm:^2.4.0"
"@metamask/controller-utils": "npm:^11.16.0"
- "@metamask/core-backend": "npm:^5.0.0"
"@metamask/eth-query": "npm:^4.0.0"
"@metamask/keyring-api": "npm:^21.0.0"
- "@metamask/keyring-controller": "npm:^25.0.0"
"@metamask/messenger": "npm:^0.3.0"
"@metamask/metamask-eth-abis": "npm:^3.1.1"
- "@metamask/multichain-account-service": "npm:^4.0.0"
- "@metamask/network-controller": "npm:^26.0.0"
- "@metamask/permission-controller": "npm:^12.1.1"
- "@metamask/phishing-controller": "npm:^16.1.0"
"@metamask/polling-controller": "npm:^16.0.0"
- "@metamask/preferences-controller": "npm:^22.0.0"
- "@metamask/profile-sync-controller": "npm:^27.0.0"
"@metamask/rpc-errors": "npm:^7.0.2"
- "@metamask/snaps-controllers": "npm:^14.0.1"
"@metamask/snaps-sdk": "npm:^9.0.0"
"@metamask/snaps-utils": "npm:^11.0.0"
- "@metamask/transaction-controller": "npm:^62.3.0"
"@metamask/utils": "npm:^11.8.1"
"@types/bn.js": "npm:^5.1.5"
"@types/uuid": "npm:^8.3.0"
@@ -7493,15 +7482,26 @@ __metadata:
single-call-balance-checker-abi: "npm:^1.0.0"
uuid: "npm:^8.3.2"
peerDependencies:
+ "@metamask/account-tree-controller": ^4.0.0
+ "@metamask/accounts-controller": ^35.0.0
+ "@metamask/approval-controller": ^8.0.0
+ "@metamask/core-backend": ^5.0.0
+ "@metamask/keyring-controller": ^25.0.0
+ "@metamask/network-controller": ^26.0.0
+ "@metamask/permission-controller": ^12.0.0
+ "@metamask/phishing-controller": ^16.0.0
+ "@metamask/preferences-controller": ^22.0.0
"@metamask/providers": ^22.0.0
+ "@metamask/snaps-controllers": ^14.0.0
+ "@metamask/transaction-controller": ^62.0.0
webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
- checksum: 10/fa6d43e9397654ed504f76d19f74a343bf937171dcf639cf203a6135d7e7e31617ff98d302283d3cabcb2d39767632cbad5717580bb40fcd63e2aa0f948d6bb4
+ checksum: 10/8e43d631a5ae86fc4801912e79d944ad087a605bb7a5e2813de64b6e068dc26482d25d37c3e2272e435a71ee8a7dafe875edb46cbfbcd150fb474588b45e6ff4
languageName: node
linkType: hard
-"@metamask/assets-controllers@patch:@metamask/assets-controllers@npm%3A91.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch":
- version: 91.0.0
- resolution: "@metamask/assets-controllers@patch:@metamask/assets-controllers@npm%3A91.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch::version=91.0.0&hash=43d152"
+"@metamask/assets-controllers@patch:@metamask/assets-controllers@npm%3A92.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch":
+ version: 92.0.0
+ resolution: "@metamask/assets-controllers@patch:@metamask/assets-controllers@npm%3A92.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch::version=92.0.0&hash=e4c733"
dependencies:
"@ethereumjs/util": "npm:^9.1.0"
"@ethersproject/abi": "npm:^5.7.0"
@@ -7510,17 +7510,30 @@ __metadata:
"@ethersproject/contracts": "npm:^5.7.0"
"@ethersproject/providers": "npm:^5.7.0"
"@metamask/abi-utils": "npm:^2.0.3"
+ "@metamask/account-tree-controller": "npm:^4.0.0"
+ "@metamask/accounts-controller": "npm:^35.0.0"
+ "@metamask/approval-controller": "npm:^8.0.0"
"@metamask/base-controller": "npm:^9.0.0"
"@metamask/contract-metadata": "npm:^2.4.0"
"@metamask/controller-utils": "npm:^11.16.0"
+ "@metamask/core-backend": "npm:^5.0.0"
"@metamask/eth-query": "npm:^4.0.0"
"@metamask/keyring-api": "npm:^21.0.0"
+ "@metamask/keyring-controller": "npm:^25.0.0"
"@metamask/messenger": "npm:^0.3.0"
"@metamask/metamask-eth-abis": "npm:^3.1.1"
+ "@metamask/multichain-account-service": "npm:^4.0.0"
+ "@metamask/network-controller": "npm:^26.0.0"
+ "@metamask/permission-controller": "npm:^12.1.1"
+ "@metamask/phishing-controller": "npm:^16.1.0"
"@metamask/polling-controller": "npm:^16.0.0"
+ "@metamask/preferences-controller": "npm:^22.0.0"
+ "@metamask/profile-sync-controller": "npm:^27.0.0"
"@metamask/rpc-errors": "npm:^7.0.2"
+ "@metamask/snaps-controllers": "npm:^14.0.1"
"@metamask/snaps-sdk": "npm:^9.0.0"
"@metamask/snaps-utils": "npm:^11.0.0"
+ "@metamask/transaction-controller": "npm:^62.3.0"
"@metamask/utils": "npm:^11.8.1"
"@types/bn.js": "npm:^5.1.5"
"@types/uuid": "npm:^8.3.0"
@@ -7534,20 +7547,9 @@ __metadata:
single-call-balance-checker-abi: "npm:^1.0.0"
uuid: "npm:^8.3.2"
peerDependencies:
- "@metamask/account-tree-controller": ^4.0.0
- "@metamask/accounts-controller": ^35.0.0
- "@metamask/approval-controller": ^8.0.0
- "@metamask/core-backend": ^5.0.0
- "@metamask/keyring-controller": ^25.0.0
- "@metamask/network-controller": ^26.0.0
- "@metamask/permission-controller": ^12.0.0
- "@metamask/phishing-controller": ^16.0.0
- "@metamask/preferences-controller": ^22.0.0
"@metamask/providers": ^22.0.0
- "@metamask/snaps-controllers": ^14.0.0
- "@metamask/transaction-controller": ^62.0.0
webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
- checksum: 10/bcd0b131bfad59d5d8c68f06fadf9878002af5a385a20218257294955d65746524dead1747eb5a6e8b92d710ee723cf2090728c7838e7c2be641e28a52ba3550
+ checksum: 10/e7bffd46456812744ae4038e767fa7a168fc993641d6506ff51a619cf88f780a183e0e1628fd13cc2c835af37afefdc245b7fdbffb69ea0f5b295f410c090de3
languageName: node
linkType: hard
@@ -35943,7 +35945,7 @@ __metadata:
"@metamask/address-book-controller": "npm:^7.0.0"
"@metamask/app-metadata-controller": "npm:^2.0.0"
"@metamask/approval-controller": "npm:^8.0.0"
- "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A91.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-91.0.0-ea998cb0bd.patch"
+ "@metamask/assets-controllers": "patch:@metamask/assets-controllers@npm%3A92.0.0#~/.yarn/patches/@metamask-assets-controllers-npm-92.0.0-ea998cb0bd.patch"
"@metamask/auto-changelog": "npm:^5.1.0"
"@metamask/base-controller": "npm:^9.0.0"
"@metamask/bitcoin-wallet-snap": "npm:^1.8.0"