Rewards QA Fixes (#1717)

* resolve qa comments

* add verifying state

* update button size

* fix review comments

src/blocks/box/Box.tsx

@@ -27,6 +27,29 @@ const StyledBox = styled.div.withConfig({
   border: ${(props) => getBlocksBorder(props.mode, props.border)};
   position: ${(props) => props.position};
 
+  // push custom scroll
+  &::-webkit-scrollbar-track {
+    background-color: none;
+    border-radius: 9px;
+  }
+
+  &::-webkit-scrollbar {
+    background-color: none;
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      color-stop(0.44, #cf1c84),
+      color-stop(0.72, #cf1c84),
+      color-stop(0.86, #cf1c84)
+    );
+  }
+
   /* Extra CSS prop */
   ${(props) => props.css || ''}
 `;

src/blocks/lozenge/Lozenge.constants.tsx

@@ -47,6 +47,8 @@ export const getLozengeSizeStyles = ({
   if (size === 'small') {
     return css`
       /* Lozenge tag container size css */
+      max-height: 14px;
+      min-height: 14px;
 
       ${iconOnly
         ? `

src/blocks/lozenge/Lozenge.tsx

@@ -68,7 +68,7 @@ const Lozenge = forwardRef<HTMLDivElement, LozengeProps>(
         {...props}
       >
         {icon && <span className="icon">{icon}</span>}
-        {children}
+        <span>{children}</span>
       </StyledLozenge>
     );
   }

src/modules/dashboard/components/RewardsSection.tsx

@@ -29,14 +29,14 @@ const RewardsSection = () => {
           variant="h5-semibold"
           display={{ ml: 'none', dp: 'block' }}
         >
-          Complete Tasks on Push. Earn Reward Points.
+          Complete Tasks on Push. Earn Push Points and Unlock Rewards.
         </Text>
         <Text
           variant="h5-semibold"
           display={{ ml: 'block', dp: 'none' }}
           textAlign="center"
         >
-          Complete Tasks on Push. Earn Reward Points.
+          Complete Tasks on Push. Earn Push Points and Unlock Rewards.
         </Text>
       </Box>
       <Link to={'/points'}>

src/modules/rewards/components/ActivityButton.tsx

@@ -27,6 +27,7 @@ const ActivityButton: FC<ActivityButtonProps> = ({
     return (
       <Button
         variant="tertiary"
+        size="small"
         disabled
       >
         Claimed
@@ -38,6 +39,7 @@ const ActivityButton: FC<ActivityButtonProps> = ({
     return (
       <Button
         variant="tertiary"
+        size="small"
         disabled
       >
         Pending

src/modules/rewards/components/ActivityVerificationButton.tsx

@@ -37,13 +37,13 @@ export const ActivityVerificationButton = ({
   const { isWalletConnected } = useAccount();
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);
 
-  const { handleTwitterVerification } = useVerifyTwitter({
+  const { handleTwitterVerification, verifyingTwitter, twitterActivityStatus } = useVerifyTwitter({
     activityTypeId,
     refetchActivity,
     setErrorMessage,
   });
 
-  const { handleDiscordVerification } = useVerifyDiscord({
+  const { handleDiscordVerification, verifyingDiscord, discordActivityStatus } = useVerifyDiscord({
     activityTypeId,
     refetchActivity,
     setErrorMessage,
@@ -52,20 +52,22 @@ export const ActivityVerificationButton = ({
   const activityData = useMemo(() => {
     if (activityType === 'follow_push_on_discord') {
       return {
-        isLoading: false,
+        isLoading: verifyingTwitter,
         label: 'Verify',
         action: handleDiscordVerification,
+        isVerificationComplete: twitterActivityStatus == 'Claimed' || twitterActivityStatus == 'Pending',
       };
     }
 
     if (activityType === 'follow_push_on_twitter') {
       return {
-        isLoading: false,
+        isLoading: verifyingDiscord,
         label: 'Verify',
         action: handleTwitterVerification,
+        isVerificationComplete: discordActivityStatus == 'Claimed',
       };
     }
-  }, [activityType, userPushSDKInstance]);
+  }, [activityType, userPushSDKInstance, twitterActivityStatus, discordActivityStatus]);
 
   const { isAuthenticated, authButton, isAuthModalVisible, hideAuthModal } = useAuthWithButton({
     onSuccess: (userDetails) => activityData?.action(userDetails?.userId),
@@ -77,8 +79,9 @@ export const ActivityVerificationButton = ({
         variant="tertiary"
         size="small"
         onClick={() => activityData?.action(userId)}
+        disabled={activityData?.isVerificationComplete}
       >
-        {activityData?.label || 'Verify'}
+        {activityData?.isVerificationComplete ? 'Verifying...' : activityData?.label ? activityData?.label : 'Verify'}
       </Button>
     );
   }

src/modules/rewards/components/DashboardSection.tsx

@@ -56,6 +56,7 @@ const DashboardSection: FC<DashboardSectionProps> = ({ onGetStarted }) => {
             rank={userDetails?.rank}
             isLoading={isLoading}
             isFetching={isFetching}
+            data={userDetails}
             refetch={() => refetch()}
           />
 

src/modules/rewards/components/DashboardSectionPoints.tsx

@@ -6,6 +6,7 @@ import { useAccount } from 'hooks';
 
 //components
 import { Box, HoverableSVG, Refresh, Skeleton, Text } from 'blocks';
+import { UserRewardsDetailResponse } from 'queries';
 
 export type DashboardSectionPointsProps = {
   title: string;
@@ -15,6 +16,7 @@ export type DashboardSectionPointsProps = {
   refetch?: () => void;
   isLoading: boolean;
   isFetching?: boolean;
+  data?: UserRewardsDetailResponse;
 };
 
 const DashboardSectionPoints: FC<DashboardSectionPointsProps> = ({
@@ -25,6 +27,7 @@ const DashboardSectionPoints: FC<DashboardSectionPointsProps> = ({
   refetch,
   isLoading,
   isFetching,
+  data,
 }) => {
   const { isWalletConnected } = useAccount();
 
@@ -54,7 +57,7 @@ const DashboardSectionPoints: FC<DashboardSectionPointsProps> = ({
           {title}
         </Text>
 
-        {refetch && isWalletConnected && (
+        {data && refetch && isWalletConnected && (
           <Box
             display="flex"
             alignItems="center"

src/modules/rewards/components/ReferralSection.tsx

@@ -27,14 +27,12 @@ const ReferralSection: FC<ReferralSectionProps> = ({ handleUnlockProfile }) => {
   const { isWalletConnected, account, connect } = useAccount();
   const caip10WalletAddress = walletToCAIP10({ account });
 
-  const { data: userDetails, isLoading: isUserLoading } = useGetUserRewardsDetails({
+  const { data: userDetails } = useGetUserRewardsDetails({
     caip10WalletAddress: caip10WalletAddress,
   });
 
   const { status } = useRewardsAuth();
 
-  const isLoading = isUserLoading;
-
   const { textRef, isCopied, copyToClipboard } = useCopy();
 
   const handleConnectWallet = () => {
@@ -78,55 +76,51 @@ const ReferralSection: FC<ReferralSectionProps> = ({ handleUnlockProfile }) => {
           </Box>
         </Box>
 
-        <Skeleton isLoading={isLoading}>
-          {isWalletConnected && userDetails && (
+        {isWalletConnected && userDetails && (
+          <Box
+            display="flex"
+            gap="s2"
+            flexDirection={{ tb: 'column', initial: 'row' }}
+          >
             <Box
+              minWidth={{ tb: '-webkit-fill-available', initial: '344px' }}
               display="flex"
-              gap="s2"
-              flexDirection={{ tb: 'column', initial: 'row' }}
+              alignItems="center"
+              padding="s3"
+              borderRadius="r3"
+              border={{ light: '1.5px solid gray-200', dark: 'none' }}
+              backgroundColor={{ light: 'transparent', dark: 'gray-800' }}
+              css={css`
+                white-space: nowrap;
+              `}
             >
-              <Box
-                minWidth={{ tb: '-webkit-fill-available', initial: '344px' }}
-                display="flex"
-                alignItems="center"
-                padding="s3"
-                borderRadius="r3"
-                border={{ light: '1.5px solid gray-200', dark: 'none' }}
-                backgroundColor={{ light: 'transparent', dark: 'gray-800' }}
-                css={css`
-                  white-space: nowrap;
-                `}
-              >
-                <Text
-                  variant="bs-regular"
-                  ref={textRef}
-                  color={{ light: 'gray-1000', dark: 'gray-100' }}
-                >
-                  {baseUrl}/points?ref={userDetails?.userId}
-                </Text>
-              </Box>
-              <Button
-                leadingIcon={<Copy />}
-                onClick={copyToClipboard}
-              >
-                {isCopied ? 'Copied' : 'Copy Link'}
-              </Button>
-            </Box>
-          )}
-        </Skeleton>
-
-        <Skeleton isLoading={isLoading}>
-          {isWalletConnected && status == 'error' && (
-            <Box>
-              <Button
-                size="small"
-                onClick={handleUnlockProfile}
+              <Text
+                variant="bs-regular"
+                ref={textRef}
+                color={{ light: 'gray-1000', dark: 'gray-100' }}
               >
-                Unlock Profile
-              </Button>
+                {baseUrl}/points?ref={userDetails?.userId}
+              </Text>
             </Box>
-          )}
-        </Skeleton>
+            <Button
+              leadingIcon={<Copy />}
+              onClick={copyToClipboard}
+            >
+              {isCopied ? 'Copied' : 'Copy Link'}
+            </Button>
+          </Box>
+        )}
+
+        {isWalletConnected && status == 'error' && (
+          <Box>
+            <Button
+              size="small"
+              onClick={handleUnlockProfile}
+            >
+              Unlock Profile
+            </Button>
+          </Box>
+        )}
 
         {!isWalletConnected && (
           <Box>

src/modules/rewards/components/RewardsActivitiesList.tsx

@@ -31,9 +31,9 @@ const RewardsActivitiesList: FC<RewardActivitiesProps> = () => {
   const isLoading = isLoadingActivities;
   // const isLoading = isLoadingUserDetails || isLoadingActivities;
 
-  // If there are activities then render them else render 5 skeletons
+  // If there are activities then render them else render 2 skeletons
   const activityList = isLoading
-    ? Array(3).fill(0)
+    ? Array(2).fill(0)
     : rewardActivitiesResponse?.pages.flatMap((page) => page.activities) || [];
 
   const hasMoreData = !isFetchingNextPage && hasNextPage;

src/modules/rewards/components/RewardsActivitiesListItem.tsx

@@ -29,10 +29,7 @@ const RewardsActivitiesListItem: FC<RewardActivitiesListItemProps> = ({ userId,
   const [errorMessage, setErrorMessage] = useState('');
 
   return (
-    <Skeleton
-      isLoading={isLoadingItem}
-      height="90px"
-    >
+    <Skeleton isLoading={isLoadingItem}>
       <Box
         display="flex"
         flexDirection="column"
@@ -132,16 +129,18 @@ const RewardsActivitiesListItem: FC<RewardActivitiesListItemProps> = ({ userId,
             </Box>
 
             {/* Buttons Logic */}
-            <Box display="flex">
-              <ActivityButton
-                userId={userId}
-                activityTypeId={activity.id}
-                activityType={activity.activityType}
-                refetchActivity={refetchActivity}
-                setErrorMessage={setErrorMessage}
-                usersSingleActivity={usersSingleActivity}
-              />
-            </Box>
+            <Skeleton isLoading={isLoading}>
+              <Box display="flex">
+                <ActivityButton
+                  userId={userId}
+                  activityTypeId={activity.id}
+                  activityType={activity.activityType}
+                  refetchActivity={refetchActivity}
+                  setErrorMessage={setErrorMessage}
+                  usersSingleActivity={usersSingleActivity}
+                />
+              </Box>
+            </Skeleton>
           </Box>
         </Box>
 

src/modules/rewards/hooks/useVerifyDiscord.tsx

@@ -32,8 +32,8 @@ const useVerifyDiscord = ({
 
   const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);
 
-  const [activityStatus, setActivityStatus] = useState<string | null>(null);
-  const [verifying, setVerifying] = useState(token ? true : false);
+  const [discordActivityStatus, setDiscordActivityStatus] = useState<string | null>(null);
+  const [verifyingDiscord, setVerifyingDiscord] = useState(token ? true : false);
   const [updatedId, setUpdatedId] = useState<string | null>(null);
 
   useEffect(() => {
@@ -74,7 +74,7 @@ const useVerifyDiscord = ({
     const username = localStorage.getItem('username');
 
     if (username && token) {
-      setVerifying(true);
+      setVerifyingDiscord(true);
       const data = {
         discord: username,
         discord_token: token,
@@ -84,7 +84,7 @@ const useVerifyDiscord = ({
 
       if (verificationProof == null || verificationProof == undefined) {
         if (userPushSDKInstance && userPushSDKInstance.readmode()) {
-          setVerifying(false);
+          setVerifyingDiscord(false);
           setErrorMessage('Please Enable Push profile');
         }
         return;
@@ -105,16 +105,15 @@ const useVerifyDiscord = ({
         {
           onSuccess: (response) => {
             if (response.status === 'COMPLETED') {
-              setActivityStatus('Claimed');
+              setDiscordActivityStatus('Claimed');
               refetchActivity();
-              setVerifying(false);
+              setVerifyingDiscord(false);
               setErrorMessage('');
-              // localStorage.removeItem('discordVerificationTriggered');
             }
           },
           onError: (error: any) => {
             console.log('Error in creating activity', error);
-            setVerifying(false);
+            setVerifyingDiscord(false);
             if (error.name) {
               setErrorMessage(error.response.data.error);
             }
@@ -125,8 +124,8 @@ const useVerifyDiscord = ({
   };
 
   return {
-    activityStatus,
-    verifying,
+    verifyingDiscord,
+    discordActivityStatus,
     handleDiscordVerification,
   };
 };