UI changes moons and items

src/app/Components/Inventory/InventoryItem.tsx

@@ -19,56 +19,24 @@ const InventoryItem = (props: {
     setCurrentUpgrade(currentUpdade);
   }, [props.inventoryItem]);
 
-  const isInUse = () => {
-    if (!props.stakes) return false;
-    return props.stakes.some((stake) => {
-      stake.inventoryItemId === props.inventoryItem.id;
-    });
-  };
+  const renderUpgradeButton = () => {
+    // If no staking source
+    if (!props.stakes) return "No staking source";
 
-  const getNextUpgradePrice = () => {
+    // If item is in use
+    if (
+      props.stakes.some((stake) => {
+        stake.inventoryItemId === props.inventoryItem.id;
+      })
+    )
+      return "In use";
+
+    // If item is maxxed
     if (currentTierIndex === 4) return "Maxed";
-    return `$${
-      props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
-    }`;
-  };
+
+    // Show price
     return (
-    <CardLayout>
-      <div className="md:flex gap-4">
-        <div className="flex-1">
-          <h3 className="text-2xl font-bold mb-2">
-            {props.inventoryItem.storeItem.name}
-          </h3>
-          <p className="text-sm mb-3">
-            {props.inventoryItem.storeItem.description}
-          </p>
-          <p className="font-bold mt-4">Base Yield</p>
-          <p>{props.inventoryItem.storeItem.claimAmount}</p>
-          <p className="font-bold mb-1 mt-4">Tier</p>
-          <div className="flex items-center">
-            {currentUpgrade &&
-              props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
-                if (upgrade.tier <= currentUpgrade.tier) {
-                  return (
-                    <span key={id} className="bg-green-600 px-4 py-2"></span>
-                  );
-                } else {
-                  return (
-                    <span key={id} className="bg-slate-200 px-4 py-2"></span>
-                  );
-                }
-              })}
-            <p className="font-bold ml-1">
-              (+{currentUpgrade && currentUpgrade.claimBoost})
-            </p>
-          </div>
-          <p className="font-bold mb-1 mt-4">Upgrade</p>
-          <div className="flex items-center">
-            {isInUse() ? (
-              <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold text-center cursor-not-allowed">
-                In Use
-              </button>
-            ) : (
+      <>
         <button
           onClick={() =>
             props.upgradeInventoryItem(
@@ -76,7 +44,7 @@ const InventoryItem = (props: {
               props.inventoryItem.storeItem.id
             )
           }
-                className="bg-green-600 rounded-full p-1"
+          className="bg-orange-600 rounded-full p-1"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -93,8 +61,61 @@ const InventoryItem = (props: {
             />
           </svg>
         </button>
+        <span className="ml-1">
+          {`$${
+            props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
+          }`}
+        </span>
+      </>
+    );
+  };
+
+  return (
+    <CardLayout>
+      <div className="md:flex gap-4">
+        <div className="flex-1">
+          <h3 className="text-2xl font-bold mb-2">
+            {props.inventoryItem.storeItem.name}
+          </h3>
+          <p className="text-sm mb-3">
+            {props.inventoryItem.storeItem.description}
+          </p>
+          <div className="grid grid-cols-4 gap-4">
+            <div className="col-span-1">
+              <p className="font-bold mt-4">Yield</p>
+              <p>
+                {props.inventoryItem.storeItem.claimAmount} (+
+                {currentUpgrade && currentUpgrade.claimBoost})
+              </p>
+            </div>
+            <div className="col-span-3">
+              <p className="font-bold mb-1 mt-4">Tier</p>
+              <div className="flex">
+                <div className="flex items-center mr-2">
+                  {currentUpgrade &&
+                    props.inventoryItem.storeItem.upgrades.map(
+                      (upgrade, id) => {
+                        if (upgrade.tier <= currentUpgrade.tier) {
+                          return (
+                            <span
+                              key={id}
+                              className="bg-green-600 px-2 py-2 border border-black"
+                            ></span>
+                          );
+                        } else {
+                          return (
+                            <span
+                              key={id}
+                              className="bg-slate-200 px-2 py-2 border border-black"
+                            ></span>
+                          );
+                        }
+                      }
                     )}
-            <span className="ml-1">({getNextUpgradePrice()})</span>
+                </div>
+                <div className="flex items-center">{renderUpgradeButton()}</div>
+              </div>
+            </div>
           </div>
         </div>
         <div className="relative object-contain w-48 h-48 mt-4 md:mt-0">

src/app/Components/SelectDropdown.tsx

@@ -23,7 +23,10 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
       onChange={handleChange}
       className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
     >
-      <option value="">Select</option>
+      <option value="" className="font-bold">
+        Select resource to mine
+      </option>
+      <hr />
       {props.options.map((option, index) => (
         <option key={index} value={option.value}>
           {option.label}

src/app/Components/Staking/StakingSource.tsx

@@ -102,7 +102,7 @@ const StakingSource = (props: {
       return (
         <button
           onClick={() => handleClaim(props.stake.id)}
-          className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
+          className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold text-center"
         >
           Claim
         </button>
@@ -132,21 +132,28 @@ const StakingSource = (props: {
         <div className="bg-slate-900 md:rounded-xl p-4">
           <div className="">
             <h3 className="text-3xl font-bold mb-2">
-              {props.stakingSource.name}
+              {props.stakingSource.name}{" "}
+              <span>
+                (
+                {props.stakingSource.resourceWells.reduce(
+                  (x, y) => x + y.supply,
+                  0
+                )}
+                )
+              </span>
             </h3>
             <p className="text-sm">{props.stakingSource.description}</p>
           </div>
-          <div className="flex">
+          <h3 className="mt-4 mb-2 text-2xl font-bold">Inventory</h3>
+          <div className="">
             {activeStakes.length > 0 && (
               <div className="">
-                <p className="font-bold mt-4 mb-2">Active Drills</p>
                 {activeStakes.map((stake, id) => (
                   <div
                     key={id}
                     className="border border-white rounded-xl p-3 mb-2 bg-black/20"
                   >
-                    <p>
-                      <span className="font-bold">Drill: </span>
+                    <p className="font-bold text-xl mb-2">
                       {props.inventoryItems &&
                         getObjectFromArray(
                           props.inventoryItems,
@@ -169,7 +176,6 @@ const StakingSource = (props: {
             )}
             {props.inventoryItems && (
               <div className="">
-                <p className="font-bold mt-4 mb-2">Inactive Drills</p>
                 {props.inventoryItems.map(
                   (item, id) =>
                     !isActive(item) && (
@@ -177,14 +183,15 @@ const StakingSource = (props: {
                         key={id}
                         className="border border-white rounded-xl p-3 mb-2 bg-black/20"
                       >
-                        <p className="font-bold">{item.storeItem.name}</p>
-                        <p className="mt-2">Select Resource</p>
+                        <p className="font-bold text-xl mb-2">
+                          {item.storeItem.name}
+                        </p>
                         <div className="flex">
                           <SelectDropdown
                             options={props.stakingSource.resourceWells.map(
                               (well): IOption => ({
                                 value: well.id,
-                                label: well.resourceType,
+                                label: well.resourceType + ` (${well.supply})`,
                               })
                             )}
                             onChange={(value) =>

src/app/Components/Staking/StakingSourcesView.tsx

@@ -20,7 +20,7 @@ const StakingSourcesView = (props: {
         <div className="flex items-center mb-4">
           <h2 className="text-3xl text-white font-bold">Your Moons</h2>
           <button
-            className="bg-green-600 rounded-full ml-2 p-1 inline"
+            className="bg-green-600 text-white rounded-full ml-2 p-1 inline"
             onClick={() => props.createStakingSource()}
           >
             <svg

src/app/Components/Store/StoreItem.tsx

@@ -17,25 +17,11 @@ const StoreItem = (props: {
           <div className="py-4 my-2">
             <button
               onClick={() => props.buyStoreItem(props.storeItem.id)}
-              className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-auto text-center"
+              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 className="flex">
-            <div className="mr-3">
-              <p className="font-bold">Base Yield</p>
-              <p className="">{props.storeItem.claimAmount}</p>
-            </div>
-            <div className="">
-              <p className="font-bold">Upgrades</p>
-              {props.storeItem.upgrades.map((upgrade, id) => (
-                <span key={id} className="mr-2">
-                  {upgrade.claimBoost}
-                </span>
-              ))}
-            </div>
-          </div>
         </div>
         <div className="relative object-contain w-48 h-48">
           <Image
@@ -46,6 +32,42 @@ const StoreItem = (props: {
           />
         </div>
       </div>
+      <div className="flex flex-grow mt-4">
+        <div className="mr-3 flex-grow">
+          <p className="font-bold">Yield</p>
+          <p className="">{props.storeItem.claimAmount}</p>
+        </div>
+        <div className="mr-3 flex-grow">
+          <p className="font-bold">Completion Time</p>
+          <p className="">{props.storeItem.completionTimeInMins} min</p>
+        </div>
+        <div className="mr-3 flex-grow">
+          <p className="font-bold">Yield / Hr.</p>
+          <p className="">
+            {(
+              (props.storeItem.claimAmount /
+                props.storeItem.completionTimeInMins) *
+              60
+            ).toFixed(0)}
+          </p>
+        </div>
+      </div>
+      <p className="font-bold mt-4  ">Tiers</p>
+      <div className="mt-4 flex f-full">
+        {props.storeItem.upgrades.map((upgrade, id) => (
+          <table key={id} className="table-auto flex-grow">
+            <tr className="border">
+              <td colSpan={2} className="p-2 text-center">
+                {upgrade.tier}
+              </td>
+            </tr>
+            <tr>
+              <td className="p-2 border">${upgrade.price}</td>
+              <td className="p-2 border">+{upgrade.claimBoost}</td>
+            </tr>
+          </table>
+        ))}
+      </div>
     </CardLayout>
   );
 };

src/app/page.tsx

@@ -346,7 +346,7 @@ export default function Home() {
     return <p>Loading...</p>;
   }
 
-  console.log(bankAccount);
+  console.log(storeItems);
   return (
     <>
       <Navbar setUserId={setUserId} />

src/app/utils/page.tsx

@@ -10,9 +10,11 @@ export default function Utils() {
   const [userId, setUserId] = useState<string>("");
 
   const clearUserData = async () => {
-    await fetch(`/api/user/${userId}/clear-data`, {
+    console.log("Clearing data..");
+    const response = await fetch(`/api/user/${userId}/clear-data`, {
       method: "POST",
     });
+    console.log(response);
   };
 
   const loadConfig = async () => {

typings.d.ts

@@ -39,7 +39,6 @@ export interface IStakingSource {
   resourceChance: number | null
   resourceMinStartAmount: number | null
   resourceMaxStartAmount: number | null
-  size: number | undefined
 }
 
 export interface IInventoryItem {