From 338ea3055d6fc503286fa479365ed15b1591eab3 Mon Sep 17 00:00:00 2001
From: Juan De Luca <juan.f.d.luca@gmail.com>
Date: Tue, 24 Sep 2024 13:57:42 +0100
Subject: [PATCH] fixes

---
 .../sections/LoggedIn/LoggedIn.tsx            | 52 ++++++++++++-------
 .../useAirdropUserPointsListener.ts           | 11 +++-
 src/store/useAirdropStore.ts                  |  4 ++
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx b/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx
index 291c5af97..c7c98251f 100644
--- a/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx
+++ b/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Gems from '../../components/Gems/Gems';
 import UserInfo from './segments/UserInfo/UserInfo';
 import { UserRow, Wrapper } from './styles';
-import { useAirdropStore } from '@app/store/useAirdropStore';
+import { useAirdropStore, REFERRAL_GEMS, GIFT_GEMS, REFERRAL_BONUS_GEMS } from '@app/store/useAirdropStore';
 import Invite from './segments/Invite/Invite';
 import Flare from './segments/Flare/Flare';
 import { AnimatePresence } from 'framer-motion';
@@ -10,28 +10,40 @@ import { AnimatePresence } from 'framer-motion';
 export default function LoggedIn() {
     const [gems, setGems] = useState(0);
 
-    const [showFlare, setShowFlare] = useState<'GoalComplete' | 'FriendAccepted' | 'BonusGems' | false>(false);
-
-    const { userDetails, userPoints } = useAirdropStore();
+    const { userDetails, userPoints, flareAnimationType, setFlareAnimationType } = useAirdropStore();
 
     useEffect(() => {
         setGems(userPoints?.base.gems || userDetails?.user?.rank?.gems || 0);
     }, [userPoints?.base.gems, userDetails?.user?.rank?.gems]);
 
-    const handleShowFlare = () => {
-        if (showFlare) {
-            setShowFlare(false);
-            return;
-        }
+    // const handleShowFlare = () => {
+    //     if (flareAnimationType) {
+    //         setFlareAnimationType();
+    //         return;
+    //     }
+    //
+    //     //setShowFlare('GoalComplete');
+    //     setFlareAnimationType('FriendAccepted');
+    //     //setShowFlare('BonusGems');
+    // };
+    //
 
-        //setShowFlare('GoalComplete');
-        setShowFlare('FriendAccepted');
-        //setShowFlare('BonusGems');
-    };
+    const flareGems = useMemo(() => {
+        switch (flareAnimationType) {
+            case 'GoalComplete':
+                return REFERRAL_BONUS_GEMS;
+            case 'FriendAccepted':
+                return REFERRAL_GEMS;
+            case 'BonusGems':
+                return GIFT_GEMS;
+            default:
+                return 0;
+        }
+    }, [flareAnimationType]);
 
     return (
         <Wrapper>
-            <UserRow onClick={handleShowFlare}>
+            <UserRow>
                 <UserInfo />
                 <Gems number={gems} label={`Gems`} />
             </UserRow>
@@ -39,12 +51,12 @@ export default function LoggedIn() {
             <Invite />
 
             <AnimatePresence>
-                {showFlare && (
+                {flareAnimationType && (
                     <Flare
-                        gems={2000}
-                        animationType={showFlare}
-                        onAnimationComplete={() => setShowFlare(false)}
-                        onClick={() => setShowFlare(false)}
+                        gems={flareGems}
+                        animationType={flareAnimationType}
+                        onAnimationComplete={() => setFlareAnimationType()}
+                        onClick={() => setFlareAnimationType()}
                     />
                 )}
             </AnimatePresence>
diff --git a/src/hooks/airdrop/stateHelpers/useAirdropUserPointsListener.ts b/src/hooks/airdrop/stateHelpers/useAirdropUserPointsListener.ts
index 0e053e80d..84c29f188 100644
--- a/src/hooks/airdrop/stateHelpers/useAirdropUserPointsListener.ts
+++ b/src/hooks/airdrop/stateHelpers/useAirdropUserPointsListener.ts
@@ -4,7 +4,10 @@ import { useEffect } from 'react';
 
 export const useAirdropUserPointsListener = () => {
     const setUserPoints = useAirdropStore((state) => state.setUserPoints);
+    const referralCount = useAirdropStore((state) => state.referralCount);
     const setUserPointsReferralCount = useAirdropStore((state) => state.setReferralCount);
+    const setFlareAnimationType = useAirdropStore((state) => state.setFlareAnimationType);
+
     useEffect(() => {
         let unListen: () => void = () => {
             //do nothing
@@ -15,7 +18,10 @@ export const useAirdropUserPointsListener = () => {
                 const payload = event.payload as UserPoints;
                 setUserPoints(payload);
                 if (payload.referralCount) {
-                    setUserPointsReferralCount(payload.referralCount);
+                    if (referralCount?.count !== payload.referralCount.count) {
+                        setFlareAnimationType('FriendAccepted');
+                        setUserPointsReferralCount(payload.referralCount);
+                    }
                 }
             }
         })
@@ -27,5 +33,6 @@ export const useAirdropUserPointsListener = () => {
         return () => {
             unListen();
         };
-    }, [setUserPoints, setUserPointsReferralCount]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 };
diff --git a/src/store/useAirdropStore.ts b/src/store/useAirdropStore.ts
index 1e31ffc48..191f6d3ad 100644
--- a/src/store/useAirdropStore.ts
+++ b/src/store/useAirdropStore.ts
@@ -103,6 +103,7 @@ export interface BackendInMemoryConfig {
     airdropTwitterAuthUrl: string;
 }
 
+type AnimationType = 'GoalComplete' | 'FriendAccepted' | 'BonusGems';
 //////////////////////////////////////////
 
 interface AirdropState {
@@ -114,6 +115,7 @@ interface AirdropState {
     userPoints?: UserPoints;
     referralCount?: ReferralCount;
     backendInMemoryConfig?: BackendInMemoryConfig;
+    flareAnimationType?: AnimationType;
 }
 
 interface AirdropStore extends AirdropState {
@@ -125,6 +127,7 @@ interface AirdropStore extends AirdropState {
     setBackendInMemoryConfig: (config?: BackendInMemoryConfig) => void;
     setReferralCount: (referralCount: ReferralCount) => void;
     setAcceptedReferral: (acceptedReferral: boolean) => void;
+    setFlareAnimationType: (flareAnimationType?: AnimationType) => void;
     logout: () => void;
 }
 
@@ -142,6 +145,7 @@ export const useAirdropStore = create<AirdropStore>()(
         (set) => ({
             authUuid: '',
             setWipUI: (wipUI) => set({ wipUI }),
+            setFlareAnimationType: (flareAnimationType) => set({ flareAnimationType }),
             setAcceptedReferral: (acceptedReferral) => set({ acceptedReferral }),
             logout: () => set(clearState),
             setUserDetails: (userDetails) => set({ userDetails }),