From 8423515f20b162cc8ff804a791aeee0f73edb1c4 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Wed, 18 Dec 2024 09:01:57 +0100
Subject: [PATCH] Fix: add chain check in Delete Tx modal (#4656)

* Fix: add chain check in Delete Tx modal

* Fix: increase network selector width
---
 .../common/NetworkSelector/index.tsx          |  2 +-
 .../tx-flow/flows/ReplaceTx/DeleteTxModal.tsx | 32 ++++++++++++-------
 .../tx-flow/flows/ReplaceTx/index.tsx         |  2 +-
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
index 8da8316fdd..4f494817b0 100644
--- a/src/components/common/NetworkSelector/index.tsx
+++ b/src/components/common/NetworkSelector/index.tsx
@@ -429,7 +429,7 @@ const NetworkSelector = ({
         sx: {
           '& .MuiPaper-root': {
             overflow: 'auto',
-            minWidth: '250px !important',
+            minWidth: '260px !important',
           },
           ...(isDarkMode
             ? {
diff --git a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
index 9bca66b02a..7e89c09efb 100644
--- a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
@@ -27,6 +27,8 @@ import { txDispatch, TxEvent } from '@/services/tx/txEvents'
 import { REJECT_TX_EVENTS } from '@/services/analytics/events/reject-tx'
 import { trackEvent } from '@/services/analytics'
 import { isWalletRejection } from '@/utils/wallets'
+import CheckWallet from '@/components/common/CheckWallet'
+import ChainSwitcher from '@/components/common/ChainSwitcher'
 
 type DeleteTxModalProps = {
   safeTxHash: string
@@ -122,6 +124,10 @@ const InternalDeleteTxModal = ({
           related to deleting a transaction off-chain.
         </Box>
 
+        <Box mt={2}>
+          <ChainSwitcher />
+        </Box>
+
         {error && (
           <Box mt={2}>
             <ErrorMessage error={error}>Error deleting transaction</ErrorMessage>
@@ -136,17 +142,21 @@ const InternalDeleteTxModal = ({
           Keep it
         </Button>
 
-        <Button
-          data-testid="delete-tx-btn"
-          size="small"
-          variant="contained"
-          color="primary"
-          onClick={onConfirm}
-          disabled={isLoading}
-          sx={{ minWidth: '122px', minHeight: '36px' }}
-        >
-          {isLoading ? <CircularProgress size={20} /> : 'Yes, delete'}
-        </Button>
+        <CheckWallet checkNetwork>
+          {(isOk) => (
+            <Button
+              data-testid="delete-tx-btn"
+              size="small"
+              variant="contained"
+              color="primary"
+              onClick={onConfirm}
+              disabled={!isOk || isLoading}
+              sx={{ minWidth: '122px', minHeight: '36px' }}
+            >
+              {isLoading ? <CircularProgress size={20} /> : 'Yes, delete'}
+            </Button>
+          )}
+        </CheckWallet>
       </DialogActions>
     </Dialog>
   )
diff --git a/src/components/tx-flow/flows/ReplaceTx/index.tsx b/src/components/tx-flow/flows/ReplaceTx/index.tsx
index 469dc6304b..cfeb969081 100644
--- a/src/components/tx-flow/flows/ReplaceTx/index.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/index.tsx
@@ -79,7 +79,7 @@ const DeleteTxButton = ({
       <Tooltip
         arrow
         placement="top"
-        title={isDeletable ? '' : 'You can only delete the last transaction in the queue or duplicates'}
+        title={isDeletable ? '' : 'You can only delete the last transaction in the queue, or a duplicate transaction.'}
       >
         <span style={{ width: '100%' }}>
           <Track {...REJECT_TX_EVENTS.DELETE_OFFCHAIN_BUTTON} as="div">