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

Added fallback copy for when we're not able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen (#17992)

Browse Source 
* Added fallback copy for when we're not able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and added unit tests

* Fixing lint

* Review requested changes

* Modify small copy changes in messages.json

* Fixing nft e2e tests

* Fixing nft e2e tests final

* Added snapshots for tests and removed data-testid

* Modify translation messages and e2e tests
This commit is contained in:
Vladimir Saric 2023-03-20 18:05:48 +01:00 committed by GitHub
parent bf851a56a4
commit 1d5e8a7840
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 846 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/de/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Nonce ist höher als vorgeschlagen nonce von $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "NFT kann nicht hinzugefügt werden, da die Eigentumsangaben nicht übereinstimmen. Stellen Sie sicher, dass Sie die richtigen Informationen eingegeben haben."
},

3
app/_locales/el/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Το Nonce είναι υψηλότερο από το προτεινόμενο nonce του $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "Τα NFT δεν μπορούν να προστεθούν, διότι τα στοιχεία της κυριότητας δεν ταυτίζονται. Σιγουρευτείτε ότι έχετε εισαγάγει τα σωστά στοιχεία."
},

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

@ -321,6 +321,10 @@
"message": "All of your $1",
"description": "$1 is the symbol or name of the token that the user is approving spending"
},
"allYourNFTsOf": {
"message": "All of your NFTs from $1",
"description": "$1 is a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
},
"allowExternalExtensionTo": {
"message": "Allow this external extension to:"
},
@ -368,6 +372,10 @@
"message": "Allow access to and transfer of all your $1?",
"description": "$1 is the symbol of the token for which the user is granting approval"
},
"approveAllTokensTitleWithoutSymbol": {
"message": "Allow access to and transfer all of your NFTs from $1?",
"description": "$1 a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
},
"approveAndInstall": {
"message": "Approve & install"
},
@ -384,6 +392,10 @@
"approveTokenDescription": {
"message": "This allows a third party to access and transfer the following NFTs without further notice until you revoke its access."
},
"approveTokenDescriptionWithoutSymbol": {
"message": "This allows a third party to access and transfer all of your NFTs from $1 without further notice until you revoke its access.",
"description": "$1 is a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
},
"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"
@ -2224,9 +2236,6 @@
"message": "Nonce is higher than suggested nonce of $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "NFT can’t be added as the ownership details do not match. Make sure you have entered correct information."
},
@ -3212,10 +3221,18 @@
"message": "Revoke permission to access and transfer all of your $1?",
"description": "$1 is the symbol of the token for which the user is revoking approval"
},
"revokeAllTokensTitleWithoutSymbol": {
"message": "Revoke permission to access and transfer all of your NFTs from $1?",
"description": "$1 is a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
},
"revokeApproveForAllDescription": {
"message": "This revokes the permission for a third party to access and transfer all of your $1 without further notice.",
"description": "$1 is either a string or link of a given token symbol or name"
},
"revokeApproveForAllDescriptionWithoutSymbol": {
"message": "This revokes the permission for a third party to access and transfer all of your NFTs from $1 without further notice.",
"description": "$1 is a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
},
"revokeSpendingCap": {
"message": "Revoke spending cap for your $1",
"description": "$1 is a token symbol"
@ -4196,6 +4213,9 @@
"thingsToKeep": {
"message": "Things to keep in mind:"
},
"thisCollection": {
"message": "this collection"
},
"thisIsBasedOn": {
"message": "This is based on information from "
},

3
app/_locales/es/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "El nonce es superior al nonce sugerido de $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "No se puede agregar el NFT porque los detalles de propiedad no coinciden. Asegúrese de haber ingresado la información correcta."
},

3
app/_locales/fr/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Le nonce est supérieur au nonce suggéré de $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "Ce NFT ne peut pas être ajouté, car les informations de propriété ne correspondent pas. Vérifiez que votre saisie est correcte."
},

3
app/_locales/hi/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "नॉन्स $1 के सुझाए गए नॉन्स से अधिक है",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "एनएफटी"
},
"nftAddFailedMessage": {
"message": "एनएफटी जोड़ा नहीं जा सकता क्योंकि स्वामित्व विवरण मेल नहीं खा रहे हैं। सुनिश्चित करें कि आपने सही जानकारी दर्ज की है।"
},

3
app/_locales/id/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Nonce lebih tinggi dari nonce $1 yang disarankan",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "NFT tidak dapat ditambahkan karena detail kepemilikan tidak cocok. Pastikan Anda telah memasukkan informasi yang benar."
},

3
app/_locales/ja/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "ナンスが提案され$1よりも大きいです",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "所有者情報が一致していないため、NFT を追加できません。入力された情報が正しいことを確認してください。"
},

3
app/_locales/ko/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "임시값이 권장 임시값인 $1보다 큽니다.",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT\n"
},
"nftAddFailedMessage": {
"message": "소유권 정보가 일치하지 않아 NFT를 추가할 수 없습니다. 올바른 정보를 입력했는지 확인하세요."
},

3
app/_locales/pt/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Nonce é maior que o nonce sugerido de $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "O NFT não pôde ser adicionado, pois os dados de propriedade não coincidem. Certifique-se de ter inserido as informações corretas."
},

3
app/_locales/ru/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Одноразовый номер больше, чем предложенный одноразовый номер $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "Невозможно добавить NFT, так как сведения о владельце не совпадают. Убедитесь, что вы ввели правильную информацию."
},

3
app/_locales/tl/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Mas mataas ang noncesa iminumungkahing nonce na $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "Hindi maidaragdag ang NFT dahil hindi tumutugma ang mga detalye ng pagmamay-ari. Siguraduhing tamang impormasyon ang iyong nailagay."
},

3
app/_locales/tr/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Geçici anahtar, önerilen $1 geçici anahtarından daha büyük",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "Sahiplik bilgileri eşleşmediği için NFT eklenemiyor. Doğru bilgileri girdiğinizden emin olun."
},

3
app/_locales/vi/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Số chỉ dùng một lần lớn hơn số chỉ dùng một lần gợi ý là $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "NFT"
},
"nftAddFailedMessage": {
"message": "Không thể thêm NFT vì thông tin quyền sở hữu không trùng khớp. Đảm bảo bạn đã nhập đúng thông tin."
},

3
app/_locales/zh_CN/messages.json generated
View File

@ -2191,9 +2191,6 @@
"message": "Nonce 高于建议的 nouce 值 $1",
"description": "The next nonce according to MetaMask's internal logic"
},
"nft": {
"message": "非同质化代币(NFT)"
},
"nftAddFailedMessage": {
"message": "由于所有权信息不匹配，无法添加NFT。请确保所输入的信息正确无误。"
},

8
test/e2e/nft/erc1155-interaction.spec.js
View File

@ -129,9 +129,9 @@ describe('ERC1155 NFTs testdapp interaction', function () {
it('should enable approval for a third party address to manage all ERC1155 token', async function () {
const expectedMessageTitle =
'Allow access to and transfer of all your NFT?';
'Allow access to and transfer all of your NFTs from this collection?';
const expectedDescription =
'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.';
'This allows a third party to access and transfer all of your NFTs from this collection without further notice until you revoke its access.';
const expectedWarningMessage = 'Your NFT may be at risk';
await withFixtures(
{
@ -219,9 +219,9 @@ describe('ERC1155 NFTs testdapp interaction', function () {
it('should revoke approval for a third party address to manage all ERC1155 token', async function () {
const expectedMessageTitle =
'Revoke permission to access and transfer all of your NFT?';
'Revoke permission to access and transfer all of your NFTs from this collection?';
const expectedDescription =
'This revokes the permission for a third party to access and transfer all of your NFT without further notice.';
'This revokes the permission for a third party to access and transfer all of your NFTs from this collection without further notice.';
await withFixtures(
{
dapp: true,

738
ui/pages/confirm-approve/confirm-approve-content/__snapshots__/confirm-approve-content.component.test.js.snap Normal file
View File

@ -0,0 +1,738 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConfirmApproveContent Component should render Confirm approve page correctly and display fallback copy for when we are able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when giving a setApprovalForAll allowance 1`] = `
<div>
<div
class="confirm-approve-content"
>
<div
class="box confirm-approve-content__icon-display-content box--display-flex box--flex-direction-row"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class=""
>
<img
alt="https://metamask.github.io/test-dapp/"
class="url-icon confirm-approve-content__siteimage-identicon"
src="https://metamask.github.io/test-dapp/metamask-fox.svg"
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
>
https://metamask.github.io/test-dapp/
</h6>
</div>
</div>
<div
class="confirm-approve-content__title"
data-testid="confirm-approve-title"
>
<span>
Allow access to and transfer of all your
<span
class="confirm-approve-content__approval-asset-title"
>
ZenAcademy
</span>
?
</span>
</div>
<div
class="confirm-approve-content__description"
>
This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.
</div>
<div
class="box box--margin-top-2 box--margin-bottom-4 box--flex-direction-row"
>
<a
class="button btn-link confirm-approve-content__verify-contract-details"
role="button"
tabindex="0"
>
Verify contract details
</a>
</div>
<div
class="confirm-approve-content__card-wrapper"
>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-header"
>
<div
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
<div
class="confirm-approve-content__card-header__title"
>
Transaction fee
</div>
<div
class="box box--flex-direction-row box--width-1/6"
>
<a
class="button btn-link confirm-approve-content__small-blue-text"
role="button"
tabindex="0"
>
Edit
</a>
</div>
</div>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__transaction-details-content"
>
<div
class="confirm-approve-content__small-text"
>
A fee is associated with this request.
</div>
<div
class="confirm-approve-content__transaction-details-content__fee"
>
<div
class="confirm-approve-content__transaction-details-content__primary-fee"
>
$10.00
</div>
<div
class="confirm-approve-content__transaction-details-content__secondary-fee"
>
20 ETH
</div>
</div>
</div>
</div>
</div>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__custom-nonce-content"
>
<div
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
Nonce
</h6>
<a
class="button btn-link confirm-approve-content__custom-nonce-edit"
role="button"
tabindex="0"
>
Edit
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
>
2
</h6>
</div>
</div>
<div
class="confirm-approve-content__view-full-tx-button-wrapper"
>
<div
class="confirm-approve-content__view-full-tx-button cursor-pointer"
>
<div
class="confirm-approve-content__small-blue-text"
>
View full transaction details
</div>
<i
class="fa fa-caret-down"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`ConfirmApproveContent Component should render Confirm approve page correctly and display fallback copy for when we are able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when revoking a setApprovalForAll allowance 1`] = `
<div>
<div
class="confirm-approve-content"
>
<div
class="box confirm-approve-content__icon-display-content box--display-flex box--flex-direction-row"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class=""
>
<img
alt="https://metamask.github.io/test-dapp/"
class="url-icon confirm-approve-content__siteimage-identicon"
src="https://metamask.github.io/test-dapp/metamask-fox.svg"
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
>
https://metamask.github.io/test-dapp/
</h6>
</div>
</div>
<div
class="confirm-approve-content__title"
data-testid="confirm-approve-title"
>
<span>
Revoke permission to access and transfer all of your
<span
class="confirm-approve-content__approval-asset-title"
>
ZenAcademy
</span>
?
</span>
</div>
<div
class="confirm-approve-content__description"
>
<span>
This revokes the permission for a third party to access and transfer all of your
<span
class="confirm-approve-content__approval-asset-title"
>
ZenAcademy
</span>
without further notice.
</span>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-4 box--flex-direction-row"
>
<a
class="button btn-link confirm-approve-content__verify-contract-details"
role="button"
tabindex="0"
>
Verify contract details
</a>
</div>
<div
class="confirm-approve-content__card-wrapper"
>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-header"
>
<div
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
<div
class="confirm-approve-content__card-header__title"
>
Transaction fee
</div>
<div
class="box box--flex-direction-row box--width-1/6"
>
<a
class="button btn-link confirm-approve-content__small-blue-text"
role="button"
tabindex="0"
>
Edit
</a>
</div>
</div>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__transaction-details-content"
>
<div
class="confirm-approve-content__small-text"
>
A fee is associated with this request.
</div>
<div
class="confirm-approve-content__transaction-details-content__fee"
>
<div
class="confirm-approve-content__transaction-details-content__primary-fee"
>
$10.00
</div>
<div
class="confirm-approve-content__transaction-details-content__secondary-fee"
>
20 ETH
</div>
</div>
</div>
</div>
</div>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__custom-nonce-content"
>
<div
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
Nonce
</h6>
<a
class="button btn-link confirm-approve-content__custom-nonce-edit"
role="button"
tabindex="0"
>
Edit
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
>
2
</h6>
</div>
</div>
<div
class="confirm-approve-content__view-full-tx-button-wrapper"
>
<div
class="confirm-approve-content__view-full-tx-button cursor-pointer"
>
<div
class="confirm-approve-content__small-blue-text"
>
View full transaction details
</div>
<i
class="fa fa-caret-down"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`ConfirmApproveContent Component should render Confirm approve page correctly and display fallback copy for when we are not able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when giving a setApprovalForAll allowance 1`] = `
<div>
<div
class="confirm-approve-content"
>
<div
class="box confirm-approve-content__icon-display-content box--display-flex box--flex-direction-row"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class=""
>
<img
alt="https://metamask.github.io/test-dapp/"
class="url-icon confirm-approve-content__siteimage-identicon"
src="https://metamask.github.io/test-dapp/metamask-fox.svg"
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
>
https://metamask.github.io/test-dapp/
</h6>
</div>
</div>
<div
class="confirm-approve-content__title"
data-testid="confirm-approve-title"
>
<span>
Allow access to and transfer all of your NFTs from
<span
class="confirm-approve-content__approval-asset-title"
>
this collection
</span>
?
</span>
</div>
<div
class="confirm-approve-content__description"
>
<span>
This allows a third party to access and transfer all of your NFTs from
<span
class="confirm-approve-content__approval-asset-title"
>
this collection
</span>
without further notice until you revoke its access.
</span>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-4 box--flex-direction-row"
>
<a
class="button btn-link confirm-approve-content__verify-contract-details"
role="button"
tabindex="0"
>
Verify contract details
</a>
</div>
<div
class="confirm-approve-content__card-wrapper"
>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-header"
>
<div
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
<div
class="confirm-approve-content__card-header__title"
>
Transaction fee
</div>
<div
class="box box--flex-direction-row box--width-1/6"
>
<a
class="button btn-link confirm-approve-content__small-blue-text"
role="button"
tabindex="0"
>
Edit
</a>
</div>
</div>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__transaction-details-content"
>
<div
class="confirm-approve-content__small-text"
>
A fee is associated with this request.
</div>
<div
class="confirm-approve-content__transaction-details-content__fee"
>
<div
class="confirm-approve-content__transaction-details-content__primary-fee"
>
$10.00
</div>
<div
class="confirm-approve-content__transaction-details-content__secondary-fee"
>
20 ETH
</div>
</div>
</div>
</div>
</div>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__custom-nonce-content"
>
<div
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
Nonce
</h6>
<a
class="button btn-link confirm-approve-content__custom-nonce-edit"
role="button"
tabindex="0"
>
Edit
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
>
2
</h6>
</div>
</div>
<div
class="confirm-approve-content__view-full-tx-button-wrapper"
>
<div
class="confirm-approve-content__view-full-tx-button cursor-pointer"
>
<div
class="confirm-approve-content__small-blue-text"
>
View full transaction details
</div>
<i
class="fa fa-caret-down"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`ConfirmApproveContent Component should render Confirm approve page correctly and display fallback copy for when we are not able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when revoking a setApprovalForAll allowance 1`] = `
<div>
<div
class="confirm-approve-content"
>
<div
class="box confirm-approve-content__icon-display-content box--display-flex box--flex-direction-row"
>
<div
class="box box--display-flex box--flex-direction-row box--align-items-center"
>
<div
class=""
>
<img
alt="https://metamask.github.io/test-dapp/"
class="url-icon confirm-approve-content__siteimage-identicon"
src="https://metamask.github.io/test-dapp/metamask-fox.svg"
/>
</div>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-alternative box--margin-left-1 box--flex-direction-row"
>
https://metamask.github.io/test-dapp/
</h6>
</div>
</div>
<div
class="confirm-approve-content__title"
data-testid="confirm-approve-title"
>
<span>
Revoke permission to access and transfer all of your NFTs from
<span
class="confirm-approve-content__approval-asset-title"
>
this collection
</span>
?
</span>
</div>
<div
class="confirm-approve-content__description"
>
<span>
This revokes the permission for a third party to access and transfer all of your NFTs from
<span
class="confirm-approve-content__approval-asset-title"
>
this collection
</span>
without further notice.
</span>
</div>
<div
class="box box--margin-top-2 box--margin-bottom-4 box--flex-direction-row"
>
<a
class="button btn-link confirm-approve-content__verify-contract-details"
role="button"
tabindex="0"
>
Verify contract details
</a>
</div>
<div
class="confirm-approve-content__card-wrapper"
>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-header"
>
<div
class="confirm-approve-content__card-header__symbol"
>
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/tag.svg');"
/>
</div>
<div
class="confirm-approve-content__card-header__title"
>
Transaction fee
</div>
<div
class="box box--flex-direction-row box--width-1/6"
>
<a
class="button btn-link confirm-approve-content__small-blue-text"
role="button"
tabindex="0"
>
Edit
</a>
</div>
</div>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__transaction-details-content"
>
<div
class="confirm-approve-content__small-text"
>
A fee is associated with this request.
</div>
<div
class="confirm-approve-content__transaction-details-content__fee"
>
<div
class="confirm-approve-content__transaction-details-content__primary-fee"
>
$10.00
</div>
<div
class="confirm-approve-content__transaction-details-content__secondary-fee"
>
20 ETH
</div>
</div>
</div>
</div>
</div>
<div
class="confirm-approve-content__card--no-border"
>
<div
class="confirm-approve-content__card-content"
>
<div
class="confirm-approve-content__custom-nonce-content"
>
<div
class="box confirm-approve-content__custom-nonce-header box--flex-direction-row box--justify-content-flex-start box--display-flex"
>
<h6
class="box mm-text mm-text--body-sm mm-text--color-text-default box--flex-direction-row"
>
Nonce
</h6>
<a
class="button btn-link confirm-approve-content__custom-nonce-edit"
role="button"
tabindex="0"
>
Edit
</a>
</div>
<h6
class="box mm-text confirm-approve-content__custom-nonce-value mm-text--body-sm-bold mm-text--color-text-default box--flex-direction-row"
>
2
</h6>
</div>
</div>
<div
class="confirm-approve-content__view-full-tx-button-wrapper"
>
<div
class="confirm-approve-content__view-full-tx-button cursor-pointer"
>
<div
class="confirm-approve-content__small-blue-text"
>
View full transaction details
</div>
<i
class="fa fa-caret-down"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;

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

@ -210,9 +210,13 @@ export default class ConfirmApproveContent extends Component {
renderERC721OrERC1155PermissionContent() {
const { t } = this.context;
const { origin, toAddress, isContract, isSetApproveForAll } = this.props;
const { origin, toAddress, isContract, isSetApproveForAll, tokenSymbol } =
this.props;
const titleTokenDescription = this.getTitleTokenDescription();
const approvedAssetText = tokenSymbol
? t('allOfYour', [titleTokenDescription])
: t('allYourNFTsOf', [titleTokenDescription]);
const displayedAddress = isContract
? `${t('contract')} (${addressSummary(toAddress)})`
@ -227,9 +231,7 @@ export default class ConfirmApproveContent extends Component {
{t('approvedAsset')}:
</div>
<div className="confirm-approve-content__medium-text">
{isSetApproveForAll
? t('allOfYour', [titleTokenDescription])
: titleTokenDescription}
{isSetApproveForAll ? approvedAssetText : titleTokenDescription}
</div>
</div>
<div className="flex-row">
@ -376,7 +378,7 @@ export default class ConfirmApproveContent extends Component {
if (assetName || tokenSymbol) {
titleTokenDescription = `${assetName ?? tokenSymbol}`;
} else {
titleTokenDescription = t('nft');
titleTokenDescription = t('thisCollection');
}
}
@ -451,9 +453,20 @@ export default class ConfirmApproveContent extends Component {
let title;
if (isSetApproveForAll) {
title = t('approveAllTokensTitle', [titleTokenDescription]);
if (isApprovalOrRejection === false) {
title = t('revokeAllTokensTitle', [titleTokenDescription]);
if (tokenSymbol) {
title = t('approveAllTokensTitle', [titleTokenDescription]);
if (isApprovalOrRejection === false) {
title = t('revokeAllTokensTitle', [titleTokenDescription]);
}
} else {
title = t('approveAllTokensTitleWithoutSymbol', [
titleTokenDescription,
]);
if (isApprovalOrRejection === false) {
title = t('revokeAllTokensTitleWithoutSymbol', [
titleTokenDescription,
]);
}
}
} else if (
assetStandard === TokenStandard.ERC721 ||
@ -485,9 +498,15 @@ export default class ConfirmApproveContent extends Component {
let description = t('trustSiteApprovePermission', [grantee]);
if (isSetApproveForAll && isApprovalOrRejection === false) {
description = t('revokeApproveForAllDescription', [
this.getTitleTokenDescription(),
]);
if (tokenSymbol) {
description = t('revokeApproveForAllDescription', [
this.getTitleTokenDescription(),
]);
} else {
description = t('revokeApproveForAllDescriptionWithoutSymbol', [
this.getTitleTokenDescription(),
]);
}
} else if (
isSetApproveForAll ||
assetStandard === TokenStandard.ERC721 ||
@ -496,7 +515,13 @@ export default class ConfirmApproveContent extends Component {
(assetName && tokenId) ||
(tokenSymbol && tokenId)
) {
description = t('approveTokenDescription');
if (tokenSymbol) {
description = t('approveTokenDescription');
} else {
description = t('approveTokenDescriptionWithoutSymbol', [
this.getTitleTokenDescription(),
]);
}
}
return description;
}

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

@ -37,6 +37,8 @@ const props = {
rpcPrefs: {},
isContract: true,
useCurrencyRateCheck: true,
isSetApproveForAll: false,
isApprovalOrRejection: true,
};
describe('ConfirmApproveContent Component', () => {
@ -281,4 +283,46 @@ describe('ConfirmApproveContent Component', () => {
),
).toBeInTheDocument();
});
it('should render Confirm approve page correctly and display fallback copy for when we are able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when giving a setApprovalForAll allowance', () => {
const { container } = renderComponent({
...props,
tokenSymbol: 'ZenAcademy',
isSetApproveForAll: true,
});
expect(container).toMatchSnapshot();
});
it('should render Confirm approve page correctly and display fallback copy for when we are not able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when giving a setApprovalForAll allowance', () => {
const { container } = renderComponent({
...props,
tokenSymbol: '',
isSetApproveForAll: true,
});
expect(container).toMatchSnapshot();
});
it('should render Confirm approve page correctly and display fallback copy for when we are able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when revoking a setApprovalForAll allowance', () => {
const { container } = renderComponent({
...props,
tokenSymbol: 'ZenAcademy',
isSetApproveForAll: true,
isApprovalOrRejection: false,
});
expect(container).toMatchSnapshot();
});
it('should render Confirm approve page correctly and display fallback copy for when we are not able to retrieve a erc721 or erc1155 name in the setApprovalForAll screen and when revoking a setApprovalForAll allowance', () => {
const { container } = renderComponent({
...props,
tokenSymbol: '',
isSetApproveForAll: true,
isApprovalOrRejection: false,
});
expect(container).toMatchSnapshot();
});
});