m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01: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 PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import { Button } from '../../component-library';
import Box from '../../ui/box';
import { import {
AlignItems, AlignItems,
DISPLAY, Display,
JustifyContent, JustifyContent,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics';
@ -15,6 +13,7 @@ import {
MetaMetricsEventKeyType, MetaMetricsEventKeyType,
MetaMetricsEventName, MetaMetricsEventName,
} from '../../../../shared/constants/metametrics'; } from '../../../../shared/constants/metametrics';
import { Button, Box } from '../../component-library';
const radius = 14; const radius = 14;
const strokeWidth = 2; const strokeWidth = 2;
@ -131,7 +130,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
</svg> </svg>
</Box> </Box>
<Box <Box
display={DISPLAY.FLEX} display={Display.Flex}
alignItems={AlignItems.center} alignItems={AlignItems.center}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
className="hold-to-reveal-button__lock-icon-container" className="hold-to-reveal-button__lock-icon-container"
@ -197,10 +196,10 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
return ( return (
<Button <Button
onMouseDown={onMouseDown} onPointerDown={onMouseDown} // allows for touch and mouse events
onMouseUp={onMouseUp} onPointerUp={onMouseUp} // allows for touch and mouse events
className="hold-to-reveal-button__button-hold" 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}> <Box className="hold-to-reveal-button__icon-container" marginRight={2}>
{renderPreCompleteContent()} {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'); const button = getByText('Hold to reveal SRP');
fireEvent.mouseDown(button); fireEvent.pointerDown(button);
const circleLocked = getByLabelText('hold to reveal circle locked'); const circleLocked = getByLabelText('hold to reveal circle locked');
fireEvent.transitionEnd(circleLocked); 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'); const holdButton = getByText('Hold to reveal Private Key');
expect(holdButton).toBeInTheDocument(); expect(holdButton).toBeInTheDocument();
fireEvent.mouseDown(holdButton); fireEvent.pointerDown(holdButton);
const circle = getByLabelText('hold to reveal circle locked'); const circle = getByLabelText('hold to reveal circle locked');
fireEvent.transitionEnd(circle); 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(); expect(holdButton).toBeDefined();
fireEvent.mouseUp(holdButton); fireEvent.pointerUp(holdButton);
expect(holdButton).toBeDefined(); expect(holdButton).toBeDefined();
}); });
@ -84,7 +84,7 @@ describe('Hold to Reveal Modal', () => {
const holdButton = getByText('Hold to reveal SRP'); const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('hold to reveal circle locked'); const circleLocked = queryByLabelText('hold to reveal circle locked');
fireEvent.mouseDown(holdButton); fireEvent.pointerDown(holdButton);
fireEvent.transitionEnd(circleLocked); fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('hold to reveal circle unlocked'); const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@ -92,7 +92,7 @@ describe('Hold to Reveal Modal', () => {
await waitFor(() => { await waitFor(() => {
expect(holdButton.firstChild).toHaveClass( 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(onLongPressStub).toHaveBeenCalled();
}); });
@ -164,7 +164,7 @@ describe('Hold to Reveal Modal', () => {
const holdButton = getByText('Hold to reveal SRP'); const holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('hold to reveal circle locked'); const circleLocked = queryByLabelText('hold to reveal circle locked');
fireEvent.mouseDown(holdButton); fireEvent.pointerDown(holdButton);
fireEvent.transitionEnd(circleLocked); fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('hold to reveal circle unlocked'); const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@ -172,7 +172,7 @@ describe('Hold to Reveal Modal', () => {
await waitFor(() => { await waitFor(() => {
expect(holdButton.firstChild).toHaveClass( 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(onLongPressStub).toHaveBeenCalled();
expect(hideModalStub).not.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 holdButton = getByText('Hold to reveal SRP');
const circleLocked = queryByLabelText('hold to reveal circle locked'); const circleLocked = queryByLabelText('hold to reveal circle locked');
fireEvent.mouseDown(holdButton); fireEvent.pointerDown(holdButton);
fireEvent.transitionEnd(circleLocked); fireEvent.transitionEnd(circleLocked);
const circleUnlocked = queryByLabelText('hold to reveal circle unlocked'); const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@ -224,7 +224,7 @@ describe('Reveal Seed Page', () => {
await waitFor(() => { await waitFor(() => {
expect(holdButton.firstChild).toHaveClass( 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. // tests that the mock srp is now shown.
expect(getByText('test srp')).toBeInTheDocument(); expect(getByText('test srp')).toBeInTheDocument();