feat: integrate cancel pool functionality

src/app/dashboard/pool-market/[id]/components/CancelPool.tsx

@@ -0,0 +1,27 @@
+import useCancelPool from '@/app/hooks/useCancelPool';
+import { Button } from '@/components/ui/button';
+import { useAccount } from '@starknet-react/core';
+
+interface CancelPoolProps {
+  poolId: string;
+  creator: string;
+}
+
+export default function CancelPool({ poolId, creator }: CancelPoolProps) {
+  const { address } = useAccount();
+  const creatorAddress = creator as `0x${string}`;
+  const { cancelPool, cancelstatus } = useCancelPool(poolId);
+
+  if (!address || creatorAddress !== address) {
+    return null;
+  }
+
+  return (
+    <Button
+      onClick={cancelPool}
+      className="w-full bg-teal-500 py-6 hover:bg-teal-600 text-black rounded-lg"
+    >
+      {cancelstatus === "pending" ? "Canceling..." : "Cancel Pool"}
+    </Button>
+  );
+}

src/app/dashboard/pool-market/[id]/components/poolPrediction.tsx

@@ -4,9 +4,12 @@ import { truncate } from '@/lib/utils';
 import Image from 'next/image';
 import React, { useState } from 'react';
 import { FaSpinner } from 'react-icons/fa';
+import CancelPool from './CancelPool';
 
 interface Prediction {
-  name: string
+  name: string;
+  creator: string;
+  poolId: string;
   predictions: {
     options: string;
     odds: string;
@@ -17,14 +20,17 @@ interface Prediction {
   isParticipationLoading?: boolean;
 }
 
-export default function PoolPrediction({ predictions, name, isConnected, address, hasParticipatedAlready, isParticipationLoading }: Prediction) {
+export default function PoolPrediction({ predictions, name, creator, poolId, isConnected, address, hasParticipatedAlready, isParticipationLoading }: Prediction) {
   const [stake, setStake] = useState('0');
   const [selectedOption, setSelectedOption] = useState('Option 1');
   const [selectedOdds, setSelectedOdds] = useState('1.17');
   return (
     <div className="col-span-2 border border-gray-800 w-full h-fit  rounded-lg">
       <div className="flex flex-col gap-4 p-4">
-        <h2 className="text-lg font-bold text-center">Select Prediction</h2>
+        <div className="flex justify-between items-center">
+          <h2 className="text-lg font-bold">Select Prediction</h2>
+          <CancelPool poolId={poolId} creator={creator} />
+        </div>
         {predictions.map((prediction, index) => (
           <SelectPrediction
             className={`${
@@ -146,4 +152,4 @@ export function SelectPrediction({
       <div>{odds}</div>
     </Button>
   );
-}
+}

src/app/dashboard/pool-market/[id]/page.tsx

@@ -4,10 +4,7 @@ import { useParams } from "next/navigation";
 import { useContractFetch } from "@/app/hooks/useBlockchain";
 import { PREDIFI_ABI } from "@/app/abi/predifi_abi";
 import { GET_POOL } from "@/constants/functionNames";
-import {
-  PoolCardDetails,
-  PoolDescription,
-} from "./components/poolDetails";
+import { PoolCardDetails, PoolDescription } from "./components/poolDetails";
 import PoolPrediction from "./components/poolPrediction";
 import SocialsShare from "./components/socialsShare";
 import Comments from "@/components/ui/comments";
@@ -109,7 +106,6 @@ export default function Market() {
     );
   }
 
-
   return (
     <div className="bg-black text-white w-full min-h-screen">
       <Link href="/dashboard/pool-market">
@@ -120,7 +116,6 @@ export default function Market() {
 
       <div className="grid grid-cols-1 lg:grid-cols-5 gap-4 mt-8 rounded-md">
         <div className="col-span-3">
-          {/* Section 1 */}
           {readIsLoading ? (
             <Skeleton className="h-20 rounded-md mb-4" />
           ) : readError ? (
@@ -221,23 +216,27 @@ export default function Market() {
           </div>
         </div>
 
-        <PoolPrediction
-          name={poolDetails?.poolName ?? ""}
+        {poolDetails && (
+          <PoolPrediction
+            name={poolDetails?.poolName ?? ""}
           isParticipationLoading={isUserParticipatedLoading}
           hasParticipatedAlready={hasUserAlreadyParticipated}
           isConnected={isConnected}
           address={address}
-          predictions={[
-            {
-              options: poolDetails?.option1 || "Option 1",
-              odds: poolDetails?.totalStakeOption1.toString() ?? "",
-            },
-            {
-              options: poolDetails?.option2 || "Option 2",
-              odds: poolDetails?.totalStakeOption2.toString() ?? "",
-            },
-          ]}
-        />
+            creator={poolDetails.address}
+            poolId={poolId}
+            predictions={[
+              {
+                options: poolDetails?.option1 || "Option 1",
+                odds: poolDetails?.totalStakeOption1.toString() ?? "",
+              },
+              {
+                options: poolDetails?.option2 || "Option 2",
+                odds: poolDetails?.totalStakeOption2.toString() ?? "",
+              },
+            ]}
+          />
+        )}
       </div>
     </div>
   );

src/app/hooks/useCancelPool.ts

@@ -0,0 +1,50 @@
+import { ActionType } from "@/lib/types";
+import { myProvider } from "@/lib/utils";
+import { PREDIFI_CONTRACT_ADDRESS } from "@/static";
+import { useAccount } from "@starknet-react/core";
+import React, { useState } from "react";
+import toast from "react-hot-toast";
+import { cairo, CallData } from "starknet";
+
+export default function useCancelPool(poolId: string) {
+  const { account } = useAccount();
+
+  const [cancelstatus, setCancelStatus] = useState<ActionType>("idle");
+
+  const cancelPool = async () => {
+    if (!account) {
+      toast.error("Account not connected!");
+      return;
+    }
+    try {
+      setCancelStatus("pending");
+      const result = await account.execute({
+        contractAddress: PREDIFI_CONTRACT_ADDRESS,
+        entrypoint: "cancel_pool",
+        calldata: CallData.compile({
+          pool_id: cairo.uint256(poolId),
+        }),
+      });
+
+      const status = await myProvider.waitForTransaction(
+        result.transaction_hash
+      );
+
+      if (status.isSuccess()) {
+        toast.success("Success! pool cancelled successfully.");
+        setCancelStatus("success");
+      }
+    } catch (err) {
+      console.log(err);
+      setCancelStatus("error");
+      toast.error("Error cancelling pool .");
+    } finally {
+      setCancelStatus("idle");
+    }
+  };
+
+  return {
+    cancelstatus,
+    cancelPool,
+  };
+}

src/contexts/pool-creation-context.tsx

@@ -57,7 +57,7 @@ export function PoolCreationProvider({ children }: { children: ReactNode }) {
     }
     try {
       setIsCreatingPool(true);
-      toast("heeeyyy");
+
       const result = await account.execute({
         contractAddress: PREDIFI_CONTRACT_ADDRESS,
         entrypoint: "create_pool",
@@ -86,7 +86,6 @@ export function PoolCreationProvider({ children }: { children: ReactNode }) {
         result.transaction_hash
       );
 
-      console.log(status);
       if (status.isSuccess()) {
         toast.success("Success! 🎉 Your pool has been created.");
         setIsComplete(true);

src/lib/types.ts

@@ -78,3 +78,4 @@ export type PoolDetails = {
   poolType: string;
   status: string;
 };
+export type ActionType =  "idle" | "pending" | "success" | "error";