From fb2cf500a5fd5671cc89ece49caf65ba22452738 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Mon, 2 Sep 2024 08:51:22 +0100 Subject: [PATCH 1/6] show GiveBack Toast when token is eligible --- .../OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx | 2 +- 1 file changed, 1 insertion(+), 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 a51461dde2..22501a47dd 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -345,7 +345,7 @@ export const QRDonationCard: FC = ({ onClick={handleNext} disabled={amount === 0n} /> - {!isSignedIn && ( + {!isSignedIn && stellarToken?.isGivbackEligible && ( Date: Mon, 2 Sep 2024 12:38:52 +0100 Subject: [PATCH 2/6] update GivBack Toast UI --- lang/ca.json | 2 +- lang/en.json | 2 +- lang/es.json | 2 +- .../QRCodeDonation/QRDonationCard.tsx | 22 +++++++++---------- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/lang/ca.json b/lang/ca.json index e21a3b850e..19f8f0fc34 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": "Inicia la sessió amb la teva cartera Ethereum 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 11fce21d28..9a848a7915 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 wallet to claim 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 400e1df0a0..a7aad62c56 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 billetera ETH para 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 22501a47dd..9711643ccf 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -11,7 +11,6 @@ import { IconArrowLeft, brandColors, mediaQueries, - IconGIVBack24, } from '@giveth/ui-design-system'; import { useIntl } from 'react-intl'; import { formatUnits } from 'viem'; @@ -58,14 +57,10 @@ const formatAmountToDisplay = (amount: bigint) => { const GivBackToast: FC = ({ text, link, linkText }) => ( - - - {text} - {'. '} - window.open(link, '_blank')}> - {linkText}. - - +

{text}

+ window.open(link, '_blank')}> + {linkText} + ); @@ -198,7 +193,7 @@ export const QRDonationCard: FC = ({ projectId: Number(id), amount: Number(formatAmountToDisplay(amount)), token: stellarToken, - anonymous: true, + anonymous: isSignedIn && isEnabled ? false : true, symbol: stellarToken.symbol, setFailedModalType: () => {}, useDonationBox: false, @@ -458,9 +453,12 @@ const MarginLessInlineToast = styled(InlineToast)` const GivBackWrapper = styled(Flex)` align-items: center; + justify-content: space-between; border-radius: 8px; border: 1px solid ${brandColors.giv[500]}; - padding: 16px 8px; + background: ${brandColors.giv[50]}; + color: ${brandColors.giv[500]}; + padding: 16px; margin-top: 10px; gap: 10px; @@ -472,6 +470,6 @@ const GivBackWrapper = styled(Flex)` const StyledLink = styled.div` display: inline; margin-left: 4px; - color: ${brandColors.pinky[500]}; + font-weight: 500; cursor: pointer; `; From 6bcd5f01e1c8d2284977a0ec70fcde3a6bb32990 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Mon, 2 Sep 2024 21:49:29 +0100 Subject: [PATCH 3/6] fix: add project address UI --- .../views/create/WalletAddressInput.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/views/create/WalletAddressInput.tsx b/src/components/views/create/WalletAddressInput.tsx index 8a16c47d33..a2e33e62d6 100644 --- a/src/components/views/create/WalletAddressInput.tsx +++ b/src/components/views/create/WalletAddressInput.tsx @@ -95,6 +95,14 @@ const WalletAddressInput: FC = ({ const isProjectPrevAddress = (newAddress: string) => { // Do not validate if the input address is the same as project prev wallet address if (userAddresses.length === 0) return false; + if (isStellarChain) { + const isAddressMatch = userAddresses.some( + address => + address === newAddress && + (!memoValue || memoValue === prevMemo), + ); + return isAddressMatch; + } return userAddresses .map(prevAddress => prevAddress.toLowerCase()) .includes(newAddress.toLowerCase()); @@ -345,14 +353,18 @@ const Container = styled.div` background: ${neutralColors.gray[100]}; border-radius: 12px; padding: 16px; + + ${mediaQueries.tablet} { + position: relative; + } `; const ButtonWrapper = styled.div` position: absolute; - right: 20px; // Adjust the distance from the right edge as per your need + right: 15px; // Adjust the distance from the right edge as per your need bottom: 78px; // Adjust the distance from the bottom edge as per your need ${mediaQueries.tablet} { - bottom: 20px; + bottom: -50px; } `; From e8cc1cccced82b342da2a749441a7d8032ecb1c9 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Mon, 2 Sep 2024 21:50:02 +0100 Subject: [PATCH 4/6] fix: Timer not stopping when donation is detected --- src/components/views/donate/DonateIndex.tsx | 2 +- .../QRCodeDonation/QRDonationCard.tsx | 12 ++++++------ .../QRCodeDonation/QRDonationDetails.tsx | 14 ++++++++++---- .../views/transaction/DonationStatusSection.tsx | 4 +++- src/context/donate.context.tsx | 2 +- src/hooks/useQRCodeDonation.ts | 8 +++----- 6 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/views/donate/DonateIndex.tsx b/src/components/views/donate/DonateIndex.tsx index 4354dc00ed..337c16b8bd 100644 --- a/src/components/views/donate/DonateIndex.tsx +++ b/src/components/views/donate/DonateIndex.tsx @@ -61,7 +61,7 @@ const DonateIndex: FC = () => { setPendingDonationExists, startTimer, } = useDonateData(); - const { renewExpirationDate, retrieveDraftDonation } = useQRCodeDonation(); + const { renewExpirationDate, retrieveDraftDonation } = useQRCodeDonation(project); const { isSignedIn, isEnabled } = useAppSelector(state => state.user); const alreadyDonated = useAlreadyDonatedToProject(project); diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index 9711643ccf..633b491d48 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -78,12 +78,6 @@ export const QRDonationCard: FC = ({ setShowDonateModal(true), ); - const { - createDraftDonation, - markDraftDonationAsFailed, - checkDraftDonationStatus, - retrieveDraftDonation, - } = useQRCodeDonation(); const { project, setQRDonationStatus, @@ -95,6 +89,12 @@ export const QRDonationCard: FC = ({ draftDonationData, draftDonationLoading, } = useDonateData(); + const { + createDraftDonation, + markDraftDonationAsFailed, + checkDraftDonationStatus, + retrieveDraftDonation, + } = useQRCodeDonation(project); const { addresses, id } = project; const draftDonationId = Number(router.query.draft_donation!); diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx index 47f47ca972..7e9975915b 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx @@ -28,7 +28,6 @@ import { useQRCodeDonation } from '@/hooks/useQRCodeDonation'; const QRDonationDetails = () => { const { formatMessage } = useIntl(); const router = useRouter(); - const { checkDraftDonationStatus } = useQRCodeDonation(); const { project, draftDonationData, @@ -38,8 +37,10 @@ const QRDonationDetails = () => { setQRDonationStatus, setDraftDonationData, } = useDonateData(); + const { checkDraftDonationStatus } = useQRCodeDonation(project); const [tokenPrice, setTokenPrice] = useState(0); + const [stopTimer, setStopTimer] = React.useState void)>(); const { title, addresses } = project; @@ -71,13 +72,12 @@ const QRDonationDetails = () => { }; useEffect(() => { - let stopTimer: void | (() => void); - if ( draftDonationData?.id === draftDonationId && draftDonationData?.expiresAt ) { - stopTimer = startTimer?.(new Date(draftDonationData?.expiresAt)); + const stopTimerFun = startTimer?.(new Date(draftDonationData?.expiresAt)); + setStopTimer(() => stopTimerFun); } return () => { @@ -85,6 +85,12 @@ const QRDonationDetails = () => { }; }, [draftDonationData?.expiresAt]); + useEffect(() => { + if (qrDonationStatus === 'failed') { + stopTimer?.(); + } + }, [qrDonationStatus]); + useEffect(() => { if (!stellarAddress) return; diff --git a/src/components/views/transaction/DonationStatusSection.tsx b/src/components/views/transaction/DonationStatusSection.tsx index 2474e53890..1db5868096 100644 --- a/src/components/views/transaction/DonationStatusSection.tsx +++ b/src/components/views/transaction/DonationStatusSection.tsx @@ -26,6 +26,7 @@ import links from '@/lib/constants/links'; import { useQRCodeDonation } from '@/hooks/useQRCodeDonation'; import { client } from '@/apollo/apolloClient'; import { MARK_DRAFT_DONATION_AS_FAILED } from '@/apollo/gql/gqlDonations'; +import { useDonateData } from '@/context/donate.context'; type IColor = 'golden' | 'jade' | 'punch' | 'blueSky'; interface TimerProps { @@ -210,7 +211,8 @@ const DonationStatusSection: FC = ({ setStatus, }) => { const { locale, formatMessage } = useIntl(); - const { checkDraftDonationStatus } = useQRCodeDonation(); + const { project } = useDonateData(); + const { checkDraftDonationStatus } = useQRCodeDonation(project); return ( diff --git a/src/context/donate.context.tsx b/src/context/donate.context.tsx index dd75eceebb..21bbd7cb5c 100644 --- a/src/context/donate.context.tsx +++ b/src/context/donate.context.tsx @@ -135,7 +135,7 @@ export const DonateProvider: FC = ({ children, project }) => { setStatus, loading, setDraftDonation, - } = useQRCodeDonation(); + } = useQRCodeDonation(project); const hasActiveQFRound = hasActiveRound(project?.qfRounds); diff --git a/src/hooks/useQRCodeDonation.ts b/src/hooks/useQRCodeDonation.ts index c254b2c54a..79f1b181a9 100644 --- a/src/hooks/useQRCodeDonation.ts +++ b/src/hooks/useQRCodeDonation.ts @@ -11,12 +11,11 @@ import { import { ICreateDraftDonation } from '@/components/views/donate/helpers'; import StorageLabel from '@/lib/localStorage'; import { IDraftDonation } from '@/apollo/types/gqlTypes'; -import { useDonateData } from '@/context/donate.context'; +import { IProject } from '@/apollo/types/types'; export type TQRStatus = 'waiting' | 'failed' | 'success' | 'expired'; -export const useQRCodeDonation = () => { - const { project } = useDonateData(); +export const useQRCodeDonation = (project: IProject) => { const [draftDonation, setDraftDonation] = useState( null, @@ -187,7 +186,6 @@ export const useQRCodeDonation = () => { }); if ( - !draftDonationId || !getDraftDonationById || getDraftDonationById.status !== 'pending' || getDraftDonationById.projectId != project.id @@ -260,8 +258,8 @@ export const useQRCodeDonation = () => { Number(draftDonation.id), ); if (retDraftDonation?.status === 'matched') { + setDraftDonation(retDraftDonation); setStatus('success'); - setDraftDonation(draftDonation); return; } else { await markDraftDonationAsFailed(draftDonation?.id!); From 5353be6edb0f6f49e73849678caff27c21163c65 Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Mon, 2 Sep 2024 22:19:38 +0100 Subject: [PATCH 5/6] fix: eslint errors --- src/components/views/donate/DonateIndex.tsx | 3 ++- .../SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx | 4 +++- src/hooks/useQRCodeDonation.ts | 1 - 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/views/donate/DonateIndex.tsx b/src/components/views/donate/DonateIndex.tsx index 337c16b8bd..130effa745 100644 --- a/src/components/views/donate/DonateIndex.tsx +++ b/src/components/views/donate/DonateIndex.tsx @@ -61,7 +61,8 @@ const DonateIndex: FC = () => { setPendingDonationExists, startTimer, } = useDonateData(); - const { renewExpirationDate, retrieveDraftDonation } = useQRCodeDonation(project); + const { renewExpirationDate, retrieveDraftDonation } = + useQRCodeDonation(project); const { isSignedIn, isEnabled } = useAppSelector(state => state.user); const alreadyDonated = useAlreadyDonatedToProject(project); diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx index 7e9975915b..940ff2ff48 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx @@ -76,7 +76,9 @@ const QRDonationDetails = () => { draftDonationData?.id === draftDonationId && draftDonationData?.expiresAt ) { - const stopTimerFun = startTimer?.(new Date(draftDonationData?.expiresAt)); + const stopTimerFun = startTimer?.( + new Date(draftDonationData?.expiresAt), + ); setStopTimer(() => stopTimerFun); } diff --git a/src/hooks/useQRCodeDonation.ts b/src/hooks/useQRCodeDonation.ts index 79f1b181a9..dfbef2c4a0 100644 --- a/src/hooks/useQRCodeDonation.ts +++ b/src/hooks/useQRCodeDonation.ts @@ -16,7 +16,6 @@ import { IProject } from '@/apollo/types/types'; export type TQRStatus = 'waiting' | 'failed' | 'success' | 'expired'; export const useQRCodeDonation = (project: IProject) => { - const [draftDonation, setDraftDonation] = useState( null, ); From 87fdcace16ca85d1b5f7ec5857b4d560055ce69c Mon Sep 17 00:00:00 2001 From: Meriem-BM Date: Mon, 2 Sep 2024 23:04:18 +0100 Subject: [PATCH 6/6] fix: case when owner donate to his own peoject (Stellar chain) --- lang/ca.json | 1 + lang/en.json | 1 + lang/es.json | 1 + src/components/views/donate/DonationInfo.tsx | 2 +- .../QRCodeDonation/QRDonationCard.tsx | 39 ++++++++++++------- src/hooks/useQRCodeDonation.ts | 3 +- 6 files changed, 30 insertions(+), 17 deletions(-) diff --git a/lang/ca.json b/lang/ca.json index 19f8f0fc34..1646ce8c03 100644 --- a/lang/ca.json +++ b/lang/ca.json @@ -1237,6 +1237,7 @@ "page.project.donate_with_stellar": "Dona amb Stellar", "label.try_donating_wuth_stellar": "Prova de donar amb Stellar.", "label.check_donations": "Comprova les donacions", + "label.check_donation": "Comprova la donació", "error.enter_amount": "La quantitat ha de ser superior a 0", "label.enter_the_memo": "Introdueix el memo", "label.be_carefull_some_exchanges": "Ves amb compte! Alguns intercanvis i carteres requereixen Memo per finançar el teu compte. Assegura't d'introduir-ho al formulari si la teva cartera admet un memo.", diff --git a/lang/en.json b/lang/en.json index 9a848a7915..a96ae5700e 100644 --- a/lang/en.json +++ b/lang/en.json @@ -1241,6 +1241,7 @@ "page.project.donate_with_stellar": "Donate with Stellar", "label.try_donating_wuth_stellar": "Try donating with Stellar.", "label.check_donations": "View Donation Receipt", + "label.check_donation": "View Donation", "error.enter_amount": "Amount must be greater than 0", "label.enter_the_memo": "Enter the Memo", "label.be_carefull_some_exchanges": "Be careful! Some exchanges and wallets requires Memo to fund your account. Make sure to put it in the form if your wallet supports a memo.", diff --git a/lang/es.json b/lang/es.json index a7aad62c56..640810f483 100644 --- a/lang/es.json +++ b/lang/es.json @@ -1237,6 +1237,7 @@ "page.project.donate_with_stellar": "Dona con Stellar", "label.try_donating_wuth_stellar": "Intenta donar con Stellar.", "label.check_donations": "Verificar donaciones", + "label.check_donation": "Verificar donación", "error.enter_amount": "La cantidad debe ser mayor que 0", "label.enter_the_memo": "Introduce el memo", "label.be_carefull_some_exchanges": "¡Ten cuidado! Algunos intercambios y billeteras requieren Memo para financiar tu cuenta. Asegúrate de ingresarlo en el formulario si tu billetera admite un memo.", diff --git a/src/components/views/donate/DonationInfo.tsx b/src/components/views/donate/DonationInfo.tsx index 47f9c7bf30..a66c986fda 100644 --- a/src/components/views/donate/DonationInfo.tsx +++ b/src/components/views/donate/DonationInfo.tsx @@ -78,7 +78,7 @@ export const DonationInfo = () => { ) } > - {formatMessage({ id: 'label.check_donations' })}{' '} + {formatMessage({ id: 'label.check_donation' })}{' '} diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index 633b491d48..bdca282e77 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -24,7 +24,11 @@ import { IProjectAcceptedToken } from '@/apollo/types/gqlTypes'; import { fetchPriceWithCoingeckoId } from '@/services/token'; import { ChainType } from '@/types/config'; import config from '@/configuration'; -import { truncateToDecimalPlaces, formatBalance } from '@/lib/helpers'; +import { + truncateToDecimalPlaces, + formatBalance, + showToastError, +} from '@/lib/helpers'; import { IDonationCardProps } from '../../../DonationCard'; import QRDonationCardContent from './QRDonationCardContent'; import { useQRCodeDonation } from '@/hooks/useQRCodeDonation'; @@ -188,20 +192,25 @@ export const QRDonationCard: FC = ({ } else { if (!stellarToken?.symbol || !projectAddress?.address) return; - const payload = { - walletAddress: projectAddress.address, - projectId: Number(id), - amount: Number(formatAmountToDisplay(amount)), - token: stellarToken, - anonymous: isSignedIn && isEnabled ? false : true, - symbol: stellarToken.symbol, - setFailedModalType: () => {}, - useDonationBox: false, - chainId: stellarToken?.networkId, - memo: projectAddress.memo, - }; - - draftDonationId = await createDraftDonation(payload); + try { + const payload = { + walletAddress: projectAddress.address, + projectId: Number(id), + amount: Number(formatAmountToDisplay(amount)), + token: stellarToken, + anonymous: isSignedIn && isEnabled ? false : true, + symbol: stellarToken.symbol, + setFailedModalType: () => {}, + useDonationBox: false, + chainId: stellarToken?.networkId, + memo: projectAddress.memo, + }; + + draftDonationId = await createDraftDonation(payload); + } catch (error) { + showToastError(error); + return; + } setPendingDonationExists?.(false); } diff --git a/src/hooks/useQRCodeDonation.ts b/src/hooks/useQRCodeDonation.ts index dfbef2c4a0..2e0c30f024 100644 --- a/src/hooks/useQRCodeDonation.ts +++ b/src/hooks/useQRCodeDonation.ts @@ -110,7 +110,8 @@ export const useQRCodeDonation = (project: IProject) => { } return createDraftDonation; } catch (error: any) { - console.error('Error creating draft donation', error); + console.error('Error creating draft donation', error.message); + throw error.message; } };