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

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

@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import nanoid from 'nanoid';
import { isComponent } from '@metamask/snaps-ui';
import { useSelector } from 'react-redux';
import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
@ -22,10 +21,12 @@ import { Copyable } from '../copyable';
import { DelineatorType } from '../../../../helpers/constants/flask';
export const UI_MAPPING = {
panel: (props) => ({
panel: (props, elementKey) => ({
element: 'Box',
// eslint-disable-next-line no-use-before-define
children: props.children.map(mapToTemplate),
children: props.children.map((element) =>
// eslint-disable-next-line no-use-before-define
mapToTemplate(element, elementKey),
),
props: {
display: DISPLAY.FLEX,
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.
export const mapToTemplate = (data) => {
export const mapToTemplate = (data, elementKeyIndex) => {
const { type } = data;
const mapped = UI_MAPPING[type](data);
// TODO: We may want to have deterministic keys at some point
return { ...mapped, key: nanoid() };
elementKeyIndex.value += 1;
const indexKey = `snap_ui_element_${type}__${elementKeyIndex.value}`;
const mapped = UI_MAPPING[type](data, elementKeyIndex);
return { ...mapped, key: indexKey };
};
// 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 (
<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,
requestData: { content },
} = pendingApproval;
const elementKeyIndex = { value: 0 };
return {
content: [
@ -24,7 +25,7 @@ function getValues(pendingApproval, t, actions) {
snapName,
},
// 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,
requestData: { content },
} = pendingApproval;
const elementKeyIndex = { value: 0 };
return {
content: [
@ -24,7 +25,7 @@ function getValues(pendingApproval, t, actions) {
snapName,
},
// 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,
requestData: { content, placeholder },
} = pendingApproval;
const elementKeyIndex = { value: 0 };
return {
content: [
@ -26,7 +27,7 @@ function getValues(pendingApproval, t, actions, _history, setInputState) {
},
children: [
// TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
mapToTemplate(content),
mapToTemplate(content, elementKeyIndex),
{
element: 'div',
key: 'snap-prompt-container',