Fix: add chain check in Delete Tx modal (#4656)

* Fix: add chain check in Delete Tx modal * Fix: increase network selector width
safe-global · Dec 18, 2024 · 8423515 · 8423515
1 parent 918b913
commit 8423515
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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">