refactor: replace speed-up/cancel retry modal with error toasts

app/components/UI/Transactions/index.js

@@ -18,10 +18,10 @@ import { showAlert } from '../../../actions/alert';
 import ExtendedKeyringTypes from '../../../constants/keyringTypes';
 import { NO_RPC_BLOCK_EXPLORER, RPC } from '../../../constants/network';
 import Engine from '../../../core/Engine';
+import ToastService from '../../../core/ToastService/ToastService';
 import { getDeviceId } from '../../../core/Ledger/Ledger';
 import { isNonEvmChainId } from '../../../core/Multichain/utils';
 import NotificationManager from '../../../core/NotificationManager';
-import { TransactionError } from '../../../core/Transaction/TransactionError';
 import { collectibleContractsSelector } from '../../../reducers/collectibles';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { selectAccounts } from '../../../selectors/accountTrackerController';
@@ -65,10 +65,10 @@ import PriceChartContext, {
 } from '../AssetOverview/PriceChart/PriceChart.context';
 import withQRHardwareAwareness from '../QRHardware/withQRHardwareAwareness';
 import TransactionElement from '../TransactionElement';
-import RetryModal from './RetryModal';
 import TransactionsFooter from './TransactionsFooter';
 import { filterDuplicateOutgoingTransactions } from './utils';
 import { TabEmptyState } from '../../../component-library/components-temp/TabEmptyState';
+import { getTransactionUpdateErrorToastOptions } from '../../../util/confirmation/transactions';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -212,10 +212,8 @@ class Transactions extends PureComponent {
     refreshing: false,
     cancelIsOpen: false,
     speedUpIsOpen: false,
-    retryIsOpen: false,
     confirmDisabled: false,
     rpcBlockExplorer: undefined,
-    errorMsg: undefined,
     isQRHardwareAccount: false,
     isLedgerAccount: false,
   };
@@ -509,20 +507,26 @@ class Transactions extends PureComponent {
 
   handleSpeedUpTransactionFailure = (e) => {
     const speedUpTxId = this.speedUpTxId;
-    const message = e instanceof TransactionError ? e.message : undefined;
     Logger.error(e, { message: `speedUpTransaction failed `, speedUpTxId });
-    InteractionManager.runAfterInteractions(this.toggleRetry(message));
+    InteractionManager.runAfterInteractions(() => {
+      this.showTransactionUpdateErrorToast(e);
+    });
     this.setState({ speedUpIsOpen: false, cancelIsOpen: false });
   };
 
   handleCancelTransactionFailure = (e) => {
     const cancelTxId = this.cancelTxId;
-    const message = e instanceof TransactionError ? e.message : undefined;
     Logger.error(e, { message: `cancelTransaction failed `, cancelTxId });
-    InteractionManager.runAfterInteractions(this.toggleRetry(message));
+    InteractionManager.runAfterInteractions(() => {
+      this.showTransactionUpdateErrorToast(e);
+    });
     this.setState({ speedUpIsOpen: false, cancelIsOpen: false });
   };
 
+  showTransactionUpdateErrorToast = (error) => {
+    ToastService.showToast(getTransactionUpdateErrorToastOptions(error));
+  };
+
   speedUpTransaction = async (transactionObject) => {
     try {
       if (transactionObject?.error) {
@@ -664,28 +668,6 @@ class Transactions extends PureComponent {
     />
   );
 
-  toggleRetry = (errorMsg) =>
-    this.setState((state) => ({ retryIsOpen: !state.retryIsOpen, errorMsg }));
-
-  retry = () => {
-    this.setState((state) => ({
-      retryIsOpen: !state.retryIsOpen,
-      errorMsg: undefined,
-    }));
-
-    //If the exitsing TX id true then it is a speed up retry
-    if (this.speedUpTxId) {
-      InteractionManager.runAfterInteractions(() => {
-        this.onSpeedUpAction(true, this.existingTx);
-      });
-    }
-    if (this.cancelTxId) {
-      InteractionManager.runAfterInteractions(() => {
-        this.onCancelAction(true, this.existingTx);
-      });
-    }
-  };
-
   get footer() {
     const {
       chainId,
@@ -792,12 +774,6 @@ class Transactions extends PureComponent {
             ? this.renderLoader()
             : this.renderList()}
         </View>
-        <RetryModal
-          onCancelPress={() => this.toggleRetry(undefined)}
-          onConfirmPress={this.retry}
-          retryIsOpen={this.state.retryIsOpen}
-          errorMsg={this.state.errorMsg}
-        />
       </PriceChartProvider>
     );
   };

app/components/UI/Transactions/index.test.tsx

@@ -75,6 +75,14 @@ jest.mock('../../../core/Engine', () => ({
   },
 }));
 
+jest.mock('../../../core/ToastService/ToastService', () => ({
+  __esModule: true,
+  default: {
+    showToast: jest.fn(),
+    closeToast: jest.fn(),
+  },
+}));
+
 jest.mock('../../../util/Logger', () => ({
   error: jest.fn(),
 }));
@@ -91,11 +99,6 @@ jest.mock('../TransactionActionModal', () => ({
   default: () => null,
 }));
 
-jest.mock('./RetryModal', () => ({
-  __esModule: true,
-  default: () => null,
-}));
-
 // Mock PriceChartProvider and Context
 jest.mock('../AssetOverview/PriceChart/PriceChart.context', () => ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -323,19 +326,10 @@ describe('Transactions', () => {
       const mockState = {
         speedUpIsOpen: false,
         cancelIsOpen: false,
-        retryIsOpen: false,
-        errorMsg: null,
       };
 
       const newState = { ...mockState, speedUpIsOpen: true };
       expect(newState.speedUpIsOpen).toBe(true);
-
-      const errorState = {
-        ...mockState,
-        retryIsOpen: true,
-        errorMsg: 'Test error',
-      };
-      expect(errorState.errorMsg).toBe('Test error');
     });
 
     it('calculates gas prices', () => {
@@ -1582,39 +1576,6 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
     expect(mockOnScrollThroughContent).toHaveBeenCalledWith(100);
   });
 
-  it('should test toggleRetry method directly', () => {
-    instance.setState = jest.fn();
-
-    const errorMsg = 'Test error message';
-    instance.toggleRetry(errorMsg);
-
-    expect(instance.setState).toHaveBeenCalled();
-  });
-
-  it('should test retry method directly', () => {
-    instance.setState = jest.fn();
-    instance.onSpeedUpAction = jest.fn();
-    instance.onCancelAction = jest.fn();
-    instance.speedUpTxId = 'speed-up-tx';
-    instance.existingTx = { id: 'speed-up-tx' };
-
-    instance.retry();
-
-    // The retry method calls setState with a function, not an object
-    expect(instance.setState).toHaveBeenCalled();
-
-    // Test that the state function produces the expected result
-    const setStateCall = instance.setState.mock.calls[0][0];
-    const newState = setStateCall({
-      retryIsOpen: true,
-      errorMsg: 'test error',
-    });
-    expect(newState).toEqual({
-      retryIsOpen: false,
-      errorMsg: undefined,
-    });
-  });
-
   it('should test navigation patterns for coverage', () => {
     // Test non-EVM chain navigation
     const chainId = 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp';
@@ -2071,14 +2032,10 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
     };
     instance.state = {
       ready: true,
-      retryIsOpen: false,
-      errorMsg: null,
     };
     instance.props = { ...defaultTestProps, loading: false };
     instance.renderLoader = jest.fn();
     instance.renderList = jest.fn();
-    instance.toggleRetry = jest.fn();
-    instance.retry = jest.fn();
 
     const result = instance.render();
     expect(result).toBeDefined();
@@ -2286,35 +2243,4 @@ describe('UnconnectedTransactions Component Direct Method Testing', () => {
 
     expect(instance.signLedgerTransaction).toHaveBeenCalled();
   });
-
-  it('should test retry method with different scenarios', () => {
-    instance.setState = jest.fn();
-    instance.onSpeedUpAction = jest.fn();
-    instance.onCancelAction = jest.fn();
-
-    // Test retry with speedUpTxId
-    instance.speedUpTxId = 'speed-up-tx';
-    instance.cancelTxId = null;
-    instance.existingTx = { id: 'speed-up-tx' };
-
-    instance.retry();
-
-    expect(instance.setState).toHaveBeenCalled();
-
-    // Test retry with cancelTxId
-    instance.speedUpTxId = null;
-    instance.cancelTxId = 'cancel-tx';
-
-    instance.retry();
-
-    expect(instance.setState).toHaveBeenCalled();
-
-    // Test retry with neither speedUpTxId nor cancelTxId
-    instance.speedUpTxId = null;
-    instance.cancelTxId = null;
-
-    instance.retry();
-
-    expect(instance.setState).toHaveBeenCalled();
-  });
 });

app/components/Views/UnifiedTransactionsView/UnifiedTransactionsView.test.tsx

@@ -57,15 +57,12 @@ jest.mock('../../UI/Bridge/hooks/useBridgeHistoryItemBySrcTxHash', () => ({
 }));
 
 const mockDefaultUnifiedTxActionsReturn = {
-  retryIsOpen: false,
-  retryErrorMsg: '',
   speedUpIsOpen: false,
   cancelIsOpen: false,
   confirmDisabled: false,
   existingTx: null,
   speedUpTxId: null,
   cancelTxId: null,
-  toggleRetry: jest.fn(),
   onSpeedUpAction: jest.fn(),
   onCancelAction: jest.fn(),
   onSpeedUpCancelCompleted: jest.fn(),
@@ -151,7 +148,6 @@ jest.mock('../confirmations/components/modals/cancel-speedup-modal', () => {
   };
 });
 
-jest.mock('../../UI/Transactions/RetryModal', () => 'RetryModal');
 jest.mock(
   '../../UI/Transactions/TransactionsFooter',
   () => 'TransactionsFooter',

app/components/Views/UnifiedTransactionsView/UnifiedTransactionsView.tsx

@@ -49,7 +49,6 @@ import { useBridgeHistoryItemBySrcTxHash } from '../../UI/Bridge/hooks/useBridge
 import MultichainBridgeTransactionListItem from '../../UI/MultichainBridgeTransactionListItem';
 import MultichainTransactionListItem from '../../UI/MultichainTransactionListItem';
 import TransactionElement from '../../UI/TransactionElement';
-import RetryModal from '../../UI/Transactions/RetryModal';
 import { filterDuplicateOutgoingTransactions } from '../../UI/Transactions/utils';
 import TransactionsFooter from '../../UI/Transactions/TransactionsFooter';
 import MultichainTransactionsFooter from '../MultichainTransactionsView/MultichainTransactionsFooter';
@@ -545,15 +544,10 @@ const UnifiedTransactionsView = ({
 
   const [refreshing, setRefreshing] = useState(false);
   const {
-    retryIsOpen,
-    retryErrorMsg,
     speedUpIsOpen,
     cancelIsOpen,
     confirmDisabled,
     existingTx,
-    speedUpTxId,
-    cancelTxId,
-    toggleRetry,
     onSpeedUpAction,
     onCancelAction,
     onSpeedUpCancelCompleted,
@@ -701,16 +695,6 @@ const UnifiedTransactionsView = ({
           onClose={onSpeedUpCancelCompleted}
           confirmDisabled={confirmDisabled}
         />
-        <RetryModal
-          onCancelPress={() => toggleRetry(undefined)}
-          onConfirmPress={() => {
-            toggleRetry(undefined);
-            if (speedUpTxId) onSpeedUpAction(true, existingTx ?? undefined);
-            if (cancelTxId) onCancelAction(true, existingTx ?? undefined);
-          }}
-          retryIsOpen={retryIsOpen}
-          errorMsg={retryErrorMsg}
-        />
       </View>
     </PriceChartProvider>
   );