Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Rewards Dashboard flow #1699

Merged
merged 12 commits into from
Jul 10, 2024
63 changes: 32 additions & 31 deletions src/components/chat/unlockProfile/UnlockProfile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -34,12 +42,13 @@ export enum PROFILESTATE {
type UnlockProfileModalProps = {
InnerComponentProps: {
type: UNLOCK_PROFILE_TYPE | undefined;
label?: string;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
label?: string;
description?: string;

};
onClose?: () => void;
};

const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps) => {
const { type } = InnerComponentProps;
const { type, label } = InnerComponentProps;

const theme = useTheme();
const { handleConnectWallet, initializePushSDK } = useContext(AppContext);
Expand Down Expand Up @@ -68,7 +77,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
setActiveStatus({
status: PROFILESTATE.UNLOCK_PROFILE,
title: 'Unlock Profile',
body: 'Unlock your profile to read and send messages.',
body: label ? label : 'Unlock your profile to read and send messages.',
});
}
}, [wallet]);
Expand All @@ -86,8 +95,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
initializePushSDK(wallet);
}
}

}, [account])
}, [account]);

return (
<Container type={type}>
Expand All @@ -107,7 +115,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
/>

<ItemVV2 alignItems={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? 'center' : 'baseline'}>

{!isLoading ? (
<>
<SpanV2
Expand All @@ -131,21 +138,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>

Expand Down Expand Up @@ -188,7 +193,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
alignItems="baseline"
flexDirection={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? 'column' : 'row'}
>

{!isLoading ? (
<>
<DefaultButton
Expand Down Expand Up @@ -223,7 +227,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
width="150px"
></SkeletonLine>
</SkeletonContainer>

)}
</ItemHV2>
</ItemVV2>
Expand Down Expand Up @@ -252,7 +255,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
Remember Me
</SpanV2>
</ItemHV2>

</RenderToolTip>
) : (
<ItemVV2
Expand All @@ -267,7 +269,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
></SkeletonLine>
</ItemVV2>
)}

</>
)}
</Container>
Expand All @@ -285,21 +286,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
Expand Down Expand Up @@ -396,7 +397,7 @@ const DefaultButton = styled(ButtonV2)`

const SkeletonWrapper = styled.div`
overflow: hidden;
min-width:220px;
min-width: 220px;
`;

const SkeletonContainer = styled(Skeleton)`
Expand Down
10 changes: 7 additions & 3 deletions src/components/chat/unlockProfile/UnlockProfileWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ export enum UNLOCK_PROFILE_TYPE {

interface IntroContainerProps {
type?: UNLOCK_PROFILE_TYPE;
showConnectModal?: boolean
showConnectModal?: boolean;
label?: string;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
label?: string;
description?: string;

}

const DEFAULT_PROPS = {
type: UNLOCK_PROFILE_TYPE.MODAL,
};

const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal }: IntroContainerProps) => {
const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal, label }: IntroContainerProps) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal, label }: IntroContainerProps) => {
const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal, description }: IntroContainerProps) => {

const {
isModalOpen: isProfileModalOpen,
showModal: showProfileModal,
Expand All @@ -31,12 +32,15 @@ const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal }: I
}
}, [type]);

console.log(label, 'label');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
console.log(label, 'label');


if (type === UNLOCK_PROFILE_TYPE.MODAL) {
return (
<ProfileModalComponent
InnerComponent={UnlockProfile}
InnerComponentProps={{
type,
label,
}}
modalRadius="24px"
modalBorder={false}
Expand All @@ -46,7 +50,7 @@ const UnlockProfileWrapper = ({ type = DEFAULT_PROPS.type, showConnectModal }: I
} else {
return (
<Container className={type}>
<UnlockProfile InnerComponentProps={{ type }} />
<UnlockProfile InnerComponentProps={{ type, label }} />
</Container>
);
}
Expand Down
5 changes: 4 additions & 1 deletion src/contexts/AppContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const AppContextProvider = ({ children }) => {
});

const [SnapState, setSnapState] = useState<number>(1);
const [isUserProfileUnlocked, setUserProfileUnlocked] = useState<boolean>(false);
const {
isModalOpen: isMetamaskPushSnapOpen,
showModal: showMetamaskPushSnap,
Expand Down Expand Up @@ -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;
};

Expand Down Expand Up @@ -544,6 +545,8 @@ const AppContextProvider = ({ children }) => {
initializePushSdkReadMode,
removePGPKeyForUser,
storePGPKeyForUser,
isUserProfileUnlocked,
setUserProfileUnlocked,
}}
>
{children}
Expand Down
45 changes: 34 additions & 11 deletions src/modules/rewards/Rewards.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,37 @@
// React and other libraries
import { FC, useEffect } from 'react';
import { FC, useEffect, useContext } from 'react';

// third party libraries
import { css } from 'styled-components';
import { useSelector } from 'react-redux';
import { css } from 'styled-components';

//Hooks
import { useAccount } from 'hooks';
import { useRewardsTabs } from './hooks/useRewardsTabs';
import { useGenerateUserId } from './hooks/useGenerateUserId';
import { useDiscordSession } from './hooks/useDiscordSession';
import { useGenerateUserId } from './hooks/useGenerateUserId';

//Types
import { UserStoreType } from 'types';
import { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfile';

//helpers
import { walletToCAIP10 } from 'helpers/w2w';
import { AppContext } from 'contexts/AppContext';

//Components
import { Box, Text } from 'blocks';
import { ReferralSection } from './components/ReferralSection';
import { RewardsTabsContainer } from './components/RewardsTabsContainer';
import UnlockProfileWrapper from 'components/chat/unlockProfile/UnlockProfileWrapper';
import UnlockProfileWrapper, { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfileWrapper';
import { AppContextType } from 'types/context';

export type RewardsProps = {};

const Rewards: FC<RewardsProps> = () => {
const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user);

const { account } = useAccount();
const { account, isWalletConnected } = useAccount();
const { isUserProfileUnlocked } = useContext<AppContextType>(AppContext);

const caip10WalletAddress = walletToCAIP10({ account });

Expand All @@ -38,20 +40,35 @@ const Rewards: FC<RewardsProps> = () => {

const { activeTab, handleSetActiveTab } = useRewardsTabs();

const { showConnectModal, setConnectModalVisibility } = useGenerateUserId(caip10WalletAddress);
const { showConnectModal, setConnectModalVisibility, unlockUser, handleCreateUser, isPending, status } =
useGenerateUserId(caip10WalletAddress);

useEffect(() => {
if (activeTab !== 'activity') {
setConnectModalVisibility(false);
}

if (activeTab === 'activity' && userPushSDKInstance && userPushSDKInstance.readmode()) {
if (status == 'success' && activeTab === 'activity' && userPushSDKInstance && userPushSDKInstance.readmode()) {
setConnectModalVisibility(true);
}
}, [activeTab, account, userPushSDKInstance]);
}, [account, userPushSDKInstance, activeTab]);

useEffect(() => {
if (isUserProfileUnlocked && userPushSDKInstance) {
handleCreateUser();
}
}, [userPushSDKInstance, isUserProfileUnlocked]);

const heading = activeTab === 'leaderboard' ? 'Push Reward Points' : 'Introducing Push Reward Points Program';

const handleUser = () => {
if (isUserProfileUnlocked) {
handleCreateUser();
} else {
unlockUser();
}
};

return (
<Box
height="100%"
Expand Down Expand Up @@ -83,10 +100,15 @@ const Rewards: FC<RewardsProps> = () => {
handleSetActiveTab={handleSetActiveTab}
/>

{activeTab === 'dashboard' && <ReferralSection />}
{activeTab === 'dashboard' && (
<ReferralSection
generateUser={handleUser}
isPending={isPending}
/>
)}
</Box>

{userPushSDKInstance && userPushSDKInstance?.readmode() && showConnectModal && (
{isWalletConnected && userPushSDKInstance && userPushSDKInstance?.readmode() && showConnectModal && (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{isWalletConnected && userPushSDKInstance && userPushSDKInstance?.readmode() && showConnectModal && (
{isProfileConnectModalVisible && (

<Box
display="flex"
justifyContent="center"
Expand All @@ -99,6 +121,7 @@ const Rewards: FC<RewardsProps> = () => {
<UnlockProfileWrapper
type={UNLOCK_PROFILE_TYPE.MODAL}
showConnectModal={showConnectModal}
label="Unlock your profile to proceed."
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
label="Unlock your profile to proceed."
description="Unlock your profile to proceed."

/>
</Box>
)}
Expand Down
Loading
Loading