[TOOL-4225] Dashboard: Show feedback on cancel transaction button click tool-4225 (#6812)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `CancelTransactionButton` component to use `useMutation` from `@tanstack/react-query` for handling transaction cancellation, replacing the previous notification handling with `toast` for success and error messages.

### Detailed summary
- Added `useMutation` from `@tanstack/react-query`.
- Removed `useTxNotifications` and its related logic.
- Implemented `cancelTransactionMutation` for handling the cancellation request.
- Replaced the old `onClickContinue` function with `cancelTransactions` to manage async mutation.
- Updated the button to use `cancelTransactions` and reflect loading state.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transaction-timeline.tsx

@@ -17,10 +17,11 @@ import {
   Stepper,
   useDisclosure,
 } from "@chakra-ui/react";
+import { useMutation } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { useTxNotifications } from "hooks/useTxNotifications";
 import { CheckIcon } from "lucide-react";
 import { useRef } from "react";
+import { toast } from "sonner";
 import { Button, FormLabel, Text } from "tw-components";
 
 interface TimelineStep {
@@ -188,14 +189,9 @@ const CancelTransactionButton = ({
   authToken: string;
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully sent a request to cancel the transaction",
-    "Failed to cancel transaction",
-  );
   const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-  const onClickContinue = async () => {
-    try {
+  const cancelTransactionMutation = useMutation({
+    mutationFn: async () => {
       const resp = await fetch(`${instanceUrl}transaction/cancel`, {
         method: "POST",
         headers: {
@@ -205,17 +201,24 @@ const CancelTransactionButton = ({
         },
         body: JSON.stringify({ queueId: transaction.queueId }),
       });
+
       if (!resp.ok) {
         const json = await resp.json();
         throw json.error?.message;
       }
-      onSuccess();
-    } catch (e) {
-      console.error("Cancelling transaction:", e);
-      onError(e);
-    }
+    },
+  });
 
-    onClose();
+  const cancelTransactions = async () => {
+    const promise = cancelTransactionMutation.mutateAsync();
+    toast.promise(promise, {
+      success: "Transaction cancelled successfully",
+      error: "Failed to cancel transaction",
+    });
+
+    promise.then(() => {
+      onClose();
+    });
   };
 
   return (
@@ -273,7 +276,11 @@ const CancelTransactionButton = ({
             >
               Close
             </Button>
-            <Button type="submit" colorScheme="red" onClick={onClickContinue}>
+            <Button
+              colorScheme="red"
+              onClick={cancelTransactions}
+              isLoading={cancelTransactionMutation.isPending}
+            >
               Cancel transaction
             </Button>
           </ModalFooter>