From 8731b3caf90b0d0231ad2a863c45f8c540cfb0a4 Mon Sep 17 00:00:00 2001 From: MickWang <1244134672@qq.com> Date: Tue, 30 Jul 2024 15:18:32 +0800 Subject: [PATCH 1/3] support skip nft mint --- src/api/index.ts | 3 + .../DailyRoulette/DailyDrawModal.tsx | 127 +++++++++++------- 2 files changed, 85 insertions(+), 45 deletions(-) diff --git a/src/api/index.ts b/src/api/index.ts index c83f4aef..65033954 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -738,6 +738,9 @@ export const getCategoryList = ( export const dailyOpen = (): Promise => http.post(`${BASE_URL_API}/invite/checkin/open`); +export const dailySkipMint = (): Promise => + 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 index 87ff8c1c..bf8efa44 100644 --- 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 = (props: IProps) => { points?: number; tooltip?: string; }>(); + const [mintParams, setMintParams] = useState(); const mintResultModal = useDisclosure(); const handleDrawEnd = () => {}; @@ -112,9 +116,7 @@ const DailyDrawModal: React.FC = (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 = (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 = (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 = (props: IProps) => { -
- - - {btnText} - -
+ {!mintParams && ( +
+ + + {btnText} + +
+ )} + {mintParams && ( +
+ + Skip + + + {!minting && ( + + )} + Mint + +
+ )} )} From cf411b8c86995e306513ef5af4305b8474b9e863 Mon Sep 17 00:00:00 2001 From: MickWang <1244134672@qq.com> Date: Tue, 30 Jul 2024 16:40:28 +0800 Subject: [PATCH 2/3] fix balance udpate after mint --- .../DashboardS2/DailyRoulette/DailyDrawModal.tsx | 15 ++++++++++++++- .../Tabs/PortfolioComponents/LynksNFT.tsx | 6 +++++- .../Tabs/PortfolioComponents/TrademarkNFT.tsx | 6 +++--- src/components/Marquee/index.tsx | 3 ++- src/hooks/useUpdateNftBalanceStore.ts | 13 +++++++++++++ 5 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 src/hooks/useUpdateNftBalanceStore.ts diff --git a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx index bf8efa44..f1005215 100644 --- a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx +++ b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx @@ -25,6 +25,8 @@ import { } from "@/constants"; import { TxResult } from "@/components/Dashboard/NovaCharacter"; import { useAccount, useSwitchChain } from "wagmi"; +import { useUpdateNftBalanceStore } from "@/hooks/useUpdateNftBalanceStore"; + interface IProps { modalInstance: UseDisclosureReturn; onDrawed: () => void; @@ -72,6 +74,7 @@ const DailyDrawModal: React.FC = (props: IProps) => { const [mintStatus, setMintStatus] = useState(); const [failMessage, setFailMessage] = useState(""); const { switchChain } = useSwitchChain(); + const { updateFactory } = useUpdateNftBalanceStore(); const { sendTrademarkMintTx } = useNovaNFT(); const { modalInstance, onDrawed, remain } = props; @@ -156,6 +159,7 @@ const DailyDrawModal: React.FC = (props: IProps) => { mintResultModal.onOpen(); onDrawed(); // update remain times after mint tx setMintParams(undefined); + updateFactory(); } catch (e) { console.log(e); setMintStatus(MintStatus.Failed); @@ -169,7 +173,13 @@ const DailyDrawModal: React.FC = (props: IProps) => { } finally { setMinting(false); } - }, [mintParams, mintResultModal, onDrawed, sendTrademarkMintTx]); + }, [ + mintParams, + mintResultModal, + onDrawed, + sendTrademarkMintTx, + updateFactory, + ]); const handleSkip = async () => { await dailySkipMint(); @@ -224,6 +234,9 @@ const DailyDrawModal: React.FC = (props: IProps) => { ref={drawRef} onDrawEnd={handleDrawEnd} PrizeItems={PrizeItems} + targetIndex={ + mintParams ? PRIZE_MAP[mintParams.tokenId] : undefined + } /> diff --git a/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx b/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx index 6b1c4977..0507c8a4 100644 --- a/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx +++ b/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx @@ -6,6 +6,9 @@ import { useAccount } from "wagmi"; import { useState, useEffect, useCallback, useMemo } from "react"; import { Abi } from "viem"; import SbtUpgradeModal from "@/components/Dashboard/NovaCharacterComponents/SbtUpgradeModal"; +import { useUpdateNftBalanceStore } from "@/hooks/useUpdateNftBalanceStore"; + + export default function SbtNFT() { const { address } = useAccount(); const [lynksBalance, setLynksBalance] = useState(0); @@ -15,6 +18,7 @@ export default function SbtNFT() { const [update, setUpdate] = useState(0); const upgradeModal = useDisclosure(); const [upgradable, setUpgradable] = useState(false); + const { factor } = useUpdateNftBalanceStore(); useEffect(() => { (async () => { @@ -45,7 +49,7 @@ export default function SbtNFT() { } } })(); - }, [address, getLynksNFT, publicClient, trademarkNFT, update]); + }, [address, getLynksNFT, publicClient, trademarkNFT, update,factor]); useEffect(() => { (async () => { diff --git a/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx b/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx index f80e182d..5478e4dd 100644 --- a/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx +++ b/src/components/DashboardS2/Tabs/PortfolioComponents/TrademarkNFT.tsx @@ -3,7 +3,7 @@ import useNovaNFT, { MysteryboxMintParams } from "@/hooks/useNovaNFT"; import { useAccount } from "wagmi"; import { Abi } from "viem"; import styled from "styled-components"; - +import { useUpdateNftBalanceStore } from "@/hooks/useUpdateNftBalanceStore"; const Container = styled.div` margin-top: 20px; & > div:last-child { @@ -88,7 +88,7 @@ export default function TrademarkNFT() { const [nftData, setNftData] = useState(ALL_NFTS); const { address } = useAccount(); const { publicClient, trademarkNFT } = useNovaNFT(); - + const { factor } = useUpdateNftBalanceStore(); useEffect(() => { (async () => { if (!publicClient || !address || !trademarkNFT) { @@ -112,7 +112,7 @@ export default function TrademarkNFT() { } setNftData(nfts); })(); - }, [address, publicClient, trademarkNFT]); + }, [address, publicClient, trademarkNFT, factor]); return ( diff --git a/src/components/Marquee/index.tsx b/src/components/Marquee/index.tsx index 08bcee34..6cae9bf6 100644 --- a/src/components/Marquee/index.tsx +++ b/src/components/Marquee/index.tsx @@ -89,7 +89,8 @@ const Marquee = forwardRef((props, ref) => { useEffect(() => { if (marqueeRef.current) { marqueeRef.current.style.transform = `translateX(${ - Math.floor(PrizeItems.length / 2) * IMAGE_WIDTH + Math.floor(PrizeItems.length / 2) * IMAGE_WIDTH - + (targetIndex ?? 0) * IMAGE_WIDTH }px)`; } }, []); diff --git a/src/hooks/useUpdateNftBalanceStore.ts b/src/hooks/useUpdateNftBalanceStore.ts new file mode 100644 index 00000000..bc908374 --- /dev/null +++ b/src/hooks/useUpdateNftBalanceStore.ts @@ -0,0 +1,13 @@ +import { create } from "zustand"; + +interface UpdateNftBalanceStore { + factor: number; + updateFactory: () => void; +} + +export const useUpdateNftBalanceStore = create( + (set) => ({ + factor: 0, + updateFactory: () => set((state) => ({ factor: state.factor + 1 })), + }) +); From c20c62c058279c64d8257bf62de74da7a0dc536a Mon Sep 17 00:00:00 2001 From: MickWang <1244134672@qq.com> Date: Tue, 30 Jul 2024 18:13:39 +0800 Subject: [PATCH 3/3] update balance after upgrade nft --- .../DashboardS2/DailyRoulette/DailyDrawModal.tsx | 6 +++--- .../Tabs/PortfolioComponents/LynksNFT.tsx | 12 ++++++------ src/hooks/useUpdateNftBalanceStore.ts | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx index f1005215..75c299ec 100644 --- a/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx +++ b/src/components/DashboardS2/DailyRoulette/DailyDrawModal.tsx @@ -74,7 +74,7 @@ const DailyDrawModal: React.FC = (props: IProps) => { const [mintStatus, setMintStatus] = useState(); const [failMessage, setFailMessage] = useState(""); const { switchChain } = useSwitchChain(); - const { updateFactory } = useUpdateNftBalanceStore(); + const { updateFactor } = useUpdateNftBalanceStore(); const { sendTrademarkMintTx } = useNovaNFT(); const { modalInstance, onDrawed, remain } = props; @@ -159,7 +159,7 @@ const DailyDrawModal: React.FC = (props: IProps) => { mintResultModal.onOpen(); onDrawed(); // update remain times after mint tx setMintParams(undefined); - updateFactory(); + updateFactor(); } catch (e) { console.log(e); setMintStatus(MintStatus.Failed); @@ -178,7 +178,7 @@ const DailyDrawModal: React.FC = (props: IProps) => { mintResultModal, onDrawed, sendTrademarkMintTx, - updateFactory, + updateFactor, ]); const handleSkip = async () => { diff --git a/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx b/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx index 0507c8a4..bf505194 100644 --- a/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx +++ b/src/components/DashboardS2/Tabs/PortfolioComponents/LynksNFT.tsx @@ -8,17 +8,15 @@ import { Abi } from "viem"; import SbtUpgradeModal from "@/components/Dashboard/NovaCharacterComponents/SbtUpgradeModal"; import { useUpdateNftBalanceStore } from "@/hooks/useUpdateNftBalanceStore"; - export default function SbtNFT() { const { address } = useAccount(); const [lynksBalance, setLynksBalance] = useState(0); const { publicClient, trademarkNFT } = useNovaNFT(); const { getLynksNFT } = useNovaNFT(); const { nft, loading: mintLoading, fetchLoading } = useSbtNft(); - const [update, setUpdate] = useState(0); const upgradeModal = useDisclosure(); const [upgradable, setUpgradable] = useState(false); - const { factor } = useUpdateNftBalanceStore(); + const { factor, updateFactor } = useUpdateNftBalanceStore(); useEffect(() => { (async () => { @@ -49,7 +47,7 @@ export default function SbtNFT() { } } })(); - }, [address, getLynksNFT, publicClient, trademarkNFT, update,factor]); + }, [address, getLynksNFT, publicClient, trademarkNFT, factor]); useEffect(() => { (async () => { @@ -65,7 +63,7 @@ export default function SbtNFT() { setLynksBalance(balance); } })(); - }, [address, getLynksNFT]); + }, [address, getLynksNFT, factor]); const handleMintNow = useCallback(() => { if (fetchLoading) { @@ -112,7 +110,9 @@ export default function SbtNFT() { nft={nft} mintLoading={mintLoading} upgradeModal={upgradeModal} - onUpgraded={() => setUpdate((v) => v + 1)} + onUpgraded={() => { + updateFactor(); + }} /> ); diff --git a/src/hooks/useUpdateNftBalanceStore.ts b/src/hooks/useUpdateNftBalanceStore.ts index bc908374..07ecb547 100644 --- a/src/hooks/useUpdateNftBalanceStore.ts +++ b/src/hooks/useUpdateNftBalanceStore.ts @@ -2,12 +2,12 @@ import { create } from "zustand"; interface UpdateNftBalanceStore { factor: number; - updateFactory: () => void; + updateFactor: () => void; } export const useUpdateNftBalanceStore = create( (set) => ({ factor: 0, - updateFactory: () => set((state) => ({ factor: state.factor + 1 })), + updateFactor: () => set((state) => ({ factor: state.factor + 1 })), }) );