fixes

tari-project · Sep 24, 2024 · 338ea30 · 338ea30
1 parent 4340dac
commit 338ea30
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git a/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx b/src/containers/Airdrop/AirdropGiftTracker/sections/LoggedIn/LoggedIn.tsx
@@ -1,50 +1,62 @@
-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';
 
 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>
 
             <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
@@ -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
@@ -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 }),