From 8885c54f13735ecc6128b74346e79fb4866f7f7d Mon Sep 17 00:00:00 2001 From: amerkadicE <97883527+amerkadicE@users.noreply.github.com> Date: Tue, 6 Dec 2022 21:24:07 +0100 Subject: [PATCH] NFT setApprovalForAll warning popover (#16195) * NFT setApprovalForAll warning popover --- app/_locales/de/messages.json | 10 -- app/_locales/el/messages.json | 10 -- app/_locales/en/messages.json | 24 +-- app/_locales/es/messages.json | 10 -- app/_locales/fr/messages.json | 10 -- app/_locales/hi/messages.json | 10 -- app/_locales/id/messages.json | 10 -- app/_locales/it/messages.json | 10 -- app/_locales/ja/messages.json | 10 -- app/_locales/ko/messages.json | 10 -- app/_locales/pt/messages.json | 10 -- app/_locales/ru/messages.json | 10 -- app/_locales/tl/messages.json | 10 -- app/_locales/tr/messages.json | 10 -- app/_locales/vi/messages.json | 10 -- app/_locales/zh_CN/messages.json | 10 -- test/e2e/tests/collectibles.spec.js | 8 +- ui/components/app/app-components.scss | 1 + .../confirm-page-container-container.test.js | 8 + .../confirm-page-container.component.js | 57 ++++--- .../app/set-approval-for-all-warning/index.js | 1 + .../set-approval-for-all-warning/index.scss | 26 ++++ .../set-approval-for-all-warning.js | 143 ++++++++++++++++++ .../set-approval-for-all-warning.stories.js | 42 +++++ .../confirm-approve-content.component.js | 75 ++++----- ui/pages/confirm-approve/confirm-approve.js | 1 + .../confirm-transaction-base.component.js | 8 + 27 files changed, 321 insertions(+), 223 deletions(-) create mode 100644 ui/components/app/set-approval-for-all-warning/index.js create mode 100644 ui/components/app/set-approval-for-all-warning/index.scss create mode 100644 ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js create mode 100644 ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.stories.js diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 2cd0bb066..44bb787c3 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Bestätigen" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Sie gewähren den Zugriff auf $1, auch auf solche, die Sie in Zukunft besitzen könnten. Die Gegenseite kann jederzeit NFTs aus Ihrer Brieftasche übertragen, ohne Sie zu fragen, bis Sie diese Genehmigung widerrufen. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "alle NFTs in diesem Contract" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Seien Sie vorsichtig." - }, "confirmPassword": { "message": "Passwort bestätigen" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 6aeb29ed9..c8c54e306 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Επιβεβαίωση" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Παραχωρείτε πρόσβαση στον $1, συμπεριλαμβανομένου οτιδήποτε ενδέχεται να αποκτήσετε στο μέλλον. Ο συμβαλλόμενος στην άλλη πλευρά μπορεί να μεταφέρει NFT από το πορτοφόλι σας ανά πάσα στιγμή χωρίς να σας ρωτήσει, μέχρι να ανακαλέσετε αυτή την έγκριση. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "όλα τα NFT αυτού του συμβαλλόμενου" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Προχωρήστε με προσοχή." - }, "confirmPassword": { "message": "Επιβεβαίωση Κωδικού Πρόσβασης" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 17dd9fda9..97067ee23 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -665,16 +665,6 @@ "confirm": { "message": "Confirm" }, - "confirmPageDialogSetApprovalForAll": { - "message": "You're granting access to $1, including any you might own in the future. The party on the other end can transfer NFTs from your wallet at any time without asking you until you revoke this approval. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "all the NFTs on this contract" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Proceed with caution." - }, "confirmPassword": { "message": "Confirm password" }, @@ -2334,6 +2324,17 @@ "nftTokenIdPlaceholder": { "message": "Enter the token id" }, + "nftWarningContent": { + "message": "You're granting access to $1, including any you might own in the future. The party on the other end can transfer these NFTs from your wallet at any time without asking you until you revoke this approval. $2", + "description": "$1 is nftWarningContentBold bold part, $2 is Learn more link" + }, + "nftWarningContentBold": { + "message": "all your $1 NFTs", + "description": "$1 is name of the collection" + }, + "nftWarningContentGrey": { + "message": "Proceed with caution." + }, "nfts": { "message": "NFTs" }, @@ -4546,6 +4547,9 @@ "yourFundsMayBeAtRisk": { "message": "Your funds may be at risk" }, + "yourNFTmayBeAtRisk": { + "message": "Your NFT may be at risk" + }, "yourPrivateSeedPhrase": { "message": "Your private Secret Recovery Phrase" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 60a9bb372..4abbc36a5 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Confirmar" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Está otorgando acceso a $1, incluidos los que pueda poseer en el futuro. La contraparte puede transferir los NFT de su billetera en cualquier momento sin preguntarle hasta que revoque esta aprobación. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "todos los NFT en este contrato" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Proceda con precaución." - }, "confirmPassword": { "message": "Confirmar contraseña" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 505b366fd..c9dfc3d15 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Confirmer" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Vous accordez l’accès à $1, y compris à ceux que vous pourriez posséder dans le futur. L’autre partie pourra transférer des NFT de votre portefeuille à tout moment sans demander votre consentement jusqu’à ce que vous révoquiez cette approbation. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "tous les NFT inclus dans ce contrat" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Soyez prudent." - }, "confirmPassword": { "message": "Confirmer le mot de passe" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index dcf55c173..f8b4b3d8b 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "पुष्टि करें" }, - "confirmPageDialogSetApprovalForAll": { - "message": "आप $1 तक ऐक्सेस प्रदान कर रहे हैं, इसमें वह भी शामिल है जिसे आप भविष्य में प्राप्त कर सकते हैं। दूसरी ओर की पार्टी आपसे पूछे बिना किसी भी समय आपके वॉलेट से NFTs ट्रान्स्फर कर सकती है, जब तक आप इस स्वीकृति को रद्द नहीं करते। $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "इस अनुबंध में सभी NFTs" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "सावधानी के साथ आगे बढ़ें।" - }, "confirmPassword": { "message": "पासवर्ड की पुष्टि करें" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index a7cfc0788..952c13746 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Konfirmasikan" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Anda memberikan akses ke $1, termasuk setiap akses yang Anda miliki di masa mendatang. Pihak lain dapat mentransfer NFT dari dompet Anda kapan saja tanpa meminta izin Anda sampai Anda membatalkan persetujuan ini. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "semua NFT dalam kontrak ini" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Lanjutkan dengan hati-hati." - }, "confirmPassword": { "message": "Konfirmasikan kata sandi" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index 0d3208f43..4102f1aa9 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -551,16 +551,6 @@ "confirm": { "message": "Conferma" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Stai concedendo l'accesso a $1, inclusi quelli che potresti possedere in futuro. L'ente a cui stai concedendo l'accesso potrà trasferire NFT dal tuo portafoglio in qualsiasi momento senza chiederti conferma fino a quando non revocherai questa approvazione. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "tutti gli NFT in questo contratto" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Procedi con cautela." - }, "confirmPassword": { "message": "Conferma Password" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index ebd9cfe7c..9d4c21e19 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "確認" }, - "confirmPageDialogSetApprovalForAll": { - "message": "今後取得する可能性のあるものも含め、$1 へのアクセスを許可しようとしています。相手はお客様がこの承認を取り消すまで、お客様のウォレットからいつでもお客様の許可なしに NFT を送ることができます。$2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "このコントラクトのすべての NFT" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "慎重に進めてください。" - }, "confirmPassword": { "message": "パスワードの確認" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 54fdd8d8f..0b90d9a73 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "확인" }, - "confirmPageDialogSetApprovalForAll": { - "message": "향후 소유할 수 있는 모든 $1에 대한 액세스를 허용하는 것입니다. 이 허용을 취소하지 않는 한, 상대방이 언제든지 허락 없이 지갑에서 NFT를 전송할 수 있습니다. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "이 계약의 모든 NFT" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "주의하여 진행하세요." - }, "confirmPassword": { "message": "비밀번호 확인" }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index b92986cd2..340b32b82 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Confirmar" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Você está concedendo acesso a $1, incluindo todos os que vier a adquirir. A parte na outra ponta pode transferir NFTs de sua carteira a qualquer momento, sem consultá-lo, até que você revogue essa aprovação. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "todos os NFTs neste contrato" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Prossiga com cautela." - }, "confirmPassword": { "message": "Confirmar Palavra-passe" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 2e79fe002..4cf73155a 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Подтвердить" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Вы предоставляете доступ к $1, включая все, что может принадлежать вам в будущем. Сторона на другом конце может перевести NFT с вашего кошелька в любое время, не спрашивая вас, пока вы не отзовете это одобрение. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "все NFT по этому контракту" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Действуйте с осторожностью." - }, "confirmPassword": { "message": "Подтвердить пароль" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 9ed06fc11..51d1688db 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Kumpirmahin" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Nagbibigay ka ng access sa $1, kabilang ang anumang maaaring maging pag-aari mo sa hinaharap. Ang partido sa kabilang panig ay maaaring maglipat ng mga NFT mula sa iyong wallet sa anumang oras nang hindi ka tinatanong hanggang sa bawiin mo ang pag-aprubang ito. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "lahat na NFT sa kontratang ito" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Magpatuloy nang may pag-iingat." - }, "confirmPassword": { "message": "Kumpirmahin ang password" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 57de8e9d6..e8ce06e76 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Onayla" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Gelecekte sahip olabileceğiniz her şey dahil olmak üzere şuna erişim izni veriyorsunuz: $1. Diğer uçtaki taraf siz bu onayı geri çekene kadar dilediği zaman size sormadan cüzdanınızdan NFT transfer edebilir. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "bu sözleşmedeki tüm NFT'ler" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Dikkatli bir şekilde devam edin." - }, "confirmPassword": { "message": "Şifreyi onayla" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 9f930e022..8d6e6a023 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "Xác nhận" }, - "confirmPageDialogSetApprovalForAll": { - "message": "Bạn đang cấp quyền truy cập vào $1, bao gồm bất cứ tài sản nào mà bạn có thể sở hữu trong tương lai. Bên được cấp quyền có thể chuyển NFT khỏi ví của bạn bất cứ lúc nào mà không cần hỏi bạn cho đến khi bạn thu hồi sự chấp thuận này. $2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "tất cả NFT trên hợp đồng này" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "Hãy tiến hành thận trọng." - }, "confirmPassword": { "message": "Xác nhận mật khẩu" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 47d6a2d92..541ba0db9 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -598,16 +598,6 @@ "confirm": { "message": "确认" }, - "confirmPageDialogSetApprovalForAll": { - "message": "您正在向$1授予访问权限，包括对您将来可能拥有的任何资产的访问权限。另一端的一方可以随时从您的钱包中转移NFT，无需询问您，直到您撤销此项批准。$2", - "description": "$1 and $2 are bolded translations 'confirmPageDialogSetApprovalForAllPlaceholder1' and 'confirmPageDialogSetApprovalForAllPlaceholder2'" - }, - "confirmPageDialogSetApprovalForAllPlaceholder1": { - "message": "此合约中的所有NFT" - }, - "confirmPageDialogSetApprovalForAllPlaceholder2": { - "message": "请谨慎行事。" - }, "confirmPassword": { "message": "确认密码" }, diff --git a/test/e2e/tests/collectibles.spec.js b/test/e2e/tests/collectibles.spec.js index 0a0d726e8..b00ee7100 100644 --- a/test/e2e/tests/collectibles.spec.js +++ b/test/e2e/tests/collectibles.spec.js @@ -178,19 +178,17 @@ describe('Collectibles', function () { const [func, params] = await driver.findElements( '.confirm-approve-content__data .confirm-approve-content__small-text', ); - const proceedWithCautionIsDisplayed = await driver.isElementPresent( - '.dialog--error', - ); assert.equal( await title.getText(), 'Allow access to and transfer of all your TestDappCollectibles?', ); assert.equal(await func.getText(), 'Function: SetApprovalForAll'); assert.equal(await params.getText(), 'Parameters: true'); - assert.equal(proceedWithCautionIsDisplayed, true); // Confirm enabling set approval for all await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement({ text: 'Approve', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); await driver.switchToWindow(extension); await driver.clickElement('[data-testid="home__activity-tab"]'); @@ -262,6 +260,8 @@ describe('Collectibles', function () { // Confirm disabling set approval for all await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement({ text: 'Approve', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); await driver.switchToWindow(extension); await driver.clickElement('[data-testid="home__activity-tab"]'); diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index 818e64b8e..f22a31e70 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -61,6 +61,7 @@ @import 'permissions-connect-header/index'; @import 'permissions-connect-permission-list/index'; @import 'recovery-phrase-reminder/index'; +@import 'set-approval-for-all-warning/index'; @import 'step-progress-bar/index.scss'; @import 'selected-account/index'; @import 'signature-request/index'; diff --git a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js index 7964f0645..d78e62f50 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js @@ -15,6 +15,14 @@ jest.mock('../../../store/actions', () => ({ addPollingTokenToAppState: jest.fn(), })); +jest.mock('../../../pages/swaps/swaps.util', () => { + const actual = jest.requireActual('../../../pages/swaps/swaps.util'); + return { + ...actual, + fetchTokenBalance: jest.fn(() => Promise.resolve()), + }; +}); + describe('Confirm Page Container Container Test', () => { const props = { title: 'Title', diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js index c43233232..952f21c73 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -29,6 +29,8 @@ import { TYPOGRAPHY } from '../../../helpers/constants/design-system'; import NetworkAccountBalanceHeader from '../network-account-balance-header/network-account-balance-header'; import DepositPopover from '../deposit-popover/deposit-popover'; +import { fetchTokenBalance } from '../../../pages/swaps/swaps.util'; +import SetApproveForAllWarning from '../set-approval-for-all-warning'; import EnableEIP1559V2Notice from './enableEIP1559V2-notice'; import { ConfirmPageContainerHeader, @@ -40,6 +42,7 @@ export default class ConfirmPageContainer extends Component { state = { showNicknamePopovers: false, setShowDepositPopover: false, + collectionBalance: 0, }; static contextTypes = { @@ -100,6 +103,8 @@ export default class ConfirmPageContainer extends Component { onCancelAll: PropTypes.func, onCancel: PropTypes.func, onSubmit: PropTypes.func, + onSetApprovalForAll: PropTypes.func, + showWarningModal: PropTypes.bool, disabled: PropTypes.bool, editingGas: PropTypes.bool, handleCloseEditGas: PropTypes.func, @@ -110,9 +115,23 @@ export default class ConfirmPageContainer extends Component { supportsEIP1559V2: PropTypes.bool, nativeCurrency: PropTypes.string, isBuyableChain: PropTypes.bool, - isApprovalOrRejection: PropTypes.bool, }; + async componentDidMount() { + const { tokenAddress, fromAddress, currentTransaction, assetStandard } = + this.props; + const isSetApproveForAll = + currentTransaction.type === + TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL; + + if (isSetApproveForAll && assetStandard === ERC721) { + const tokenBalance = await fetchTokenBalance(tokenAddress, fromAddress); + this.setState({ + collectionBalance: tokenBalance?.balance?.words?.[0] || 0, + }); + } + } + render() { const { showEdit, @@ -140,6 +159,8 @@ export default class ConfirmPageContainer extends Component { onCancelAll, onCancel, onSubmit, + onSetApprovalForAll, + showWarningModal, tokenAddress, nonce, unapprovedTxCount, @@ -167,7 +188,6 @@ export default class ConfirmPageContainer extends Component { nativeCurrency, isBuyableChain, networkIdentifier, - isApprovalOrRejection, ///: BEGIN:ONLY_INCLUDE_IN(flask) insightComponent, ///: END:ONLY_INCLUDE_IN @@ -351,33 +371,22 @@ export default class ConfirmPageContainer extends Component { )} - {isSetApproveForAll && isApprovalOrRejection && ( - - {/* - TODO: https://github.com/MetaMask/metamask-extension/issues/15745 - style={{ fontWeight: 'bold' }} because reset.scss removes font-weight from b. We should fix this. - */} - {t('confirmPageDialogSetApprovalForAll', [ - - {t('confirmPageDialogSetApprovalForAllPlaceholder1')} - , - - {t('confirmPageDialogSetApprovalForAllPlaceholder2')} - , - ])} - + {showWarningModal && ( + )} {contentComponent && ( { + const t = useI18nContext(); + + const footer = ( + + + + + ); + + return ( + + + + + {t('yourNFTmayBeAtRisk')} + + + + + + + {name} {` (${shortenAddress(senderAddress)})`} + + + {isERC721 && total && ( + {`${t('total')}: ${total}`} + )} + + + + {t('nftWarningContent', [ + + {t('nftWarningContentBold', [collectionName])} + , + + {t('nftWarningContentGrey')} + , + ])} + + + ); +}; + +SetApproveForAllWarning.propTypes = { + /** + * NFT collection name that is being approved + */ + collectionName: PropTypes.string, + /** + * Address of a current user that is approving collection + */ + senderAddress: PropTypes.string, + /** + * Name of a current user that is approving collection + */ + name: PropTypes.string, + /** + * Total number of items that are being approved + */ + total: PropTypes.string, + /** + * Is asset standard ERC721 + */ + isERC721: PropTypes.bool, + /** + * Function that approves collection + */ + onSubmit: PropTypes.func, + /** + * Function that rejects collection + */ + onCancel: PropTypes.func, +}; + +export default SetApproveForAllWarning; diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.stories.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.stories.js new file mode 100644 index 000000000..526a44e1a --- /dev/null +++ b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.stories.js @@ -0,0 +1,42 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import SetApproveForAllWarning from '.'; + +export default { + title: 'Components/App/SetApproveForAllWarning', + id: __filename, + argTypes: { + collectionName: { + control: 'text', + }, + name: { + control: 'text', + }, + senderAddress: { + control: 'text', + }, + total: { + control: 'text', + }, + isERC721: { + control: 'boolean', + }, + onSubmit: { + action: 'onSubmit', + }, + onCancel: { + action: 'onCancel', + }, + }, + args: { + collectionName: 'Test collection', + name: 'Account 1', + senderAddress: '0xee014609ef9e09776ac5fe00bdbfef57bcdefebb', + total: '6', + isERC721: true, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; 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 396b74956..36c6739fd 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 @@ -450,25 +450,17 @@ export default class ConfirmApproveContent extends Component { ); } - getTitleTokenDescription() { + getTokenName() { const { tokenId, assetName, - tokenAddress, - rpcPrefs, - chainId, assetStandard, tokenSymbol, isSetApproveForAll, - userAddress, } = this.props; const { t } = this.context; - const useBlockExplorer = - rpcPrefs?.blockExplorerUrl || - [...TEST_CHAINS, CHAIN_IDS.MAINNET].includes(chainId); let titleTokenDescription = t('token'); - const tokenIdWrapped = tokenId ? ` (#${tokenId})` : ''; if ( assetStandard === ERC20 || (tokenSymbol && !tokenId && !isSetApproveForAll) @@ -486,33 +478,46 @@ export default class ConfirmApproveContent extends Component { } else { titleTokenDescription = t('nft'); } + } - if (useBlockExplorer) { - const blockExplorerLink = getTokenTrackerLink( - tokenAddress, - chainId, - null, - userAddress, - { - blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, - }, - ); - const blockExplorerElement = ( - <> - - {titleTokenDescription} - - {tokenIdWrapped && {tokenIdWrapped}} - - ); - return blockExplorerElement; - } + return titleTokenDescription; + } + + getTitleTokenDescription() { + const { tokenId, tokenAddress, rpcPrefs, chainId, userAddress } = + this.props; + const useBlockExplorer = + rpcPrefs?.blockExplorerUrl || + [...TEST_CHAINS, CHAIN_IDS.MAINNET].includes(chainId); + + const titleTokenDescription = this.getTokenName(); + const tokenIdWrapped = tokenId ? ` (#${tokenId})` : ''; + + if (useBlockExplorer) { + const blockExplorerLink = getTokenTrackerLink( + tokenAddress, + chainId, + null, + userAddress, + { + blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null, + }, + ); + const blockExplorerElement = ( + <> + + {titleTokenDescription} + + {tokenIdWrapped && {tokenIdWrapped}} + + ); + return blockExplorerElement; } return ( diff --git a/ui/pages/confirm-approve/confirm-approve.js b/ui/pages/confirm-approve/confirm-approve.js index f0f8bfab1..12295b3fa 100644 --- a/ui/pages/confirm-approve/confirm-approve.js +++ b/ui/pages/confirm-approve/confirm-approve.js @@ -218,6 +218,7 @@ export default function ConfirmApprove({ identiconAddress={toAddress} showAccountInHeader title={tokensText} + tokenAddress={tokenAddress} customTokenAmount={String(customPermissionAmount)} dappProposedTokenAmount={tokenAmount} currentTokenBalance={tokenBalance} diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js index adfd5cd68..1d3e9e133 100644 --- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js +++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js @@ -174,6 +174,7 @@ export default class ConfirmTransactionBase extends Component { ethGasPriceWarning: '', editingGas: false, userAcknowledgedGasMissing: false, + showWarningModal: false, ///: BEGIN:ONLY_INCLUDE_IN(flask) selectedInsightSnapId: this.props.insightSnaps[0]?.id, ///: END:ONLY_INCLUDE_IN @@ -973,6 +974,10 @@ export default class ConfirmTransactionBase extends Component { ); } + handleSetApprovalForAll() { + this.setState({ showWarningModal: true }); + } + renderTitleComponent() { const { title, hexTransactionAmount, txData } = this.props; @@ -1140,6 +1145,7 @@ export default class ConfirmTransactionBase extends Component { ethGasPriceWarning, editingGas, userAcknowledgedGasMissing, + showWarningModal, } = this.state; const { name } = methodData; @@ -1227,6 +1233,8 @@ export default class ConfirmTransactionBase extends Component { onCancelAll={() => this.handleCancelAll()} onCancel={() => this.handleCancel()} onSubmit={() => this.handleSubmit()} + onSetApprovalForAll={() => this.handleSetApprovalForAll()} + showWarningModal={showWarningModal} hideSenderToRecipient={hideSenderToRecipient} origin={txData.origin} ethGasPriceWarning={ethGasPriceWarning}