Add startStake to stakingOverview

src/app/Components/SelectDropdown.tsx

@@ -1,9 +1,15 @@
-import React, { useState, ChangeEvent } from "react";
+import React, { useState, useEffect, ChangeEvent } from "react";
 import { ISelectDropdownProps } from "typings";
 
 const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
   const [selectedValue, setSelectedValue] = useState("");
 
+  useEffect(() => {
+    if (!props.isActive) {
+      setSelectedValue("");
+    }
+  }, [props.isActive]);
+
   const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
     setSelectedValue(event.target.value);
     if (props.onChange) {
@@ -12,20 +18,18 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
   };
 
   return (
-    <div>
+    <select
-      <select
+      value={selectedValue}
-        value={selectedValue}
+      onChange={handleChange}
-        onChange={handleChange}
+      className="text-black flex-1 p-2 border border-gray-300 rounded-lg"
-        className="text-black block w-full p-2 border border-gray-300 rounded-lg"
+    >
-      >
+      <option value="">Select an option</option>
-        <option value="">Select an option</option>
+      {props.options.map((option, index) => (
-        {props.options.map((option, index) => (
+        <option key={index} value={option.value}>
-          <option key={index} value={option.value}>
+          {option.label}
-            {option.label}
+        </option>
-          </option>
+      ))}
-        ))}
+    </select>
-      </select>
-    </div>
   );
 };
 

src/app/Components/StakingSource.tsx

@@ -12,8 +12,11 @@ const StakingSource = (props: {
   stakingSource: IStakingSource;
   inventoryItems: IInventoryItem[] | null | undefined;
   claimStake: (stakingEventId: number) => void;
+  startStake: (inventoryItemId: number, wellId: number) => void;
 }) => {
   const [activeStakes, setActiveStakes] = useState<IStake[]>([]);
+  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
+  const [selectedWellId, setSelectedWellId] = useState<number | null>(null);
 
   // Check if claimable every second
   useEffect(() => {
@@ -42,16 +45,18 @@ const StakingSource = (props: {
   });
 
   const handleStartMining = () => {
-    console.log("Start mining..");
+    if (selectedItemId && selectedWellId) {
+      props.startStake(selectedItemId, selectedWellId);
+    }
   };
 
   const handleClaim = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     console.log("Start claiming..");
   };
 
-  const handleSelectChange = (selectedValue: string) => {
+  const handleSelectChange = (wellId: string, itemId: number) => {
-    console.log(selectedValue);
+    setSelectedWellId(Number(wellId));
-    // Render a staking button
+    setSelectedItemId(itemId);
   };
 
   const RenderButtonOrCountdown = (props: { stake: IStake }) => {
@@ -80,7 +85,7 @@ const StakingSource = (props: {
     }
   };
 
-  const isChecked = (item: IInventoryItem): boolean => {
+  const isActive = (item: IInventoryItem): boolean => {
     return props.stakingSource.activeStakes.some((obj) => obj.id === item.id);
   };
 
@@ -121,18 +126,33 @@ const StakingSource = (props: {
           {props.inventoryItems &&
             props.inventoryItems.map(
               (item, id) =>
-                !isChecked(item) && (
+                !isActive(item) && (
-                  <div key={id} className="border border-white p-2">
+                  <div key={id} className="border border-white p-2 mb-2">
-                    <p>{item.storeItem.name}</p>
+                    <p>
-                    <SelectDropdown
+                      {item.storeItem.name} ID{item.storeItem.id}
-                      options={props.stakingSource.resourceWells.map(
+                    </p>
-                        (well): IOption => ({
+                    <div className="flex">
-                          value: well.resourceType,
+                      <SelectDropdown
-                          label: well.resourceType,
+                        options={props.stakingSource.resourceWells.map(
-                        })
+                          (well): IOption => ({
+                            value: well.id,
+                            label: `${well.resourceType} - ID# ${well.id}`,
+                          })
+                        )}
+                        onChange={(value) => handleSelectChange(value, item.id)}
+                        isActive={selectedItemId === item.id}
+                      />
+                      {selectedItemId === item.id ? (
+                        <button
+                          onClick={handleStartMining}
+                          className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center"
+                        >
+                          Stake
+                        </button>
+                      ) : (
+                        <></>
                       )}
-                      onChange={handleSelectChange}
+                    </div>
-                    />
                   </div>
                 )
             )}

src/app/Components/StakingSourcesView.tsx

@@ -7,6 +7,7 @@ const StakingSourcesView = (props: {
   stakingSources: IStakingSource[] | null;
   inventoryItems: IInventoryItem[] | null | undefined;
   claimStake: (stakingEventId: number) => void;
+  startStake: (inventoryItemId: number, wellId: number) => void;
 }) => {
   return (
     <div className="bg-slate-800 p-4 rounded-lg text-white">
@@ -18,6 +19,7 @@ const StakingSourcesView = (props: {
             stakingSource={stakingSource}
             inventoryItems={props.inventoryItems}
             claimStake={props.claimStake}
+            startStake={props.startStake}
           />
         ))}
     </div>

src/app/page.tsx

@@ -28,7 +28,7 @@ export default function Home() {
   const [lightBoxIsActive, setLightBoxIsActive] = useState(false);
   const [userId, setUserId] = useState<number | null>(null);
   const [notification, setNotification] = useState<Notification | null>(null);
-  const [notificationTime, setNotificationTime] = useState(3);
+  const [notificationTime, setNotificationTime] = useState(30);
   const [storeItems, setStoreItems] = useState(gameConfig.store);
 
   const isOwned = (storeItemId: string) => {
@@ -52,6 +52,23 @@ export default function Home() {
     setInventoryItems(DBInventoryItems);
   };
 
+  const fetchStakingSources = async () => {
+    const response = await fetch(`/api/user/${userId}/staking-sources`);
+    const sources = await response.json();
+    setStakingSources(sources);
+  };
+
+  const fetchStakes = async () => {
+    const response = await fetch(`/api/user/${userId}/stakes`);
+    const stakes = await response.json();
+    setUserStakes(
+      stakes.map((stake: IStake) => ({
+        ...stake,
+        unclaimed: stake.unclaimed == 1,
+      }))
+    );
+  };
+
   useEffect(() => {
     const fetchUser = async (wallet: string) => {
       const response = await fetch(`/api/user/login`, {
@@ -74,23 +91,6 @@ export default function Home() {
       setBankAccount(bankAccount);
     };
 
-    const fetchStakingSources = async () => {
-      const response = await fetch(`/api/user/${userId}/staking-sources`);
-      const sources = await response.json();
-      setStakingSources(sources);
-    };
-
-    const fetchStakes = async () => {
-      const response = await fetch(`/api/user/${userId}/stakes`);
-      const stakes = await response.json();
-      setUserStakes(
-        stakes.map((stake: IStake) => ({
-          ...stake,
-          unclaimed: stake.unclaimed == 1,
-        }))
-      );
-    };
-
     fetchUser("abcdefg"); // Public key goes here
     // Nico is there a better way of checking if a user is logged in?
     if (userId) {
@@ -121,7 +121,7 @@ export default function Home() {
       if (notificationTime === 0) {
         setNotification(null);
         clearInterval(intervalId);
-        setNotificationTime(3);
+        setNotificationTime(30);
       }
 
       return () => {
@@ -148,7 +148,19 @@ export default function Home() {
         wellId: wellId,
       }),
     });
-    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 staked`,
+        type: "Success",
+      });
+      fetchStakes();
+      fetchStakingSources();
+    }
   };
 
   // Which object is it?
@@ -279,6 +291,7 @@ export default function Home() {
           stakingSources={stakingSources}
           inventoryItems={inventoryItems}
           claimStake={claimStake}
+          startStake={startStake}
         />
         <InventoryItemView
           stakingSources={stakingSources}

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

@@ -17,6 +17,7 @@ export default async function handler(
         inventoryItemId,
         wellId,
       } = req.body;
+      console.log(`Start take: inventoryItemId: ${inventoryItemId} | wellId: ${wellId}`)
 
       const db = await dbConnection;
       try {
@@ -25,11 +26,12 @@ export default async function handler(
                 staking_event.created_at as stakeTime, duration_in_mins, stake_amount
           FROM inventory_item
           LEFT JOIN staking_event ON inventory_item_id = inventory_item.id
-          WHERE inventory_item.store_item_id = ? AND inventory_item.user_id = ?
+          WHERE inventory_item.id = ? AND inventory_item.user_id = ?
           ORDER BY staking_event.created_at;
         `;
 
         const invItem = await db.get(inventorySql, [inventoryItemId, userId]);
+
         const well = await db.get(`
           SELECT resource_well.id, resname, source_id, supply as wellId FROM resource_well
           INNER JOIN staking_source ON source_id = staking_source.id

typings.d.ts

@@ -131,11 +131,12 @@ type PhantomRequestMethod =
   // Generic stuff
 
 export interface IOption {
-    value: string,
+    value: number,
     label: string
 }
 
 export interface ISelectDropdownProps {
     options: IOption[];
     onChange?: (value: string) => void;
+    isActive: boolean
 }