[FLASK] Use custom UI for dialogs (#16973)

* update dialog templates to use custom UI

* add TODO comments

* Fix showDialog hook and destructuring

* Regen LavaMoat policies

* Re-add legacy snap confirmation for now

* Fix circular dependency issue

* Revert change to token-util

* Fix lint

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>

app/scripts/metamask-controller.js

@@ -98,7 +98,7 @@ import {
 } from '../../shared/constants/app';
 import { EVENT, EVENT_NAMES } from '../../shared/constants/metametrics';
 
-import { getTokenIdParam } from '../../ui/helpers/utils/token-util';
+import { getTokenIdParam } from '../../shared/lib/token-util';
 import { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
 import { parseStandardTokenTransactionData } from '../../shared/modules/transaction.utils';
 import { STATIC_MAINNET_TOKEN_LIST } from '../../shared/constants/tokens';
@@ -1260,11 +1260,11 @@ export default class MetamaskController extends EventEmitter {
             type: MESSAGE_TYPE.SNAP_DIALOG_CONFIRMATION,
             requestData: confirmationData,
           }),
-        showDialog: (origin, type, requestData) =>
+        showDialog: (origin, type, content, placeholder) =>
           this.approvalController.addAndShowApprovalRequest({
             origin,
             type: SNAP_DIALOG_TYPES[type],
-            requestData,
+            requestData: { content, placeholder },
           }),
         showNativeNotification: (origin, args) =>
           this.controllerMessenger.call(

ui/components/app/flask/snap-ui-renderer/index.js

@@ -1 +1 @@
-export { SnapUIRenderer } from './snap-ui-renderer';
+export { SnapUIRenderer, mapToTemplate } from './snap-ui-renderer';

ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js

@@ -58,7 +58,8 @@ export const UI_MAPPING = {
   }),
 };
 
-const mapToTemplate = (data) => {
+// TODO: Stop exporting this when we remove the mapToTemplate hack in confirmation templates.
+export const mapToTemplate = (data) => {
   const { type } = data;
   const mapped = UI_MAPPING[type](data);
   // TODO: We may want to have deterministic keys at some point

ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js

@@ -1,8 +1,10 @@
-import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
+import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
 
 function getValues(pendingApproval, t, actions) {
-  const { snapName, requestData } = pendingApproval;
+  const {
-  const { title, description, textAreaContent } = requestData;
+    snapName,
+    requestData: { content },
+  } = pendingApproval;
 
   return {
     content: [
@@ -19,46 +21,8 @@ function getValues(pendingApproval, t, actions) {
           props: {
             snapName,
           },
-          children: [
+          // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
-            {
+          children: mapToTemplate(content),
-              element: 'Typography',
-              key: 'title',
-              children: title,
-              props: {
-                variant: TYPOGRAPHY.H3,
-                fontWeight: 'bold',
-                boxProps: {
-                  marginBottom: 4,
-                },
-              },
-            },
-            ...(description
-              ? [
-                  {
-                    element: 'Typography',
-                    key: 'subtitle',
-                    children: description,
-                    props: {
-                      variant: TYPOGRAPHY.H6,
-                      boxProps: {
-                        marginBottom: 4,
-                      },
-                    },
-                  },
-                ]
-              : []),
-            ...(textAreaContent
-              ? [
-                  {
-                    element: 'Copyable',
-                    key: 'snap-dialog-content-text',
-                    props: {
-                      text: textAreaContent,
-                    },
-                  },
-                ]
-              : []),
-          ],
         },
       },
     ],

ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js

@@ -1,8 +1,11 @@
 import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
+import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
 
 function getValues(pendingApproval, t, actions) {
-  const { snapName, requestData } = pendingApproval;
+  const {
-  const { title, description, textAreaContent } = requestData;
+    snapName,
+    requestData: { content, title, description, textAreaContent },
+  } = pendingApproval;
 
   return {
     content: [
@@ -19,7 +22,11 @@ function getValues(pendingApproval, t, actions) {
           props: {
             snapName,
           },
-          children: [
+          // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
+          // TODO: Remove ternary once snap_confirm has been removed.
+          children: content
+            ? mapToTemplate(content)
+            : [
                 {
                   element: 'Typography',
                   key: 'title',

ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js

@@ -1,9 +1,11 @@
-import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
+import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
 import { MESSAGE_TYPE } from '../../../../../../shared/constants/app';
 
 function getValues(pendingApproval, t, actions, _history, setInputState) {
-  const { snapName, requestData } = pendingApproval;
+  const {
-  const { title, description, placeholder } = requestData;
+    snapName,
+    requestData: { content, placeholder },
+  } = pendingApproval;
 
   return {
     content: [
@@ -21,33 +23,8 @@ function getValues(pendingApproval, t, actions, _history, setInputState) {
             snapName,
           },
           children: [
-            {
+            // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
-              element: 'Typography',
+            mapToTemplate(content),
-              key: 'title',
-              children: title,
-              props: {
-                variant: TYPOGRAPHY.H3,
-                fontWeight: 'bold',
-                boxProps: {
-                  marginBottom: 4,
-                },
-              },
-            },
-            ...(description
-              ? [
-                  {
-                    element: 'Typography',
-                    key: 'subtitle',
-                    children: description,
-                    props: {
-                      variant: TYPOGRAPHY.H6,
-                      boxProps: {
-                        marginBottom: 4,
-                      },
-                    },
-                  },
-                ]
-              : []),
             {
               element: 'div',
               key: 'snap-prompt-container',