Add loading wheels

2023-05-02 07:51:38 +07:00 · 2023-05-02 07:51:38 +07:00 · a7c03a2703
commit a7c03a2703
parent b965371fe5
7 changed files with 173 additions and 128 deletions
--- a/src/app/Components/Accounts/Account.tsx
+++ b/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 = () => {
-    conversionPair && props.sellResource([conversionPair]);
-    setShowModal(false);
+  const handleSellResource = async () => {
+    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}
--- a/src/app/Components/Inventory/InventoryItem.tsx
+++ b/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,30 +56,31 @@ const InventoryItem = (props: {
    // Show price
    return (
      <>
-        <button
-          onClick={() =>
-            props.upgradeInventoryItem(
-              props.inventoryItem.id,
-              props.inventoryItem.storeItem.id
-            )
-          }
-          className="bg-orange-600 rounded-full p-1"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={2.5}
-            stroke="currentColor"
-            className="w-6 h-6"
+        {isLoading ? (
+          <button className="bg-green-600 rounded-full p-1">
+            <BiLoaderAlt className="animate-spin w-6 h-6" />
+          </button>
+        ) : (
+          <button
+            onClick={() => handleUpgradeInventoryItem()}
+            className="bg-green-600 rounded-full p-1"
          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
-            />
-          </svg>
-        </button>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2.5}
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
+              />
+            </svg>
+          </button>
+        )}
        <span className="ml-1">
          {`$${
            props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
--- a/src/app/Components/Staking/StakingSource.tsx
+++ b/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(
-        selectedInventoryItemId,
-        selectedStoreItemId,
-        selectedWellId
-      );
+      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) => {
-    props.claimStake(stakingEventId);
+  const handleClaim = async (stakingEventId: number) => {
+    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="">
+        <div className="relative bg-slate-900 md:rounded-xl h-full">
+          {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="">
+          <div className="p-4">
            {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="">
--- a/src/app/Components/Staking/StakingSourcesView.tsx
+++ b/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,30 +15,50 @@ 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>
-          <button
-            className="bg-green-600 text-white 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"
+          {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={() => handleCreateStakingSource()}
            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 4.5v15m7.5-7.5h-15"
-              />
-            </svg>
-          </button>
+              <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-1 md:grid-cols-2 gap-8">
          {props.stakingSources ? (
--- a/src/app/Components/Staking/StakingSourcesViewBackup.tsx
+++ b/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;
--- a/src/app/Components/Store/StoreItem.tsx
+++ b/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">
-            <button
-              onClick={() => props.buyStoreItem(props.storeItem.id)}
-              className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold w-auto text-center"
-            >
-              Buy | ${props.storeItem.price}
-            </button>
+            {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={() => 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">
--- a/src/app/page.tsx
+++ b/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} />