Add reject modal icon && Test Creation flow (#1711)

* add reject modal icon * fix review comments * fix additional comments
push-protocol · Jul 10, 2024 · b4d001b · b4d001b
1 parent 657fbf8
commit b4d001b
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 68 deletions.
diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx
@@ -44,7 +44,6 @@ type UnlockProfileModalProps = {
   InnerComponentProps: {
     type: UNLOCK_PROFILE_TYPE | undefined;
     description?: string;
-    closeIcon?: boolean;
   };
   onClose?: () => void;
 };
@@ -101,7 +100,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
 
   return (
     <Container type={type}>
-      {closeIcon && (
+      {onClose && (
         <Box
           width="-webkit-fill-available"
           display="flex"
@@ -112,8 +111,8 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
           <HoverableSVG
             icon={
               <CrossFilled
-                size={24}
-                color="pink-700"
+                size={30}
+                color="gray-400"
                 onClick={onClose}
               />
             }

diff --git a/src/components/chat/unlockProfile/UnlockProfileWrapper.tsx b/src/components/chat/unlockProfile/UnlockProfileWrapper.tsx
@@ -14,7 +14,6 @@ interface IntroContainerProps {
   showConnectModal?: boolean;
   description?: string;
   onClose?: () => void;
-  closeIcon?: boolean;
 }
 
 const DEFAULT_PROPS = {
@@ -26,7 +25,6 @@ const UnlockProfileWrapper = ({
   showConnectModal,
   description,
   onClose,
-  closeIcon,
 }: IntroContainerProps) => {
   const {
     isModalOpen: isProfileModalOpen,
@@ -38,7 +36,7 @@ const UnlockProfileWrapper = ({
     if (type === UNLOCK_PROFILE_TYPE.MODAL && showConnectModal) {
       showProfileModal();
     }
-  }, [type]);
+  }, [type, showConnectModal]);
 
   if (type === UNLOCK_PROFILE_TYPE.MODAL) {
     return (
@@ -47,9 +45,7 @@ const UnlockProfileWrapper = ({
         InnerComponentProps={{
           type,
           description,
-          closeIcon,
         }}
-        closeIcon={closeIcon}
         modalRadius="24px"
         modalBorder={false}
         modalPosition={MODAL_POSITION.ON_PARENT}
@@ -59,7 +55,7 @@ const UnlockProfileWrapper = ({
     return (
       <Container className={type}>
         <UnlockProfile
-          InnerComponentProps={{ type, description, closeIcon }}
+          InnerComponentProps={{ type, description }}
           onClose={onClose}
         />
       </Container>

diff --git a/src/modules/rewards/Rewards.tsx b/src/modules/rewards/Rewards.tsx
@@ -49,18 +49,18 @@ const Rewards: FC<RewardsProps> = () => {
 
   const { activeTab, handleSetActiveTab } = useRewardsTabs();
 
-  const { showConnectModal, setShowConnectModal, status, connectUserWallet } = useRewardsAuth();
+  const { isAuthModalVisible, status, connectUserWallet, hideAuthModal } = useRewardsAuth();
 
   useCreateRewardsUser();
 
   const heading = activeTab === 'leaderboard' ? 'Push Reward Points' : 'Introducing Push Reward Points Program';
 
   useEffect(() => {
-    if (isErrorPresent && showConnectModal && status === 'error' && errorExists && activeTab === 'dashboard') {
+    if (isErrorPresent && isAuthModalVisible && status === 'error' && errorExists && activeTab === 'dashboard') {
       setHasError(isErrorPresent);
-      setShowConnectModal(false);
+      hideAuthModal();
     }
-  }, [isErrorPresent, showConnectModal, errorExists]);
+  }, [isErrorPresent, isAuthModalVisible, errorExists]);
 
   // retry unlock profile
   const handleUnlockProfile = () => {
@@ -102,7 +102,7 @@ const Rewards: FC<RewardsProps> = () => {
         {activeTab === 'dashboard' && <ReferralSection handleUnlockProfile={handleUnlockProfile} />}
       </Box>
 
-      {userPushSDKInstance && userPushSDKInstance?.readmode() && showConnectModal && (
+      {userPushSDKInstance && userPushSDKInstance?.readmode() && isAuthModalVisible && (
         <Box
           display="flex"
           justifyContent="center"
@@ -114,7 +114,8 @@ const Rewards: FC<RewardsProps> = () => {
         >
           <UnlockProfileWrapper
             type={UNLOCK_PROFILE_TYPE.MODAL}
-            showConnectModal={showConnectModal}
+            showConnectModal={isAuthModalVisible}
+            onClose={() => hideAuthModal()}
             description="Unlock your profile to proceed."
           />
         </Box>

diff --git a/src/modules/rewards/components/ActivityVerificationButton.tsx b/src/modules/rewards/components/ActivityVerificationButton.tsx
@@ -18,7 +18,6 @@ import { UserStoreType } from 'types';
 // components
 import { Box, Button } from 'blocks';
 import UnlockProfileWrapper, { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfileWrapper';
-import { useRewardsAuth } from '../hooks/useRewardsAuth';
 
 type ActivityVerificationButtonProps = {
   userId: string;
@@ -38,8 +37,6 @@ export const ActivityVerificationButton = ({
   const { isWalletConnected } = useAccount();
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);
 
-  // const { setShowConnectModal } = useRewardsAuth();
-
   const { handleTwitterVerification } = useVerifyTwitter({
     activityTypeId,
     refetchActivity,
@@ -70,42 +67,10 @@ export const ActivityVerificationButton = ({
     }
   }, [activityType, userPushSDKInstance]);
 
-  const { isAuthenticated, authButton, showConnectModal, setShowConnectModal } = useAuthWithButton({
+  const { isAuthenticated, authButton, isAuthModalVisible, hideAuthModal } = useAuthWithButton({
     onSuccess: (userDetails) => activityData?.action(userDetails?.userId),
   });
 
-  const handleCloseModal = () => {
-    setShowConnectModal(false);
-  };
-
-  console.log('Modal closed');
-  console.log('isAuthenticated:', isAuthenticated);
-  console.log('isWalletConnected:', isWalletConnected);
-  console.log('showConnectModal:', showConnectModal);
-
-  if (userPushSDKInstance && userPushSDKInstance?.readmode() && showConnectModal) {
-    return (
-      <Box
-        display="flex"
-        justifyContent="center"
-        width="-webkit-fill-available"
-        height="-webkit-fill-available"
-        alignItems="center"
-        css={css`
-          z-index: 99999;
-        `}
-      >
-        <UnlockProfileWrapper
-          type={UNLOCK_PROFILE_TYPE.MODAL}
-          showConnectModal={showConnectModal}
-          // onClose={handleCloseModal}
-          // closeIcon={true}
-          description="Unlock your profile to proceed."
-        />
-      </Box>
-    );
-  }
-
   if (isAuthenticated && isWalletConnected && !userPushSDKInstance?.readmode()) {
     return (
       <Button
@@ -118,5 +83,28 @@ export const ActivityVerificationButton = ({
     );
   }
 
-  return authButton;
+  return (
+    <Box>
+      {userPushSDKInstance && userPushSDKInstance?.readmode() && isAuthModalVisible && (
+        <Box
+          display="flex"
+          justifyContent="center"
+          width="-webkit-fill-available"
+          height="-webkit-fill-available"
+          alignItems="center"
+          css={css`
+            z-index: 99999;
+          `}
+        >
+          <UnlockProfileWrapper
+            type={UNLOCK_PROFILE_TYPE.MODAL}
+            showConnectModal={isAuthModalVisible}
+            onClose={() => hideAuthModal()}
+            description="Unlock your profile to proceed."
+          />
+        </Box>
+      )}
+      {authButton}
+    </Box>
+  );
 };
diff --git a/src/modules/rewards/components/RewardsActivitiesList.tsx b/src/modules/rewards/components/RewardsActivitiesList.tsx
@@ -64,6 +64,7 @@ const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
       >
         {activityList.map((activity: Activity) => (
           <RewardsActivitiesListItem
+            key={activity.activityType}
             userId={userDetails?.userId || ''}
             activity={activity}
             isLoadingItem={isLoading}

diff --git a/src/modules/rewards/hooks/useRewardsAuth.tsx b/src/modules/rewards/hooks/useRewardsAuth.tsx
@@ -22,7 +22,7 @@ const useRewardsAuth = () => {
   const caip10WalletAddress = walletToCAIP10({ account });
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);
 
-  const [showConnectModal, setShowConnectModal] = useState(false);
+  const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);
 
   const [isVerifyClicked, setIsVerifyClicked] = useState(false);
   const [isDashClicked, setIsDashClicked] = useState(false);
@@ -44,6 +44,7 @@ const useRewardsAuth = () => {
   const connectWallet = () => {
     setHandleVerify(false);
     setIsVerifyClicked(true);
+    setIsAuthModalVisible(false);
 
     if (!isWalletConnected) {
       connect();
@@ -52,9 +53,18 @@ const useRewardsAuth = () => {
 
   // dashboard referral section unlock profile
   const connectUserWallet = () => {
+    setIsAuthModalVisible(false);
     setIsDashClicked(true);
   };
 
+  const showAuthModal = () => {
+    setIsAuthModalVisible(true);
+  };
+
+  const hideAuthModal = () => {
+    setIsAuthModalVisible(false);
+  };
+
   // unlock profile function
   const unlockProfile = async () => {
     // get ref, send with user wallet. if ref is null, send only user wallet
@@ -70,7 +80,7 @@ const useRewardsAuth = () => {
     //if verification proof is null, unlock push profile update to update userPUSHSDKInstance
     if (verificationProof === null || verificationProof === undefined) {
       if (userPushSDKInstance && userPushSDKInstance.readmode()) {
-        setShowConnectModal(true);
+        setIsAuthModalVisible(true);
       }
     }
 
@@ -92,7 +102,7 @@ const useRewardsAuth = () => {
 
     // user disconnects while modal is open
     if (status === 'pending' && !isWalletConnected) {
-      setShowConnectModal(false);
+      setIsAuthModalVisible(false);
     }
 
     // rewards activity first user
@@ -114,17 +124,14 @@ const useRewardsAuth = () => {
   }, [status, isVerifyClicked, isDashClicked]);
 
   return {
-    caip10WalletAddress,
     status,
-    unlockProfile,
-    showConnectModal,
-    setShowConnectModal,
+    isAuthModalVisible,
     connectWallet,
     handleVerify,
     userDetails,
-    isVerifyClicked,
     connectUserWallet,
-    isDashClicked,
+    hideAuthModal,
+    showAuthModal,
   };
 };
 

diff --git a/src/modules/rewards/hooks/useWithAuthButton.tsx b/src/modules/rewards/hooks/useWithAuthButton.tsx
@@ -23,10 +23,10 @@ export const useAuthWithButton = ({ onSuccess }: { onSuccess: (userDetails: User
   const { isWalletConnected } = useAccount();
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);
 
-  const { showConnectModal, setShowConnectModal, connectWallet, handleVerify, userDetails } = useRewardsAuth();
+  const { isAuthModalVisible, connectWallet, handleVerify, userDetails, hideAuthModal } = useRewardsAuth();
   const { isSuccess, isUserProfileUnlocked } = useCreateRewardsUser();
 
-  const showAuthModal = async () => {
+  const handleAuthModal = async () => {
     setShowAuth(true);
     connectWallet();
   };
@@ -62,19 +62,19 @@ export const useAuthWithButton = ({ onSuccess }: { onSuccess: (userDetails: User
         <Button
           variant="tertiary"
           size="small"
-          onClick={showAuthModal}
+          onClick={handleAuthModal}
         >
           Verify
         </Button>
       </>
     ),
-    [isWalletConnected, showConnectModal]
+    [isWalletConnected, isAuthModalVisible]
   );
 
   return {
     authButton,
     isAuthenticated: isWalletConnectedAndProfileUnlocked,
-    showConnectModal: showConnectModal,
-    setShowConnectModal: setShowConnectModal,
+    isAuthModalVisible,
+    hideAuthModal,
   };
 };