m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Updated secondary copy and removed the address component from SetApprovalForAll and NFT Approve screens (#16292)

Browse Source
This commit is contained in:
Vladimir Saric 2022-12-05 17:59:15 +01:00 committed by GitHub
parent 40cba69128
commit 9ede85c9ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 118 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/_locales/en/messages.json generated
View File

@ -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"
},

2
test/e2e/tests/collectibles.spec.js
View File

@ -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');

184
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -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 {
<div className="confirm-approve-content__description">
{this.renderDescription()}
</div>
{(assetStandard === ERC721 ||
assetStandard === ERC1155 ||
(assetName && tokenId) ||
(tokenSymbol && tokenId)) && (
{assetStandard === ERC20 ||
(tokenSymbol && !tokenId && !isSetApproveForAll) ? (
<Box className="confirm-approve-content__address-display-content">
<Box display={DISPLAY.FLEX}>
<Identicon
className="confirm-approve-content__address-identicon"
diameter={20}
address={toAddress}
/>
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginBottom: 0 }}
>
{ellipsify(toAddress)}
</Typography>
<Button
type="link"
className="confirm-approve-content__copy-address"
onClick={() => {
this.setState({ copied: true });
this.copyTimeout = setTimeout(
() => this.setState({ copied: false }),
SECOND * 3,
);
copyToClipboard(toAddress);
}}
title={
this.state.copied
? t('copiedExclamation')
: t('copyToClipboard')
}
>
<CopyIcon size={9} color="var(--color-icon-default)" />
</Button>
<Button
type="link"
className="confirm-approve-content__etherscan-link"
onClick={() => {
const blockExplorerTokenLink = isContract
? getTokenTrackerLink(
toAddress,
chainId,
null,
userAddress,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
)
: getAccountLink(
toAddress,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
target="_blank"
rel="noopener noreferrer"
title={t('etherscanView')}
>
<i
className="fa fa-share-square fa-sm"
style={{ color: 'var(--color-icon-default)', fontSize: 11 }}
title={t('etherscanView')}
/>
</Button>
</Box>
</Box>
) : (
<Box marginBottom={4} marginTop={2}>
<Button
type="link"
@ -664,72 +766,6 @@ export default class ConfirmApproveContent extends Component {
)}
</Box>
)}
<Box className="confirm-approve-content__address-display-content">
<Box display={DISPLAY.FLEX}>
<Identicon
className="confirm-approve-content__address-identicon"
diameter={20}
address={toAddress}
/>
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginBottom: 0 }}
>
{ellipsify(toAddress)}
</Typography>
<Button
type="link"
className="confirm-approve-content__copy-address"
onClick={() => {
this.setState({ copied: true });
this.copyTimeout = setTimeout(
() => this.setState({ copied: false }),
SECOND * 3,
);
copyToClipboard(toAddress);
}}
title={
this.state.copied
? t('copiedExclamation')
: t('copyToClipboard')
}
>
<CopyIcon size={9} color="var(--color-icon-default)" />
</Button>
<Button
type="link"
className="confirm-approve-content__etherscan-link"
onClick={() => {
const blockExplorerTokenLink = isContract
? getTokenTrackerLink(toAddress, chainId, null, userAddress, {
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
})
: getAccountLink(
toAddress,
chainId,
{
blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
},
null,
);
global.platform.openTab({
url: blockExplorerTokenLink,
});
}}
target="_blank"
rel="noopener noreferrer"
title={t('etherscanView')}
>
<i
className="fa fa-share-square fa-sm"
style={{ color: 'var(--color-icon-default)', fontSize: 11 }}
title={t('etherscanView')}
/>
</Button>
</Box>
</Box>
{assetStandard === ERC20 ? (
<div className="confirm-approve-content__edit-submission-button-container">
<div