Add ability to unstake

frontend/src/components/staking/StakeList.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { useStakes } from '../../lib/staking/useStakes';
+import { useAccount, useContract } from '@starknet-react/core';
 import { formatBalance } from "../../lib/erc20";
+import { CONTRACT_ADDR } from '../../lib/config';
+import toast from 'react-hot-toast';
+import { abi } from "../../lib/abi";
 
 interface StakeListProps {
     address: string | undefined;
@@ -9,22 +13,52 @@ interface StakeListProps {
 const StakeList: React.FC<StakeListProps> = ({ address }) => {
     const { stakes, isLoading, error } = useStakes(address);
 
+    const { contract } = useContract({
+        address: CONTRACT_ADDR,
+        abi,
+    });
+
+    const { account } = useAccount();
+
+
+
+
     if (isLoading) return <div className="text-center">Loading stakes...</div>;
     if (error) return <div className="text-center text-red-500">Error: {error.message}</div>;
     if (!stakes.length) return <div className="text-center">No stakes found.</div>;
 
-    const formatExpirationStatus = (startDate: bigint, length: bigint) => {
-        const startTimestamp = Number(startDate) * 1000; // Convert to milliseconds
+    const formatExpirationStatus = (startDate: bigint, length: bigint, stakeId: number) => {
+        const startTimestamp = Number(startDate) * 1000;
         const expirationTimestamp = startTimestamp + (Number(length) * 1000);
         const now = Date.now();
 
         if (now > expirationTimestamp) {
-            return `Expired on ${new Date(expirationTimestamp).toLocaleDateString()}`;
+            return (
+                <div>
+                    <span>Expired on {new Date(expirationTimestamp).toLocaleDateString()}</span>
+                    <button
+                        onClick={() => handleUnstake(stakeId)}
+                        className="ml-2 px-2 py-1 text-xs font-semibold bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+                    >
+                        Unstake
+                    </button>
+                </div>
+            );
         } else {
             return `Expires on ${new Date(expirationTimestamp).toLocaleDateString()}`;
         }
     };
 
+    const handleUnstake = async (stakeId: number) => {
+        try {
+            await account.execute([{ contractAddress: contract.address, entrypoint: 'unstake', calldata: [stakeId] }], [abi])
+            toast.success('Unstake successful');
+        } catch (error) {
+            console.error('Unstake error:', error);
+            toast.error('Failed to unstake');
+        }
+    };
+
     return (
         <div className="w-full max-w-[50rem] mt-4">
             <h2 className="text-xl font-bold mb-2">Your Stakes</h2>
@@ -43,7 +77,7 @@ const StakeList: React.FC<StakeListProps> = ({ address }) => {
                             <td className="border p-2">{stake.id}</td>
                             <td className="border p-2">{formatBalance(stake.amount_staked)} KONOHA</td>
                             <td className="border p-2">{formatBalance(stake.amount_voting_token)} veKONOHA</td>
-                            <td className="border p-2">{formatExpirationStatus(stake.start_date, stake.length)}</td>
+                            <td className="border p-2">{formatExpirationStatus(stake.start_date, stake.length, stake.id)}</td>
                         </tr>
                     ))}
                 </tbody>