feat(card): add card components (MetaMask#17508)

<!--
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**

<!--
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?
-->

This PR introduces three new components and a util function for the card
experience:

- `CardImage`: renders a scalable SVG representation of the card,
automatically adapting to different screen sizes.
- `ManageCardListItem`: used in the Card Home UI to display selectable
card management options.
- `CardAssetItem`: displays a token and its balance, used to represent
supported assets on the Card Home screen.
- `buildTokenIconUrl`: utility function that generates token icon URLs
using the TokenIcons API.

## **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:

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

<img width="402" height="864" alt="Card View"
src="https://github.com/user-attachments/assets/c995181c-530f-4aa7-b7d0-3f7a55332ef9"
/>

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

Author: Brunonascdev

app/components/UI/Card/components/CardAssetItem/CardAssetItem.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+
+const styleSheet = () =>
+  StyleSheet.create({
+    balances: {
+      flex: 1,
+      justifyContent: 'center',
+      marginLeft: 20,
+    },
+    assetName: {
+      flexDirection: 'row',
+    },
+    allowanceStatusContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignContent: 'center',
+    },
+    ethLogo: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      overflow: 'hidden',
+    },
+    badge: {
+      marginTop: 12,
+    },
+  });
+
+export default styleSheet;

app/components/UI/Card/components/CardAssetItem/CardAssetItem.test.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import CardAssetItem from './CardAssetItem';
+import { renderScreen } from '../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../util/test/initial-root-state';
+import { TokenI } from '../../../Tokens/types';
+import { AllowanceState, CardTokenAllowance } from '../../types';
+import { ethers } from 'ethers';
+
+// Mock dependencies
+jest.mock('../../hooks/useAssetBalance');
+jest.mock('../../../../../util/networks');
+jest.mock('../../../../../util/networks/customNetworks');
+jest.mock(
+  '../../../Tokens/TokenList/TokenListItem/CustomNetworkNativeImgMapping',
+);
+jest.mock('../../../../Base/RemoteImage', () => 'RemoteImage');
+
+import { useAssetBalance } from '../../hooks/useAssetBalance';
+import {
+  isTestNet,
+  getDefaultNetworkByChainId,
+  getTestNetImageByChainId,
+} from '../../../../../util/networks';
+
+const mockUseAssetBalance = useAssetBalance as jest.MockedFunction<
+  typeof useAssetBalance
+>;
+const mockIsTestNet = isTestNet as jest.MockedFunction<typeof isTestNet>;
+const mockGetDefaultNetworkByChainId =
+  getDefaultNetworkByChainId as jest.MockedFunction<
+    typeof getDefaultNetworkByChainId
+  >;
+const mockGetTestNetImageByChainId =
+  getTestNetImageByChainId as jest.MockedFunction<
+    typeof getTestNetImageByChainId
+  >;
+
+function renderWithProvider(
+  component: React.ComponentType | (() => React.ReactElement | null),
+) {
+  return renderScreen(
+    component,
+    {
+      name: 'CardAssetItem',
+    },
+    {
+      state: {
+        engine: {
+          backgroundState,
+        },
+      },
+    },
+  );
+}
+
+describe('CardAssetItem Component', () => {
+  const mockOnPress = jest.fn();
+
+  const mockAsset: TokenI = {
+    name: 'Ethereum',
+    symbol: 'ETH',
+    address: '0x0000000000000000000000000000000000000000',
+    decimals: 18,
+    image: 'https://example.com/eth.png',
+    isNative: true,
+    ticker: 'ETH',
+    aggregators: [],
+    balance: '1000000000000000000',
+    logo: undefined,
+    isETH: true,
+  };
+
+  const mockAssetKey: CardTokenAllowance = {
+    chainId: '0x1',
+    address: '0x0000000000000000000000000000000000000000',
+    isStaked: false,
+    allowanceState: AllowanceState.NotActivated,
+    allowance: ethers.BigNumber.from('1000000000000000000'),
+    decimals: 18,
+    symbol: 'ETH',
+    name: 'Ethereum',
+  };
+
+  const mockAssetBalance = {
+    asset: mockAsset,
+    mainBalance: '1.5 ETH',
+    secondaryBalance: '$3,000.00',
+    balanceFiat: '$3,000.00',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAssetBalance.mockReturnValue(mockAssetBalance);
+    mockIsTestNet.mockReturnValue(false);
+    mockGetDefaultNetworkByChainId.mockReturnValue(undefined);
+  });
+
+  it('renders with required props and matches snapshot', () => {
+    const { toJSON } = renderWithProvider(() => (
+      <CardAssetItem assetKey={mockAssetKey} privacyMode={false} />
+    ));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders with all props and matches snapshot', () => {
+    const { toJSON } = renderWithProvider(() => (
+      <CardAssetItem
+        assetKey={mockAssetKey}
+        privacyMode={false}
+        disabled
+        onPress={mockOnPress}
+      />
+    ));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders with privacy mode enabled and matches snapshot', () => {
+    const { toJSON } = renderWithProvider(() => (
+      <CardAssetItem
+        assetKey={mockAssetKey}
+        privacyMode
+        onPress={mockOnPress}
+      />
+    ));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders non-native token and matches snapshot', () => {
+    const nonNativeAsset = {
+      ...mockAsset,
+      name: 'USD Coin',
+      symbol: 'USDC',
+      isNative: false,
+      address: '0xa0b86a33e6c8e2c3c5b5f7ae5f7c5b5f7ae5f7c5b5f',
+    };
+    mockUseAssetBalance.mockReturnValue({
+      ...mockAssetBalance,
+      asset: nonNativeAsset,
+    });
+
+    const { toJSON } = renderWithProvider(() => (
+      <CardAssetItem
+        assetKey={{
+          ...mockAssetKey,
+          address: '0xa0b86a33e6c8e2c3c5b5f7ae5f7c5b5f7ae5f7c5b5f',
+        }}
+        privacyMode={false}
+      />
+    ));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('calls onPress when pressed', () => {
+    const { getByTestId } = renderWithProvider(() => (
+      <CardAssetItem
+        assetKey={mockAssetKey}
+        privacyMode={false}
+        onPress={mockOnPress}
+      />
+    ));
+
+    const assetElement = getByTestId('asset-ETH');
+    fireEvent.press(assetElement);
+
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+    expect(mockOnPress).toHaveBeenCalledWith(mockAsset);
+  });
+
+  it('returns null when chainId is missing', () => {
+    const assetKeyWithoutChainId = {
+      ...mockAssetKey,
+      chainId: undefined as string | undefined,
+    };
+
+    const { toJSON } = render(
+      <CardAssetItem assetKey={assetKeyWithoutChainId} privacyMode={false} />,
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it('returns null when asset is undefined', () => {
+    mockUseAssetBalance.mockReturnValue({
+      ...mockAssetBalance,
+      asset: undefined,
+    });
+
+    const { toJSON } = render(
+      <CardAssetItem assetKey={mockAssetKey} privacyMode={false} />,
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it('renders with disabled state', () => {
+    const { toJSON } = renderWithProvider(() => (
+      <CardAssetItem assetKey={mockAssetKey} privacyMode={false} disabled />
+    ));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('handles test network correctly', () => {
+    mockIsTestNet.mockReturnValue(true);
+    mockGetTestNetImageByChainId.mockReturnValue({
+      uri: 'https://example.com/testnet.png',
+    });
+
+    const { toJSON } = renderWithProvider(() => (
+      <CardAssetItem assetKey={mockAssetKey} privacyMode={false} />
+    ));
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('displays asset name when available', () => {
+    const { getByText } = renderWithProvider(() => (
+      <CardAssetItem assetKey={mockAssetKey} privacyMode={false} />
+    ));
+
+    expect(getByText('Ethereum')).toBeTruthy();
+  });
+
+  it('displays asset symbol when name is not available', () => {
+    const assetWithoutName = {
+      ...mockAsset,
+      name: '',
+    };
+    mockUseAssetBalance.mockReturnValue({
+      ...mockAssetBalance,
+      asset: assetWithoutName,
+    });
+
+    const { getByText } = renderWithProvider(() => (
+      <CardAssetItem assetKey={mockAssetKey} privacyMode={false} />
+    ));
+
+    expect(getByText('ETH')).toBeTruthy();
+  });
+});