[MMI] Update Modals (#20054)

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

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Custody Confirm Link should match snapshot 1`] = `
-<div>
-  <div
-    class="box box--display-flex box--flex-direction-column"
-  >
-    <div
-      class="box box--padding-top-5 box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
-    >
-      <img
-        alt="MMI logo"
-        class="custody-confirm-link__img"
-        src="/images/logo/mmi-logo.svg"
-      />
-      &gt;
-      <img
-        alt="saturn-dev"
-        class="custody-confirm-link__img"
-        src="https://saturn-custody-ui.dev.metamask-institutional.io/saturn.svg"
-      />
-    </div>
-    <h4
-      class="box mm-text mm-text--heading-lg mm-text--text-align-center box--padding-top-4 box--flex-direction-row box--color-text-default"
-    >
-      Awaiting approval...
-    </h4>
-    <p
-      class="box mm-text custody-confirm-link__description mm-text--body-sm mm-text--text-align-center box--padding-top-4 box--padding-right-5 box--padding-bottom-10 box--padding-left-5 box--flex-direction-row box--color-text-default"
-    >
-      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.
-    </p>
-    <button
-      class="box mm-text mm-button-base mm-button-base--size-md custody-confirm-link__btn mm-button-primary mm-text--body-md-medium box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
-    >
-      Close
-    </button>
-  </div>
-</div>
-`;

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,
+  Display,
-  FLEX_DIRECTION,
+  FlexDirection,
-  FontWeight,
   JustifyContent,
   TextAlign,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Button, BUTTON_VARIANT } from '../../component-library';
+import {
-import { Text } from '../../component-library/text/deprecated';
+  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 (
-    <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}>
+    <Modal isOpen onClose={hideModal}>
-      {iconUrl ? (
+      <ModalOverlay />
-        <Box
+      <ModalContent>
-          display={DISPLAY.FLEX}
+        <ModalHeader onClose={hideModal}>{t('awaitingApproval')}</ModalHeader>
-          alignItems={AlignItems.center}
+        <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
-          justifyContent={JustifyContent.center}
+          {iconUrl ? (
-          paddingTop={5}
+            <Box
-        >
+              display={Display.Flex}
-          <img
+              alignItems={AlignItems.center}
-            className="custody-confirm-link__img"
+              justifyContent={JustifyContent.center}
-            src="/images/logo/mmi-logo.svg"
+              paddingTop={5}
-            alt="MMI logo"
+            >
-          />
+              <img
-          {'>'}
+                className="custody-confirm-link__img"
-          <img
+                src="/images/logo/mmi-logo.svg"
-            className="custody-confirm-link__img"
+                alt="MMI logo"
-            src={iconUrl}
+              />
-            alt={custodianName}
+              {'>'}
-          />
+              <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>
-      ) : (
+      </ModalContent>
-        <Box
+    </Modal>
-          display={DISPLAY.FLEX}
-          alignItems={AlignItems.center}
-          justifyContent={JustifyContent.center}
-          paddingTop={5}
-        >
-          <span>{custodianName}</span>
-        </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>
   );
 };
 
+CustodyConfirmLink.propTypes = {
+  hideModal: PropTypes.func.isRequired,
+};
+
 export default withModalProps(CustodyConfirmLink);

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(<CustodyConfirmLink />, store);
+    const { getByTestId } = renderWithProvider(<CustodyConfirmLink />, store);
-    fireEvent.click(getByRole('button'));
+    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(<CustodyConfirmLink />, store);
-
-    expect(container).toMatchSnapshot();
-  });
-
   it('shows custodian name when iconUrl is undefined', () => {
     const customMockStore = {
       ...mockStore,

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,

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

@@ -1 +1 @@
-export { default } from './transaction-failed';
+export { default } from './transaction-failed-modal';

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 (
+    <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));

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

@@ -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 (
-    <Modal onSubmit={handleSubmit} submitText={t('ok')}>
-      <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
-        alignItems={AlignItems.center}
-        paddingLeft={4}
-        paddingRight={4}
-        style={{ flex: 1, overflowY: 'auto' }}
-      >
-        <Icon name={IconName.Warning} size={IconSize.Xl} />
-        <Text
-          as="h1"
-          variant={TextVariant.displayMd}
-          textAlign={TextAlign.Center}
-          fontWeight={FontWeight.Bold}
-          paddingTop={4}
-          paddingBottom={4}
-        >
-          {operationFailed
-            ? `${t('operationFailed')}!`
-            : `${t('transactionFailed')}!`}
-        </Text>
-        <Text
-          textAlign={TextAlign.Center}
-          variant={TextVariant.bodySm}
-          paddingTop={4}
-          paddingBottom={4}
-          paddingLeft={4}
-          paddingRight={4}
-          borderRadius={BorderRadius.MD}
-          className="transaction-failed__description"
-        >
-          {errorMessage}
-        </Text>
-      </Box>
-    </Modal>
-  );
-};
-
-TransactionFailedModal.propTypes = {
-  hideModal: PropTypes.func,
-  errorMessage: PropTypes.string,
-  closeNotification: PropTypes.bool,
-  operationFailed: PropTypes.bool,
-};
-
-export default withModalProps(TransactionFailedModal);