NFT setApprovalForAll warning popover (#16195)

* NFT setApprovalForAll  warning popover

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

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": "Επιβεβαίωση Κωδικού Πρόσβασης"
   },

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

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

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

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": "पासवर्ड की पुष्टि करें"
   },

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

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

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": "パスワードの確認"
   },

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": "비밀번호 확인"
   },

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

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": "Подтвердить пароль"
   },

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

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

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

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": "确认密码"
   },

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"]');

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

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',

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 {
               <ErrorMessage errorKey={errorKey} />
             </div>
           )}
-          {isSetApproveForAll && isApprovalOrRejection && (
-            <Dialog type="error" className="confirm-page-container__dialog">
-              {/*
-                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', [
-                <b
-                  key="confirm-page-container__dialog-placeholder-1"
-                  style={{ fontWeight: 'bold' }}
-                >
-                  {t('confirmPageDialogSetApprovalForAllPlaceholder1')}
-                </b>,
-                <b
-                  key="confirm-page-container__dialog-placeholder-2"
-                  style={{ fontWeight: 'bold' }}
-                >
-                  {t('confirmPageDialogSetApprovalForAllPlaceholder2')}
-                </b>,
-              ])}
-            </Dialog>
+          {showWarningModal && (
+            <SetApproveForAllWarning
+              collectionName={title}
+              senderAddress={fromAddress}
+              name={fromName}
+              isERC721={assetStandard === ERC721}
+              total={this.state.collectionBalance}
+              onSubmit={onSubmit}
+              onCancel={onCancel}
+            />
           )}
           {contentComponent && (
             <PageContainerFooter
               onCancel={onCancel}
               cancelText={t('reject')}
-              onSubmit={onSubmit}
+              onSubmit={isSetApproveForAll ? onSetApprovalForAll : onSubmit}
               submitText={t('confirm')}
               submitButtonType={
                 isSetApproveForAll ? 'danger-primary' : 'primary'

ui/components/app/set-approval-for-all-warning/index.js

@@ -0,0 +1 @@
+export { default } from './set-approval-for-all-warning';

ui/components/app/set-approval-for-all-warning/index.scss

@@ -0,0 +1,26 @@
+.set-approval-for-all-warning {
+  &__content {
+    &__header {
+      border-bottom: 1px solid var(--color-border-muted);
+
+      &__warning-icon {
+        padding-top: 7px;
+        margin-right: 10px;
+        color: var(--color-error-default);
+      }
+    }
+
+    &__account {
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    &__bold {
+      color: var(--color-text-default);
+    }
+  }
+
+  &__footer {
+    width: 100%;
+    height: 100px;
+  }
+}

ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+import Popover from '../../ui/popover';
+import Box from '../../ui/box';
+import Button from '../../ui/button';
+import Typography from '../../ui/typography';
+import {
+  DISPLAY,
+  FLEX_DIRECTION,
+  FONT_WEIGHT,
+  JUSTIFY_CONTENT,
+  TYPOGRAPHY,
+  COLORS,
+} from '../../../helpers/constants/design-system';
+import Identicon from '../../ui/identicon';
+import { shortenAddress } from '../../../helpers/utils/util';
+
+const SetApproveForAllWarning = ({
+  collectionName,
+  senderAddress,
+  name,
+  total,
+  isERC721,
+  onSubmit,
+  onCancel,
+}) => {
+  const t = useI18nContext();
+
+  const footer = (
+    <Box
+      display={DISPLAY.FLEX}
+      flexDirection={FLEX_DIRECTION.COLUMN}
+      justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+      className="set-approval-for-all-warning__footer"
+    >
+      <Button
+        className="set-approval-for-all-warning__footer__approve-button"
+        type="danger-primary"
+        onClick={onSubmit}
+      >
+        {t('approveButtonText')}
+      </Button>
+      <Button
+        className="set-approval-for-all-warning__footer__cancel-button"
+        type="secondary"
+        onClick={onCancel}
+      >
+        {t('reject')}
+      </Button>
+    </Box>
+  );
+
+  return (
+    <Popover className="set-approval-for-all-warning__content" footer={footer}>
+      <Box
+        display={DISPLAY.FLEX}
+        flexDirection={FLEX_DIRECTION.ROW}
+        padding={4}
+        className="set-approval-for-all-warning__content__header"
+      >
+        <i className="fa fa-exclamation-triangle set-approval-for-all-warning__content__header__warning-icon" />
+        <Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
+          {t('yourNFTmayBeAtRisk')}
+        </Typography>
+      </Box>
+      <Box
+        display={DISPLAY.FLEX}
+        padding={4}
+        justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+        className="set-approval-for-all-warning__content__account"
+      >
+        <Box display={DISPLAY.FLEX}>
+          <Identicon address={senderAddress} diameter={32} />
+          <Typography
+            variant={TYPOGRAPHY.H5}
+            marginLeft={2}
+            className="set-approval-for-all-warning__content__account-name"
+          >
+            <b>{name}</b> {` (${shortenAddress(senderAddress)})`}
+          </Typography>
+        </Box>
+        {isERC721 && total && (
+          <Typography>{`${t('total')}: ${total}`}</Typography>
+        )}
+      </Box>
+
+      <Typography
+        color={COLORS.TEXT_ALTERNATIVE}
+        margin={4}
+        marginTop={4}
+        marginBottom={4}
+        variant={TYPOGRAPHY.H6}
+      >
+        {t('nftWarningContent', [
+          <strong
+            key="non_custodial_bold"
+            className="set-approval-for-all-warning__content__bold"
+          >
+            {t('nftWarningContentBold', [collectionName])}
+          </strong>,
+          <strong key="non_custodial_grey">
+            {t('nftWarningContentGrey')}
+          </strong>,
+        ])}
+      </Typography>
+    </Popover>
+  );
+};
+
+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;

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) => <SetApproveForAllWarning {...args} />;
+
+DefaultStory.storyName = 'Default';

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,6 +478,20 @@ export default class ConfirmApproveContent extends Component {
       } else {
         titleTokenDescription = t('nft');
       }
+    }
+
+    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(
@@ -513,7 +519,6 @@ export default class ConfirmApproveContent extends Component {
       );
       return blockExplorerElement;
     }
-    }
 
     return (
       <>

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}

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}