Merge pull request #359 from zkLinkProtocol/feat/mysterybox-v3-rewards

Feat/mysterybox v3 rewards

src/components/Dashboard/MysteryBoxIII.tsx

@@ -76,15 +76,15 @@ const CustomButton = styled(GradientButton)`
 const TRADEMARK_TOKEN_ID_MAP: Record<number, string> = {
   1: "Oak Tree Roots",
   2: "Magnifying Glass",
-  3: "Chess Knight",
-  4: "Binary Code Metrix Cube",
+  10: "+100 Nova points",
+  12: "+300 Nova points",
 };
 
 const PRIZE_ID_NFT_MAP_V2: Record<number, number> = {
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
+  1: 0,
+  2: 1,
+  10: 2,
+  12: 3,
 };
 
 const getDrawIndexWithPrizeTokenId = (tokenId: number) => {
@@ -172,7 +172,7 @@ export default function MysteryBoxIII() {
       return;
     }
 
-    if (!drawedNftId) {
+    if (!drawedNftId || drawedNftId === 5) {
       setDrawing(true);
       const res = await drawMystery3(address);
 
@@ -181,8 +181,22 @@ export default function MysteryBoxIII() {
         setTrademarkMintParams({ tokenId, nonce, signature, expiry, mintType });
         await drawRef?.current?.start(PRIZE_ID_NFT_MAP_V2[tokenId]);
 
-        const drawPrizeId = PRIZE_ID_NFT_MAP_V2[tokenId];
-        setDrawedNftId(drawPrizeId);
+        if (tokenId === 5) {
+          setUpdate((update) => update + 1);
+        } else if ([10, 12].includes(tokenId)) {
+          await sleep(2000);
+          setDrawedNftId(undefined);
+          setTrademarkMintStatus(MintStatus.Success);
+          setMintResult({
+            name: TRADEMARK_TOKEN_ID_MAP[tokenId!],
+            img: `/img/m3box-id-${tokenId}.png`,
+          });
+          trademarkMintModal.onOpen();
+          drawModal.onClose();
+        } else {
+          // const drawPrizeId = PRIZE_ID_NFT_MAP_V2[tokenId];
+          setDrawedNftId(tokenId);
+        }
 
         setUpdate((update) => update + 1);
         return; // draw first and then mint as step2.
@@ -253,6 +267,11 @@ export default function MysteryBoxIII() {
     if (result && result?.remainMintNum) {
       setRemainDrawCount(Number(result.remainMintNum) || 0);
     }
+
+    if (result?.unMintedRecord) {
+      const { nftId } = result.unMintedRecord;
+      setDrawedNftId(nftId);
+    }
   };
 
   useEffect(() => {

src/components/DrawAnimationV3/index.tsx

@@ -19,8 +19,14 @@ interface IProps {
 const TrademarkItems = [
   { name: "Oak Tree Roots", img: "img-trademark-1.png" },
   { name: "Magnifying Glass", img: "img-trademark-2.png" },
-  { name: "Chess Knight", img: "img-trademark-3.png" },
-  { name: "Binary Code Metrix Cube", img: "img-trademark-4.png" },
+  {
+    name: "+100 Nova points",
+    img: "m3box-id-10.png",
+  },
+  {
+    name: "+300 Nova points",
+    img: "m3box-id-12.png",
+  },
 ];
 
 const LotteryAnimation = React.forwardRef<Ref, IProps>((props, ref) => {
@@ -72,6 +78,7 @@ const LotteryAnimation = React.forwardRef<Ref, IProps>((props, ref) => {
   };
 
   useEffect(() => {
+    console.log("targetImageIndex", targetImageIndex);
     if (targetImageIndex !== undefined) {
       setCurrentImageIndex(targetImageIndex);
     } else {

vite.config.ts

@@ -47,8 +47,8 @@ export default defineConfig({
     port: 3001,
     proxy: {
       "/app-api": {
-        // target: "https://goerli.app.zklink.io",
-        target: "https://app-api.zklink.io",
+        target: "https://goerli.app.zklink.io",
+        // target: "https://app-api.zklink.io",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/app-api/, ""),
       },