support skip nft mint

zkLinkProtocol · Jul 30, 2024 · 8731b3c · 8731b3c
1 parent 694d3d5
commit 8731b3c
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 45 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -738,6 +738,9 @@ export const getCategoryList = (
 export const dailyOpen = (): Promise<Response> =>
   http.post(`${BASE_URL_API}/invite/checkin/open`);
 
+export const dailySkipMint = (): Promise<Response> =>
+  http.post(`${BASE_URL_API}/invite/skip`);
+
 export interface DailyCheckinHistoryData {
   date: string;
   expired: boolean;

diff --git a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx
@@ -12,9 +12,12 @@ import {
 import { UseDisclosureReturn } from "@nextui-org/use-disclosure";
 import Marquee from "@/components/Marquee";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
-import { dailyOpen } from "@/api";
+import { dailyOpen, dailySkipMint } from "@/api";
 import { sleep } from "@/utils";
-import useNovaNFT, { MysteryboxMintParams } from "@/hooks/useNovaNFT";
+import useNovaNFT, {
+  MysteryboxMintParams,
+  TrademarkMintParams,
+} from "@/hooks/useNovaNFT";
 import {
   MintStatus,
   TRADEMARK_NFT_MARKET_URL,
@@ -79,6 +82,7 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
     points?: number;
     tooltip?: string;
   }>();
+  const [mintParams, setMintParams] = useState<TrademarkMintParams>();
   const mintResultModal = useDisclosure();
   const handleDrawEnd = () => {};
 
@@ -112,9 +116,7 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
     setMintResult({
       ...prize,
     });
-    if ([1, 2, 3, 4].includes(tokenId)) {
-      await sleep(2000); // show nft
-      setMinting(true);
+    if (tokenId <= 4) {
       const { tokenId, nonce, signature, expiry, mintType } = res.result;
       const mintParams = {
         tokenId,
@@ -124,32 +126,12 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
         method: "safeMintCommon",
         mintType,
       };
-
-      try {
-        await sendTrademarkMintTx(mintParams);
-        setMintStatus(MintStatus.Success);
-        mintResultModal.onOpen();
-        onDrawed(); // update remain times after mint tx
-      } catch (e) {
-        console.log(e);
-        setMintStatus(MintStatus.Failed);
-        if (e.message) {
-          if (e.message.includes("rejected the request")) {
-            setFailMessage("User rejected the request");
-          } else {
-            setFailMessage(e.message);
-          }
-        }
-      } finally {
-        setMinting(false);
-        setSpinging(false);
-      }
+      setMintParams(mintParams);
     } else {
       setMintStatus(MintStatus.Success);
       mintResultModal.onOpen();
-      setSpinging(false);
     }
-
+    setSpinging(false);
     if (!remain || remain <= 1) {
       modalInstance.onClose();
     }
@@ -160,10 +142,42 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
     modalInstance,
     onDrawed,
     remain,
-    sendTrademarkMintTx,
     switchChain,
   ]);
 
+  const handleMint = useCallback(async () => {
+    if (!mintParams) {
+      return;
+    }
+    try {
+      setMinting(true);
+      await sendTrademarkMintTx(mintParams);
+      setMintStatus(MintStatus.Success);
+      mintResultModal.onOpen();
+      onDrawed(); // update remain times after mint tx
+      setMintParams(undefined);
+    } catch (e) {
+      console.log(e);
+      setMintStatus(MintStatus.Failed);
+      if (e.message) {
+        if (e.message.includes("rejected the request")) {
+          setFailMessage("User rejected the request");
+        } else {
+          setFailMessage(e.message);
+        }
+      }
+    } finally {
+      setMinting(false);
+    }
+  }, [mintParams, mintResultModal, onDrawed, sendTrademarkMintTx]);
+
+  const handleSkip = async () => {
+    await dailySkipMint();
+    setMintParams(undefined);
+    mintResultModal.onClose();
+    onDrawed(); // update remain times after skip
+  };
+
   useEffect(() => {
     if (!modalInstance.isOpen) {
       setMinting(false);
@@ -216,23 +230,46 @@ const DailyDrawModal: React.FC<IProps> = (props: IProps) => {
                 </SpinPointer>
               </ModalBody>
               <ModalFooter>
-                <div className="flex flex-col w-full">
-                  <SpinButton
-                    onClick={handleSpin}
-                    isLoading={spinging}
-                    disabled={minting || spinging || !remain}
-                  >
-                    <img
-                      src={
-                        minting
-                          ? "/img/s2/icon-daily-mint.svg"
-                          : "/img/s2/icon-spin.svg"
-                      }
-                      alt=""
-                    />
-                    <span>{btnText}</span>
-                  </SpinButton>
-                </div>
+                {!mintParams && (
+                  <div className="flex flex-col w-full">
+                    <SpinButton
+                      onClick={handleSpin}
+                      isLoading={spinging}
+                      disabled={minting || spinging || !remain}
+                    >
+                      <img
+                        src={
+                          spinging
+                            ? "/img/s2/icon-spin.svg"
+                            : "/img/s2/icon-daily-mint.svg"
+                        }
+                        alt=""
+                      />
+                      <span>{btnText}</span>
+                    </SpinButton>
+                  </div>
+                )}
+                {mintParams && (
+                  <div className="flex w-full gap-4 justify-between">
+                    <SpinButton
+                      onClick={handleSkip}
+                      isLoading={spinging}
+                      disabled={minting || spinging || !remain}
+                    >
+                      <span>Skip</span>
+                    </SpinButton>
+                    <SpinButton
+                      onClick={handleMint}
+                      isLoading={minting}
+                      disabled={minting || spinging || !remain}
+                    >
+                      {!minting && (
+                        <img src={"/img/s2/icon-daily-mint.svg"} alt="" />
+                      )}
+                      <span>Mint</span>
+                    </SpinButton>
+                  </div>
+                )}
               </ModalFooter>
             </>
           )}