Add reject modal icon && Test Creation flow

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}
  />
  }

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>

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>

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>
+ );
 };

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}

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,
  };
 };
 

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,
  };
 };