ConfirmPage: update UI for setApproveForAll transactions to better warn users of the allowances (#15512)

* ConfirmPage: setApproveForAll use danger-primary

* ConfirmPageContainer: add setApprovalForAll dialog
- https://consensys.slack.com/archives/GTQAGKY5V/p1660061693528129
- temp UI to add protections for user until new redesign is implemented

* ConfirmPageContainer: use px instead of rem

Co-authored-by: George Marshall <george.marshall@consensys.net>

* ConfirmPageContainer: update SetApprovalForAll msg

Co-authored-by: George Marshall <george.marshall@consensys.net>

app/_locales/en/messages.json

@@ -596,6 +596,9 @@
   "confirm": {
     "message": "Confirm"
   },
+  "confirmPageDialogSetApprovalForAll": {
+    "message": "By clicking approve, you are granting access to all of the NFTs you currently own on this contract and any NFTs on this contract you may acquire in the future until you revoke this approval. The party to whom you're granting approval will be able to transfer your NFTs from your wallet without further notice. Proceed with caution."
+  },
   "confirmPassword": {
     "message": "Confirm password"
   },

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -169,6 +169,10 @@ export default class ConfirmPageContainer extends Component {
     const networkName =
       NETWORK_TO_NAME_MAP[currentTransaction.chainId] || networkIdentifier;
 
+    const isSetApproveForAll =
+      currentTransaction.type ===
+      TRANSACTION_TYPES.TOKEN_METHOD_SET_APPROVAL_FOR_ALL;
+
     const { t } = this.context;
 
     return (
@@ -302,12 +306,20 @@ export default class ConfirmPageContainer extends Component {
               <ErrorMessage errorKey={errorKey} />
             </div>
           )}
+          {isSetApproveForAll && (
+            <Dialog type="error" className="confirm-page-container__dialog">
+              {t('confirmPageDialogSetApprovalForAll')}
+            </Dialog>
+          )}
           {contentComponent && (
             <PageContainerFooter
               onCancel={onCancel}
               cancelText={t('reject')}
               onSubmit={onSubmit}
               submitText={t('confirm')}
+              submitButtonType={
+                isSetApproveForAll ? 'danger-primary' : 'primary'
+              }
               disabled={disabled}
             >
               {unapprovedTxCount > 1 && (

ui/components/app/confirm-page-container/index.scss

@@ -3,6 +3,12 @@
 @import 'confirm-detail-row/index';
 @import 'confirm-page-container-navigation/index';
 
+.confirm-page-container {
+  &__dialog {
+    margin: 12px 16px;
+  }
+}
+
 .page-container {
   &__content-component-wrapper {
     height: 100%;