fix: fix bug first NFT in collection gets always displayed (#8141)

## **Description**

In the NFTs list, when tapping an image - if it’s not the first in the
list, it will display the information for the first in the list.


## **Related issues**

Fixes: [#7699](#7699)

## **Manual testing steps**

1. Go to NFTs tab
2. Choose a collection who contains more than one NFT
3. Click on the second one , the informations of the first one will be
displayed

## **Screenshots/Recordings**

### **Before**



https://github.com/MetaMask/metamask-mobile/assets/26223211/593647d2-e96f-4ed5-a349-fcb3ae99a74b


### **After**



https://github.com/MetaMask/metamask-mobile/assets/26223211/121f53ae-117e-445e-9cd7-5543b25ae611


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [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.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Co-authored-by: Cal Leung <[email protected]>

app/components/UI/CollectibleModal/CollectibleModal.test.tsx

@@ -4,13 +4,25 @@ import CollectibleModal from './CollectibleModal';
 
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import initialBackgroundState from '../../../util/test/initial-background-state.json';
+import { collectiblesSelector } from '../../../reducers/collectibles';
+import {
+  selectDisplayNftMedia,
+  selectIsIpfsGatewayEnabled,
+} from '../../../selectors/preferencesController';
+import { useSelector } from 'react-redux';
 
 const mockInitialState = {
   engine: {
     backgroundState: initialBackgroundState,
   },
 };
 
+// Set two collectibles with the same address
+const collectibles = [
+  { name: 'Lion', tokenId: 6903, address: '0x123' },
+  { name: 'Leopard', tokenId: 6904, address: '0x123' },
+];
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useSelector: jest.fn(),
@@ -38,11 +50,29 @@ jest.mock('@react-navigation/native', () => {
 });
 
 describe('CollectibleModal', () => {
-  it('should render correctly', () => {
+  afterEach(() => {
+    (useSelector as jest.Mock).mockClear();
+  });
+  it('should render correctly', async () => {
     const { toJSON } = renderWithProvider(<CollectibleModal />, {
       state: mockInitialState,
     });
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('should render the correct token name and ID', async () => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === collectiblesSelector) return collectibles;
+      if (selector === selectIsIpfsGatewayEnabled) return true;
+      if (selector === selectDisplayNftMedia) return true;
+    });
+
+    const { findAllByText } = renderWithProvider(<CollectibleModal />, {
+      state: mockInitialState,
+    });
+
+    expect(await findAllByText('#6904')).toBeDefined();
+    expect(await findAllByText('Leopard')).toBeDefined();
+  });
 });

app/components/UI/CollectibleModal/CollectibleModal.tsx

@@ -45,7 +45,9 @@ const CollectibleModal = () => {
   const handleUpdateCollectible = useCallback(() => {
     if (isIpfsGatewatEnabled || displayNftMedia) {
       const newUpdatedCollectible = collectibles.find(
-        (nft: Collectible) => nft.address === collectible.address,
+        (nft: Collectible) =>
+          nft.address === collectible.address &&
+          nft.tokenId === collectible.tokenId,
       );
 
       if (newUpdatedCollectible) {
@@ -96,7 +98,6 @@ const CollectibleModal = () => {
     () => ({ ...collectible, ...updatedCollectible, contractName }),
     [collectible, contractName, updatedCollectible],
   );
-
   return (
     <ReusableModal ref={modalRef} style={styles.bottomModal}>
       <>