From 0cf103dce477c4fba47b8e216d4cc6862f68560b Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 3 Sep 2024 11:57:23 +0100 Subject: [PATCH 1/5] fix: use InlineToast component for GivBack info toast --- .../QRCodeDonation/QRDonationCard.tsx | 47 ++----------------- 1 file changed, 4 insertions(+), 43 deletions(-) diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index bdca282e77..46187c242a 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -45,12 +45,6 @@ interface QRDonationCardProps extends IDonationCardProps { setIsQRDonation: (isQRDonation: boolean) => void; } -interface IMessage { - text: string; - link: string; - linkText: string; -} - const formatAmountToDisplay = (amount: bigint) => { const decimals = 18; return truncateToDecimalPlaces( @@ -59,15 +53,6 @@ const formatAmountToDisplay = (amount: bigint) => { ).toString(); }; -const GivBackToast: FC = ({ text, link, linkText }) => ( - -

{text}

- window.open(link, '_blank')}> - {linkText} - - -); - export const QRDonationCard: FC = ({ showQRCode, qrAcceptedTokens, @@ -350,14 +335,13 @@ export const QRDonationCard: FC = ({ disabled={amount === 0n} /> {!isSignedIn && stellarToken?.isGivbackEligible && ( - )} @@ -459,26 +443,3 @@ const StyledInputWrapper = styled(InputWrapper)` const MarginLessInlineToast = styled(InlineToast)` margin: 0; `; - -const GivBackWrapper = styled(Flex)` - align-items: center; - justify-content: space-between; - border-radius: 8px; - border: 1px solid ${brandColors.giv[500]}; - background: ${brandColors.giv[50]}; - color: ${brandColors.giv[500]}; - padding: 16px; - margin-top: 10px; - gap: 10px; - - & > * { - display: inline; - } -`; - -const StyledLink = styled.div` - display: inline; - margin-left: 4px; - font-weight: 500; - cursor: pointer; -`; From b685d5633e8a0e9dd4ee6eca6edf1c2df5f6987d Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 3 Sep 2024 12:48:30 +0100 Subject: [PATCH 2/5] fix: eslint errors --- .../OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index 46187c242a..ed271f08fc 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -9,7 +9,6 @@ import { Flex, neutralColors, IconArrowLeft, - brandColors, mediaQueries, } from '@giveth/ui-design-system'; import { useIntl } from 'react-intl'; From b6b872fd9ca9d3cc41ded8b1823a713e8a52fbf1 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Tue, 3 Sep 2024 13:44:43 +0100 Subject: [PATCH 3/5] fix: update GIVback toast text --- lang/ca.json | 2 +- lang/en.json | 2 +- lang/es.json | 2 +- .../QRCodeDonation/QRDonationCard.tsx | 15 ++++++++++++++- 4 files changed, 17 insertions(+), 4 deletions(-) diff --git a/lang/ca.json b/lang/ca.json index 1646ce8c03..42b21ba336 100644 --- a/lang/ca.json +++ b/lang/ca.json @@ -632,7 +632,7 @@ "label.modify_stream_balance": "Modificar el Saldo de la Transmissió", "label.month": "{count, plural, one { Mes} other { Mesos} }", "label.monthly": "Mensualment", - "label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia la sessió amb la teva cartera Ethereum per a GIVbacks.", + "label.sign_in_with_your_eth_wallet_for_givebacks": "Inicieu la sessió amb la vostra adreça d'ETH per ser elegible per a GIVbacks.", "label.monthly_across_all_projects": "mensualment a tots els projectes", "label.months": "{count, plural, one { Mes} other { Mesos} }", "label.more_about_us": "Més sobre nosaltres", diff --git a/lang/en.json b/lang/en.json index a96ae5700e..333e7ebedb 100644 --- a/lang/en.json +++ b/lang/en.json @@ -635,7 +635,7 @@ "label.modify_stream_balance": "Modify Stream Balance", "label.month": "{count, plural, one { Month} other { Months} }", "label.monthly": "Monthly", - "label.sign_in_with_your_eth_wallet_for_givebacks": "Sign in with your ETH wallet to claim GIVbacks.", + "label.sign_in_with_your_eth_wallet_for_givebacks": "Sign in with your ETH address to be eligible for GIVbacks.", "label.monthly_across_all_projects": "monthly, across all projects", "label.months": "{count, plural, one { Month} other { Months} }", "label.more_about_us": "More about us", diff --git a/lang/es.json b/lang/es.json index 640810f483..d21ef76ab1 100644 --- a/lang/es.json +++ b/lang/es.json @@ -632,7 +632,7 @@ "label.modify_stream_balance": "Modificar el Saldo de Transmisión", "label.month": "{count, plural, one { Mes} other { Meses} }", "label.monthly": "Mensualmente", - "label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia sesión con tu billetera ETH para GIVbacks.", + "label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia sesión con tu dirección ETH para poder optar a los GIVbacks.", "label.monthly_across_all_projects": "mensualmente en todos los proyectos", "label.months": "{count, plural, one { Mes} other { Meses} }", "label.more_about_us": "Más acerca de nosotros", diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index ed271f08fc..ec77e58237 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -52,6 +52,14 @@ const formatAmountToDisplay = (amount: bigint) => { ).toString(); }; +const capitalizeFirstLetters = (str: string) => { + return str + .toLowerCase() + .split(' ') + .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); +}; + export const QRDonationCard: FC = ({ showQRCode, qrAcceptedTokens, @@ -333,7 +341,7 @@ export const QRDonationCard: FC = ({ onClick={handleNext} disabled={amount === 0n} /> - {!isSignedIn && stellarToken?.isGivbackEligible && ( + {!isSignedIn && ( = ({ id: 'label.sign_in_with_your_eth_wallet_for_givebacks', })} link={links.GIVBACK_DOC} + linkText={capitalizeFirstLetters( + formatMessage({ + id: 'label.learn_more', + }), + )} /> )} From 033c353d9078f5fe79debbb6525ef4bc45c23d43 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Wed, 4 Sep 2024 09:40:56 +0100 Subject: [PATCH 4/5] fix: add gap (reciept page) --- src/components/views/transaction/DonationStatusSection.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/transaction/DonationStatusSection.tsx b/src/components/views/transaction/DonationStatusSection.tsx index 1db5868096..e341a00b88 100644 --- a/src/components/views/transaction/DonationStatusSection.tsx +++ b/src/components/views/transaction/DonationStatusSection.tsx @@ -474,6 +474,7 @@ const ButtonStyled = styled(Button)` const FlexWrap = styled(Flex)` flex-wrap: wrap; + gap: 10px; `; const FlexDirection = styled(Flex)` From 1e930c68130939ad8081a65c04c3047f75b08c0b Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Wed, 4 Sep 2024 09:46:37 +0100 Subject: [PATCH 5/5] fix: use capitalizeAllWords helper --- .../QRCodeDonation/QRDonationCard.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index ec77e58237..1b1582540a 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -25,6 +25,7 @@ import { ChainType } from '@/types/config'; import config from '@/configuration'; import { truncateToDecimalPlaces, + capitalizeAllWords, formatBalance, showToastError, } from '@/lib/helpers'; @@ -52,14 +53,6 @@ const formatAmountToDisplay = (amount: bigint) => { ).toString(); }; -const capitalizeFirstLetters = (str: string) => { - return str - .toLowerCase() - .split(' ') - .map(word => word.charAt(0).toUpperCase() + word.slice(1)) - .join(' '); -}; - export const QRDonationCard: FC = ({ showQRCode, qrAcceptedTokens, @@ -341,7 +334,7 @@ export const QRDonationCard: FC = ({ onClick={handleNext} disabled={amount === 0n} /> - {!isSignedIn && ( + {!isSignedIn && stellarToken?.isGivbackEligible && ( = ({ id: 'label.sign_in_with_your_eth_wallet_for_givebacks', })} link={links.GIVBACK_DOC} - linkText={capitalizeFirstLetters( + linkText={capitalizeAllWords( formatMessage({ id: 'label.learn_more', }),