Skip to content

Commit

Permalink
[MMI] Update Modals (#20054)
Browse files Browse the repository at this point in the history
  • Loading branch information
albertolive authored Jul 17, 2023
1 parent 8e361b3 commit ea589a6
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 197 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { useSelector, useDispatch } from 'react-redux';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
Expand All @@ -9,28 +10,34 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
import { mmiActionsFactory } from '../../../store/institutional/institution-background';
import { hideModal, setSelectedAddress } from '../../../store/actions';
import { setSelectedAddress } from '../../../store/actions';
import { getMetaMaskAccountsRaw } from '../../../selectors';
import {
getMMIAddressFromModalOrAddress,
getCustodyAccountDetails,
getMMIConfiguration,
} from '../../../selectors/institutional/selectors';
import Box from '../../ui/box/box';
import {
AlignItems,
DISPLAY,
FLEX_DIRECTION,
FontWeight,
Display,
FlexDirection,
JustifyContent,
TextAlign,
TextColor,
TextVariant,
} from '../../../helpers/constants/design-system';
import { Button, BUTTON_VARIANT } from '../../component-library';
import { Text } from '../../component-library/text/deprecated';
import {
Button,
BUTTON_VARIANT,
Modal,
ModalHeader,
ModalContent,
ModalOverlay,
Text,
Box,
} from '../../component-library';

const CustodyConfirmLink = () => {
const CustodyConfirmLink = ({ hideModal }) => {
const t = useI18nContext();
const dispatch = useDispatch();
const mmiActions = mmiActionsFactory();
Expand Down Expand Up @@ -70,67 +77,70 @@ const CustodyConfirmLink = () => {
};

return (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
{iconUrl ? (
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
paddingTop={5}
>
<img
className="custody-confirm-link__img"
src="/images/logo/mmi-logo.svg"
alt="MMI logo"
/>
{'>'}
<img
className="custody-confirm-link__img"
src={iconUrl}
alt={custodianName}
/>
</Box>
) : (
<Box
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
paddingTop={5}
>
<span>{custodianName}</span>
<Modal isOpen onClose={hideModal}>
<ModalOverlay />
<ModalContent>
<ModalHeader onClose={hideModal}>{t('awaitingApproval')}</ModalHeader>
<Box display={Display.Flex} flexDirection={FlexDirection.Column}>
{iconUrl ? (
<Box
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
paddingTop={5}
>
<img
className="custody-confirm-link__img"
src="/images/logo/mmi-logo.svg"
alt="MMI logo"
/>
{'>'}
<img
className="custody-confirm-link__img"
src={iconUrl}
alt={custodianName}
/>
</Box>
) : (
<Box
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
paddingTop={5}
>
<span>{custodianName}</span>
</Box>
)}
<Text
as="p"
paddingTop={4}
paddingRight={5}
paddingLeft={5}
paddingBottom={10}
textAlign={TextAlign.Center}
color={TextColor.textDefault}
variant={TextVariant.bodySm}
className="custody-confirm-link__description"
>
{text || t('custodyDeeplinkDescription', [displayName])}
</Text>
<Button
data-testid="custody-confirm-link__btn"
variant={BUTTON_VARIANT.PRIMARY}
className="custody-confirm-link__btn"
onClick={onClick}
>
{action ||
(action ? t('openCustodianApp', [displayName]) : t('close'))}
</Button>
</Box>
)}
<Text
as="h4"
paddingTop={4}
variant={TextVariant.headingLg}
textAlign={TextAlign.Center}
fontWeight={FontWeight.bold}
>
{t('awaitingApproval')}
</Text>
<Text
as="p"
paddingTop={4}
paddingRight={5}
paddingLeft={5}
paddingBottom={10}
textAlign={TextAlign.Center}
color={TextColor.textDefault}
variant={TextVariant.bodySm}
className="custody-confirm-link__description"
>
{text || t('custodyDeeplinkDescription', [displayName])}
</Text>
<Button
variant={BUTTON_VARIANT.PRIMARY}
className="custody-confirm-link__btn"
onClick={onClick}
>
{action || (action ? t('openCustodianApp', [displayName]) : t('close'))}
</Button>
</Box>
</ModalContent>
</Modal>
);
};

CustodyConfirmLink.propTypes = {
hideModal: PropTypes.func.isRequired,
};

export default withModalProps(CustodyConfirmLink);
Original file line number Diff line number Diff line change
Expand Up @@ -81,21 +81,15 @@ describe('Custody Confirm Link', () => {

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

it('should match snapshot', () => {
const { container } = renderWithProvider(<CustodyConfirmLink />, store);

expect(container).toMatchSnapshot();
});

it('shows custodian name when iconUrl is undefined', () => {
const customMockStore = {
...mockStore,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import {
ModalContent,
ModalHeader,
ModalOverlay,
Text,
} from '../../component-library';
import { Text } from '../../component-library/text/deprecated';

import {
BlockSize,
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export { default } from './transaction-failed';
export { default } from './transaction-failed-modal';
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
AlignItems,
BorderRadius,
Display,
FlexDirection,
TextAlign,
TextVariant,
} from '../../../helpers/constants/design-system';
import {
Icon,
IconName,
IconSize,
Text,
Box,
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
Button,
BUTTON_VARIANT,
BUTTON_SIZES,
} from '../../component-library';

const TransactionFailedModal = ({
hideModal,
closeNotification,
operationFailed,
errorMessage,
}) => {
const t = useI18nContext();

const handleSubmit = () => {
if (closeNotification) {
global.platform.closeCurrentWindow();
}
hideModal();
};

return (
<Modal isOpen onClose={hideModal}>
<ModalOverlay />
<ModalContent>
<ModalHeader onClose={hideModal}>
{operationFailed
? `${t('operationFailed')}!`
: `${t('transactionFailed')}!`}
</ModalHeader>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
alignItems={AlignItems.center}
paddingLeft={4}
paddingRight={4}
marginBottom={4}
marginTop={4}
style={{ flex: 1, overflowY: 'auto' }}
>
<Icon name={IconName.Warning} size={IconSize.Xl} />
<Text
textAlign={TextAlign.Center}
variant={TextVariant.bodySm}
paddingTop={4}
paddingBottom={4}
paddingLeft={4}
paddingRight={4}
marginTop={4}
borderRadius={BorderRadius.MD}
className="transaction-failed__description"
>
{errorMessage}
</Text>
</Box>
<Box display={Display.Flex}>
<Button
block
variant={BUTTON_VARIANT.PRIMARY}
size={BUTTON_SIZES.LG}
onClick={handleSubmit}
>
{t('ok')}
</Button>
</Box>
</ModalContent>
</Modal>
);
};

TransactionFailedModal.propTypes = {
hideModal: PropTypes.func,
errorMessage: PropTypes.string,
closeNotification: PropTypes.bool,
operationFailed: PropTypes.bool,
};

export default withModalProps(memo(TransactionFailedModal));
Loading

0 comments on commit ea589a6

Please sign in to comment.