From 85f260c22df12691f51a428f3763f94ec7ed447d Mon Sep 17 00:00:00 2001 From: Guillaume Roux Date: Tue, 20 Dec 2022 11:44:22 +0100 Subject: [PATCH] [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 --- app/scripts/metamask-controller.js | 6 +- .../app/flask/snap-ui-renderer/index.js | 2 +- .../snap-ui-renderer/snap-ui-renderer.js | 3 +- .../templates/flask/snap-alert/snap-alert.js | 50 ++--------- .../snap-confirmation/snap-confirmation.js | 87 ++++++++++--------- .../flask/snap-prompt/snap-prompt.js | 37 ++------ 6 files changed, 67 insertions(+), 118 deletions(-) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index cb3e50d10..d79e8c6c7 100644 --- a/app/scripts/metamask-controller.js +++ b/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( diff --git a/ui/components/app/flask/snap-ui-renderer/index.js b/ui/components/app/flask/snap-ui-renderer/index.js index 572ebe69a..05b15511a 100644 --- a/ui/components/app/flask/snap-ui-renderer/index.js +++ b/ui/components/app/flask/snap-ui-renderer/index.js @@ -1 +1 @@ -export { SnapUIRenderer } from './snap-ui-renderer'; +export { SnapUIRenderer, mapToTemplate } from './snap-ui-renderer'; diff --git a/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js index d44988299..ec1e91619 100644 --- a/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js +++ b/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 diff --git a/ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js b/ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js index ba6761b7b..0f7e53683 100644 --- a/ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js +++ b/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 { title, description, textAreaContent } = requestData; + const { + snapName, + requestData: { content }, + } = pendingApproval; return { content: [ @@ -19,46 +21,8 @@ function getValues(pendingApproval, t, actions) { props: { snapName, }, - children: [ - { - 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, - }, - }, - ] - : []), - ], + // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually. + children: mapToTemplate(content), }, }, ], diff --git a/ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js b/ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js index fc4e47214..410f29709 100644 --- a/ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js +++ b/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 { title, description, textAreaContent } = requestData; + const { + snapName, + requestData: { content, title, description, textAreaContent }, + } = pendingApproval; return { content: [ @@ -19,46 +22,50 @@ function getValues(pendingApproval, t, actions) { props: { snapName, }, - children: [ - { - element: 'Typography', - key: 'title', - children: title, - props: { - variant: TYPOGRAPHY.H3, - fontWeight: 'bold', - boxProps: { - marginBottom: 4, + // 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', + 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, + ...(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, - }, - }, - ] - : []), - ], + ] + : []), + ...(textAreaContent + ? [ + { + element: 'Copyable', + key: 'snap-dialog-content-text', + props: { + text: textAreaContent, + }, + }, + ] + : []), + ], }, }, ], diff --git a/ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js b/ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js index addbba614..416f95771 100644 --- a/ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js +++ b/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 { title, description, placeholder } = requestData; + const { + snapName, + requestData: { content, placeholder }, + } = pendingApproval; return { content: [ @@ -21,33 +23,8 @@ function getValues(pendingApproval, t, actions, _history, setInputState) { snapName, }, children: [ - { - 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, - }, - }, - }, - ] - : []), + // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually. + mapToTemplate(content), { element: 'div', key: 'snap-prompt-container',