From 5cc2770b105465fbefaf4eca900ed2af0e227958 Mon Sep 17 00:00:00 2001 From: Ramin Date: Wed, 18 Sep 2024 14:11:12 +0330 Subject: [PATCH 01/71] add givbacks and qf badges to stellar --- lang/ca.json | 1 + lang/en.json | 1 + lang/es.json | 1 + src/components/RewardCard.tsx | 2 +- src/components/modals/DonateWrongNetwork.tsx | 2 +- src/components/modals/SwitchNetwork.tsx | 2 +- .../modals/WrongNetworkInnerModal.tsx | 2 +- src/components/views/donate/DonateIndex.tsx | 2 +- src/components/views/donate/DonationCard.tsx | 4 +- .../{OnTime => OneTime}/DonateModal.tsx | 2 +- .../DonateQFEligibleNetworks.tsx | 0 .../EstimatedMatchingToast.tsx | 0 .../OneTimeDonationCard.tsx | 107 ++---------------- .../donate/{OnTime => OneTime}/QFModal.tsx | 0 .../{OnTime => OneTime}/SaveGasFees.tsx | 4 +- .../QRCodeDonation/CopyConatainer.tsx | 0 .../QRCodeDonation/QRDonationCard.tsx | 61 +++++++--- .../QRCodeDonation/QRDonationCardContent.tsx | 0 .../QRCodeDonation/QRDonationDetails.tsx | 0 .../SelectTokenModal/SelectTokenModal.tsx | 0 .../SelectTokenModal/TokenInfo.tsx | 0 .../SelectTokenModal/getBalanceForToken.tsx | 0 .../{OnTime => OneTime}/TotalDonation.tsx | 2 +- .../Recurring/RecurringDonationCard.tsx | 2 +- .../views/donate/SwitchToAcceptedChain.tsx | 6 +- src/components/views/donate/common.styled.ts | 29 ----- .../views/donate/common/EligibilityBadges.tsx | 97 ++++++++++++++++ .../views/donate/common/common.styled.ts | 59 ++++++++++ .../donate/{ => common}/common.types.tsx | 0 .../views/donate/{ => common}/helpers.tsx | 0 .../transaction/DonationStatusSection.tsx | 2 +- .../views/transaction/QRDetailsSection.tsx | 2 +- src/context/donate.context.tsx | 9 +- src/hooks/useCreateEvmDonation.tsx | 2 +- src/hooks/useCreateSolanaDonation.tsx | 2 +- src/hooks/useQRCodeDonation.ts | 2 +- src/services/donation.ts | 2 +- 37 files changed, 241 insertions(+), 166 deletions(-) rename src/components/views/donate/{OnTime => OneTime}/DonateModal.tsx (99%) rename src/components/views/donate/{OnTime => OneTime}/DonateQFEligibleNetworks.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/EstimatedMatchingToast.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/OneTimeDonationCard.tsx (86%) rename src/components/views/donate/{OnTime => OneTime}/QFModal.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/SaveGasFees.tsx (90%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/QRCodeDonation/CopyConatainer.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx (91%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/QRCodeDonation/QRDonationCardContent.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/SelectTokenModal.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/TokenInfo.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/SelectTokenModal/getBalanceForToken.tsx (100%) rename src/components/views/donate/{OnTime => OneTime}/TotalDonation.tsx (96%) delete mode 100644 src/components/views/donate/common.styled.ts create mode 100644 src/components/views/donate/common/EligibilityBadges.tsx create mode 100644 src/components/views/donate/common/common.styled.ts rename src/components/views/donate/{ => common}/common.types.tsx (100%) rename src/components/views/donate/{ => common}/helpers.tsx (100%) diff --git a/lang/ca.json b/lang/ca.json index 7063a4dd13..4a6de13773 100644 --- a/lang/ca.json +++ b/lang/ca.json @@ -728,6 +728,7 @@ "label.photo_by": "Foto per", "label.please_confirm_your_email": "Si us plau, confirma el teu correu electrònic", "label.please_connect_your_wallet": "Si us plau, connecta la teva cartera", + "label.please_connect_your_wallet_to_get_matched": "Connecta la teva cartera per igualar la teva donació.", "label.please_contact_support_team": "Si us plau, contacteu l'equip de suport.", "label.please_do_not_enter_exchange_deposit": "Si us plau, NO introduïu una adreça de dipòsit d'intercanvi, o els vostres fons podrien perdre's! Utilitzeu un compte que controleu en aquesta xarxa. Recomanem utilitzar Metamask.", "label.please_enter_full_link": "Introdueix el vincle complet", diff --git a/lang/en.json b/lang/en.json index 8b2ecee34c..e90352331c 100644 --- a/lang/en.json +++ b/lang/en.json @@ -730,6 +730,7 @@ "label.photo_by": "Photo by", "label.please_confirm_your_email": "Please confirm your email", "label.please_connect_your_wallet": "Please connect your wallet", + "label.please_connect_your_wallet_to_get_matched": "Connect your wallet to get your donation matched.", "label.please_contact_support_team": "Please contact support team.", "label.please_do_not_enter_exchange_deposit": "Please DO NOT enter an exchange deposit address, or your funds maybe lost! Use an account you control on this network. We recommend using Metamask.", "label.please_enter_full_link": "Please enter full link", diff --git a/lang/es.json b/lang/es.json index 029ab115e3..2d83497080 100644 --- a/lang/es.json +++ b/lang/es.json @@ -727,6 +727,7 @@ "label.photo_by": "Foto por", "label.please_confirm_your_email": "Por favor confirma tu e-mail", "label.please_connect_your_wallet": "Por favor conecta tu billetera", + "label.please_connect_your_wallet_to_get_matched": "Conecta tu billetera para igualar tu donación.", "label.please_contact_support_team": "Por favor contacta al equipo de soporte.", "label.please_do_not_enter_exchange_deposit": "¡Por favor, NO introduzcas una dirección de depósito de intercambio, o podrías perder tus fondos! Usa una cuenta que controles en esta red. Recomendamos usar Metamask.", "label.please_enter_full_link": "Por favor, introduzca el enlace completo", diff --git a/src/components/RewardCard.tsx b/src/components/RewardCard.tsx index 1d81596c37..45f7a228af 100644 --- a/src/components/RewardCard.tsx +++ b/src/components/RewardCard.tsx @@ -21,7 +21,7 @@ import useGIVTokenDistroHelper from '@/hooks/useGIVTokenDistroHelper'; import NetworkLogo from './NetworkLogo'; import { ScaleRate, ScaleRateBig } from '@/lib/constants/constants'; import { getChainName } from '@/lib/network'; -import { INetworkIdWithChain } from './views/donate/common.types'; +import { INetworkIdWithChain } from './views/donate/common/common.types'; import { ChainType } from '@/types/config'; import { EVMWrongNetworkSwitchModal } from './modals/WrongNetworkInnerModal'; import { useFetchGIVPrice } from '@/hooks/useGivPrice'; diff --git a/src/components/modals/DonateWrongNetwork.tsx b/src/components/modals/DonateWrongNetwork.tsx index d06945db60..bd6ce67588 100644 --- a/src/components/modals/DonateWrongNetwork.tsx +++ b/src/components/modals/DonateWrongNetwork.tsx @@ -21,7 +21,7 @@ import { mediaQueries } from '@/lib/constants/constants'; import { Modal } from './Modal'; import { IModal } from '@/types/common'; import { useModalAnimation } from '@/hooks/useModalAnimation'; -import { INetworkIdWithChain } from '@/components/views/donate/common.types'; +import { INetworkIdWithChain } from '@/components/views/donate/common/common.types'; import config from '@/configuration'; import NetworkLogo from '../NetworkLogo'; import { NetworkItem, SelectedNetwork } from './SwitchNetwork'; diff --git a/src/components/modals/SwitchNetwork.tsx b/src/components/modals/SwitchNetwork.tsx index 618ece34e5..889a38cada 100644 --- a/src/components/modals/SwitchNetwork.tsx +++ b/src/components/modals/SwitchNetwork.tsx @@ -19,7 +19,7 @@ import { useAppSelector } from '@/features/hooks'; import config from '@/configuration'; import { ETheme } from '@/features/general/general.slice'; import { getChainName } from '@/lib/network'; -import { INetworkIdWithChain } from '../views/donate/common.types'; +import { INetworkIdWithChain } from '../views/donate/common/common.types'; import { useGeneralWallet } from '@/providers/generalWalletProvider'; import { ChainType } from '@/types/config'; diff --git a/src/components/modals/WrongNetworkInnerModal.tsx b/src/components/modals/WrongNetworkInnerModal.tsx index 6f8d78cc50..19908c94a6 100644 --- a/src/components/modals/WrongNetworkInnerModal.tsx +++ b/src/components/modals/WrongNetworkInnerModal.tsx @@ -7,7 +7,7 @@ import { mediaQueries } from '@/lib/constants/constants'; import { jointItems } from '@/helpers/text'; import SwitchNetwork from './SwitchNetwork'; import { getChainName } from '@/lib/network'; -import { INetworkIdWithChain } from '../views/donate/common.types'; +import { INetworkIdWithChain } from '../views/donate/common/common.types'; import { useGeneralWallet } from '@/providers/generalWalletProvider'; import { ChainType } from '@/types/config'; diff --git a/src/components/views/donate/DonateIndex.tsx b/src/components/views/donate/DonateIndex.tsx index 4778ab26d6..b4f8904b80 100644 --- a/src/components/views/donate/DonateIndex.tsx +++ b/src/components/views/donate/DonateIndex.tsx @@ -34,7 +34,7 @@ import ProjectCardImage from '@/components/project-card/ProjectCardImage'; import { useGeneralWallet } from '@/providers/generalWalletProvider'; import { DonatePageProjectDescription } from './DonatePageProjectDescription'; import { getActiveRound } from '@/helpers/qf'; -import QRDonationDetails from './OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails'; +import QRDonationDetails from '@/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationDetails'; import InlineToast, { EToastType } from '@/components/toasts/InlineToast'; import { client } from '@/apollo/apolloClient'; import { FETCH_DONATION_BY_ID } from '@/apollo/gql/gqlDonations'; diff --git a/src/components/views/donate/DonationCard.tsx b/src/components/views/donate/DonationCard.tsx index 0948f30b4a..331258205f 100644 --- a/src/components/views/donate/DonationCard.tsx +++ b/src/components/views/donate/DonationCard.tsx @@ -15,12 +15,12 @@ import { captureException } from '@sentry/nextjs'; import Image from 'next/image'; import { Shadow } from '@/components/styled-components/Shadow'; import { RecurringDonationCard } from './Recurring/RecurringDonationCard'; -import OneTimeDonationCard from './OnTime/OneTimeDonationCard'; +import OneTimeDonationCard from '@/components/views/donate/OneTime/OneTimeDonationCard'; import config from '@/configuration'; import { useDonateData } from '@/context/donate.context'; import { ChainType } from '@/types/config'; import { IconWithTooltip } from '@/components/IconWithToolTip'; -import { QRDonationCard } from './OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard'; +import { QRDonationCard } from '@/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard'; import { client } from '@/apollo/apolloClient'; import { PROJECT_ACCEPTED_TOKENS } from '@/apollo/gql/gqlProjects'; import { showToastError } from '@/lib/helpers'; diff --git a/src/components/views/donate/OnTime/DonateModal.tsx b/src/components/views/donate/OneTime/DonateModal.tsx similarity index 99% rename from src/components/views/donate/OnTime/DonateModal.tsx rename to src/components/views/donate/OneTime/DonateModal.tsx index fd9b8b3654..e491917bdd 100644 --- a/src/components/views/donate/OnTime/DonateModal.tsx +++ b/src/components/views/donate/OneTime/DonateModal.tsx @@ -36,7 +36,7 @@ import { ChainType } from '@/types/config'; import { IProject, IWalletAddress } from '@/apollo/types/types'; import { useCreateSolanaDonation } from '@/hooks/useCreateSolanaDonation'; import { useTokenPrice } from '@/hooks/useTokenPrice'; -import { calcDonationShare } from '@/components/views/donate/helpers'; +import { calcDonationShare } from '@/components/views/donate/common/helpers'; import { Spinner } from '@/components/Spinner'; import { FETCH_GIVETH_PROJECT_BY_ID } from '@/apollo/gql/gqlProjects'; import createGoogleTagEventPurchase from '@/helpers/googleAnalytics'; diff --git a/src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx b/src/components/views/donate/OneTime/DonateQFEligibleNetworks.tsx similarity index 100% rename from src/components/views/donate/OnTime/DonateQFEligibleNetworks.tsx rename to src/components/views/donate/OneTime/DonateQFEligibleNetworks.tsx diff --git a/src/components/views/donate/OnTime/EstimatedMatchingToast.tsx b/src/components/views/donate/OneTime/EstimatedMatchingToast.tsx similarity index 100% rename from src/components/views/donate/OnTime/EstimatedMatchingToast.tsx rename to src/components/views/donate/OneTime/EstimatedMatchingToast.tsx diff --git a/src/components/views/donate/OnTime/OneTimeDonationCard.tsx b/src/components/views/donate/OneTime/OneTimeDonationCard.tsx similarity index 86% rename from src/components/views/donate/OnTime/OneTimeDonationCard.tsx rename to src/components/views/donate/OneTime/OneTimeDonationCard.tsx index 0f8bb1443e..a0164cf7fb 100644 --- a/src/components/views/donate/OnTime/OneTimeDonationCard.tsx +++ b/src/components/views/donate/OneTime/OneTimeDonationCard.tsx @@ -6,20 +6,15 @@ import { brandColors, Button, Flex, - FlexCenter, IconCaretDown16, - IconGIVBack24, - IconQFNew, IconRefresh16, IconWalletOutline24, - mediaQueries, neutralColors, semanticColors, } from '@giveth/ui-design-system'; // @ts-ignore import { Address, Chain, formatUnits, zeroAddress } from 'viem'; import { useBalance, useEstimateFeesPerGas, useEstimateGas } from 'wagmi'; -import { ethers } from 'ethers'; import { setShowWelcomeModal } from '@/features/modal/modal.slice'; import CheckBox from '@/components/Checkbox'; @@ -33,7 +28,7 @@ import { IProjectAcceptedToken } from '@/apollo/types/gqlTypes'; import { calcDonationShare, prepareTokenList, -} from '@/components/views/donate/helpers'; +} from '@/components/views/donate/common/helpers'; import GIVBackToast from '@/components/views/donate/GIVBackToast'; import { DonateWrongNetwork } from '@/components/modals/DonateWrongNetwork'; import { useAppDispatch, useAppSelector } from '@/features/hooks'; @@ -46,10 +41,10 @@ import DonateQFEligibleNetworks from './DonateQFEligibleNetworks'; import { getActiveRound } from '@/helpers/qf'; import { useGeneralWallet } from '@/providers/generalWalletProvider'; import { ChainType } from '@/types/config'; -import { INetworkIdWithChain } from '../common.types'; +import { INetworkIdWithChain } from '../common/common.types'; import DonateModal from './DonateModal'; import QFModal from './QFModal'; -import EstimatedMatchingToast from '@/components/views/donate/OnTime/EstimatedMatchingToast'; +import EstimatedMatchingToast from '@/components/views/donate/OneTime/EstimatedMatchingToast'; import TotalDonation from './TotalDonation'; import { GLinkStyled, @@ -66,7 +61,8 @@ import { useSolanaBalance } from '@/hooks/useSolanaBalance'; import { isWalletSanctioned } from '@/services/donation'; import SanctionModal from '@/components/modals/SanctionedModal'; import { useTokenPrice } from '@/hooks/useTokenPrice'; -import { GIVBACKS_DONATION_QUALIFICATION_VALUE_USD } from '@/lib/constants/constants'; +import { BadgesBase } from '@/components/views/donate/common/common.styled'; +import EligibilityBadges from '@/components/views/donate/common/EligibilityBadges'; const CryptoDonation: FC<{ acceptedTokens: IProjectAcceptedToken[] | undefined; @@ -353,19 +349,8 @@ const CryptoDonation: FC<{ selectedOneTimeToken?.decimals ?? 18, ); - const donationUsdValue = - (tokenPrice || 0) * Number(ethers.utils.formatEther(amount)); - - const isDonationMatched = - !!activeStartedRound && - donationUsdValue >= (activeStartedRound?.minimumValidUsdValue || 0); - const isTokenGivbacksEligible = selectedOneTimeToken?.isGivbackEligible; const isProjectGivbacksEligible = !!verified; - const isGivbacksEligible = - isTokenGivbacksEligible && - isProjectGivbacksEligible && - donationUsdValue >= GIVBACKS_DONATION_QUALIFICATION_VALUE_USD; return ( @@ -426,50 +411,12 @@ const CryptoDonation: FC<{ })} )} - {isConnected && ( - - {activeStartedRound && isOnQFEligibleNetworks && ( - - - {formatMessage( - { - id: isDonationMatched - ? 'page.donate.donations_will_be_matched' - : 'page.donate.donate_$_to_get_matched', - }, - { - value: activeStartedRound?.minimumValidUsdValue, - }, - )} - - )} - - - {formatMessage( - { - id: isGivbacksEligible - ? 'page.donate.givbacks_eligible' - : !isProjectGivbacksEligible - ? 'page.donate.project_not_givbacks_eligible' - : selectedOneTimeToken && - !isTokenGivbacksEligible - ? 'page.donate.token_not_givbacks_eligible' - : 'page.donate.donate_$_to_be_eligible', - }, - { - value: GIVBACKS_DONATION_QUALIFICATION_VALUE_USD, - token: selectedOneTimeToken?.symbol, - }, - )} - - - )} + ` - gap: 8px; - font-size: 12px; - font-weight: 500; - background: ${neutralColors.gray[200]}; - color: ${props => - props.active ? semanticColors.jade[500] : neutralColors.gray[700]}; - border-radius: 8px; - border: 1px solid - ${props => - props.active ? semanticColors.jade[400] : neutralColors.gray[400]}; - padding: 4px; -`; - -const EligibilityBadgeWrapper = styled(Flex)` - margin: 12px 0 24px; - gap: 16px; - justify-content: center; - flex-direction: column; - > div { - height: 36px; - } - ${mediaQueries.tablet} { - flex-direction: row; - justify-content: flex-start; - } -`; - -const GivbacksEligibilityBadge = styled(BadgesBase)``; - -const QFEligibilityBadge = styled(BadgesBase)``; - const FlexStyled = styled(Flex)<{ disabled: boolean }>` ${props => props.disabled && diff --git a/src/components/views/donate/OnTime/QFModal.tsx b/src/components/views/donate/OneTime/QFModal.tsx similarity index 100% rename from src/components/views/donate/OnTime/QFModal.tsx rename to src/components/views/donate/OneTime/QFModal.tsx diff --git a/src/components/views/donate/OnTime/SaveGasFees.tsx b/src/components/views/donate/OneTime/SaveGasFees.tsx similarity index 90% rename from src/components/views/donate/OnTime/SaveGasFees.tsx rename to src/components/views/donate/OneTime/SaveGasFees.tsx index a3d8d32716..c38b393fc1 100644 --- a/src/components/views/donate/OnTime/SaveGasFees.tsx +++ b/src/components/views/donate/OneTime/SaveGasFees.tsx @@ -7,8 +7,8 @@ import config from '@/configuration'; import { NetworkToast, SwitchCaption, -} from '@/components/views/donate/common.styled'; -import { INetworkIdWithChain } from '../common.types'; // Import the type +} from '@/components/views/donate/common/common.styled'; +import { INetworkIdWithChain } from '../common/common.types'; // Import the type import SwitchNetwork from '@/components/modals/SwitchNetwork'; const SaveGasFees: FC<{ acceptedChains: INetworkIdWithChain[] }> = ({ diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/CopyConatainer.tsx b/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/CopyConatainer.tsx similarity index 100% rename from src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/CopyConatainer.tsx rename to src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/CopyConatainer.tsx diff --git a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx b/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx similarity index 91% rename from src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx rename to src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx index 47df7618d6..3848cfeaf3 100644 --- a/src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx +++ b/src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx @@ -1,15 +1,17 @@ import React, { FC, useEffect, useState } from 'react'; import { useRouter } from 'next/router'; -import Image from 'next/image'; import styled from 'styled-components'; import { B, P, - Button, Flex, neutralColors, IconArrowLeft, mediaQueries, + IconWalletOutline24, + OutlineButton, + IconArrowRight16, + Button, } from '@giveth/ui-design-system'; import { useIntl } from 'react-intl'; import { formatUnits } from 'viem'; @@ -39,7 +41,10 @@ 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'; +import DonateQFEligibleNetworks from '@/components/views/donate/OneTime/DonateQFEligibleNetworks'; +import { BadgesBase } from '@/components/views/donate/common/common.styled'; +import { useGeneralWallet } from '@/providers/generalWalletProvider'; +import EligibilityBadges from '@/components/views/donate/common/EligibilityBadges'; interface QRDonationCardProps extends IDonationCardProps { qrAcceptedTokens: IProjectAcceptedToken[]; @@ -68,6 +73,7 @@ export const QRDonationCard: FC = ({ const { modalCallback: signInThenDonate } = useModalCallback(() => setShowDonateModal(true), ); + const { isConnected } = useGeneralWallet(); const { project, @@ -291,6 +297,21 @@ export const QRDonationCard: FC = ({ })} /> )} + {!isConnected && hasActiveQFRound && ( + + + {formatMessage({ + id: 'label.please_connect_your_wallet_to_get_matched', + })} + + )} + {!showQRCode && !isSignedIn && stellarToken?.isGivbackEligible && ( = ({ {formatAmountToDisplay(amount)} -