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.

Sign up for GitHub

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

Jump to bottom

add sticky style #4848

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+136 −140
Open

add sticky style #4848

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 136 additions & 140 deletions src/components/PassportBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,171 +111,167 @@
icon: <IconInfoOutline24 color={semanticColors.golden[700]} />,
},
};

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 115 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 116 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `·` with `⏎↹↹`
Comment on lines +115 to +116
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix formatting issues as indicated by static analysis

Static analysis tools have identified formatting inconsistencies on these lines. Please adjust the indentation and spacing to align with the project's code style guidelines.

Apply this diff to correct the formatting:

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

Committable suggestion was skipped due to low confidence.

🧰 Tools
🪛 GitHub Check: build

[failure] 115-115:
Replace · with ⏎↹↹

[failure] 116-116:
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 122 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

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


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

View workflow job for this annotation

GitHub Actions / build 

Delete `··`
Comment on lines +122 to +124
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix formatting issues in blank lines and indentation

Static analysis tools have detected extra spaces on blank lines and incorrect indentation. For code cleanliness and adherence to the project's coding standards, please remove unnecessary whitespace and adjust indentation where necessary.

Apply this diff:

-  
-
-
   const isGSafeConnector = connector?.id === 'safe';

-  
   // Check if the eligibility state or current round is not loaded yet
   const isLoading = qfEligibilityState === undefined || currentRound === undefined;

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

-  
   return !isOnSolana ? (
+    <>
       <PassportBannerWrapper
-        $bgColor={PassportBannerData[qfEligibilityState].bg}
+          $bgColor={PassportBannerData[qfEligibilityState].bg}
       >

Also applies to: 127-127, 130-130, 132-132, 134-134, 136-136

🧰 Tools
🪛 GitHub Check: build

[failure] 122-122:
Delete ··

[failure] 124-124:
Delete ··

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

Check failure on line 127 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 130 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `··` with `↹`
}
Comment on lines +125 to +131
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Ensure correct checking of undefined values to prevent logical errors

Using !qfEligibilityState may lead to unintended behavior if qfEligibilityState can have valid falsy values (e.g., 0). To accurately check if qfEligibilityState or currentRound is undefined, consider using explicit comparisons.

Apply this diff to adjust the condition:

-	const isLoading = !qfEligibilityState || !currentRound;
+	const isLoading = qfEligibilityState === undefined || currentRound === undefined;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// Check if the eligibility state or current round is not loaded yet
const isLoading = !qfEligibilityState || !currentRound;
// 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 if the eligibility state or current round is not loaded yet
const isLoading = qfEligibilityState === undefined || currentRound === undefined;
// Only render the banner when the data is available
if (isLoading) {
return null; // Or return a spinner or loading message if you'd like
}
🧰 Tools
🪛 GitHub Check: build

[failure] 127-127:
Delete ··

[failure] 130-130:
Replace ·· with ↹


Check failure on line 132 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 134 in src/components/PassportBanner.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `··` with `↹`
<PassportBannerWrapper

Check failure on line 135 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 136 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>
)}
Comment on lines +170 to +178
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Avoid duplicating conditional rendering for similar eligibility states

The rendering logic for CHECK_ELIGIBILITY and RECHECK_ELIGIBILITY states is very similar. Consider refactoring to reduce code duplication.

Apply this diff:

   { (qfEligibilityState === EQFElegibilityState.CHECK_ELIGIBILITY || qfEligibilityState === EQFElegibilityState.RECHECK_ELIGIBILITY) && (
     <StyledLink onClick={() => {
+      qfEligibilityState === EQFElegibilityState.CHECK_ELIGIBILITY ? fetchUserMBDScore() : setShowModal(true);
+    }}>
       <GLink>
         {formatMessage({
-          id: 'qf_donor_eligibility.banner.link.check_eligibility',
+          id: qfEligibilityState === EQFElegibilityState.CHECK_ELIGIBILITY
+            ? 'qf_donor_eligibility.banner.link.check_eligibility'
+            : 'qf_donor_eligibility.banner.link.recheck_eligibility',
         })}
       </GLink>
     </StyledLink>
   )}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{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.CHECK_ELIGIBILITY || qfEligibilityState === EQFElegibilityState.RECHECK_ELIGIBILITY) && (
<StyledLink onClick={() => {
qfEligibilityState === EQFElegibilityState.CHECK_ELIGIBILITY ? fetchUserMBDScore() : setShowModal(true);
}}>
<GLink>
{formatMessage({
id: qfEligibilityState === EQFElegibilityState.CHECK_ELIGIBILITY
? 'qf_donor_eligibility.banner.link.check_eligibility'
: 'qf_donor_eligibility.banner.link.recheck_eligibility',
})}
</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 as any).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`
width: 30px;
`;
Expand Down
Loading