Show staking countdown, refetch data

src/app/Components/StakingSource.tsx

@@ -20,23 +20,24 @@ const StakingSource = (props: {
 
   // Check if claimable every second
   useEffect(() => {
-    const handleIsClaimable = props.stakingSource.activeStakes.map((stake) => {
+    const updatedActiveStakes = props.stakingSource.activeStakes.map(
-      const remainingTime = calculateRemainingTime(
+      (stake) => {
-        stake.startTime,
+        const remainingTime = calculateRemainingTime(
-        stake.durationInMins
+          stake.startTime,
-      );
+          stake.durationInMins
+        );
 
-      const obj = {
+        const obj = {
-        ...stake,
+          ...stake,
-        remainingTime: remainingTime,
+          remainingTime: remainingTime,
-        isClaimable: remainingTime <= 0,
+        };
-      };
 
-      return obj;
+        return obj;
-    });
+      }
+    );
 
     const intervalId = setInterval(() => {
-      setActiveStakes(handleIsClaimable);
+      setActiveStakes(updatedActiveStakes);
     }, 1000);
 
     return () => {
@@ -50,8 +51,8 @@ const StakingSource = (props: {
     }
   };
 
-  const handleClaim = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClaim = (stakingEventId: number) => {
-    console.log("Start claiming..");
+    props.claimStake(stakingEventId);
   };
 
   const handleSelectChange = (wellId: string, itemId: number) => {
@@ -60,37 +61,55 @@ const StakingSource = (props: {
   };
 
   const RenderButtonOrCountdown = (props: { stake: IStake }) => {
-    console.log(props.stake);
     if (!props.stake.remainingTime) return <p>Error</p>;
-    if (!props.stake.unclaimed)
-      return <p className="text-red-400 font-bold">Claimed</p>;
 
     if (props.stake.remainingTime <= 0) {
       return (
         <button
-          onClick={(e) => handleClaim(e)}
+          onClick={() => handleClaim(props.stake.id)}
           className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
         >
           Claim
         </button>
       );
-    }
+    } else {
-    if (true) {
       return (
+        // I'll fix it
         <div className="flex">
-          <p>{prettifyTime(props.stake.remainingTime).hours} hrs.</p>
+          <div className="flex block gap-1 p-1 rounded-lg border ">
-          <p>{prettifyTime(props.stake.remainingTime).minutes} mins.</p>
+            <span className="bg-white rounded-lg text-black p-1">
-          <p>{prettifyTime(props.stake.remainingTime).seconds} sec.</p>
+              {prettifyTime(props.stake.remainingTime).hours == 0
+                ? "00"
+                : prettifyTime(props.stake.remainingTime).hours}
+            </span>
+            <span className="p-1">:</span>
+            <span className="bg-white rounded-lg text-black p-1">
+              {prettifyTime(props.stake.remainingTime).minutes.toString()
+                .length > 0
+                ? prettifyTime(props.stake.remainingTime).minutes
+                : "0" +
+                  prettifyTime(props.stake.remainingTime).minutes.toString()}
+            </span>
+            <span className="p-1">:</span>
+            <span className="bg-white rounded-lg text-black p-1">
+              {prettifyTime(props.stake.remainingTime).minutes.toString()
+                .length > 0
+                ? prettifyTime(props.stake.remainingTime).seconds
+                : "0" +
+                  prettifyTime(props.stake.remainingTime).seconds.toString()}
+            </span>
+          </div>
         </div>
       );
     }
   };
 
   const isActive = (item: IInventoryItem): boolean => {
-    return props.stakingSource.activeStakes.some((obj) => obj.id === item.id);
+    return props.stakingSource.activeStakes.some(
+      (obj) => obj.inventoryItemId === item.id
+    );
   };
-  console.log(activeStakes);
+
-  console.log(props.stakingSource);
   return (
     <CardLayout>
       <h3 className="text-xl font-bold mb-2">{props.stakingSource.name}</h3>

src/app/Components/StakingSourcesView.tsx

@@ -9,6 +9,8 @@ const StakingSourcesView = (props: {
   claimStake: (stakingEventId: number) => void;
   startStake: (inventoryItemId: number, wellId: number) => void;
 }) => {
+  console.log(props.inventoryItems);
+  console.log(props.stakingSources);
   return (
     <div className="bg-slate-800 p-4 rounded-lg text-white">
       <h2 className="text-2xl mb-4 font-bold">Your Moons</h2>

src/app/page.tsx

@@ -69,6 +69,12 @@ export default function Home() {
     );
   };
 
+  const fetchBankAccount = async () => {
+    const response = await fetch(`/api/user/${userId}/bank-account`);
+    const bankAccount = await response.json();
+    setBankAccount(bankAccount);
+  };
+
   useEffect(() => {
     const fetchUser = async (wallet: string) => {
       const response = await fetch(`/api/user/login`, {
@@ -85,12 +91,6 @@ export default function Home() {
       }
     };
 
-    const fetchBankAccount = async () => {
-      const response = await fetch(`/api/user/${userId}/bank-account`);
-      const bankAccount = await response.json();
-      setBankAccount(bankAccount);
-    };
-
     fetchUser("abcdefg"); // Public key goes here
     // Nico is there a better way of checking if a user is logged in?
     if (userId) {
@@ -136,7 +136,22 @@ export default function Home() {
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ stakingEventId: stakingEventId }),
     });
-    return await response.json();
+    if (!response.ok) {
+      const error = await response.text();
+      setNotification({ message: error, type: "Error" });
+    }
+    if (response.status == 200) {
+      const data = await response.json();
+      setNotification({
+        message: `You've successfully claimed`,
+        type: "Success",
+      });
+
+      fetchStakes();
+      fetchStakingSources();
+      fetchInventoryItems();
+      fetchBankAccount();
+    }
   };
 
   const startStake = async (inventoryItemId: number, wellId: number) => {
@@ -195,7 +210,6 @@ export default function Home() {
 
       if (response.status == 200) {
         // Return success message
-        console.log(data.message);
         setNotification({
           message: "Item has been purchased",
           type: "Success",
@@ -231,7 +245,6 @@ export default function Home() {
 
       if (response.status == 200) {
         // Return success message
-        console.log(data);
         setNotification({ message: "Item has been upgraded", type: "Success" });
         fetchInventoryItems();
       }
@@ -267,6 +280,7 @@ export default function Home() {
   };
 
   if (!userId) return <p>Please login</p>;
+  //console.log(stakingSources);
   return (
     <>
       {notification && (

src/pages/api/user/[userId]/stakes/index.ts

@@ -11,6 +11,7 @@ export default async function handler(
     if (req.method === "GET") {
       const { userId } = req.query;
       const db = await dbConnection;
+      // This is supposed to be activeStakes?
       const inventorySql = `
           SELECT staking_event.id, staking_source.id as sourceId, resname as resourceType,
                  inventory_item_id, duration_in_mins, stake_amount, staking_event.created_at,
@@ -23,9 +24,9 @@ export default async function handler(
       const inventoryItems = await db.all(inventorySql, [userId]);
 
       // Change all keys to camelCase
-      const updatedInventoryItems = updateAllToCamelCase(inventoryItems)
+      // const updatedInventoryItems = updateAllToCamelCase(inventoryItems)
 
-      return res.status(200).json(updatedInventoryItems);
+      return res.status(200).json(inventoryItems);
     }
   } catch (error) {
     res.status(500).json(error);

src/pages/api/user/[userId]/staking-sources.ts

@@ -35,6 +35,7 @@ export default async function handler(
           LEFT JOIN claim_event ON staking_event.id = claim_event.staking_event_id
           WHERE staking_source.id = ? AND claim_event.staking_event_id IS NULL;`;
         const activeStakes = await db.all(stakesSql, [source.id]);
+
         source.activeStakes = activeStakes;
       }
       

src/utils/helpers.ts

@@ -65,7 +65,7 @@ export const prettifyTime = (remainingTime: number) => {
   const hours = Math.floor((remainingTime / (1000 * 60 * 60)) % 24);
   const minutes = Math.floor((remainingTime / (1000 * 60)) % 60);
   const seconds = Math.floor((remainingTime / 1000) % 60);
-  return { hours, minutes, seconds };
+  return { hours, minutes, seconds }
 }
 
 export const generateRandomBase64String = (length: number) => {