From ea589a6e5ca423c45062f76a6952f8eef4490c6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Oliv=C3=A9?= Date: Mon, 17 Jul 2023 19:34:32 +0200 Subject: [PATCH] =?UTF-8?q?[MMI]=C2=A0Update=20Modals=20(#20054)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../custody-confirm-link-modal.test.js.snap | 40 ----- .../custody-confirm-link-modal.js | 144 ++++++++++-------- .../custody-confirm-link-modal.test.js | 10 +- .../interactive-replacement-token-modal.js | 2 +- .../transaction-failed-modal/index.js | 2 +- .../transaction-failed-modal.js | 99 ++++++++++++ ...js => transaction-failed-modal.stories.js} | 0 ...st.js => transaction-failed-modal.test.js} | 0 .../transaction-failed.js | 80 ---------- 9 files changed, 180 insertions(+), 197 deletions(-) delete mode 100644 ui/components/institutional/custody-confirm-link-modal/__snapshots__/custody-confirm-link-modal.test.js.snap create mode 100644 ui/components/institutional/transaction-failed-modal/transaction-failed-modal.js rename ui/components/institutional/transaction-failed-modal/{transaction-failed.stories.js => transaction-failed-modal.stories.js} (100%) rename ui/components/institutional/transaction-failed-modal/{transaction-failed.test.js => transaction-failed-modal.test.js} (100%) delete mode 100644 ui/components/institutional/transaction-failed-modal/transaction-failed.js diff --git a/ui/components/institutional/custody-confirm-link-modal/__snapshots__/custody-confirm-link-modal.test.js.snap b/ui/components/institutional/custody-confirm-link-modal/__snapshots__/custody-confirm-link-modal.test.js.snap deleted file mode 100644 index def7aa038..000000000 --- a/ui/components/institutional/custody-confirm-link-modal/__snapshots__/custody-confirm-link-modal.test.js.snap +++ /dev/null @@ -1,40 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Custody Confirm Link should match snapshot 1`] = ` -
-
-
- MMI logo - > - saturn-dev -
-

- Awaiting approval... -

-

- Approve the transaction in the Saturn Custody app. Once all required custody approvals have been performed the transaction will complete. Check your Saturn Custody app for status. -

- -
-
-`; diff --git a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js index f98b16dda..e7d0c4d5b 100644 --- a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js +++ b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.js @@ -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 { @@ -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(); @@ -70,67 +77,70 @@ const CustodyConfirmLink = () => { }; return ( - - {iconUrl ? ( - - MMI logo - {'>'} - {custodianName} + + + + {t('awaitingApproval')} + + {iconUrl ? ( + + MMI logo + {'>'} + {custodianName} + + ) : ( + + {custodianName} + + )} + + {text || t('custodyDeeplinkDescription', [displayName])} + + - ) : ( - - {custodianName} - - )} - - {t('awaitingApproval')} - - - {text || t('custodyDeeplinkDescription', [displayName])} - - - + + ); }; +CustodyConfirmLink.propTypes = { + hideModal: PropTypes.func.isRequired, +}; + export default withModalProps(CustodyConfirmLink); diff --git a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.js b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.js index a82ec7283..35c21d0e3 100644 --- a/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.js +++ b/ui/components/institutional/custody-confirm-link-modal/custody-confirm-link-modal.test.js @@ -81,8 +81,8 @@ describe('Custody Confirm Link', () => { it('tries to open new tab with deeplink URL', () => { global.platform = { openTab: jest.fn() }; - const { getByRole } = renderWithProvider(, store); - fireEvent.click(getByRole('button')); + const { getByTestId } = renderWithProvider(, store); + fireEvent.click(getByTestId('custody-confirm-link__btn')); expect(global.platform.openTab).toHaveBeenCalledWith({ url: 'test-url', }); @@ -90,12 +90,6 @@ describe('Custody Confirm Link', () => { expect(hideModal).toHaveBeenCalledTimes(1); }); - it('should match snapshot', () => { - const { container } = renderWithProvider(, store); - - expect(container).toMatchSnapshot(); - }); - it('shows custodian name when iconUrl is undefined', () => { const customMockStore = { ...mockStore, diff --git a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js index d9e1e98ce..232f4817f 100644 --- a/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js +++ b/ui/components/institutional/interactive-replacement-token-modal/interactive-replacement-token-modal.js @@ -12,8 +12,8 @@ import { ModalContent, ModalHeader, ModalOverlay, + Text, } from '../../component-library'; -import { Text } from '../../component-library/text/deprecated'; import { BlockSize, diff --git a/ui/components/institutional/transaction-failed-modal/index.js b/ui/components/institutional/transaction-failed-modal/index.js index 2f120e825..4bbc214c2 100644 --- a/ui/components/institutional/transaction-failed-modal/index.js +++ b/ui/components/institutional/transaction-failed-modal/index.js @@ -1 +1 @@ -export { default } from './transaction-failed'; +export { default } from './transaction-failed-modal'; diff --git a/ui/components/institutional/transaction-failed-modal/transaction-failed-modal.js b/ui/components/institutional/transaction-failed-modal/transaction-failed-modal.js new file mode 100644 index 000000000..2f4e9f48f --- /dev/null +++ b/ui/components/institutional/transaction-failed-modal/transaction-failed-modal.js @@ -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 ( + + + + + {operationFailed + ? `${t('operationFailed')}!` + : `${t('transactionFailed')}!`} + + + + + {errorMessage} + + + + + + + + ); +}; + +TransactionFailedModal.propTypes = { + hideModal: PropTypes.func, + errorMessage: PropTypes.string, + closeNotification: PropTypes.bool, + operationFailed: PropTypes.bool, +}; + +export default withModalProps(memo(TransactionFailedModal)); diff --git a/ui/components/institutional/transaction-failed-modal/transaction-failed.stories.js b/ui/components/institutional/transaction-failed-modal/transaction-failed-modal.stories.js similarity index 100% rename from ui/components/institutional/transaction-failed-modal/transaction-failed.stories.js rename to ui/components/institutional/transaction-failed-modal/transaction-failed-modal.stories.js diff --git a/ui/components/institutional/transaction-failed-modal/transaction-failed.test.js b/ui/components/institutional/transaction-failed-modal/transaction-failed-modal.test.js similarity index 100% rename from ui/components/institutional/transaction-failed-modal/transaction-failed.test.js rename to ui/components/institutional/transaction-failed-modal/transaction-failed-modal.test.js diff --git a/ui/components/institutional/transaction-failed-modal/transaction-failed.js b/ui/components/institutional/transaction-failed-modal/transaction-failed.js deleted file mode 100644 index 8c4188794..000000000 --- a/ui/components/institutional/transaction-failed-modal/transaction-failed.js +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import withModalProps from '../../../helpers/higher-order-components/with-modal-props'; -import { useI18nContext } from '../../../hooks/useI18nContext'; -import Modal from '../../app/modal'; -import Box from '../../ui/box/box'; -import { - AlignItems, - BorderRadius, - DISPLAY, - FLEX_DIRECTION, - FontWeight, - TextAlign, - TextVariant, -} from '../../../helpers/constants/design-system'; -import { Icon, IconName, IconSize } from '../../component-library'; -import { Text } from '../../component-library/text/deprecated'; - -const TransactionFailedModal = ({ - hideModal, - closeNotification, - operationFailed, - errorMessage, -}) => { - const t = useI18nContext(); - const handleSubmit = () => { - if (closeNotification) { - global.platform.closeCurrentWindow(); - } - hideModal(); - }; - - return ( - - - - - {operationFailed - ? `${t('operationFailed')}!` - : `${t('transactionFailed')}!`} - - - {errorMessage} - - - - ); -}; - -TransactionFailedModal.propTypes = { - hideModal: PropTypes.func, - errorMessage: PropTypes.string, - closeNotification: PropTypes.bool, - operationFailed: PropTypes.bool, -}; - -export default withModalProps(TransactionFailedModal);