Wrong message on cancel button when taking an order

frontend/src/components/Dialogs/CancelOrder.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Button,
+} from '@mui/material';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onAccept: () => void;
+}
+
+const CancelOrderDialog = ({ open, onClose, onAccept }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t('Cancel the order?')}</DialogTitle>
+
+      <DialogContent>
+        <DialogContentText>
+          {t(
+            'If the order is cancelled now but you already tried to pay the invoice, you might loose your bond.',
+          )}
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          onClick={() => {
+            onClose();
+          }}
+        >
+          {t('Back')}
+        </Button>
+        <Button onClick={onAccept}>{t('Confirm cancellation')}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CancelOrderDialog;

frontend/src/components/TradeBox/CancelButton.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Tooltip } from '@mui/material';
 import { type Order } from '../../models';
 import { LoadingButton } from '@mui/lab';
+import CancelOrderDialog from '../Dialogs/CancelOrder';
 
 interface CancelButtonProps {
   order: Order | null;
@@ -20,6 +21,7 @@ const CancelButton = ({
   loading = false,
 }: CancelButtonProps): JSX.Element => {
   const { t } = useTranslation();
+  const [openCancelWarning, setOpenCancelWarning] = useState<boolean>(false);
 
   const showCancelButton =
     Boolean(order?.is_maker && [0, 1, 2].includes(order?.status)) ||
@@ -37,19 +39,21 @@ const CancelButton = ({
           enterTouchDelay={500}
           enterDelay={700}
           enterNextDelay={2000}
-          title={
-            noConfirmation
-              ? t('Cancel order and unlock bond instantly')
-              : t('Unilateral cancelation (bond at risk!)')
-          }
+          title={noConfirmation ? t('Cancel order') : t('Unilateral cancelation (bond at risk!)')}
         >
           <div>
             <LoadingButton
               size='small'
               loading={loading}
               variant='outlined'
               color='secondary'
-              onClick={noConfirmation ? onClickCancel : openCancelDialog}
+              onClick={
+                noConfirmation
+                  ? () => {
+                      setOpenCancelWarning(true);
+                    }
+                  : openCancelDialog
+              }
             >
               {t('Cancel')}
             </LoadingButton>
@@ -58,6 +62,13 @@ const CancelButton = ({
       ) : (
         <></>
       )}
+      <CancelOrderDialog
+        open={openCancelWarning}
+        onClose={() => {
+          setOpenCancelWarning(false);
+        }}
+        onAccept={onClickCancel}
+      />
       {showCollabCancelButton ? (
         <LoadingButton
           size='small'