Skip to content

Commit

Permalink
Merge pull request #4734 from Giveth/4732_fix_stellar_doante_card_ui
Browse files Browse the repository at this point in the history 
Hotfix - fix stellar doante card UI
  • Loading branch information
@Meriem-BM
Meriem-BM committed Sep 16, 2024
2 parents 5894a46 + 30a40ba commit e81845a
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 34 deletions.
9 changes: 6 additions & 3 deletions lang/ca.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,8 @@
"label.contributors": "{count, plural, one {contribuïdor} other {contribuïdors}}",
"label.conviction_voting": "Votació per convicció",
"label.copied": "Copiat!",
"label.go_back_and_check_network": "Torna enrere i assegura't que estàs a la xarxa correcta.",
"label.stellar_is_not_eligible_for_matching": "Stellar no és elegible per aquesta ronda.",
"label.copy_link": "Copiar enllaç",
"label.covenant": "conveni",
"label.created_at": "Creat el",
Expand Down Expand Up @@ -1302,7 +1304,7 @@
"label.passport_connected": "Passaport connectat",
"label.increase_passport_score": "Augmenta la puntuació del passaport",
"label.project_owner_address_detected": "Adreça del propietari del projecte detectada",
"label.project_owner_cant_donate_to_own_project": "No pots donar a un projecte del qual ets propietari. Hi ha milers de projectes a Giveth que busquen el teu suport! Si us plau, tria un altre projecte per donar.",
"label.project_owner_cant_donate_to_own_project": "No pots donar a un projecte del qual ets propietari. Hi ha milers de projectes a Giveth que busquen el teu suport! Si us plau, tria un altre projecte per donar.",
"label.qf_donor_eligibility.banner.check_eligibility": "Fes que les teves donacions es igualin! Verifica la teva unicitat amb un clic.",
"label.qf_donor_eligibility.banner.recheck_eligibility": "Fes que les teves donacions es igualin! Augmenta la teva puntuació de Gitcoin Passport abans de",
"label.qf_donor_eligibility.banner.more_info_needed": "Necessitem una mica més d'informació per verificar la teva elegibilitat per QF!",
Expand Down Expand Up @@ -1627,7 +1629,8 @@
"project.givback_toast.description.non_verified_public": "Actualment, els GIVbacks només s'atorguen per donacions fetes a projectes elegibles per a GIVbacks a Ethereum. La teva contribució segueix sent important, fins i tot si no genera GIVbacks!",
"project.givback_toast.description.verified_owner": "Impulsa el teu projecte per augmentar la quantitat de GIVbacks que reben els teus donants a Ethereum i augmentar la seva visibilitat entre altres projectes.",
"project.givback_toast.description.verified_owner.note": "Com a propietari d'aquest projecte, no rebràs GIVbacks per donar-hi.",
"project.givback_toast.description.verified_public": "Les donacions a Ethereum a projectes elegibles per a GIVbacks són recompensades amb GIV. Impulsa aquest projecte per augmentar el seu percentatge de recompenses i fer-lo més visible a la pàgina de projectes!", "project.givback_toast.title.non_verified_owner": "El teu projecte està creant o donant suport a béns públics?",
"project.givback_toast.description.verified_public": "Les donacions a Ethereum a projectes elegibles per a GIVbacks són recompensades amb GIV. Impulsa aquest projecte per augmentar el seu percentatge de recompenses i fer-lo més visible a la pàgina de projectes!",
"project.givback_toast.title.non_verified_owner": "El teu projecte està creant o donant suport a béns públics?",
"project.givback_toast.title.non_verified_owner_cancelled": "Estat Cancel·lat",
"project.givback_toast.title.non_verified_owner_deactive": "Mode Desactivat",
"project.givback_toast.title.non_verified_owner_draft": "Publica el teu projecte avui!",
Expand Down Expand Up @@ -1699,4 +1702,4 @@
"label.devouch.if_you_are_eligible": "Si ets un verificador elegible de Giveth, pots avalar la legitimitat d'aquest projecte, potencialment augmentant els beneficis que rep a Giveth.",
"label.devouch.learn_more_about_devouch": "Més informació sobre DeVouch i la verificació descentralitzada",
"label.devouch.attest_on_devouch": "Certifica a DeVouch"
}
}
4 changes: 3 additions & 1 deletion lang/en.json
View file
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 Expand Up @@ -337,6 +338,7 @@
"label.donations": "Donations",
"label.donations_and_projects": "Donations & Projects",
"label.donations_made_on": "Donations made on",
"label.go_back_and_check_network": "Go back and make sure you're on the right network.",
"label.donations_received": "Donations Received",
"label.donation_finalized": "Donation Finalized!",
"label.donation_submitted": "Donation submitted",
Expand Down Expand Up @@ -1707,4 +1709,4 @@
"label.devouch.if_you_are_eligible": "If you are an eligible Giveth Verifier you can vouch for this project's legitimacy, potentially increasing the benefits it receives on Giveth.",
"label.devouch.learn_more_about_devouch": "Learn more about DeVouch & Decentralized Verification",
"label.devouch.attest_on_devouch": "Attest on Devouch"
}
}
4 changes: 3 additions & 1 deletion lang/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,8 @@
"label.donations": "Donaciones",
"label.donations_and_projects": "Donaciones & Proyectos",
"label.donations_made_on": "Donaciones realizadas el",
"label.go_back_and_check_network": "Vuelve atrás y asegúrate de que estás en la red correcta.",
"label.stellar_is_not_eligible_for_matching": "Stellar no es elegible para esta ronda.",
"label.donations_received": "Donaciones Recibidas",
"label.donation_finalized": "¡Donación finalizada!",
"label.donation_submitted": "Donación enviada",
Expand Down Expand Up @@ -1705,4 +1707,4 @@
"label.devouch.if_you_are_eligible": "Si eres un verificador elegible de Giveth, puedes avalar la legitimidad de este proyecto, potencialmente aumentando los beneficios que recibe en Giveth.",
"label.devouch.learn_more_about_devouch": "Más información sobre DeVouch y la verificación descentralizada",
"label.devouch.attest_on_devouch": "Certificar en DeVouch"
}
}
15 changes: 10 additions & 5 deletions src/components/views/donate/DonateIndex.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,8 @@ const DonateIndex: FC = () => {
);
const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();

const isQRDonation = router.query.chain === ChainType.STELLAR.toLowerCase();

useEffect(() => {
dispatch(setShowHeader(false));
return () => {
Expand Down Expand Up @@ -228,7 +230,7 @@ const DonateIndex: FC = () => {
}
/>
)}
{alreadyDonated && (
{alreadyDonated && !isQRDonation && (
<AlreadyDonatedWrapper>
<IconDonation24 />
<SublineBold>
Expand All @@ -238,9 +240,10 @@ const DonateIndex: FC = () => {
</SublineBold>
</AlreadyDonatedWrapper>
)}
{!isSafeEnv && hasActiveQFRound && !isOnSolana && (
<PassportBanner />
)}
{!isSafeEnv &&
hasActiveQFRound &&
!isOnSolana &&
!isQRDonation && <PassportBanner />}
<NiceBanner />
<Row>
<Col xs={12} lg={6}>
Expand All @@ -266,7 +269,9 @@ const DonateIndex: FC = () => {
/>
</ImageWrapper>
{!isMobile ? (
(!isRecurringTab && hasActiveQFRound) ||
(!isQRDonation &&
!isRecurringTab &&
hasActiveQFRound) ||
(isRecurringTab &&
isOnEligibleNetworks) ? (
<QFSection projectData={project} />
Expand Down
84 changes: 61 additions & 23 deletions src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,31 @@ import {
neutralColors,
Flex,
} from '@giveth/ui-design-system';
import React, { useState } from 'react';
import React, { FC, 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';

const DonateQFEligibleNetworks = () => {
type TDonateQFEligibleNetworksProps = {
goBack?: () => void;
};

const DonateQFEligibleNetworks: FC<TDonateQFEligibleNetworksProps> = ({
goBack,
}) => {
const [showModal, setShowModal] = useState(false);
const { project } = useDonateData();
const { formatMessage } = useIntl();

const router = useRouter();
const isQRDonation = router.query.chain === ChainType.STELLAR.toLowerCase();

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

const eligibleChainNames = activeStartedRound?.eligibleNetworks.map(
Expand All @@ -35,6 +45,10 @@ const DonateQFEligibleNetworks = () => {

const chainsString = eligibleChainNames?.join(' & ');

const goBackToNetworkSelection = () => {
goBack?.();
};

return (
<Container>
<MakeDonationTitle>
Expand All @@ -45,28 +59,50 @@ 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',
})}
<StyledCaption
onClick={() => goBackToNetworkSelection()}
style={{ marginTop: '4px' }}
>
{formatMessage({
id: 'label.go_back_and_check_network',
})}
</StyledCaption>
<IconExternalLink16 />
</ExternalLink>
</ActionsRow>
{showModal && (
</MakeDonationDescription>
)}
{!isQRDonation && (
<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' })}
</StyledCaption>
<IconExternalLink16 />
</ExternalLink>
</ActionsRow>
)}
{!isQRDonation && showModal && (
<SwitchNetwork
setShowModal={setShowModal}
customNetworks={eligibleNetworksWithChainType}
Expand Down Expand Up @@ -103,6 +139,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
30 changes: 29 additions & 1 deletion src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
View file
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,15 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
const { formatMessage } = useIntl();
const router = useRouter();
const { isSignedIn, isEnabled } = useAppSelector(state => state.user);
const [showDonateModal, setShowDonateModal] = useState(false);
const isQRDonation = 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 @@ -136,20 +139,42 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
}, [draftDonationId]);

const goBack = async () => {
const prevQuery = router.query;

const updateQuery = (excludeKey: string) =>
Object.keys(prevQuery).reduce((acc, key) => {
return key !== excludeKey
? { ...acc, [key]: prevQuery[key] }
: acc;
}, {});

if (showQRCode) {
const draftDonation =
await checkDraftDonationStatus(draftDonationId);

if (draftDonation?.status === 'matched') {
setQRDonationStatus('success');
setDraftDonationData(draftDonation);
return;
}

await markDraftDonationAsFailed(draftDonationId);
setPendingDonationExists?.(false);
setShowQRCode(false);

await router.push(
{ query: updateQuery('draft_donation') },
undefined,
{ shallow: true },
);
} else {
setIsQRDonation(false);

await router.push({ query: updateQuery('chain') }, undefined, {
shallow: true,
});
}

setQRDonationStatus('waiting');
};

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

0 comments on commit e81845a

Please sign in to comment.