From 1a3b43fa0f38351ec3a37e9071c91974823fe0b8 Mon Sep 17 00:00:00 2001
From: Adamski <info@admsk2.pl>
Date: Wed, 28 Aug 2024 19:10:31 +0200
Subject: [PATCH 1/2] chore: useSession hook; events url change;

---
 src/hooks/useJumperTracking.ts            |  4 ++++
 src/hooks/useSession.ts                   | 18 ++++++++++--------
 src/hooks/userTracking/useUserTracking.ts |  4 +++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useJumperTracking.ts b/src/hooks/useJumperTracking.ts
index eb3c0bb78..49a770436 100644
--- a/src/hooks/useJumperTracking.ts
+++ b/src/hooks/useJumperTracking.ts
@@ -65,6 +65,8 @@ export interface JumperDataTrackTransactionProps {
   errorCode?: string | number;
   errorMessage?: string;
   pathname?: string;
+  url: string;
+  browserFingerprint: string;
 }
 
 export const useJumperTracking = () => {
@@ -113,6 +115,8 @@ export const useJumperTracking = () => {
       errorMessage: data.errorMessage,
       errorCode: data.errorCode,
       pathname: data.pathname,
+      url: data.url,
+      browserFingerprint: data.browserFingerprint,
     };
     await track(transactionData, JUMPER_ANALYTICS_TRANSACTION);
   };
diff --git a/src/hooks/useSession.ts b/src/hooks/useSession.ts
index e357e337a..6573e4686 100644
--- a/src/hooks/useSession.ts
+++ b/src/hooks/useSession.ts
@@ -2,22 +2,24 @@
 import { useEffect, useState } from 'react';
 import { v7 as uuidv7 } from 'uuid';
 
-export const useSession = (): string | undefined => {
-  const [session, setSession] = useState<string | undefined>(() => {
+export const useSession = (): string => {
+  const [session, setSession] = useState<string>(() => {
     if (
       typeof window !== 'undefined' &&
       typeof sessionStorage !== 'undefined'
     ) {
-      return sessionStorage.getItem('session_id') || undefined;
+      return sessionStorage.getItem('session_id') || uuidv7();
     }
-    return undefined;
+    return uuidv7();
   });
 
   useEffect(() => {
-    if (!session) {
-      const newSessionId = uuidv7();
-      setSession(newSessionId);
-      sessionStorage.setItem('session_id', newSessionId);
+    if (
+      typeof window !== 'undefined' &&
+      typeof sessionStorage !== 'undefined'
+    ) {
+      sessionStorage.setItem('session_id', session);
+      setSession(session);
     }
   }, [session]);
 
diff --git a/src/hooks/userTracking/useUserTracking.ts b/src/hooks/userTracking/useUserTracking.ts
index 882227425..4d93c27d4 100644
--- a/src/hooks/userTracking/useUserTracking.ts
+++ b/src/hooks/userTracking/useUserTracking.ts
@@ -124,7 +124,7 @@ export function useUserTracking() {
             browserFingerprint: fp,
             isMobile: !isDesktop,
             sessionId: sessionId || 'unknown',
-            url: process.env.NEXT_PUBLIC_SITE_URL,
+            url: window?.location?.href,
           };
           await jumperTrackEvent(eventData);
         } catch (error) {
@@ -199,6 +199,8 @@ export function useUserTracking() {
           errorCode: data[TrackingEventParameter.ErrorCode],
           errorMessage: data[TrackingEventParameter.ErrorMessage],
           action: data[TrackingEventParameter.Action] || '',
+          url: window?.location?.href,
+          browserFingerprint: fp,
         };
         await jumperTrackTransaction(transactionData);
       }

From 3bee69df30bda51ce780c3790fa3f78d7e1d9747 Mon Sep 17 00:00:00 2001
From: Tche <45823872+tcheee@users.noreply.github.com>
Date: Thu, 29 Aug 2024 14:29:44 +0200
Subject: [PATCH 2/2] feat: implement back ui minting (#1273)

---
 .../NFTClaimingBox/NFTCard/NFTCard.tsx        | 174 +++++++-----------
 1 file changed, 62 insertions(+), 112 deletions(-)

diff --git a/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.tsx b/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.tsx
index dc81069cc..6205e7a28 100644
--- a/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.tsx
+++ b/src/components/Superfest/NFTClaimingBox/NFTCard/NFTCard.tsx
@@ -38,11 +38,9 @@ export const NFTCard = ({ image, chain, bgColor, typoColor }: NFTCardProps) => {
     });
 
   const NFTimage =
-    chain === 'box' && claimInfo.isClaimed ? LAST_NFT_IMAGE : image;
-
-  // chain === 'box' && (claimInfo.isClaimable || claimInfo.isClaimed)
-  //   ? LAST_NFT_IMAGE
-  //   : image;
+    chain === 'box' && (claimInfo.isClaimable || claimInfo.isClaimed)
+      ? LAST_NFT_IMAGE
+      : image;
 
   async function handleClick() {
     try {
@@ -174,91 +172,50 @@ export const NFTCard = ({ image, chain, bgColor, typoColor }: NFTCardProps) => {
     );
   }
 
-  // if (claimInfo?.isClaimable) {
-  //   return (
-  //     <NFTCardMainBox>
-  //       <Image
-  //         style={{
-  //           borderTopRightRadius: '8px',
-  //           borderTopLeftRadius: '8px',
-  //           marginBottom: '0px',
-  //         }}
-  //         src={NFTimage}
-  //         alt={chain}
-  //         width="288"
-  //         height="288"
-  //       />
-  //       <NFTCardBotomBox>
-  //         <Button
-  //           disabled={isConfirming}
-  //           size="medium"
-  //           styles={{
-  //             backgroundColor: 'transparent',
-  //             border: '2px dotted',
-  //             borderColor: '#000000',
-  //             color: '#000000',
-  //             width: '75%',
-  //             '&:hover': {
-  //               backgroundColor: bgColor,
-  //               color: typoColor,
-  //             },
-  //           }}
-  //           onClick={() => handleClick()}
-  //         >
-  //           <SoraTypography fontSize="16px" lineHeight="18px" fontWeight={600}>
-  //             {isConfirming ? 'MINTING...' : 'MINT'}
-  //           </SoraTypography>
-  //         </Button>
-  //       </NFTCardBotomBox>
-  //     </NFTCardMainBox>
-  //   );
-  // }
-  // return (
-  //   <NFTCardMainBox
-  //     sx={{
-  //       cursor: 'not-allowed',
-  //     }}
-  //   >
-  //     <Image
-  //       style={{
-  //         borderTopRightRadius: '8px',
-  //         borderTopLeftRadius: '8px',
-  //         marginBottom: '0px',
-  //       }}
-  //       src={NFTimage}
-  //       alt={chain}
-  //       width="288"
-  //       height="288"
-  //     />
-  //     <NFTCardBotomBox>
-  //       <Button
-  //         size="medium"
-  //         disabled={true}
-  //         styles={{
-  //           backgroundColor: 'transparent',
-  //           border: '2px dotted',
-  //           borderColor: '#C5B99C',
-  //           width: '75%',
-  //           '&:hover': {
-  //             backgroundColor: bgColor,
-  //             color: typoColor,
-  //           },
-  //         }}
-  //       >
-  //         <SoraTypography fontSize="16px" lineHeight="18px" fontWeight={600}>
-  //           {chain === 'box' ? 'LOCKED' : 'UNAVAILABLE'}
-  //         </SoraTypography>
-  //       </Button>
-  //     </NFTCardBotomBox>
-  //   </NFTCardMainBox>
-  // );
-
-  // temporary fix
+  if (claimInfo?.isClaimable) {
+    return (
+      <NFTCardMainBox>
+        <Image
+          style={{
+            borderTopRightRadius: '8px',
+            borderTopLeftRadius: '8px',
+            marginBottom: '0px',
+          }}
+          src={NFTimage}
+          alt={chain}
+          width="288"
+          height="288"
+        />
+        <NFTCardBotomBox>
+          <Button
+            disabled={isConfirming}
+            size="medium"
+            styles={{
+              backgroundColor: 'transparent',
+              border: '2px dotted',
+              borderColor: '#000000',
+              color: '#000000',
+              width: '75%',
+              '&:hover': {
+                backgroundColor: bgColor,
+                color: typoColor,
+              },
+            }}
+            onClick={() => handleClick()}
+          >
+            <SoraTypography fontSize="16px" lineHeight="18px" fontWeight={600}>
+              {isConfirming ? 'MINTING...' : 'MINT'}
+            </SoraTypography>
+          </Button>
+        </NFTCardBotomBox>
+      </NFTCardMainBox>
+    );
+  }
   return (
     <NFTCardMainBox
-    // sx={{
-    //   cursor: 'not-allowed',
-    // }}
+      sx={{
+        cursor: 'not-allowed',
+      }}
     >
       <Image
         style={{
@@ -272,31 +229,24 @@ export const NFTCard = ({ image, chain, bgColor, typoColor }: NFTCardProps) => {
         height="288"
       />
       <NFTCardBotomBox>
-        <Link
-          href={`https://app.galxe.com/quest/JumperExchange/${claimInfo.cid}`}
-          target={'_blank'}
-          style={{ textDecoration: 'inherit' }}
+        <Button
+          size="medium"
+          disabled={true}
+          styles={{
+            backgroundColor: 'transparent',
+            border: '2px dotted',
+            borderColor: '#C5B99C',
+            width: '75%',
+            '&:hover': {
+              backgroundColor: bgColor,
+              color: typoColor,
+            },
+          }}
         >
-          <Button
-            size="medium"
-            // disabled={false}
-            styles={{
-              backgroundColor: 'transparent',
-              border: '2px dotted',
-              color: '#000000',
-              borderColor: '#C5B99C',
-              width: '75%',
-              '&:hover': {
-                backgroundColor: bgColor,
-                color: typoColor,
-              },
-            }}
-          >
-            <SoraTypography fontSize="14px" lineHeight="18px" fontWeight={600}>
-              {'CHECK AVAILABILITY'}
-            </SoraTypography>
-          </Button>
-        </Link>
+          <SoraTypography fontSize="16px" lineHeight="18px" fontWeight={600}>
+            {chain === 'box' ? 'LOCKED' : 'UNAVAILABLE'}
+          </SoraTypography>
+        </Button>
       </NFTCardBotomBox>
     </NFTCardMainBox>
   );