diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 81cc1c52b..17dd9fda9 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -365,6 +365,13 @@ "message": "Approve $1 spend limit", "description": "The token symbol that is being approved" }, + "approveTokenDescription": { + "message": "This allows a third party to access and transfer the following NFTs without further notice until you revoke its access." + }, + "approveTokenTitle": { + "message": "Allow access to and transfer of your $1?", + "description": "$1 is the symbol of the token for which the user is granting approval" + }, "approved": { "message": "Approved" }, diff --git a/test/e2e/tests/collectibles.spec.js b/test/e2e/tests/collectibles.spec.js index 55424d36a..0a0d726e8 100644 --- a/test/e2e/tests/collectibles.spec.js +++ b/test/e2e/tests/collectibles.spec.js @@ -114,7 +114,7 @@ describe('Collectibles', function () { ); assert.equal( await title.getText(), - 'Give permission to access your TestDappCollectibles (#1)?', + 'Allow access to and transfer of your TestDappCollectibles (#1)?', ); assert.equal(await func.getText(), 'Function: Approve'); diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js index e610960bb..396b74956 100644 --- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js +++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js @@ -533,7 +533,14 @@ export default class ConfirmApproveContent extends Component { renderTitle() { const { t } = this.context; - const { isSetApproveForAll, isApprovalOrRejection } = this.props; + const { + assetName, + tokenId, + tokenSymbol, + assetStandard, + isSetApproveForAll, + isApprovalOrRejection, + } = this.props; const titleTokenDescription = this.getTitleTokenDescription(); let title; @@ -543,14 +550,29 @@ export default class ConfirmApproveContent extends Component { if (isApprovalOrRejection === false) { title = t('revokeAllTokensTitle', [titleTokenDescription]); } + } else if ( + assetStandard === ERC721 || + assetStandard === ERC1155 || + // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT + (assetName && tokenId) || + (tokenSymbol && tokenId) + ) { + title = t('approveTokenTitle', [titleTokenDescription]); } return title || t('allowSpendToken', [titleTokenDescription]); } renderDescription() { const { t } = this.context; - const { isContract, isSetApproveForAll, isApprovalOrRejection } = - this.props; + const { + assetStandard, + assetName, + tokenId, + tokenSymbol, + isContract, + isSetApproveForAll, + isApprovalOrRejection, + } = this.props; const grantee = isContract ? t('contract').toLowerCase() : t('account').toLowerCase(); @@ -562,8 +584,16 @@ export default class ConfirmApproveContent extends Component { grantee, this.getTitleTokenDescription(), ]); + } else if ( + isSetApproveForAll || + assetStandard === ERC721 || + assetStandard === ERC1155 || + // if we don't have an asset standard but we do have either both an assetname and a tokenID or both a tokenSymbol and tokenId we assume its an NFT + (assetName && tokenId) || + (tokenSymbol && tokenId) + ) { + description = t('approveTokenDescription'); } - return description; } @@ -593,6 +623,7 @@ export default class ConfirmApproveContent extends Component { tokenId, tokenAddress, assetName, + isSetApproveForAll, } = this.props; const { showFullTxDetails, setshowContractDetails } = this.state; @@ -637,10 +668,81 @@ export default class ConfirmApproveContent extends Component {
{this.renderDescription()}
- {(assetStandard === ERC721 || - assetStandard === ERC1155 || - (assetName && tokenId) || - (tokenSymbol && tokenId)) && ( + {assetStandard === ERC20 || + (tokenSymbol && !tokenId && !isSetApproveForAll) ? ( + + + + + {ellipsify(toAddress)} + + + + + + ) : ( - - - {assetStandard === ERC20 ? (