feat: Implement balance for NFTs in BIP-44 send (MetaMask#18711)

<!--
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 aims to implement nft balances in send flow.

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

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

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

- [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: OGPoyraz

app/components/Views/confirmations/components/UI/nft/nft.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
+import { Nft as NftType } from '../../../types/token';
+import { Nft } from './nft';
+
+describe('Nft', () => {
+  const createMockNft = (overrides: Partial<NftType> = {}): NftType => ({
+    address: '0x1234567890123456789012345678901234567890',
+    standard: 'ERC721',
+    name: 'Cool NFT',
+    collectionName: 'Awesome Collection',
+    image: 'https://example.com/nft.png',
+    chainId: '0x1',
+    tokenId: '123',
+    accountId: 'account1',
+    networkBadgeSource: { uri: 'https://example.com/badge.png' },
+    balance: '1',
+    ...overrides,
+  });
+  const mockOnPress = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays NFT with collection name and name', () => {
+    const mockNft = createMockNft({
+      collectionName: 'Bored Apes',
+      name: 'Ape #456',
+      tokenId: '456',
+      balance: '0',
+    });
+
+    const { getByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('Bored Apes')).toBeOnTheScreen();
+    expect(getByText('Ape #456')).toBeOnTheScreen();
+  });
+
+  it('displays tokenId when name is missing', () => {
+    const mockNft = createMockNft({
+      collectionName: 'CryptoPunks',
+      name: undefined,
+      tokenId: '789',
+      balance: '0',
+    });
+
+    const { getByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('CryptoPunks')).toBeOnTheScreen();
+    expect(getByText('#789')).toBeOnTheScreen();
+  });
+
+  it('displays tokenId when collectionName is missing', () => {
+    const mockNft = createMockNft({
+      collectionName: undefined,
+      name: 'Unique Art',
+      tokenId: '101',
+      balance: '0',
+    });
+
+    const { getByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('#101')).toBeOnTheScreen();
+    expect(getByText('Unique Art')).toBeOnTheScreen();
+  });
+
+  it('displays balance when provided and not zero', () => {
+    const mockNft = createMockNft({
+      collectionName: 'Multi Token',
+      name: 'Token Item',
+      balance: '5',
+      tokenId: '202',
+    });
+
+    const { getByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('Multi Token')).toBeOnTheScreen();
+    expect(getByText('(5) Token Item')).toBeOnTheScreen();
+  });
+
+  it('does not display balance when zero', () => {
+    const mockNft = createMockNft({
+      collectionName: 'Zero Balance',
+      name: 'Empty Item',
+      balance: '0',
+      tokenId: '303',
+    });
+
+    const { getByText, queryByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('Zero Balance')).toBeOnTheScreen();
+    expect(getByText('Empty Item')).toBeOnTheScreen();
+    expect(queryByText('(0)')).not.toBeOnTheScreen();
+  });
+
+  it('does not display balance when undefined', () => {
+    const mockNft = createMockNft({
+      collectionName: 'No Balance',
+      name: 'Simple Item',
+      balance: undefined,
+      tokenId: '404',
+    });
+
+    const { getByText, queryByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('No Balance')).toBeOnTheScreen();
+    expect(getByText('Simple Item')).toBeOnTheScreen();
+    expect(queryByText(/^\(/)).not.toBeOnTheScreen();
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockNft = createMockNft();
+
+    const { getByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    fireEvent.press(getByText('Awesome Collection'));
+
+    expect(mockOnPress).toHaveBeenCalledWith(mockNft);
+  });
+
+  it('renders without network badge when networkBadgeSource is undefined', () => {
+    const mockNft = createMockNft({
+      networkBadgeSource: undefined,
+      collectionName: 'Simple Collection',
+      name: 'Simple NFT',
+      balance: '0',
+    });
+
+    const { getByText } = renderWithProvider(
+      <Nft asset={mockNft} onPress={mockOnPress} />,
+    );
+
+    expect(getByText('Simple Collection')).toBeOnTheScreen();
+    expect(getByText('Simple NFT')).toBeOnTheScreen();
+  });
+});

app/components/Views/confirmations/components/UI/nft/nft.tsx

@@ -76,6 +76,9 @@ export function Nft({ asset, onPress }: NftProps) {
               color={TextColor.TextAlternative}
               numberOfLines={1}
             >
+              {asset.balance !== '0' &&
+                asset.balance !== undefined &&
+                `(${asset.balance}) `}
               {asset.name ? asset.name : `#${asset.tokenId}`}
             </Text>
           )}

app/components/Views/confirmations/components/send/asset/asset.tsx

@@ -135,7 +135,7 @@ export const Asset = () => {
           <>
             {filteredTokens.length > 0 && (
               <Text
-                twClassName="m-4 mt-2"
+                twClassName="m-4 mt-4"
                 variant={TextVariant.BodyMd}
                 color={TextColor.TextAlternative}
                 fontWeight={FontWeight.Medium}