Add select token modal

src/apollo/types/gqlTypes.ts

@@ -87,12 +87,12 @@ export interface IMeGQL {
 
 export interface IProjectAcceptedToken {
 	id?: string;
+	name: string;
 	symbol: string;
+	decimals: number;
 	networkId: number;
 	address: Address;
 	mainnetAddress?: Address;
-	name: string;
-	decimals: number;
 	isGivbackEligible?: boolean;
 	order: number;
 	chainType?: ChainType;

src/components/AmountInput/AmountInput.tsx

@@ -47,6 +47,8 @@ export const AmountInput: FC<IAmountInput> = ({
 	const [displayAmount, setDisplayAmount] = useState('');
 
 	useEffect(() => {
+		//prevent changing 0.000 to 0
+		if (amount === 0n) return;
 		const _displayAmount = truncateToDecimalPlaces(
 			formatUnits(amount, decimals),
 			decimals / 3,
@@ -74,6 +76,16 @@ export const AmountInput: FC<IAmountInput> = ({
 			setDisplayAmount(value);
 			setActiveStep(0);
 
+			try {
+				if (parseFloat(value) === 0 && !value.includes('.')) {
+					setAmount(0n);
+					setDisplayAmount('0');
+					return;
+				}
+			} catch (error) {
+				console.error('Failed to parse input amount:', error);
+			}
+
 			try {
 				let valueBn = parseUnits(value, decimals);
 				setAmount(valueBn);

src/components/modals/Modal.tsx

@@ -37,6 +37,7 @@ interface IModal {
 	children: ReactNode;
 	doNotCloseOnClickOutside?: boolean;
 	className?: string;
+	footer?: ReactNode;
 }
 
 export const Modal: FC<IModal> = ({
@@ -53,6 +54,7 @@ export const Modal: FC<IModal> = ({
 	fullScreen = false,
 	headerColor,
 	doNotCloseOnClickOutside,
+	footer,
 	className,
 }) => {
 	const theme = useAppSelector(state => state.general.theme);
@@ -118,6 +120,7 @@ export const Modal: FC<IModal> = ({
 				>
 					{children}
 				</Scrollbars>
+				{footer && <div>{footer}</div>}
 			</ModalWrapper>
 		</Background>,
 		el.current,

src/components/modals/deactivateProject/WhyContent.tsx

@@ -29,7 +29,6 @@ const WhyContent = ({
 			styles={selectCustomStyles}
 			value={selectedOption}
 			onChange={e => handleSelect(e)}
-			isMobile={false}
 		/>
 		<AnimatePresence>
 			{String(selectedOption?.value) === '5' && (

src/components/views/create/AlloProtocol/AlloProtocolModal.tsx

@@ -21,7 +21,7 @@ import { slugToSuccessView, slugToProjectView } from '@/lib/routeCreators';
 import { EProjectStatus } from '@/apollo/types/gqlEnums';
 import { CREATE_ANCHOR_CONTRACT_ADDRESS_QUERY } from '@/apollo/gql/gqlSuperfluid';
 import { client } from '@/apollo/apolloClient';
-import { extractContractAddressFromString } from '../../donate/AlloProtocolFirstDonationModal';
+import { extractContractAddressFromString } from '../../donate/Recurring/AlloProtocolFirstDonationModal';
 import { wagmiConfig } from '@/wagmiConfigs';
 import createProfileABI from '@/artifacts/createProfile.json';
 import { generateRandomNonce } from '@/lib/helpers';

src/components/views/donate/DonateIndex.tsx

@@ -15,7 +15,6 @@ import { useRouter } from 'next/router';
 import { useAccount } from 'wagmi';
 import SocialBox from '../../DonateSocialBox';
 import NiceBanner from './NiceBanner';
-// import PurchaseXDAI from './PurchaseXDAIBanner';
 import useDetectDevice from '@/hooks/useDetectDevice';
 import { useIsSafeEnvironment } from '@/hooks/useSafeAutoConnect';
 import { useDonateData } from '@/context/donate.context';
@@ -68,8 +67,7 @@ const DonateIndex: FC = () => {
 		<>
 			<DonateHeader />
 			<DonateContainer>
-				{/* <PurchaseXDAI /> */}
-				{alreadyDonated && !isRecurringTab && (
+				{alreadyDonated && (
 					<AlreadyDonatedWrapper>
 						<IconDonation24 />
 						<SublineBold>

src/components/views/donate/DonationCard.tsx

@@ -5,8 +5,8 @@ import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import { isAddress } from 'viem';
 import { Shadow } from '@/components/styled-components/Shadow';
-import { RecurringDonationCard } from './RecurringDonationCard';
-import CryptoDonation from './CryptoDonation';
+import { RecurringDonationCard } from './Recurring/RecurringDonationCard';
+import OneTimeDonationCard from './OnTime/OneTimeDonationCard';
 import config from '@/configuration';
 import { useDonateData } from '@/context/donate.context';
 import { ChainType } from '@/types/config';
@@ -103,7 +103,7 @@ export const DonationCard = () => {
 				<EmptyTab />
 			</Flex>
 			<TabWrapper>
-				{tab === ETabs.ONE_TIME && <CryptoDonation />}
+				{tab === ETabs.ONE_TIME && <OneTimeDonationCard />}
 				{tab === ETabs.RECURRING && <RecurringDonationCard />}
 			</TabWrapper>
 		</DonationCardWrapper>

src/components/views/donate/DonateModal.tsx → src/components/views/donate/OnTime/DonateModal.tsx

@@ -42,7 +42,7 @@ import { FETCH_GIVETH_PROJECT_BY_ID } from '@/apollo/gql/gqlProjects';
 
 interface IDonateModalProps extends IModal {
 	token: IProjectAcceptedToken;
-	amount: number;
+	amount: bigint;
 	donationToGiveth: number;
 	tokenPrice?: number;
 	anonymous?: boolean;

src/components/views/donate/EstimatedMatchingToast.tsx → src/components/views/donate/OnTime/EstimatedMatchingToast.tsx

@@ -11,6 +11,7 @@ import {
 } from '@giveth/ui-design-system';
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { formatUnits } from 'viem';
 import Divider from '@/components/Divider';
 import { TooltipContent } from '@/components/modals/HarvestAll.sc';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
@@ -22,18 +23,18 @@ import {
 import { IProjectAcceptedToken } from '@/apollo/types/gqlTypes';
 import { useTokenPrice } from '@/hooks/useTokenPrice';
 import { formatDonation } from '@/helpers/number';
-import { formatBalance } from '@/lib/helpers';
+import { formatBalance, truncateToDecimalPlaces } from '@/lib/helpers';
 
 interface IEstimatedMatchingToast {
 	projectData: IProject;
+	amount: bigint;
 	token?: IProjectAcceptedToken;
-	amountTyped?: number;
 }
 
 const EstimatedMatchingToast: React.FC<IEstimatedMatchingToast> = ({
 	projectData,
 	token,
-	amountTyped,
+	amount,
 }) => {
 	const { formatMessage, locale } = useIntl();
 	const { estimatedMatching, qfRounds } = projectData || {};
@@ -51,7 +52,11 @@ const EstimatedMatchingToast: React.FC<IEstimatedMatchingToast> = ({
 		maximumReward,
 	} = activeStartedRound || {};
 
-	const amountInUsd = (tokenPrice || 0) * (amountTyped || 0);
+	const decimals = token?.decimals || 18;
+
+	const amountInUsd =
+		(tokenPrice || 0) *
+		(truncateToDecimalPlaces(formatUnits(amount, decimals), decimals) || 0);
 
 	const esMatching = calculateEstimatedMatchingWithDonationAmount(
 		amountInUsd,