refactor: move TokenIcon component to global scope (MetaMask#23373)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Migrate TokenIcon component from legacy swaps dir to global scope as
it's widely used acrossed the codebase. Changed JS file type to TS and
added missing types. Fixed a type bug. Migrated tests from Enzyme to
React Testing Library.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3477

## **Manual testing steps**

```
This PR does not introduce any business logic changes.
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Moves `TokenIcon` to `Base`, converts it to TypeScript with safer
image-source logic, and updates all usages and tests accordingly.
> 
> - **Core Component**:
> - Migrate `UI/Swaps/components/TokenIcon` to `Base/TokenIcon` and
convert to TypeScript (`index.tsx`).
> - Add strong typings (`ThemeColors`, props interfaces) and refine
image source resolution (handles `ETH`, `SOL`, keyed `image-icons`, URL;
returns `undefined` instead of `null`).
> - Adjust imports to local `Base` modules and direct `eth-logo-new.png`
import.
> - **Usage Updates**:
> - Replace imports with `Base/TokenIcon` across Bridge (`TokenButton`,
`TokenInsightsSheet`, `TokenSelectorItem`, `TransactionAsset`), Network
logos (`NetworkAssetLogo`, `NetworkMainAssetLogo`), Swaps (`QuotesView`,
`TokenImportModal`, `TokenSelectButton`, `TokenSelectModal`), and
Confirmations (`Views/confirmations/.../token-icon`).
> - **Tests**:
> - Add new RTL tests for `Base/TokenIcon` (`index.test.tsx`), mocking
images and theme.
> - Update related tests to mock new path; remove old Enzyme test and
snapshots for Swaps `TokenIcon`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
26026a7. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: GeorgeGkas

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

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

…ponents/UI/Swaps/components/TokenIcon.js app/components/Base/TokenIcon/index.tsxapp/components/UI/Swaps/components/TokenIcon.js renamed to app/components/Base/TokenIcon/index.tsx app/components/UI/Swaps/components/TokenIcon.js renamed to 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<EmptyIconProps>) => {
   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) {

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;

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';

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';

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';

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', () => {

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;

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,

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,