From 7883f395410906816f3c97c8e170c9de90ce4189 Mon Sep 17 00:00:00 2001
From: Eduardo <edujlac@gmail.com>
Date: Thu, 25 Apr 2024 15:15:55 -0500
Subject: [PATCH] fix: minting process

---
 packages/nextjs/app/myNFTs/page.tsx            | 18 +++++++++++++++---
 .../nextjs/components/SimpleNFT/MyHoldings.tsx | 10 +++++++---
 .../nextjs/components/SimpleNFT/NFTcard.tsx    |  2 --
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/app/myNFTs/page.tsx b/packages/nextjs/app/myNFTs/page.tsx
index 1c83489e..771e8cbe 100644
--- a/packages/nextjs/app/myNFTs/page.tsx
+++ b/packages/nextjs/app/myNFTs/page.tsx
@@ -9,9 +9,11 @@ import { useScaffoldContractWrite } from "~~/hooks/scaffold-stark/useScaffoldCon
 import { notification } from "~~/utils/scaffold-stark";
 import { addToIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
 import nftsMetadata from "~~/utils/simpleNFT/nftsMetadata";
+import { useState } from "react";
 
 const MyNFTs: NextPage = () => {
   const { address: connectedAddress, isConnected, isConnecting } = useAccount();
+  const [status, setStatus] = useState("Mint NFT");
 
   const { writeAsync: mintItem } = useScaffoldContractWrite({
     contractName: "Challenge0",
@@ -26,6 +28,7 @@ const MyNFTs: NextPage = () => {
   });
 
   const handleMintItem = async () => {
+    setStatus("Minting NFT");
     // circle back to the zero item if we've reached the end of the array
     if (tokenIdCounter === undefined) return;
 
@@ -43,9 +46,11 @@ const MyNFTs: NextPage = () => {
       await mintItem({
         args: [connectedAddress, uploadedItem.path],
       });
+      setStatus("Updating NFT List");
     } catch (error) {
       notification.remove(notificationId);
       console.error(error);
+      setStatus("Mint NFT");
     }
   };
 
@@ -62,12 +67,19 @@ const MyNFTs: NextPage = () => {
         {!isConnected || isConnecting ? (
           <CustomConnectButton />
         ) : (
-          <button className="btn btn-secondary" onClick={handleMintItem}>
-            Mint NFT
+          <button
+            className="btn btn-secondary"
+            disabled={status !== "Mint NFT"}
+            onClick={handleMintItem}
+          >
+            {status !== "Mint NFT" && (
+              <span className="loading loading-spinner loading-xs"></span>
+            )}
+            {status}
           </button>
         )}
       </div>
-      <MyHoldings />
+      <MyHoldings setStatus={setStatus} />
     </>
   );
 };
diff --git a/packages/nextjs/components/SimpleNFT/MyHoldings.tsx b/packages/nextjs/components/SimpleNFT/MyHoldings.tsx
index b231ff96..3ef2f8cf 100644
--- a/packages/nextjs/components/SimpleNFT/MyHoldings.tsx
+++ b/packages/nextjs/components/SimpleNFT/MyHoldings.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { NFTCard } from "./NFTcard";
 import { useAccount } from "@starknet-react/core";
 import { useScaffoldContract } from "~~/hooks/scaffold-stark/useScaffoldContract";
@@ -16,7 +16,11 @@ export interface Collectible extends Partial<NFTMetaData> {
   owner: string;
 }
 
-export const MyHoldings = () => {
+export const MyHoldings = ({
+  setStatus,
+}: {
+  setStatus: Dispatch<SetStateAction<string>>;
+}) => {
   const { address: connectedAddress } = useAccount();
   const [myAllCollectibles, setMyAllCollectibles] = useState<Collectible[]>([]);
   const [allCollectiblesLoading, setAllCollectiblesLoading] = useState(false);
@@ -77,7 +81,7 @@ export const MyHoldings = () => {
       setAllCollectiblesLoading(false);
     };
 
-    updateMyCollectibles();
+    updateMyCollectibles().finally(() => setStatus("Mint NFT"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectedAddress, myTotalBalance]);
 
diff --git a/packages/nextjs/components/SimpleNFT/NFTcard.tsx b/packages/nextjs/components/SimpleNFT/NFTcard.tsx
index c4e43a71..db110e12 100644
--- a/packages/nextjs/components/SimpleNFT/NFTcard.tsx
+++ b/packages/nextjs/components/SimpleNFT/NFTcard.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import ButtonStyle from "../ButtonStyle/ButtonStyle";
 import { Collectible } from "./MyHoldings";
 import { AddressInput } from "../scaffold-stark";
 import { Address } from "../scaffold-stark";
@@ -8,7 +7,6 @@ import { useScaffoldContractWrite } from "~~/hooks/scaffold-stark/useScaffoldCon
 export const NFTCard = ({ nft }: { nft: Collectible }) => {
   const [transferToAddress, setTransferToAddress] = useState("");
 
-  console.log(BigInt(nft.id.toString()));
   const { writeAsync: transferNFT } = useScaffoldContractWrite({
     contractName: "Challenge0",
     functionName: "transfer_from",