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] 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 })), + }) +);