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

Hotfix - fix stellar doante card UI #4734

Merged
merged 9 commits into from
Sep 16, 2024
Merged

Hotfix - fix stellar doante card UI #4734

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
168889c
Fix Stellar donation card ui things regarding QF
mohammadranjbarz Sep 15, 2024
1c52ecf
Change qf guid hin in stellar donate page
mohammadranjbarz Sep 15, 2024
99f22bb
Undo passport banner changes
mohammadranjbarz Sep 15, 2024
5910f31
Fix linter errors
mohammadranjbarz Sep 15, 2024
8050d7f
fix: add condition to hide QFSection when its stellar chain
Meriem-BM Sep 16, 2024
6f1a6b1
fix: linter error
Meriem-BM Sep 16, 2024
0dc52e5
fix: showing Toast to switch network when Stellar is picked
Meriem-BM Sep 16, 2024
6351908
fix: linter error
Meriem-BM Sep 16, 2024
30a40ba
fix: hide AlreadyDonated toast
Meriem-BM Sep 16, 2024
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
1 change: 1 addition & 0 deletions lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +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.",
"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
11 changes: 8 additions & 3 deletions src/components/views/donate/DonateIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,9 @@ const DonateIndex: FC = () => {
const [showQRCode, setShowQRCode] = React.useState(
!!router.query.draft_donation,
);
const [isQRDonation, _setIsQRDonation] = useState(
router.query.chain === ChainType.STELLAR.toLowerCase(),
);
const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();

useEffect(() => {
Expand Down Expand Up @@ -238,9 +241,10 @@ const DonateIndex: FC = () => {
</SublineBold>
</AlreadyDonatedWrapper>
)}
{!isSafeEnv && hasActiveQFRound && !isOnSolana && (
<PassportBanner />
)}
{!isSafeEnv &&
hasActiveQFRound &&
!isOnSolana &&
!isQRDonation && <PassportBanner />}
<NiceBanner />
<Row>
<Col xs={12} lg={6}>
Expand Down Expand Up @@ -268,6 +272,7 @@ const DonateIndex: FC = () => {
{!isMobile ? (
(!isRecurringTab && hasActiveQFRound) ||
(isRecurringTab &&
!isQRDonation &&
isOnEligibleNetworks) ? (
<QFSection projectData={project} />
) : (
Expand Down
77 changes: 56 additions & 21 deletions src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,25 @@ import {
import React, { useState } from 'react';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { useRouter } from 'next/router';
import SwitchNetwork from '@/components/modals/SwitchNetwork';
import { useDonateData } from '@/context/donate.context';
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);
const { project } = useDonateData();
const { formatMessage } = useIntl();

const router = useRouter();
const [isQRDonation, setIsQRDonation] = useState(
router.query.chain === ChainType.STELLAR.toLowerCase(),
);

const { activeStartedRound } = getActiveRound(project.qfRounds);

const eligibleChainNames = activeStartedRound?.eligibleNetworks.map(
Expand All @@ -45,28 +52,54 @@ const DonateQFEligibleNetworks = () => {
})}
</Flex>
</MakeDonationTitle>
<MakeDonationDescription>
{formatMessage({ id: 'label.donations_made_on' })}
&nbsp;<BoldCaption>{chainsString}</BoldCaption>&nbsp;
{formatMessage({ id: 'label.are_eligible_to_be_matched' })}
</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 && (
<MakeDonationDescription>
{formatMessage({ id: 'label.donations_made_on' })}
&nbsp;<BoldCaption>{chainsString}</BoldCaption>&nbsp;
{formatMessage({ id: 'label.are_eligible_to_be_matched' })}
</MakeDonationDescription>
)}
{isQRDonation && (
<MakeDonationDescription>
{formatMessage({ id: 'label.donations_made_on' })}
&nbsp;<BoldCaption>{chainsString}</BoldCaption>&nbsp;
{formatMessage({ id: 'label.are_eligible_to_be_matched' })}
{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>
)}
{!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 @@ -103,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
8 changes: 8 additions & 0 deletions src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
import { useAppSelector } from '@/features/hooks';
import { useModalCallback } from '@/hooks/useModalCallback';
import links from '@/lib/constants/links';
import DonateQFEligibleNetworks from '@/components/views/donate/OnTime/DonateQFEligibleNetworks';

interface QRDonationCardProps extends IDonationCardProps {
qrAcceptedTokens: IProjectAcceptedToken[];
Expand All @@ -62,13 +63,17 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
const { formatMessage } = useIntl();
const router = useRouter();
const { isSignedIn, isEnabled } = useAppSelector(state => state.user);
const [isQRDonation, _setIsQRDonation] = useState(
router.query.chain === ChainType.STELLAR.toLowerCase(),
);
const [showDonateModal, setShowDonateModal] = useState(false);
const { modalCallback: signInThenDonate } = useModalCallback(() =>
setShowDonateModal(true),
);

const {
project,
hasActiveQFRound,
setQRDonationStatus,
setDraftDonationData,
setPendingDonationExists,
Expand Down Expand Up @@ -311,6 +316,9 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
</QRDonationInput>
</StyledInputWrapper>
{hasActiveQFRound && isQRDonation && (
<DonateQFEligibleNetworks />
)}
<CardBottom>
<FlexStyled
$justifyContent='space-between'
Expand Down
Loading