Update Rewards Dashboard flow (#1699)

* update unlock profile * add modal back to activities * update label in unlock modal * update flow * New Discord Flow Added * fixes done * fixed the discord verification page alignment * update useWithAuthButton * add button onclick * add unlock profile listener * fix create flows --------- Co-authored-by: abhishek-01k <[email protected]> Co-authored-by: rohitmalhotra1420 <[email protected]>
push-protocol · Jul 16, 2024 · 40fd94a · 40fd94a
1 parent 3a97171
commit 40fd94a
Show file tree

Hide file tree

Showing 33 changed files with 1,014 additions and 296 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -320,8 +320,12 @@ export default function App() {
   // const { spaceUI } = useSpaceComponents();
 
   const location = useLocation();
-  const isHeaderHidden = location?.pathname.includes(APP_PATHS.PointsVault);
-  const isSidebarHidden = location?.pathname.includes(APP_PATHS.PointsVault) || location?.pathname.includes('/snap');
+  const isHeaderHidden =
+    location?.pathname.includes(APP_PATHS.PointsVault) || location?.pathname.includes(APP_PATHS.DiscordVerification);
+  const isSidebarHidden =
+    location?.pathname.includes(APP_PATHS.PointsVault) ||
+    location?.pathname.includes('/snap') ||
+    location?.pathname.includes(APP_PATHS.DiscordVerification);
 
   return (
     <ThemeProvider theme={darkMode ? themeDark : themeLight}>

diff --git a/src/common/Common.constants.ts b/src/common/Common.constants.ts
@@ -0,0 +1 @@
+export const GuestModeWalletAddress = 'eip155:0x0000000000000000000000000000000000000001';
diff --git a/src/common/index.ts b/src/common/index.ts
@@ -1,2 +1,3 @@
 export * from './hooks';
 export * from './components';
+export * from './Common.constants';
diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx
@@ -5,7 +5,15 @@ import { useContext, useEffect, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 
 // Internal Compoonents
-import { ButtonV2, ImageV2, ItemHV2, ItemVV2, Skeleton, SkeletonLine, SpanV2 } from 'components/reusables/SharedStylingV2';
+import {
+  ButtonV2,
+  ImageV2,
+  ItemHV2,
+  ItemVV2,
+  Skeleton,
+  SkeletonLine,
+  SpanV2,
+} from 'components/reusables/SharedStylingV2';
 import { AppContext } from 'contexts/AppContext';
 import { useAccount, useDeviceWidthCheck } from 'hooks';
 import { retrieveUserPGPKeyFromStorage } from 'helpers/connectWalletHelper';
@@ -17,6 +25,7 @@ import { device, size } from 'config/Globals';
 import Tooltip from 'components/reusables/tooltip/Tooltip';
 import UnlockLogo from '../../../assets/chat/unlock.svg';
 import Wallet from '../../../assets/chat/wallet.svg';
+import { Box, CrossFilled, HoverableSVG } from 'blocks';
 
 // Constants
 export enum UNLOCK_PROFILE_TYPE {
@@ -34,12 +43,14 @@ export enum PROFILESTATE {
 type UnlockProfileModalProps = {
   InnerComponentProps: {
     type: UNLOCK_PROFILE_TYPE | undefined;
+    description?: string;
+    closeIcon?: boolean;
   };
   onClose?: () => void;
 };
 
 const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps) => {
-  const { type } = InnerComponentProps;
+  const { type, description, closeIcon } = InnerComponentProps;
 
   const theme = useTheme();
   const { handleConnectWallet, initializePushSDK } = useContext(AppContext);
@@ -68,7 +79,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
       setActiveStatus({
         status: PROFILESTATE.UNLOCK_PROFILE,
         title: 'Unlock Profile',
-        body: 'Unlock your profile to read and send messages.',
+        body: description ? description : 'Unlock your profile to read and send messages.',
       });
     }
   }, [wallet]);
@@ -86,11 +97,30 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
         initializePushSDK(wallet);
       }
     }
-
-  }, [account])
+  }, [account]);
 
   return (
     <Container type={type}>
+      {closeIcon && (
+        <Box
+          width="-webkit-fill-available"
+          display="flex"
+          flexDirection="row"
+          alignItems="flex-end"
+          justifyContent="flex-end"
+        >
+          <HoverableSVG
+            icon={
+              <CrossFilled
+                size={24}
+                color="pink-700"
+                onClick={onClose}
+              />
+            }
+          />
+        </Box>
+      )}
+
       <SubContainer type={type}>
         {/* Logo and Left Text */}
         <ItemHV2
@@ -107,7 +137,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
           />
 
           <ItemVV2 alignItems={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? 'center' : 'baseline'}>
-
             {!isLoading ? (
               <>
                 <SpanV2
@@ -131,21 +160,19 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
               <SkeletonWrapper>
                 <SkeletonLine
                   height="24px"
-                  width='100%'
+                  width="100%"
                   margin="0 0 8px 0"
-                  borderRadius='4px'
+                  borderRadius="4px"
                 ></SkeletonLine>
 
                 <SkeletonLine
                   height="16px"
-                  width='100%'
+                  width="100%"
                   margin="0 0 8px 0"
-                  borderRadius='4px'
+                  borderRadius="4px"
                 ></SkeletonLine>
-
               </SkeletonWrapper>
             )}
-
           </ItemVV2>
         </ItemHV2>
 
@@ -188,7 +215,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
             alignItems="baseline"
             flexDirection={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? 'column' : 'row'}
           >
-
             {!isLoading ? (
               <>
                 <DefaultButton
@@ -223,7 +249,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
                   width="150px"
                 ></SkeletonLine>
               </SkeletonContainer>
-
             )}
           </ItemHV2>
         </ItemVV2>
@@ -252,7 +277,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
                   Remember Me
                 </SpanV2>
               </ItemHV2>
-
             </RenderToolTip>
           ) : (
             <ItemVV2
@@ -267,7 +291,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
               ></SkeletonLine>
             </ItemVV2>
           )}
-
         </>
       )}
     </Container>
@@ -285,21 +308,21 @@ const RenderToolTip = ({ children, type }) => {
       placementProps={
         type === UNLOCK_PROFILE_TYPE.MODAL
           ? {
-            background: 'black',
-            width: '220px',
-            padding: '8px 12px',
-            top: '10px',
-            left: '60px',
-            borderRadius: '4px 12px 12px 12px',
-          }
+              background: 'black',
+              width: '220px',
+              padding: '8px 12px',
+              top: '10px',
+              left: '60px',
+              borderRadius: '4px 12px 12px 12px',
+            }
           : {
-            background: 'black',
-            width: '120px',
-            padding: '8px 12px',
-            bottom: '0px',
-            right: '-30px',
-            borderRadius: '12px 12px 12px 4px',
-          }
+              background: 'black',
+              width: '120px',
+              padding: '8px 12px',
+              bottom: '0px',
+              right: '-30px',
+              borderRadius: '12px 12px 12px 4px',
+            }
       }
       tooltipContent={
         <SpanV2
@@ -396,7 +419,7 @@ const DefaultButton = styled(ButtonV2)`
 
 const SkeletonWrapper = styled.div`
   overflow: hidden;
-  min-width:220px;
+  min-width: 220px;
 `;
 
 const SkeletonContainer = styled(Skeleton)`

diff --git a/src/components/chat/unlockProfile/UnlockProfileWrapper.tsx b/src/components/chat/unlockProfile/UnlockProfileWrapper.tsx
@@ -11,14 +11,23 @@ export enum UNLOCK_PROFILE_TYPE {
 
 interface IntroContainerProps {
   type?: UNLOCK_PROFILE_TYPE;
-  showConnectModal?: boolean
+  showConnectModal?: boolean;
+  description?: string;
+  onClose?: () => void;
+  closeIcon?: boolean;
 }
 
 const DEFAULT_PROPS = {
   type: UNLOCK_PROFILE_TYPE.MODAL,
 };
 
-const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal }: IntroContainerProps) => {
+const UnlockProfileWrapper = ({
+  type = DEFAULT_PROPS.type,
+  showConnectModal,
+  description,
+  onClose,
+  closeIcon,
+}: IntroContainerProps) => {
   const {
     isModalOpen: isProfileModalOpen,
     showModal: showProfileModal,
@@ -37,7 +46,10 @@ const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal }: I
         InnerComponent={UnlockProfile}
         InnerComponentProps={{
           type,
+          description,
+          closeIcon,
         }}
+        closeIcon={closeIcon}
         modalRadius="24px"
         modalBorder={false}
         modalPosition={MODAL_POSITION.ON_PARENT}
@@ -46,7 +58,10 @@ const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal }: I
   } else {
     return (
       <Container className={type}>
-        <UnlockProfile InnerComponentProps={{ type }} />
+        <UnlockProfile
+          InnerComponentProps={{ type, description, closeIcon }}
+          onClose={onClose}
+        />
       </Container>
     );
   }

diff --git a/src/config/AppPaths.ts b/src/config/AppPaths.ts
@@ -7,6 +7,7 @@ enum APP_PATHS {
   Spaces = '/spaces',
   Channels = '/channels',
   Dashboard = '/dashboard',
+  DiscordVerification = '/discord/verification',
   Rewards = '/points',
   RewardsActivities = '/points/activity',
   RewardsLeaderboard = '/points/leaderboard',
@@ -26,7 +27,7 @@ enum APP_PATHS {
   Support = '/support',
   UserSettings = '/user/settings',
   ChannelSettings = '/channel/settings',
-  ClaimGalxe = 'claim/galxe',
+  ClaimGalxe = 'claim/galxe'
 }
 
 export default APP_PATHS;
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
@@ -60,6 +60,7 @@ const AppContextProvider = ({ children }) => {
   });
 
   const [SnapState, setSnapState] = useState<number>(1);
+  const [isUserProfileUnlocked, setUserProfileUnlocked] = useState<boolean>(false);
   const {
     isModalOpen: isMetamaskPushSnapOpen,
     showModal: showMetamaskPushSnap,
@@ -131,7 +132,7 @@ const AppContextProvider = ({ children }) => {
 
     // reset the ref to true
     shouldInitializeRef.current = true; // Directly modify the ref to disable useEffect execution
-
+    setUserProfileUnlocked(true);
     return user;
   };
 
@@ -544,6 +545,8 @@ const AppContextProvider = ({ children }) => {
         initializePushSdkReadMode,
         removePGPKeyForUser,
         storePGPKeyForUser,
+        isUserProfileUnlocked,
+        setUserProfileUnlocked,
       }}
     >
       {children}

diff --git a/src/helpers/w2w/index.ts b/src/helpers/w2w/index.ts
@@ -101,7 +101,7 @@ export const decryptFeeds = async ({
         });
       } catch (e) {
         // console.log(e);
-        if(e.message == decryptionErrorMsg){
+        if (e.message == decryptionErrorMsg) {
           feed.msg.messageType = 'Text';
           feed.msg.messageContent = 'message encrypted before you joined';
         }
@@ -137,7 +137,9 @@ export const decryptMessages = async ({
           const member = getMemberDetails(currentChat, currentChat?.msg?.fromCAIP10);
           signatureValidationPubliKey = member ? member.publicKey : '';
         } else {
-          const latestUserInfo = inbox.find((x) => x.wallets.split(':')[1]?.toLowerCase() === currentChat?.wallets?.split(':')[1]?.toLowerCase());
+          const latestUserInfo = inbox.find(
+            (x) => x.wallets.split(':')[1]?.toLowerCase() === currentChat?.wallets?.split(':')[1]?.toLowerCase()
+          );
 
           if (latestUserInfo) {
             signatureValidationPubliKey = latestUserInfo.publicKey!;
@@ -157,7 +159,7 @@ export const decryptMessages = async ({
       });
     } catch (e) {
       // console.log(e);
-      if(e.message == decryptionErrorMsg){
+      if (e.message == decryptionErrorMsg) {
         savedMsg.messageType = 'Text';
         savedMsg.messageContent = 'message encrypted before you joined';
       }

diff --git a/src/modules/dashboard/components/DashboardHeader.tsx b/src/modules/dashboard/components/DashboardHeader.tsx
@@ -9,11 +9,7 @@ interface DashboardHeaderProps {
   showSubHeader: boolean;
 }
 
-
-const DashboardHeader: FC<DashboardHeaderProps> = ({
-  setSubHeaderVisibility,
-  showSubHeader
-}) => {
+const DashboardHeader: FC<DashboardHeaderProps> = ({ setSubHeaderVisibility, showSubHeader }) => {
   return (
     <Box
       flexDirection="row"
@@ -64,4 +60,4 @@ const DashboardHeader: FC<DashboardHeaderProps> = ({
   );
 };
 
-export default DashboardHeader;
+export default DashboardHeader;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const GuestModeWalletAddress = 'eip155:0x0000000000000000000000000000000000000001';