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] Fix text selection bug in snap ui (#18719)

Browse Source 
* Fix text selection bug in snap ui

* Fix template mapping calls in other places

* Fix template mapping calls in snap-prompt
This commit is contained in:
David Drazic 2023-04-24 12:56:44 +02:00 committed by GitHub
parent ff96836871
commit 05dcff85a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import nanoid from 'nanoid';
import { isComponent } from '@metamask/snaps-ui'; import { isComponent } from '@metamask/snaps-ui';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer'; import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
@ -22,10 +21,12 @@ import { Copyable } from '../copyable';
import { DelineatorType } from '../../../../helpers/constants/flask'; import { DelineatorType } from '../../../../helpers/constants/flask';
export const UI_MAPPING = { export const UI_MAPPING = {
panel: (props) => ({ panel: (props, elementKey) => ({
element: 'Box', element: 'Box',
children: props.children.map((element) =>
// eslint-disable-next-line no-use-before-define // eslint-disable-next-line no-use-before-define
children: props.children.map(mapToTemplate), mapToTemplate(element, elementKey),
),
props: { props: {
display: DISPLAY.FLEX, display: DISPLAY.FLEX,
flexDirection: FLEX_DIRECTION.COLUMN, flexDirection: FLEX_DIRECTION.COLUMN,
@ -66,11 +67,12 @@ export const UI_MAPPING = {
}; };
// TODO: Stop exporting this when we remove the mapToTemplate hack in confirmation templates. // TODO: Stop exporting this when we remove the mapToTemplate hack in confirmation templates.
export const mapToTemplate = (data) => { export const mapToTemplate = (data, elementKeyIndex) => {
const { type } = data; const { type } = data;
const mapped = UI_MAPPING[type](data); elementKeyIndex.value += 1;
// TODO: We may want to have deterministic keys at some point const indexKey = `snap_ui_element_${type}__${elementKeyIndex.value}`;
return { ...mapped, key: nanoid() }; const mapped = UI_MAPPING[type](data, elementKeyIndex);
return { ...mapped, key: indexKey };
}; };
// Component that maps Snaps UI JSON format to MetaMask Template Renderer format // Component that maps Snaps UI JSON format to MetaMask Template Renderer format
@ -97,7 +99,8 @@ export const SnapUIRenderer = ({
); );
} }
const sections = mapToTemplate(data); const elementKeyIndex = { value: 0 };
const sections = mapToTemplate(data, elementKeyIndex);
return ( return (
<SnapDelineator snapName={snapName} type={delineatorType}> <SnapDelineator snapName={snapName} type={delineatorType}>

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

@ -6,6 +6,7 @@ function getValues(pendingApproval, t, actions) {
snapName, snapName,
requestData: { content }, requestData: { content },
} = pendingApproval; } = pendingApproval;
const elementKeyIndex = { value: 0 };
return { return {
content: [ content: [
@ -24,7 +25,7 @@ function getValues(pendingApproval, t, actions) {
snapName, snapName,
}, },
// TODO: Replace with SnapUIRenderer when we don't need to inject the input manually. // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
children: mapToTemplate(content), children: mapToTemplate(content, elementKeyIndex),
}, },
}, },
], ],

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

@ -6,6 +6,7 @@ function getValues(pendingApproval, t, actions) {
snapName, snapName,
requestData: { content }, requestData: { content },
} = pendingApproval; } = pendingApproval;
const elementKeyIndex = { value: 0 };
return { return {
content: [ content: [
@ -24,7 +25,7 @@ function getValues(pendingApproval, t, actions) {
snapName, snapName,
}, },
// TODO: Replace with SnapUIRenderer when we don't need to inject the input manually. // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
children: mapToTemplate(content), children: mapToTemplate(content, elementKeyIndex),
}, },
}, },
], ],

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

@ -7,6 +7,7 @@ function getValues(pendingApproval, t, actions, _history, setInputState) {
snapName, snapName,
requestData: { content, placeholder }, requestData: { content, placeholder },
} = pendingApproval; } = pendingApproval;
const elementKeyIndex = { value: 0 };
return { return {
content: [ content: [
@ -26,7 +27,7 @@ function getValues(pendingApproval, t, actions, _history, setInputState) {
}, },
children: [ children: [
// TODO: Replace with SnapUIRenderer when we don't need to inject the input manually. // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
mapToTemplate(content), mapToTemplate(content, elementKeyIndex),
{ {
element: 'div', element: 'div',
key: 'snap-prompt-container', key: 'snap-prompt-container',