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 (
-
{name}
+
+ {collectibleCollection.name || name} +
{`${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),