m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source 
* 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>
This commit is contained in:
Guillaume Roux 2022-12-20 11:44:22 +01:00 committed by GitHub
parent abe0204171
commit 85f260c22d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/scripts/metamask-controller.js
View File

@ -98,7 +98,7 @@ import {
} from '../../shared/constants/app'; } from '../../shared/constants/app';
import { EVENT, EVENT_NAMES } from '../../shared/constants/metametrics'; 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 { isEqualCaseInsensitive } from '../../shared/modules/string-utils';
import { parseStandardTokenTransactionData } from '../../shared/modules/transaction.utils'; import { parseStandardTokenTransactionData } from '../../shared/modules/transaction.utils';
import { STATIC_MAINNET_TOKEN_LIST } from '../../shared/constants/tokens'; 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, type: MESSAGE_TYPE.SNAP_DIALOG_CONFIRMATION,
requestData: confirmationData, requestData: confirmationData,
}), }),
showDialog: (origin, type, requestData) => showDialog: (origin, type, content, placeholder) =>
this.approvalController.addAndShowApprovalRequest({ this.approvalController.addAndShowApprovalRequest({
origin, origin,
type: SNAP_DIALOG_TYPES[type], type: SNAP_DIALOG_TYPES[type],
requestData, requestData: { content, placeholder },
}), }),
showNativeNotification: (origin, args) => showNativeNotification: (origin, args) =>
this.controllerMessenger.call( this.controllerMessenger.call(

2
ui/components/app/flask/snap-ui-renderer/index.js
View File

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

3
ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
View File

@ -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 { type } = data;
const mapped = UI_MAPPING[type](data); const mapped = UI_MAPPING[type](data);
// TODO: We may want to have deterministic keys at some point // TODO: We may want to have deterministic keys at some point

50
ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js
View File

@ -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) { function getValues(pendingApproval, t, actions) {
const { snapName, requestData } = pendingApproval; const {
const { title, description, textAreaContent } = requestData; snapName,
requestData: { content },
} = pendingApproval;
return { return {
content: [ content: [
@ -19,46 +21,8 @@ function getValues(pendingApproval, t, actions) {
props: { props: {
snapName, 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,
},
},
]
: []),
],
}, },
}, },
], ],

87
ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js
View File

@ -1,8 +1,11 @@
import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system'; import { TYPOGRAPHY } from '../../../../../helpers/constants/design-system';
import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
function getValues(pendingApproval, t, actions) { function getValues(pendingApproval, t, actions) {
const { snapName, requestData } = pendingApproval; const {
const { title, description, textAreaContent } = requestData; snapName,
requestData: { content, title, description, textAreaContent },
} = pendingApproval;
return { return {
content: [ content: [
@ -19,46 +22,50 @@ function getValues(pendingApproval, t, actions) {
props: { props: {
snapName, 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.
element: 'Typography', children: content
key: 'title', ? mapToTemplate(content)
children: title, : [
props: { {
variant: TYPOGRAPHY.H3, element: 'Typography',
fontWeight: 'bold', key: 'title',
boxProps: { children: title,
marginBottom: 4, props: {
variant: TYPOGRAPHY.H3,
fontWeight: 'bold',
boxProps: {
marginBottom: 4,
},
},
}, },
}, ...(description
}, ? [
...(description {
? [ element: 'Typography',
{ key: 'subtitle',
element: 'Typography', children: description,
key: 'subtitle', props: {
children: description, variant: TYPOGRAPHY.H6,
props: { boxProps: {
variant: TYPOGRAPHY.H6, marginBottom: 4,
boxProps: { },
marginBottom: 4, },
}, },
}, ]
}, : []),
] ...(textAreaContent
: []), ? [
...(textAreaContent {
? [ element: 'Copyable',
{ key: 'snap-dialog-content-text',
element: 'Copyable', props: {
key: 'snap-dialog-content-text', text: textAreaContent,
props: { },
text: textAreaContent, },
}, ]
}, : []),
] ],
: []),
],
}, },
}, },
], ],

37
ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js
View File

@ -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'; import { MESSAGE_TYPE } from '../../../../../../shared/constants/app';
function getValues(pendingApproval, t, actions, _history, setInputState) { function getValues(pendingApproval, t, actions, _history, setInputState) {
const { snapName, requestData } = pendingApproval; const {
const { title, description, placeholder } = requestData; snapName,
requestData: { content, placeholder },
} = pendingApproval;
return { return {
content: [ content: [
@ -21,33 +23,8 @@ function getValues(pendingApproval, t, actions, _history, setInputState) {
snapName, snapName,
}, },
children: [ 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', element: 'div',
key: 'snap-prompt-container', key: 'snap-prompt-container',