Integrate Voting/Betting

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

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import React, { useState } from 'react';
 import { FaSpinner } from 'react-icons/fa';
 import CancelPool from './CancelPool';
+import useVotePool from '@/app/hooks/useVotePool';
 
 interface Prediction {
   name: string;
@@ -18,12 +19,28 @@ interface Prediction {
   address?: string;
   hasParticipatedAlready?: boolean;
   isParticipationLoading?: boolean;
+  poolStatus?: string;
+  onVoteSuccess?: () => void;
 }
 
-export default function PoolPrediction({ predictions, name, creator, poolId, isConnected, address, hasParticipatedAlready, isParticipationLoading }: Prediction) {
+export default function PoolPrediction({ predictions, name, creator, poolId, isConnected, address, hasParticipatedAlready, isParticipationLoading, poolStatus, onVoteSuccess }: Prediction) {
   const [stake, setStake] = useState('0');
   const [selectedOption, setSelectedOption] = useState('Option 1');
   const [selectedOdds, setSelectedOdds] = useState('1.17');
+
+  const { voteStatus, voteOnPool } = useVotePool(poolId);
+
+  const handleVote = async () => {
+    if (!stake || parseFloat(stake) <= 0) {
+      return;
+    }
+
+    const result = await voteOnPool(selectedOption, stake, poolStatus);
+
+    if (result && onVoteSuccess) {
+      onVoteSuccess();
+    }
+  };
   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">
@@ -33,11 +50,10 @@ export default function PoolPrediction({ predictions, name, creator, poolId, isC
         </div>
         {predictions.map((prediction, index) => (
           <SelectPrediction
-            className={`${
-              selectedOption === prediction.options
-                ? 'bg-teal-600 text-black'
-                : ''
-            }`}
+            className={`${selectedOption === prediction.options
+              ? 'bg-teal-600 text-black'
+              : ''
+              }`}
             key={index}
             options={prediction.options}
             odds={prediction.odds}
@@ -93,25 +109,38 @@ export default function PoolPrediction({ predictions, name, creator, poolId, isC
               <span>{+selectedOdds * +stake} strk</span>
             </div>
           </div>
-          { isParticipationLoading 
-            ?  <div>
+          {isParticipationLoading
+            ? <div>
               <Button disabled={true} className="w-full bg-teal-500 py-8 hover:bg-teal-600 text-black rounded-lg disabled">
                 <div className="rounded-full animate-spin">
                   <FaSpinner />
                 </div>
               </Button>
             </div>
-            : hasParticipatedAlready 
-              ? 
+            : hasParticipatedAlready
+              ?
               <div>
                 <Button disabled={true} className="w-full bg-teal-500 py-8 hover:bg-teal-600 text-black rounded-lg disabled">
                   {truncate(address ?? "", { maxLength: 16, truncateMiddle: { front: 6, back: 5 } })}  has already bet.
                 </Button>
               </div>
-              : isConnected ? 
+              : isConnected ?
                 <div>
-                  <Button className="w-full bg-teal-500 py-8 hover:bg-teal-600 text-black rounded-lg">
-                    Bet from {truncate(address ?? "", { maxLength: 16, truncateMiddle: { front: 6, back: 5 } })} 
+                  <Button
+                    onClick={handleVote}
+                    disabled={voteStatus === "pending" || !stake || parseFloat(stake) <= 0}
+                    className="w-full bg-teal-500 py-8 hover:bg-teal-600 text-black rounded-lg disabled:opacity-50"
+                  >
+                    {voteStatus === "pending" ? (
+                      <div className="flex items-center gap-2">
+                        <div className="rounded-full animate-spin">
+                          <FaSpinner />
+                        </div>
+                        Processing Vote...
+                      </div>
+                    ) : (
+                      `Bet from ${truncate(address ?? "", { maxLength: 16, truncateMiddle: { front: 6, back: 5 } })}`
+                    )}
                   </Button>
                 </div>
                 : <div>

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

@@ -202,16 +202,16 @@ export default function Market() {
               <TabsContent value="description">
                 {readIsLoading
                   ? Array.from({ length: 3 }).map((_, i) => (
-                      <Skeleton key={i} className="h-6 w-full mb-2" />
-                    ))
+                    <Skeleton key={i} className="h-6 w-full mb-2" />
+                  ))
                   : poolDetails && (
-                      <PoolDescription
-                        startTime={poolDetails.startTime}
-                        lockTime={poolDetails.lockTime}
-                        endTime={poolDetails.endTime}
-                        desc={poolDetails.poolDescription}
-                      />
-                    )}
+                    <PoolDescription
+                      startTime={poolDetails.startTime}
+                      lockTime={poolDetails.lockTime}
+                      endTime={poolDetails.endTime}
+                      desc={poolDetails.poolDescription}
+                    />
+                  )}
 
                 {/* {similarPools.map((pool, index) => (
                   <SimilarPools
@@ -256,6 +256,11 @@ export default function Market() {
               address={address}
               creator={poolDetails.address}
               poolId={poolId}
+              poolStatus={poolDetails.status}
+              onVoteSuccess={() => {
+                // Refresh pool data after successful vote
+                window.location.reload();
+              }}
               predictions={[
                 {
                   options: poolDetails?.option1 || "Option 1",

src/app/hooks/useVotePool.ts

@@ -0,0 +1,74 @@
+import { ActionType } from "@/lib/types";
+import { myProvider } from "@/lib/utils";
+import { PREDIFI_CONTRACT_ADDRESS } from "@/static";
+import { useAccount } from "@starknet-react/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { cairo, CallData } from "starknet";
+
+export default function useVotePool(poolId: string) {
+  const { account } = useAccount();
+
+  const [voteStatus, setVoteStatus] = useState<ActionType>("idle");
+
+  const voteOnPool = async (option: string, amount: string, poolStatus?: string) => {
+    if (!account) {
+      toast.error("Account not connected!");
+      return;
+    }
+
+    if (!amount || parseFloat(amount) <= 0) {
+      toast.error("Please enter a valid vote amount!");
+      return;
+    }
+
+    if (!option) {
+      toast.error("Please select an option!");
+      return;
+    }
+
+    // Check if pool is active
+    if (poolStatus && poolStatus !== "Active") {
+      toast.error("Cannot vote on inactive pool!");
+      return;
+    }
+
+
+    try {
+      setVoteStatus("pending");
+
+      const result = await account.execute({
+        contractAddress: PREDIFI_CONTRACT_ADDRESS,
+        entrypoint: "vote",
+        calldata: CallData.compile({
+          pool_id: cairo.uint256(poolId),
+          option: cairo.felt(option),
+          amount: cairo.uint256(amount),
+        }),
+      });
+
+      const status = await myProvider.waitForTransaction(
+        result.transaction_hash
+      );
+
+      if (status.isSuccess()) {
+        toast.success(`Success! Voted ${amount} STRK on ${option}.`);
+        setVoteStatus("success");
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.log(err);
+      setVoteStatus("error");
+      toast.error("Error voting on pool. Please try again.");
+      return false;
+    } finally {
+      setVoteStatus("idle");
+    }
+  };
+
+  return {
+    voteStatus,
+    voteOnPool,
+  };
+} 

src/constants/functionNames.ts

@@ -4,4 +4,5 @@ export const GET_LOCKED_POOLS = "get_locked_pools";
 export const GET_ACTIVE_POOLS = "get_active_pools";
 export const GET_CLOSED_POOLS = "get_closed_pools"
 export const MANUALLY_UPDATE_POOL_STATE = "manually_update_pool_state"
+export const GET_POOL_VOTE = "get_pool_vote"