Add loading wheels

src/app/Components/Accounts/Account.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { IResourceAccount, IConversionPair, IGameConfig } from "typings";
 import { resourceToFc, resourceToBg } from "../../../utils/helpers";
 import ResourceModal from "./ResourceModal";
+import { BiLoaderAlt } from "react-icons/bi";
 
 const ResourceAccount = (props: {
   account: IResourceAccount;
@@ -14,6 +15,7 @@ const ResourceAccount = (props: {
     IConversionPair | undefined
   >(undefined);
   const [conversionRate, setConversionRate] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleConversionPair = (amount: number, resourceType: string) => {
     const updatedPair = {
@@ -31,9 +33,20 @@ const ResourceAccount = (props: {
     return rate;
   };
 
-  const handleSellResource = () => {
+  const handleSellResource = async () => {
-    conversionPair && props.sellResource([conversionPair]);
+    if (conversionPair) {
+      setIsLoading(true);
+      try {
+        await props.sellResource([conversionPair]);
+      } catch (error) {
+        // Show error here
+      } finally {
         setShowModal(false);
+      }
+      conversionPair && props.sellResource([conversionPair]);
+      setIsLoading(false);
+      setShowModal(false);
+    }
   };
 
   useEffect(() => {
@@ -67,7 +80,12 @@ const ResourceAccount = (props: {
                 />
               </svg>
             </button>
-            <div className="md:h-auto max-w-md max-h-full overflow-y-auto">
+            <div className="relative md:h-auto max-w-md max-h-full overflow-y-auto">
+              {isLoading && (
+                <div className="absolute bg-white/75 text-white w-full h-full grid justify-center items-center rounded-xl">
+                  <BiLoaderAlt className="animate-spin w-6 h-6" />
+                </div>
+              )}
               <ResourceModal
                 resourceAccount={props.account}
                 conversionPair={conversionPair}

src/app/Components/Inventory/InventoryItem.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import { IInventoryItem, IStake, IUpgrade } from "typings";
 import CardLayout from "../../Layouts/CardLayout";
 import Image from "next/image";
+import { BiLoaderAlt } from "react-icons/bi";
+
 const InventoryItem = (props: {
   inventoryItem: IInventoryItem;
   stakes: IStake[] | null;
@@ -19,6 +21,23 @@ const InventoryItem = (props: {
     setCurrentUpgrade(currentUpdade);
   }, [props.inventoryItem]);
 
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleUpgradeInventoryItem = async () => {
+    setIsLoading(true);
+    try {
+      // Create the source
+      await props.upgradeInventoryItem(
+        props.inventoryItem.id,
+        props.inventoryItem.storeItem.id
+      );
+    } catch (error) {
+      // Handle error if needed (e.g., show a notification or log the error)
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const renderUpgradeButton = () => {
     // If no staking source
     if (!props.stakes) return "No staking source";
@@ -37,14 +56,14 @@ const InventoryItem = (props: {
     // Show price
     return (
       <>
+        {isLoading ? (
+          <button className="bg-green-600 rounded-full p-1">
+            <BiLoaderAlt className="animate-spin w-6 h-6" />
+          </button>
+        ) : (
           <button
-          onClick={() =>
+            onClick={() => handleUpgradeInventoryItem()}
-            props.upgradeInventoryItem(
+            className="bg-green-600 rounded-full p-1"
-              props.inventoryItem.id,
-              props.inventoryItem.storeItem.id
-            )
-          }
-          className="bg-orange-600 rounded-full p-1"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -61,6 +80,7 @@ const InventoryItem = (props: {
               />
             </svg>
           </button>
+        )}
         <span className="ml-1">
           {`$${
             props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price

src/app/Components/Staking/StakingSource.tsx

@@ -6,6 +6,7 @@ import {
 } from "../../../utils/helpers";
 import SelectDropdown from "../SelectDropdown";
 import Image from "next/image";
+import { BiLoaderAlt } from "react-icons/bi";
 
 const StakingSource = (props: {
   stakingSource: IStakingSource;
@@ -25,7 +26,7 @@ const StakingSource = (props: {
     null
   );
   const [selectedWellId, setSelectedWellId] = useState<string | null>(null);
-  const [showInfo, setShowInfo] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   // Check if claimable every second
   useEffect(() => {
@@ -54,18 +55,33 @@ const StakingSource = (props: {
     };
   });
 
-  const handleStartMining = () => {
+  const handleStartMining = async () => {
     if (selectedInventoryItemId && selectedWellId && selectedStoreItemId) {
-      props.startStake(
+      setIsLoading(true);
+
+      try {
+        await props.startStake(
           selectedInventoryItemId,
           selectedStoreItemId,
           selectedWellId
         );
+      } catch (error) {
+        // Handle error if needed (e.g., show a notification or log the error)
+      } finally {
+        setIsLoading(false);
+      }
     }
   };
 
-  const handleClaim = (stakingEventId: number) => {
+  const handleClaim = async (stakingEventId: number) => {
-    props.claimStake(stakingEventId);
+    setIsLoading(true);
+    try {
+      await props.claimStake(stakingEventId);
+    } catch (error) {
+      // Handle error if needed (e.g., show a notification or log the error)
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handleSelectChange = (
@@ -129,8 +145,13 @@ const StakingSource = (props: {
         className="mr-4"
       />
       <div className="max-w-md text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 md:rounded-xl p-1">
-        <div className="bg-slate-900 md:rounded-xl p-4">
+        <div className="relative bg-slate-900 md:rounded-xl h-full">
-          <div className="">
+          {isLoading && (
+            <div className="absolute bg-slate-900 w-full h-full grid justify-center items-center rounded-xl">
+              <BiLoaderAlt className="animate-spin w-6 h-6" />
+            </div>
+          )}
+          <div className="p-4">
             <h3 className="text-3xl font-bold mb-2">
               {props.stakingSource.name}{" "}
               <span>
@@ -144,10 +165,9 @@ const StakingSource = (props: {
             </h3>
             <p className="text-sm">{props.stakingSource.description}</p>
           </div>
-          <h3 className="mt-4 mb-2 text-2xl font-bold">Inventory</h3>
+          <div className="p-4">
-          <div className="">
             {activeStakes.length > 0 && (
-              <div className="">
+              <>
                 {activeStakes.map((stake, id) => (
                   <div
                     key={id}
@@ -172,7 +192,7 @@ const StakingSource = (props: {
                     <RenderButtonOrCountdown stake={stake} />
                   </div>
                 ))}
-              </div>
+              </>
             )}
             {props.inventoryItems && (
               <div className="">

src/app/Components/Staking/StakingSourcesView.tsx

@@ -1,7 +1,8 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { IInventoryItem, IStakingSource } from "typings";
 import StakingSource from "./StakingSource";
+import { BiLoaderAlt } from "react-icons/bi";
 
 const StakingSourcesView = (props: {
   stakingSources: IStakingSource[] | null;
@@ -14,14 +15,33 @@ const StakingSourcesView = (props: {
   ) => void;
   createStakingSource: () => void;
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleCreateStakingSource = async () => {
+    setIsLoading(true);
+    try {
+      // Create the source
+      await props.createStakingSource();
+    } catch (error) {
+      // Handle error if needed (e.g., show a notification or log the error)
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl h-auto p-1 rounded-xl col-span-5">
       <div className="bg-slate-900 p-8 rounded-xl h-full">
         <div className="flex items-center mb-4">
           <h2 className="text-3xl text-white font-bold">Your Moons</h2>
+          {isLoading ? (
+            <button className="bg-green-600 text-white rounded-full ml-2 p-1 inline">
+              <BiLoaderAlt className="animate-spin w-6 h-6" />
+            </button>
+          ) : (
             <button
               className="bg-green-600 text-white rounded-full ml-2 p-1 inline"
-            onClick={() => props.createStakingSource()}
+              onClick={() => handleCreateStakingSource()}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -38,6 +58,7 @@ const StakingSourcesView = (props: {
                 />
               </svg>
             </button>
+          )}
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {props.stakingSources ? (

src/app/Components/Staking/StakingSourcesViewBackup.tsx

@@ -1,58 +0,0 @@
-"use client";
-import React from "react";
-import { IInventoryItem, IStakingSource } from "typings";
-import StakingSource from "./StakingSource";
-
-const StakingSourcesView = (props: {
-  stakingSources: IStakingSource[] | null;
-  inventoryItems: IInventoryItem[] | null | undefined;
-  claimStake: (stakingEventId: number) => void;
-  startStake: (
-    inventoryItemId: number,
-    storeItemId: string,
-    wellId: number
-  ) => void;
-  createStakingSource: () => void;
-}) => {
-  return (
-    <div className="bg-slate-800 p-4 rounded-lg text-white col-span-5">
-      <div className="flex items-center mb-4">
-        <h2 className="text-3xl font-bold">Your Moons</h2>
-        <button
-          className="bg-green-600 rounded-full ml-2 p-1 inline"
-          onClick={() => props.createStakingSource()}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={2}
-            stroke="currentColor"
-            className="w-6 h-6"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 4.5v15m7.5-7.5h-15"
-            />
-          </svg>
-        </button>
-      </div>
-      <div className="grid grid-cols-3 gap-4">
-        {props.stakingSources &&
-          props.stakingSources.length > 0 &&
-          props.stakingSources.map((stakingSource, id) => (
-            <StakingSource
-              key={id}
-              stakingSource={stakingSource}
-              inventoryItems={props.inventoryItems}
-              claimStake={props.claimStake}
-              startStake={props.startStake}
-            />
-          ))}
-      </div>
-    </div>
-  );
-};
-
-export default StakingSourcesView;

src/app/Components/Store/StoreItem.tsx

@@ -1,13 +1,28 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { IStoreItem } from "typings";
 import CardLayout from "../../Layouts/CardLayout";
 import Image from "next/image";
+import { BiLoaderAlt } from "react-icons/bi";
 
 const StoreItem = (props: {
   storeItem: IStoreItem;
   buyStoreItem: (storeItemId: number) => void;
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleBuyStoreItem = async () => {
+    setIsLoading(true);
+    try {
+      // Create the source
+      await props.buyStoreItem(props.storeItem.id);
+    } catch (error) {
+      // Handle error if needed (e.g., show a notification or log the error)
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <CardLayout>
       <div className="md:flex">
@@ -15,12 +30,18 @@ const StoreItem = (props: {
           <h3 className="text-2xl font-bold mb-2">{props.storeItem.name}</h3>
           <p className="text-sm mb-3">{props.storeItem.description}</p>
           <div className="py-4 my-2">
+            {isLoading ? (
+              <button className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold w-auto text-center">
+                <BiLoaderAlt className="animate-spin w-6 h-6" />
+              </button>
+            ) : (
               <button
-              onClick={() => props.buyStoreItem(props.storeItem.id)}
+                onClick={() => handleBuyStoreItem()}
                 className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold w-auto text-center"
               >
                 Buy | ${props.storeItem.price}
               </button>
+            )}
           </div>
         </div>
         <div className="relative object-contain w-48 h-48">

src/app/page.tsx

@@ -338,7 +338,11 @@ export default function Home() {
     return (
       <>
         <Navbar setUserId={setUserId} />
-        <p>Please login</p>
+        <div className="grid justify-center items-center h-96">
+          <h1 className="text-3xl text-white">
+            Connect Your Wallet to Continue
+          </h1>
+        </div>
       </>
     );
 
@@ -346,7 +350,6 @@ export default function Home() {
     return <p>Loading...</p>;
   }
 
-  console.log(storeItems);
   return (
     <>
       <Navbar setUserId={setUserId} />