Skip to content

Commit ea589a6

Browse files
albertolivealbertolive
authored
[MMI] Update Modals (#20054)
1 parent 8e361b3 commit ea589a6

File tree

9 files changed

+180
-197
lines changed

9 files changed

+180
-197
lines changed

‎ui/components/institutional/custody-confirm-link-modal/__snapshots__/custody-confirm-link-modal.test.js.snap‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js‎

Lines changed: 77 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useContext } from 'react';
2+
import PropTypes from 'prop-types';
23
import { useSelector, useDispatch } from 'react-redux';
34
import { MetaMetricsContext } from '../../../contexts/metametrics';
45
import {
@@ -9,28 +10,34 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
910
import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
1011
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
1112
import { mmiActionsFactory } from '../../../store/institutional/institution-background';
12-
import { hideModal, setSelectedAddress } from '../../../store/actions';
13+
import { setSelectedAddress } from '../../../store/actions';
1314
import { getMetaMaskAccountsRaw } from '../../../selectors';
1415
import {
1516
getMMIAddressFromModalOrAddress,
1617
getCustodyAccountDetails,
1718
getMMIConfiguration,
1819
} from '../../../selectors/institutional/selectors';
19-
import Box from '../../ui/box/box';
2020
import {
2121
AlignItems,
22-
DISPLAY,
23-
FLEX_DIRECTION,
24-
FontWeight,
22+
Display,
23+
FlexDirection,
2524
JustifyContent,
2625
TextAlign,
2726
TextColor,
2827
TextVariant,
2928
} from '../../../helpers/constants/design-system';
30-
import { Button, BUTTON_VARIANT } from '../../component-library';
31-
import { Text } from '../../component-library/text/deprecated';
29+
import {
30+
Button,
31+
BUTTON_VARIANT,
32+
Modal,
33+
ModalHeader,
34+
ModalContent,
35+
ModalOverlay,
36+
Text,
37+
Box,
38+
} from '../../component-library';
3239

33-
const CustodyConfirmLink = () => {
40+
const CustodyConfirmLink = ({ hideModal }) => {
3441
const t = useI18nContext();
3542
const dispatch = useDispatch();
3643
const mmiActions = mmiActionsFactory();
@@ -70,67 +77,70 @@ const CustodyConfirmLink = () => {
7077
};
7178

7279
return (
73-
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
74-
{iconUrl ? (
75-
<Box
76-
display={DISPLAY.FLEX}
77-
alignItems={AlignItems.center}
78-
justifyContent={JustifyContent.center}
79-
paddingTop={5}
80-
>
81-
<img
82-
className="custody-confirm-link__img"
83-
src="/images/logo/mmi-logo.svg"
84-
alt="MMI logo"
85-
/>
86-
{'>'}
87-
<img
88-
className="custody-confirm-link__img"
89-
src={iconUrl}
90-
alt={custodianName}
91-
/>
92-
</Box>
93-
) : (
94-
<Box
95-
display={DISPLAY.FLEX}
96-
alignItems={AlignItems.center}
97-
justifyContent={JustifyContent.center}
98-
paddingTop={5}
99-
>
100-
<span>{custodianName}</span>
80+
<Modal isOpen onClose={hideModal}>
81+
<ModalOverlay />
82+
<ModalContent>
83+
<ModalHeader onClose={hideModal}>{t('awaitingApproval')}</ModalHeader>
84+
<Box display={Display.Flex} flexDirection={FlexDirection.Column}>
85+
{iconUrl ? (
86+
<Box
87+
display={Display.Flex}
88+
alignItems={AlignItems.center}
89+
justifyContent={JustifyContent.center}
90+
paddingTop={5}
91+
>
92+
<img
93+
className="custody-confirm-link__img"
94+
src="/images/logo/mmi-logo.svg"
95+
alt="MMI logo"
96+
/>
97+
{'>'}
98+
<img
99+
className="custody-confirm-link__img"
100+
src={iconUrl}
101+
alt={custodianName}
102+
/>
103+
</Box>
104+
) : (
105+
<Box
106+
display={Display.Flex}
107+
alignItems={AlignItems.center}
108+
justifyContent={JustifyContent.center}
109+
paddingTop={5}
110+
>
111+
<span>{custodianName}</span>
112+
</Box>
113+
)}
114+
<Text
115+
as="p"
116+
paddingTop={4}
117+
paddingRight={5}
118+
paddingLeft={5}
119+
paddingBottom={10}
120+
textAlign={TextAlign.Center}
121+
color={TextColor.textDefault}
122+
variant={TextVariant.bodySm}
123+
className="custody-confirm-link__description"
124+
>
125+
{text || t('custodyDeeplinkDescription', [displayName])}
126+
</Text>
127+
<Button
128+
data-testid="custody-confirm-link__btn"
129+
variant={BUTTON_VARIANT.PRIMARY}
130+
className="custody-confirm-link__btn"
131+
onClick={onClick}
132+
>
133+
{action ||
134+
(action ? t('openCustodianApp', [displayName]) : t('close'))}
135+
</Button>
101136
</Box>
102-
)}
103-
<Text
104-
as="h4"
105-
paddingTop={4}
106-
variant={TextVariant.headingLg}
107-
textAlign={TextAlign.Center}
108-
fontWeight={FontWeight.bold}
109-
>
110-
{t('awaitingApproval')}
111-
</Text>
112-
<Text
113-
as="p"
114-
paddingTop={4}
115-
paddingRight={5}
116-
paddingLeft={5}
117-
paddingBottom={10}
118-
textAlign={TextAlign.Center}
119-
color={TextColor.textDefault}
120-
variant={TextVariant.bodySm}
121-
className="custody-confirm-link__description"
122-
>
123-
{text || t('custodyDeeplinkDescription', [displayName])}
124-
</Text>
125-
<Button
126-
variant={BUTTON_VARIANT.PRIMARY}
127-
className="custody-confirm-link__btn"
128-
onClick={onClick}
129-
>
130-
{action || (action ? t('openCustodianApp', [displayName]) : t('close'))}
131-
</Button>
132-
</Box>
137+
</ModalContent>
138+
</Modal>
133139
);
134140
};
135141

142+
CustodyConfirmLink.propTypes = {
143+
hideModal: PropTypes.func.isRequired,
144+
};
145+
136146
export default withModalProps(CustodyConfirmLink);

‎ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,21 +81,15 @@ describe('Custody Confirm Link', () => {
8181

8282
it('tries to open new tab with deeplink URL', () => {
8383
global.platform = { openTab: jest.fn() };
84-
const { getByRole } = renderWithProvider(<CustodyConfirmLink />, store);
85-
fireEvent.click(getByRole('button'));
84+
const { getByTestId } = renderWithProvider(<CustodyConfirmLink />, store);
85+
fireEvent.click(getByTestId('custody-confirm-link__btn'));
8686
expect(global.platform.openTab).toHaveBeenCalledWith({
8787
url: 'test-url',
8888
});
8989
expect(mockedSetWaitForConfirmDeepLinkDialog).toHaveBeenCalledWith(false);
9090
expect(hideModal).toHaveBeenCalledTimes(1);
9191
});
9292

93-
it('should match snapshot', () => {
94-
const { container } = renderWithProvider(<CustodyConfirmLink />, store);
95-
96-
expect(container).toMatchSnapshot();
97-
});
98-
9993
it('shows custodian name when iconUrl is undefined', () => {
10094
const customMockStore = {
10195
...mockStore,

‎ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import {
1212
ModalContent,
1313
ModalHeader,
1414
ModalOverlay,
15+
Text,
1516
} from '../../component-library';
16-
import { Text } from '../../component-library/text/deprecated';
1717

1818
import {
1919
BlockSize,

‎ui/components/institutional/transaction-failed-modal/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from './transaction-failed';
1+
export { default } from './transaction-failed-modal';

‎ui/components/institutional/transaction-failed-modal/transaction-failed-modal.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { memo } from 'react';
2+
import PropTypes from 'prop-types';
3+
import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
4+
import { useI18nContext } from '../../../hooks/useI18nContext';
5+
import {
6+
AlignItems,
7+
BorderRadius,
8+
Display,
9+
FlexDirection,
10+
TextAlign,
11+
TextVariant,
12+
} from '../../../helpers/constants/design-system';
13+
import {
14+
Icon,
15+
IconName,
16+
IconSize,
17+
Text,
18+
Box,
19+
Modal,
20+
ModalContent,
21+
ModalHeader,
22+
ModalOverlay,
23+
Button,
24+
BUTTON_VARIANT,
25+
BUTTON_SIZES,
26+
} from '../../component-library';
27+
28+
const TransactionFailedModal = ({
29+
hideModal,
30+
closeNotification,
31+
operationFailed,
32+
errorMessage,
33+
}) => {
34+
const t = useI18nContext();
35+
36+
const handleSubmit = () => {
37+
if (closeNotification) {
38+
global.platform.closeCurrentWindow();
39+
}
40+
hideModal();
41+
};
42+
43+
return (
44+
<Modal isOpen onClose={hideModal}>
45+
<ModalOverlay />
46+
<ModalContent>
47+
<ModalHeader onClose={hideModal}>
48+
{operationFailed
49+
? `${t('operationFailed')}!`
50+
: `${t('transactionFailed')}!`}
51+
</ModalHeader>
52+
<Box
53+
display={Display.Flex}
54+
flexDirection={FlexDirection.Column}
55+
alignItems={AlignItems.center}
56+
paddingLeft={4}
57+
paddingRight={4}
58+
marginBottom={4}
59+
marginTop={4}
60+
style={{ flex: 1, overflowY: 'auto' }}
61+
>
62+
<Icon name={IconName.Warning} size={IconSize.Xl} />
63+
<Text
64+
textAlign={TextAlign.Center}
65+
variant={TextVariant.bodySm}
66+
paddingTop={4}
67+
paddingBottom={4}
68+
paddingLeft={4}
69+
paddingRight={4}
70+
marginTop={4}
71+
borderRadius={BorderRadius.MD}
72+
className="transaction-failed__description"
73+
>
74+
{errorMessage}
75+
</Text>
76+
</Box>
77+
<Box display={Display.Flex}>
78+
<Button
79+
block
80+
variant={BUTTON_VARIANT.PRIMARY}
81+
size={BUTTON_SIZES.LG}
82+
onClick={handleSubmit}
83+
>
84+
{t('ok')}
85+
</Button>
86+
</Box>
87+
</ModalContent>
88+
</Modal>
89+
);
90+
};
91+
92+
TransactionFailedModal.propTypes = {
93+
hideModal: PropTypes.func,
94+
errorMessage: PropTypes.string,
95+
closeNotification: PropTypes.bool,
96+
operationFailed: PropTypes.bool,
97+
};
98+
99+
export default withModalProps(memo(TransactionFailedModal));

‎ui/components/institutional/transaction-failed-modal/transaction-failed.stories.js‎ renamed to ‎ui/components/institutional/transaction-failed-modal/transaction-failed-modal.stories.js‎

File renamed without changes.

‎ui/components/institutional/transaction-failed-modal/transaction-failed.test.js‎ renamed to ‎ui/components/institutional/transaction-failed-modal/transaction-failed-modal.test.js‎

File renamed without changes.

0 commit comments

Comments
 (0)