Skip to content

Commit

Permalink
Change qf guid hin in stellar donate page
Browse files Browse the repository at this point in the history 
related to #4732 (comment)
  • Loading branch information
@mohammadranjbarz
mohammadranjbarz committed Sep 15, 2024
1 parent 168889c commit 1c52ecf
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 123 deletions.
2 changes: 1 addition & 1 deletion lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@
"label.archive_donation": "Archive donation",
"label.archive_stream": "Archive Stream",
"label.are_eligible_to_be_matched": "are eligible to be matched.",
"label.stellar_is_not_eligible_for_matching": "Stellar is not eligible for this round.\nGo back and make sure you're on the right network.",
"label.stellar_is_not_eligible_for_matching": "Stellar is not eligible for this round.",
"label.are_you_sure": "Are you sure?",
"label.ask_us_a_question": "Ask us a Question",
"label.ask_us_a_question.caption": "Do you have a specific question or a general inquiry that requires a response?",
Expand Down
228 changes: 122 additions & 106 deletions src/components/PassportBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,104 +123,115 @@ export const PassportBanner = () => {
const { isOnSolana, handleSingOutAndSignInWithEVM } = useGeneralWallet();
const [showModal, setShowModal] = useState<boolean>(false);
const [signWithWallet, setSignWithWallet] = useState<boolean>(false);

const router = useRouter();
const [isQRDonation, _setIsQRDonation] = useState(
router.query.chain === ChainType.STELLAR.toLowerCase(),
);
const isGSafeConnector = connector?.id === 'safe';

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>
</>
{!isQRDonation && (
<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,
},
)}
</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>
{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.sign_message',
id: 'label.processing',
})}
</GLink>
<IconWalletOutline16 />
</StyledLink>
)}
</PassportBannerWrapper>
{showModal && (
<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>
)}
{!isQRDonation && showModal && (
<PassportModal
qfEligibilityState={qfEligibilityState}
passportState={passportState}
Expand All @@ -232,7 +243,7 @@ export const PassportBanner = () => {
handleSign={handleSign}
/>
)}
{signWithWallet && (
{!isQRDonation && signWithWallet && (
<SignWithWalletModal
isGSafeConnector={isGSafeConnector}
setShowModal={() => {
Expand All @@ -242,20 +253,24 @@ export const PassportBanner = () => {
)}
</>
) : (
<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>
<>
{!isQRDonation && (
<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>
)}
</>
);
};

Expand All @@ -271,6 +286,7 @@ export const PassportBannerWrapper = styled(Flex)<IPassportBannerWrapperProps>`
justify-content: center;
gap: 8px;
position: relative;
${mediaQueries.tablet} {
flex-direction: row;
}
Expand Down
49 changes: 33 additions & 16 deletions src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { getActiveRound } from '@/helpers/qf';
import { getChainName } from '@/lib/network';
import { ChainType } from '@/types/config';
import links from '@/lib/constants/links';
import { slugToProjectDonate } from '@/lib/routeCreators';

const DonateQFEligibleNetworks = () => {
const [showModal, setShowModal] = useState(false);
Expand Down Expand Up @@ -66,25 +67,39 @@ const DonateQFEligibleNetworks = () => {
{formatMessage({
id: 'label.stellar_is_not_eligible_for_matching',
})}
<ExternalLink
href={slugToProjectDonate(project.slug)}
target='_blank'
color={brandColors.pinky[500]}
rel='noreferrer noopener'
>
<StyledCaption>
{
"Go back and make sure you're on the right network"
}
</StyledCaption>
</ExternalLink>
</MakeDonationDescription>
)}
<ActionsRow $justifyContent='flex-start' $alignItems='center'>
<StyledCaption onClick={() => setShowModal(true)}>
{formatMessage({ id: 'label.switch_network' })}
</StyledCaption>
<Divider />
<ExternalLink
href={links.ACROSS_BRIDGE}
target='_blank'
rel='noreferrer noopener'
>
<StyledCaption>
{formatMessage({ id: 'label.bridge_tokens' })}
{!isQRDonation && (
<ActionsRow $justifyContent='flex-start' $alignItems='center'>
<StyledCaption onClick={() => setShowModal(true)}>
{formatMessage({ id: 'label.switch_network' })}
</StyledCaption>
<IconExternalLink16 />
</ExternalLink>
</ActionsRow>
{showModal && (
<Divider />
<ExternalLink
href={links.ACROSS_BRIDGE}
target='_blank'
rel='noreferrer noopener'
>
<StyledCaption>
{formatMessage({ id: 'label.bridge_tokens' })}
</StyledCaption>
<IconExternalLink16 />
</ExternalLink>
</ActionsRow>
)}
{!isQRDonation && showModal && (
<SwitchNetwork
setShowModal={setShowModal}
customNetworks={eligibleNetworksWithChainType}
Expand Down Expand Up @@ -121,6 +136,8 @@ const BoldCaption = styled(Caption)`

const StyledCaption = styled(Caption)`
cursor: pointer;
color: ${brandColors
.pinky[500]} !important; // Match this to the other link's color
`;

const ActionsRow = styled(Flex)`
Expand Down

0 comments on commit 1c52ecf

Please sign in to comment.