fix: wip

ui/components/app/app-components.scss

@@ -77,10 +77,10 @@
 @import 'name/index';
 @import 'name/name-details/index';
 @import 'confirm/info/row/index';
+// @import 'transaction-failed-modal/index';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 @import '../institutional/interactive-replacement-token-notification/index';
 @import '../institutional/confirm-remove-jwt-modal/index';
 @import '../institutional/custody-confirm-link-modal/index';
-@import '../institutional/transaction-failed-modal/index';
 ///: END:ONLY_INCLUDE_IF
 @import 'snaps/snap-insight/index';

ui/components/app/modals/index.scss

@@ -7,10 +7,10 @@
 @import 'transaction-confirmed/index';
 @import 'customize-nonce/index';
 @import 'convert-token-to-nft-modal/index';
+@import 'transaction-failed-modal/index';
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 @import '../../institutional/confirm-remove-jwt-modal/index';
 @import '../../institutional/custody-confirm-link-modal/index';
-@import '../../institutional/transaction-failed-modal/index';
 ///: END:ONLY_INCLUDE_IF
 
 .modal {

ui/components/app/modals/modal.js

@@ -16,8 +16,8 @@ import { mmiActionsFactory } from '../../../store/institutional/institution-back
 import ConfirmRemoveJWT from '../../institutional/confirm-remove-jwt-modal';
 import CustodyConfirmLink from '../../institutional/custody-confirm-link-modal';
 import InteractiveReplacementTokenModal from '../../institutional/interactive-replacement-token-modal';
-import TransactionFailed from '../../institutional/transaction-failed-modal';
 ///: END:ONLY_INCLUDE_IF
+import TransactionFailed from './transaction-failed-modal';
 import HideTokenConfirmationModal from './hide-token-confirmation-modal';
 import QRScanner from './qr-scanner';
 
@@ -274,9 +274,9 @@ const MODALS = {
     },
   },
 
-  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
-  CONFIRM_REMOVE_JWT: {
-    contents: <ConfirmRemoveJWT />,
+  TRANSACTION_FAILED: {
+    disableBackdropClick: true,
+    contents: <TransactionFailed />,
     mobileModalStyle: {
       ...modalContainerMobileStyle,
     },
@@ -288,9 +288,9 @@ const MODALS = {
     },
   },
 
-  TRANSACTION_FAILED: {
-    disableBackdropClick: true,
-    contents: <TransactionFailed />,
+  ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+  CONFIRM_REMOVE_JWT: {
+    contents: <ConfirmRemoveJWT />,
     mobileModalStyle: {
       ...modalContainerMobileStyle,
     },
@@ -422,6 +422,7 @@ class Modal extends Component {
 
   render() {
     const modal = MODALS[this.props.modalState.name || 'DEFAULT'];
+    debugger;
     const { contents: children, disableBackdropClick = false, testId } = modal;
     const modalStyle =
       modal[isMobileView() ? 'mobileModalStyle' : 'laptopModalStyle'];

ui/components/institutional/transaction-failed-modal/transaction-failed-modal.test.tsx → ui/components/app/modals/transaction-failed-modal/transaction-failed-modal.test.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import testData from '../../../../.storybook/test-data';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import testData from '../../../../../.storybook/test-data';
 import TransactionFailed from '.';
 
 const mockErrorMessage = 'Something went wrong';

ui/components/institutional/transaction-failed-modal/transaction-failed-modal.tsx → ui/components/app/modals/transaction-failed-modal/transaction-failed-modal.tsx

@@ -1,14 +1,14 @@
 import React, { memo } from 'react';
-import withModalProps from '../../../helpers/higher-order-components/with-modal-props';
-import { useI18nContext } from '../../../hooks/useI18nContext';
+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';
+} from '../../../../helpers/constants/design-system';
 import {
   Icon,
   IconName,
@@ -22,7 +22,7 @@ import {
   ButtonSize,
   ModalContent,
   ModalHeader,
-} from '../../component-library';
+} from '../../../component-library';
 
 type TransactionFailedModalProps = {
   hideModal: () => void;
@@ -37,6 +37,7 @@ const TransactionFailedModal: React.FC<TransactionFailedModalProps> = ({
   operationFailed,
   errorMessage,
 }) => {
+  debugger;
   const t = useI18nContext();
 
   const handleSubmit = () => {

ui/pages/confirmations/hooks/useTransactionFunctions.js

@@ -14,6 +14,7 @@ import {
 import {
   createCancelTransaction,
   createSpeedUpTransaction,
+  showModal,
   updateCustomSwapsEIP1559GasParams,
   updatePreviousGasParams,
   updateSwapsUserFeeLevel,
@@ -153,12 +154,23 @@ export const useTransactionFunctions = ({
     );
   }, [dispatch, estimatedBaseFee, transaction]);
 
-  const speedUpTransaction = useCallback(() => {
-    dispatch(
-      createSpeedUpTransaction(transaction.id, transaction.txParams, {
-        estimatedBaseFee,
-      }),
-    );
+  const speedUpTransaction = useCallback(async () => {
+    try {
+      await dispatch(
+        createSpeedUpTransaction(transaction.id, transaction.txParams, {
+          estimatedBaseFee,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        showModal({
+          name: 'TRANSACTION_FAILED',
+          errorMessage: error?.message,
+          closeNotification: true,
+        }),
+      );
+      console.log('================> error inside speedUpTransaction', error);
+    }
   }, [dispatch, estimatedBaseFee, transaction]);
 
   const updateTransactionToTenPercentIncreasedGasFee = useCallback(