From 0fdff8955cc1b9b3d91c9f9e8e52b8ab9693393e Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Thu, 19 Jan 2023 23:00:35 +0530
Subject: [PATCH] added title for each nft in asset dropdown (#17286)

---
 .../send-asset-row/send-asset-row.component.js     | 14 ++++++++++++--
 .../send-asset-row/send-asset-row.container.js     |  2 ++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
index 0adf4930a..f92876f4e 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
@@ -46,6 +46,12 @@ export default class SendAssetRow extends Component {
         }),
       }),
     ),
+    collections: PropTypes.arrayOf(
+      PropTypes.shape({
+        address: PropTypes.string.isRequired,
+        name: PropTypes.string,
+      }),
+    ),
   };
 
   static contextTypes = {
@@ -261,7 +267,9 @@ export default class SendAssetRow extends Component {
   renderCollectible(collectible, insideDropdown = false) {
     const { address, name, image, tokenId } = collectible;
     const { t } = this.context;
-
+    const collectibleCollection = this.props.collections.find(
+      (collection) => collection.address === address,
+    );
     return (
       <div
         key={address}
@@ -272,7 +280,9 @@ export default class SendAssetRow extends Component {
           <Identicon address={address} diameter={36} image={image} />
         </div>
         <div className="send-v2__asset-dropdown__asset-data">
-          <div className="send-v2__asset-dropdown__symbol">{name}</div>
+          <div className="send-v2__asset-dropdown__symbol">
+            {collectibleCollection.name || name}
+          </div>
           <div className="send-v2__asset-dropdown__name">
             <span className="send-v2__asset-dropdown__name__label">
               {`${t('tokenId')}:`}
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
index 083808bdd..8bc7563e3 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import {
+  getCollectibleContracts,
   getCollectibles,
   getNativeCurrency,
 } from '../../../../ducks/metamask/metamask';
@@ -15,6 +16,7 @@ function mapStateToProps(state) {
     tokens: state.metamask.tokens,
     selectedAddress: state.metamask.selectedAddress,
     collectibles: getCollectibles(state),
+    collections: getCollectibleContracts(state),
     sendAsset: getSendAsset(state),
     accounts: getMetaMaskAccounts(state),
     nativeCurrency: getNativeCurrency(state),