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

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 mapped = UI_MAPPING[type](data);
// 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) {
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),
},
},
],

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 { 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,
},
},
]
: []),
],
},
},
],

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