Skip to content

Commit

Permalink
add sticky banner
Browse files Browse the repository at this point in the history 
add sticky passport banner
  • Loading branch information
@maryjaf
maryjaf committed Oct 21, 2024
1 parent 783616a commit ede4097
Showing 1 changed file with 134 additions and 139 deletions.
273 changes: 134 additions & 139 deletions src/components/PassportBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,167 +113,162 @@ export const PassportBannerData: IData = {
};

export const PassportBanner = () => {
const { info, updateState, fetchUserMBDScore, handleSign, refreshScore } =
usePassport();
const { currentRound, passportState, passportScore, qfEligibilityState } =
info;

const { info, updateState, fetchUserMBDScore, handleSign, refreshScore } = usePassport();

Check failure on line 116 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `·` with `⏎↹↹`
const { currentRound, passportState, passportScore, qfEligibilityState } = info;

Check failure on line 117 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `·` with `⏎↹↹`
const { formatMessage, locale } = useIntl();
const { connector } = useAccount();
const { isOnSolana, handleSingOutAndSignInWithEVM } = useGeneralWallet();
const [showModal, setShowModal] = useState<boolean>(false);
const [signWithWallet, setSignWithWallet] = useState<boolean>(false);

Check failure on line 123 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Delete `··`
const isGSafeConnector = connector?.id === 'safe';


Check failure on line 125 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Delete `··`
// Check if the eligibility state or current round is not loaded yet
const isLoading = !qfEligibilityState || !currentRound;

Check failure on line 128 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Delete `··`
// Only render the banner when the data is available
if (isLoading) {
return null; // Or return a spinner or loading message if you'd like

Check failure on line 131 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `··` with `↹`
}

Check failure on line 133 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Delete `··`
return !isOnSolana ? (
<>
<PassportBannerWrapper
$bgColor={PassportBannerData[qfEligibilityState].bg}
>
<Flex gap='8px' $alignItems='center'>
<IconWrapper>
{PassportBannerData[qfEligibilityState].icon}
</IconWrapper>
<P>
{formatMessage(
{
id: PassportBannerData[qfEligibilityState]
.content,
},
{
data:
qfEligibilityState ===
EQFElegibilityState.NOT_STARTED &&
currentRound
? smallFormatDate(
new Date(
currentRound?.beginDate,
),
)
: undefined,
},
)}
{currentRound &&
qfEligibilityState ===
EQFElegibilityState.RECHECK_ELIGIBILITY && (
<>
{' '}
<strong>
{new Date(currentRound.endDate)
.toLocaleString(locale || 'en-US', {
day: 'numeric',
month: 'short',
})
.replace(/,/g, '')}
</strong>
</>
)}
</P>
</Flex>
{qfEligibilityState ===
EQFElegibilityState.CHECK_ELIGIBILITY && (
<StyledLink onClick={() => fetchUserMBDScore()}>
<GLink>
{formatMessage({
id: 'qf_donor_eligibility.banner.link.check_eligibility',
})}
</GLink>
</StyledLink>
)}
{qfEligibilityState ===
EQFElegibilityState.RECHECK_ELIGIBILITY && (
<StyledLink onClick={() => setShowModal(true)}>
<GLink>
{formatMessage({
id: 'qf_donor_eligibility.banner.link.recheck_eligibility',
})}
</GLink>
</StyledLink>
)}
{qfEligibilityState === EQFElegibilityState.PROCESSING && (
<StyledStatus>
{formatMessage({
id: 'label.processing',
})}
<Spinner color={brandColors.mustard[600]} size={25} />
</StyledStatus>
)}
{qfEligibilityState ===
EQFElegibilityState.MORE_INFO_NEEDED && (
<StyledLink onClick={() => setShowModal(true)}>
<GLink>
{formatMessage({
id: 'label.add_more_info',
})}
</GLink>
</StyledLink>
)}
{qfEligibilityState === EQFElegibilityState.NOT_SIGNED && (
<StyledLink onClick={() => setSignWithWallet(true)}>
<GLink>
{formatMessage({
id: 'label.sign_message',
})}
</GLink>
<IconWalletOutline16 />
</StyledLink>
)}
</PassportBannerWrapper>
{showModal && (
<PassportModal
qfEligibilityState={qfEligibilityState}
passportState={passportState}
passportScore={passportScore}
currentRound={currentRound}
setShowModal={setShowModal}
updateState={updateState}
refreshScore={refreshScore}
handleSign={handleSign}
/>
)}
{signWithWallet && (
<SignWithWalletModal
isGSafeConnector={isGSafeConnector}
setShowModal={() => {
setSignWithWallet(false);
}}
/>
)}
</>
) : (
<>

Check failure on line 135 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `··` with `↹`
<PassportBannerWrapper

Check failure on line 136 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Insert `↹`
$bgColor={PassportBannerData[qfEligibilityState].bg}
$bgColor={PassportBannerData[qfEligibilityState].bg}

Check failure on line 137 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `··` with `↹↹`
>
<Flex gap="8px" $alignItems="center">
<IconWrapper>
{PassportBannerData[qfEligibilityState].icon}
</IconWrapper>
<P>
{formatMessage(
{
id: PassportBannerData[qfEligibilityState].content,
},
{
data:
qfEligibilityState === EQFElegibilityState.NOT_STARTED &&
currentRound
? smallFormatDate(new Date(currentRound?.beginDate))
: undefined,
}
)}
{currentRound && qfEligibilityState === EQFElegibilityState.RECHECK_ELIGIBILITY && (
<>
{' '}
<strong>
{new Date(currentRound.endDate)
.toLocaleString(locale || 'en-US', {
day: 'numeric',
month: 'short',
})
.replace(/,/g, '')}
</strong>
</>
)}
</P>
</Flex>
{qfEligibilityState === EQFElegibilityState.CHECK_ELIGIBILITY && (
<StyledLink onClick={() => fetchUserMBDScore()}>
<GLink>
{formatMessage({
id: 'label.to_activate_your_gitcoin_passport',
id: 'qf_donor_eligibility.banner.link.check_eligibility',
})}
</P>
<StyledP onClick={handleSingOutAndSignInWithEVM}>
</GLink>
</StyledLink>
)}
{qfEligibilityState === EQFElegibilityState.RECHECK_ELIGIBILITY && (
<StyledLink onClick={() => setShowModal(true)}>
<GLink>
{formatMessage({
id: 'label.switch_to_evm',
id: 'qf_donor_eligibility.banner.link.recheck_eligibility',
})}
</StyledP>
</GLink>
</StyledLink>
)}
{qfEligibilityState === EQFElegibilityState.PROCESSING && (
<StyledStatus>
{formatMessage({
id: 'label.processing',
})}
<Spinner color={brandColors.mustard[600]} size={25} />
</StyledStatus>
)}
{qfEligibilityState === EQFElegibilityState.MORE_INFO_NEEDED && (
<StyledLink onClick={() => setShowModal(true)}>
<GLink>
{formatMessage({
id: 'label.add_more_info',
})}
</GLink>
</StyledLink>
)}
{qfEligibilityState === EQFElegibilityState.NOT_SIGNED && (
<StyledLink onClick={() => setSignWithWallet(true)}>
<GLink>
{formatMessage({
id: 'label.sign_message',
})}
</GLink>
<IconWalletOutline16 />
</StyledLink>
)}
</PassportBannerWrapper>
{showModal && (
<PassportModal
qfEligibilityState={qfEligibilityState}
passportState={passportState}
passportScore={passportScore}
currentRound={currentRound}
setShowModal={setShowModal}
updateState={updateState}
refreshScore={refreshScore}
handleSign={handleSign}
/>
)}
{signWithWallet && (
<SignWithWalletModal
isGSafeConnector={isGSafeConnector}
setShowModal={() => {
setSignWithWallet(false);
}}
/>
)}
</>
) : (
<PassportBannerWrapper $bgColor={PassportBannerData[qfEligibilityState].bg}>
<P>
{formatMessage({
id: 'label.to_activate_your_gitcoin_passport',
})}
</P>
<StyledP onClick={handleSingOutAndSignInWithEVM}>
{formatMessage({
id: 'label.switch_to_evm',
})}
</StyledP>
</PassportBannerWrapper>
);
};
};


interface IPassportBannerWrapperProps {
$bgColor: EPBGState;
}

export const PassportBannerWrapper = styled(Flex)<IPassportBannerWrapperProps>`
flex-direction: column;
background-color: ${props => bgColor[props.$bgColor]};
padding: 16px;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
${mediaQueries.tablet} {
flex-direction: row;
}
flex-direction: column;
background-color: ${props => bgColor[props.$bgColor]};
padding: 16px;
align-items: center;
justify-content: center;
gap: 8px;
position: sticky; /* Change this to sticky */
top: 0; /* This keeps it at the top as the user scrolls */
z-index: 1000; /* Ensure it stays above other content */
${mediaQueries.tablet} {
flex-direction: row;
}
`;

const IconWrapper = styled.div`
Expand Down

0 comments on commit ede4097

Please sign in to comment.