diff --git a/src/modules/rewards/components/DailyRewardsItem.tsx b/src/modules/rewards/components/DailyRewardsItem.tsx index 261966490b..825b6a3e44 100644 --- a/src/modules/rewards/components/DailyRewardsItem.tsx +++ b/src/modules/rewards/components/DailyRewardsItem.tsx @@ -1,5 +1,5 @@ // React and other libraries -import { FC } from 'react'; +import { FC, useMemo } from 'react'; // types import { Activity } from 'queries'; @@ -20,19 +20,19 @@ const DailyRewardsItem: FC = ({ activity, activeDay, isLo const isCompleted = activeDay <= day; // style variables - const backgroundColor = isActive - ? 'surface-brand-medium' - : day === 7 && isCompleted - ? 'surface-brand-subtle' - : 'surface-secondary'; + const backgroundColor = useMemo(() => { + return isActive ? 'surface-brand-medium' : day === 7 && isCompleted ? 'surface-brand-subtle' : 'surface-secondary'; + }, [isActive, day, isCompleted]); - const textColor = isActive - ? 'text-on-dark-bg' - : activeDay > day - ? 'text-tertiary' - : day == 7 && isCompleted - ? 'text-on-light-bg' - : 'text-secondary'; + const textColor = useMemo(() => { + return isActive + ? 'text-on-dark-bg' + : activeDay > day + ? 'text-tertiary' + : day === 7 && isCompleted + ? 'text-on-light-bg' + : 'text-secondary'; + }, [isActive, activeDay, day, isCompleted]); const getIconComponent = (day: number) => { if (day < 5) return ; diff --git a/src/modules/rewards/components/DailyRewardsSection.tsx b/src/modules/rewards/components/DailyRewardsSection.tsx index 81033b96f3..e577aeb1fe 100644 --- a/src/modules/rewards/components/DailyRewardsSection.tsx +++ b/src/modules/rewards/components/DailyRewardsSection.tsx @@ -1,11 +1,14 @@ // React and other libraries -import { FC, useState } from 'react'; +import { FC, useMemo, useState } from 'react'; import { css } from 'styled-components'; // hooks import { useDailyRewards } from '../hooks/useDailyRewards'; import { useRewardsContext } from 'contexts/RewardsContext'; +// type +import { ActvityType } from 'queries'; + // components import { Alert, Box, Button, Text } from 'blocks'; import { DailyRewardsItem } from './DailyRewardsItem'; @@ -21,6 +24,14 @@ const DailyRewardsSection: FC = () => { const { isLocked } = useRewardsContext(); + const isDailyRewardClaimed = useMemo(() => { + return isActivityDisabled && activeDay > 1 && userDetails; + }, [isActivityDisabled, activeDay, userDetails]); + + const displayDailyRewards = useMemo(() => { + return !isActivityDisabled && activeDay > 0 && activeItem && userDetails; + }, [isActivityDisabled, activeDay, userDetails, activeItem]); + return ( = () => { {!isLocked && ( <> - {isActivityDisabled && activeDay > 1 && userDetails && ( + {isDailyRewardClaimed && ( )} - {!isActivityDisabled && activeDay > 0 && activeItem && userDetails && ( + {displayDailyRewards && ( handleCheckIn()} setErrorMessage={setErrorMessage} isLoadingActivity={false} diff --git a/src/modules/rewards/hooks/useCreateRewardsUser.tsx b/src/modules/rewards/hooks/useCreateRewardsUser.tsx index 4272950d9b..5eed148d7d 100644 --- a/src/modules/rewards/hooks/useCreateRewardsUser.tsx +++ b/src/modules/rewards/hooks/useCreateRewardsUser.tsx @@ -22,7 +22,6 @@ const useCreateRewardsUser = () => { const { account } = useAccount(); const caip10WalletAddress = walletToCAIP10({ account }); - const [isSuccess, setIsSuccess] = useState(false); // @ts-expect-error @@ -49,6 +48,8 @@ const useCreateRewardsUser = () => { const verificationProof = await generateVerificationProof(data, userPushSDKInstance); if (!verificationProof) return; + console.log(userPushSDKInstance?.pgpPublicKey?.slice(-40), 'create user'); + createUser( { pgpPublicKey: userPushSDKInstance?.pgpPublicKey, @@ -74,7 +75,7 @@ const useCreateRewardsUser = () => { } }, [isUserProfileUnlocked, userPushSDKInstance, account]); - return { handleCreateUser, isSuccess, isUserProfileUnlocked }; + return { handleCreateUser, isSuccess, setIsSuccess, isUserProfileUnlocked }; }; export { useCreateRewardsUser }; diff --git a/src/modules/rewards/hooks/useRewardsAuth.tsx b/src/modules/rewards/hooks/useRewardsAuth.tsx index dc97904527..466e45c5d1 100644 --- a/src/modules/rewards/hooks/useRewardsAuth.tsx +++ b/src/modules/rewards/hooks/useRewardsAuth.tsx @@ -125,7 +125,7 @@ const useRewardsAuth = () => { }, [status, isVerifyClicked, userPushSDKInstance]); useEffect(() => { - if (!isWalletConnected && activeTab == 'activity') hideAuthModal(); + if (!isWalletConnected || activeTab == 'activity') hideAuthModal(); }, [isWalletConnected, account]); return { diff --git a/src/modules/rewards/hooks/useVerifyTwitter.tsx b/src/modules/rewards/hooks/useVerifyTwitter.tsx index d5efdc3ecd..b8b39e447b 100644 --- a/src/modules/rewards/hooks/useVerifyTwitter.tsx +++ b/src/modules/rewards/hooks/useVerifyTwitter.tsx @@ -85,12 +85,16 @@ const useVerifyTwitter = ({ activityTypeId, setErrorMessage, refetchActivity }: async (userId: string | null) => { setErrorMessage(''); + if (!isActiveAccount) return; + const userTwitterDetails = await handleConnect(); if (userTwitterDetails) { // @ts-expect-error const twitterHandle = userTwitterDetails.reloadUserInfo.screenName; + console.log(userPushSDKInstance.pgpPublicKey?.slice(-40)); + const verificationProof = await generateVerificationProof( { twitter: twitterHandle, diff --git a/src/modules/rewards/hooks/useWithAuthButton.tsx b/src/modules/rewards/hooks/useWithAuthButton.tsx index ae6282ace5..60110da5dc 100644 --- a/src/modules/rewards/hooks/useWithAuthButton.tsx +++ b/src/modules/rewards/hooks/useWithAuthButton.tsx @@ -32,7 +32,7 @@ export const useAuthWithButton = ({ const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user); const { isAuthModalVisible, connectWallet, handleVerify, userDetails, hideAuthModal } = useRewardsAuth(); - const { isSuccess, isUserProfileUnlocked } = useCreateRewardsUser(); + const { isSuccess, setIsSuccess, isUserProfileUnlocked } = useCreateRewardsUser(); const handleAuthModal = async () => { setShowAuth(true); @@ -41,23 +41,23 @@ export const useAuthWithButton = ({ const isAuthenticated = useMemo(() => { return ( - isSuccess || - (userDetails && isUserProfileUnlocked && handleVerify && userPushSDKInstance && !userPushSDKInstance.readmode()) + userDetails && isUserProfileUnlocked && handleVerify && userPushSDKInstance && !userPushSDKInstance.readmode() ); - }, [isSuccess, userDetails, isUserProfileUnlocked, handleVerify, userPushSDKInstance]); + }, [userDetails, isUserProfileUnlocked, handleVerify, userPushSDKInstance]); const handleSuccess = (userDetails: UserRewardsDetailResponse) => { setIsWalletConnectedAndProfileUnlocked(true); onSuccess(userDetails); + setIsSuccess(false); setShowAuth(false); }; useEffect(() => { - if (showAuth && isAuthenticated && userDetails) { + if ((showAuth && isAuthenticated && userDetails) || (isSuccess && userDetails)) { handleSuccess(userDetails); console.log('handle Success'); } - }, [isAuthenticated, userDetails, showAuth]); + }, [isAuthenticated, userDetails, isSuccess]); const authButton = useMemo( () => ( @@ -72,7 +72,7 @@ export const useAuthWithButton = ({ ), - [isWalletConnected, isAuthModalVisible, isLoading] + [isWalletConnected, isLoading] ); return {