fix balance udpate after mint

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<IProps> = (props: IProps) => {
   const [mintStatus, setMintStatus] = useState<MintStatus | undefined>();
   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<IProps> = (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<IProps> = (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<IProps> = (props: IProps) => {
                   ref={drawRef}
                   onDrawEnd={handleDrawEnd}
                   PrizeItems={PrizeItems}
+                  targetIndex={
+                    mintParams ? PRIZE_MAP[mintParams.tokenId] : undefined
+                  }
                 />
                 <SpinPointer>
                   <img src="/img/s2/icon-daily-spin-pointer.png" alt="" />

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 () => {

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 (
     <Container>

src/components/Marquee/index.tsx

@@ -89,7 +89,8 @@ const Marquee = forwardRef<Ref, IProps>((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)`;
     }
   }, []);

src/hooks/useUpdateNftBalanceStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface UpdateNftBalanceStore {
+  factor: number;
+  updateFactory: () => void;
+}
+
+export const useUpdateNftBalanceStore = create<UpdateNftBalanceStore>(
+  (set) => ({
+    factor: 0,
+    updateFactory: () => set((state) => ({ factor: state.factor + 1 })),
+  })
+);