m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 03:12:42 +02:00
Code

Fix hold to reveal button on mobile browsers (#19847)

Browse Source 
* Replacing MouseDown/Up events with PointerDown/Up so works on mobile browsers

* More test updates

* More test updates
This commit is contained in:
George Marshall 2023-06-30 14:11:29 -07:00 committed by GitHub
parent a41219ceb8
commit 7c014896e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
View File

@ -2,11 +2,9 @@ import React, { useCallback, useContext, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { I18nContext } from '../../../contexts/i18n';
import { Button } from '../../component-library';
import Box from '../../ui/box';
import {
AlignItems,
DISPLAY,
Display,
JustifyContent,
} from '../../../helpers/constants/design-system';
import { MetaMetricsContext } from '../../../contexts/metametrics';
@ -15,6 +13,7 @@ import {
MetaMetricsEventKeyType,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { Button, Box } from '../../component-library';
const radius = 14;
const strokeWidth = 2;
@ -131,7 +130,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
</svg>
</Box>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className="hold-to-reveal-button__lock-icon-container"
@ -197,10 +196,10 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
return (
<Button
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
onPointerDown={onMouseDown} // allows for touch and mouse events
onPointerUp={onMouseUp} // allows for touch and mouse events
className="hold-to-reveal-button__button-hold"
textProps={{ display: DISPLAY.FLEX, alignItems: AlignItems.center }}
textProps={{ display: Display.Flex, alignItems: AlignItems.center }}
>
<Box className="hold-to-reveal-button__icon-container" marginRight={2}>
{renderPreCompleteContent()}

2
ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js
View File

@ -86,7 +86,7 @@ describe('HoldToRevealButton', () => {
const button = getByText('Hold to reveal SRP');
fireEvent.mouseDown(button);
fireEvent.pointerDown(button);
const circleLocked = getByLabelText('hold to reveal circle locked');
fireEvent.transitionEnd(circleLocked);

2
ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.test.js
View File

@ -114,7 +114,7 @@ describe('Export Private Key Modal', () => {
const holdButton = getByText('Hold to reveal Private Key');
expect(holdButton).toBeInTheDocument();
fireEvent.mouseDown(holdButton);
fireEvent.pointerDown(holdButton);
const circle = getByLabelText('hold to reveal circle locked');
fireEvent.transitionEnd(circle);

10
ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js
View File

@ -67,7 +67,7 @@ describe('Hold to Reveal Modal', () => {
expect(holdButton).toBeDefined();
fireEvent.mouseUp(holdButton);
fireEvent.pointerUp(holdButton);
expect(holdButton).toBeDefined();
});
@ -84,7 +84,7 @@ describe('Hold to Reveal Modal', () => {
const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('hold to reveal circle locked');
fireEvent.mouseDown(holdButton);
fireEvent.pointerDown(holdButton);
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@ -92,7 +92,7 @@ describe('Hold to Reveal Modal', () => {
await waitFor(() => {
expect(holdButton.firstChild).toHaveClass(
'box hold-to-reveal-button__icon-container box--flex-direction-row',
'hold-to-reveal-button__icon-container',
);
expect(onLongPressStub).toHaveBeenCalled();
});
@ -164,7 +164,7 @@ describe('Hold to Reveal Modal', () => {
const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('hold to reveal circle locked');
fireEvent.mouseDown(holdButton);
fireEvent.pointerDown(holdButton);
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@ -172,7 +172,7 @@ describe('Hold to Reveal Modal', () => {
await waitFor(() => {
expect(holdButton.firstChild).toHaveClass(
'box hold-to-reveal-button__icon-container box--flex-direction-row',
'hold-to-reveal-button__icon-container',
);
expect(onLongPressStub).toHaveBeenCalled();
expect(hideModalStub).not.toHaveBeenCalled();

4
ui/pages/keychains/reveal-seed.test.js
View File

@ -216,7 +216,7 @@ describe('Reveal Seed Page', () => {
const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('hold to reveal circle locked');
fireEvent.mouseDown(holdButton);
fireEvent.pointerDown(holdButton);
fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@ -224,7 +224,7 @@ describe('Reveal Seed Page', () => {
await waitFor(() => {
expect(holdButton.firstChild).toHaveClass(
'box hold-to-reveal-button__icon-container box--flex-direction-row',
'hold-to-reveal-button__icon-container',
);
// tests that the mock srp is now shown.
expect(getByText('test srp')).toBeInTheDocument();