Merge pull request #4098 from Giveth/hotfix-2.25.1

Hotfix 2.25.1

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "givethdapp",
-	"version": "2.25.0",
+	"version": "2.25.1",
 	"private": true,
 	"scripts": {
 		"build": "next build",

src/components/AmountInput/AmountInput.tsx

@@ -4,15 +4,24 @@ import {
 	brandColors,
 	Flex,
 } from '@giveth/ui-design-system';
-import { FC, useState, useCallback, Dispatch, SetStateAction } from 'react';
+import {
+	FC,
+	useState,
+	useCallback,
+	Dispatch,
+	SetStateAction,
+	useEffect,
+} from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { captureException } from '@sentry/nextjs';
-import BigNumber from 'bignumber.js';
+import { formatUnits, parseUnits } from 'viem';
 import { formatWeiHelper } from '@/helpers/number';
 import { BaseInput } from '../input/BaseInput';
+import { truncateToDecimalPlaces } from '@/lib/helpers';
 
 export interface IAmountInput {
+	amount: bigint;
 	setAmount: Dispatch<SetStateAction<bigint>>;
 	decimals?: number;
 	className?: string;
@@ -21,71 +30,54 @@ export interface IAmountInput {
 	showMax?: boolean;
 	balanceUnit?: string;
 	showPercentage?: boolean;
-	displayAmount?: string;
-	setDisplayAmount?: Dispatch<SetStateAction<string>>;
 }
 
 export const AmountInput: FC<IAmountInput> = ({
+	amount,
 	maxAmount,
 	setAmount,
 	className,
 	decimals = 18,
 	disabled = false,
 	showMax = false,
 	showPercentage = false,
-	displayAmount: externalDisplayAmount = undefined,
-	setDisplayAmount: externalSetDisplayAmount = undefined,
 }) => {
 	const { formatMessage } = useIntl();
-	const [internalDisplayAmount, internalSetDisplayAmount] = useState('');
 	const [activeStep, setActiveStep] = useState(0);
+	const [displayAmount, setDisplayAmount] = useState('');
 
-	// Determine which displayAmount and setDisplayAmount to use
-	const displayAmount =
-		externalDisplayAmount !== undefined
-			? externalDisplayAmount
-			: internalDisplayAmount;
-
-	const setDisplayAmount =
-		externalSetDisplayAmount !== undefined
-			? externalSetDisplayAmount
-			: internalSetDisplayAmount;
+	useEffect(() => {
+		if (!amount) return;
+		const _displayAmount = truncateToDecimalPlaces(
+			formatUnits(amount, decimals),
+			decimals / 3,
+		).toString();
+		setDisplayAmount(_displayAmount);
+	}, [amount, decimals]);
 
 	const setAmountPercentage = useCallback(
 		(percentage: number): void => {
 			if (!maxAmount) return;
-			const newAmount = new BigNumber(maxAmount.toString())
-				.multipliedBy(percentage)
-				.div(100)
-				.toFixed(0);
-			const _displayAmount = formatWeiHelper(newAmount, 6, false);
-			setDisplayAmount(_displayAmount);
-			setAmount(
+			const newAmount =
 				percentage === 100
 					? maxAmount
-					: BigInt(
-							new BigNumber(_displayAmount)
-								.multipliedBy(10 ** decimals)
-								.toFixed(0),
-						),
-			);
+					: (maxAmount * BigInt(percentage)) / 100n;
+
+			setAmount(newAmount);
 		},
-		[decimals, maxAmount, setAmount],
+		[maxAmount, setAmount],
 	);
 
 	const onUserInput = useCallback(
 		(value: string) => {
 			const [, _decimals] = value.split('.');
-			if (_decimals?.length > 6) {
-				return;
-			}
+			if (_decimals?.length > 6) return;
 			setDisplayAmount(value);
 			setActiveStep(0);
-			let valueBn = new BigNumber(0);
 
 			try {
-				valueBn = new BigNumber(value).multipliedBy(10 ** decimals);
-				setAmount(BigInt(valueBn.toFixed(0)));
+				let valueBn = parseUnits(value, decimals);
+				setAmount(valueBn);
 			} catch (error) {
 				setAmount(0n);
 				console.debug(

src/components/modals/StakeLock/Lock.tsx

@@ -135,6 +135,7 @@ const LockModal: FC<ILockModalProps> = ({
 								})}
 							</SectionTitle>
 							<StakingAmountInput
+								amount={amount}
 								setAmount={setAmount}
 								maxAmount={maxAmount}
 								poolStakingConfig={poolStakingConfig}

src/components/modals/StakeLock/Stake.tsx

@@ -204,6 +204,7 @@ const StakeInnerModal: FC<IStakeModalProps> = ({
 						<StakeInnerModalContainer>
 							<StakeSteps stakeState={stakeState} />
 							<StakingAmountInput
+								amount={amount}
 								setAmount={setAmount}
 								maxAmount={maxAmount}
 								poolStakingConfig={poolStakingConfig}

src/components/modals/StakeLock/StakeGIV.tsx

@@ -188,6 +188,7 @@ const StakeGIVInnerModal: FC<IStakeModalProps> = ({
 										})}
 									</SectionTitle>
 									<StakingAmountInput
+										amount={amount}
 										setAmount={setAmount}
 										maxAmount={maxAmount}
 										poolStakingConfig={poolStakingConfig}

src/components/modals/Unstake/UnStake.tsx

@@ -130,6 +130,7 @@ const UnStakeInnerModal: FC<IUnStakeModalProps> = ({
 
 						<InnerModal>
 							<StakingAmountInput
+								amount={amount}
 								setAmount={setAmount}
 								maxAmount={maxAmount}
 								poolStakingConfig={poolStakingConfig}

src/components/views/donate/ManageRecurringDonation.tsx

@@ -0,0 +1,46 @@
+import { H5, P, brandColors } from '@giveth/ui-design-system';
+import Link from 'next/link';
+import React from 'react';
+import styled from 'styled-components';
+import Routes from '@/lib/constants/Routes';
+import links from '@/lib/constants/links';
+
+export const ManageRecurringDonation = () => {
+	return (
+		<Box>
+			<Title weight={700}>Managing your recurring donations</Title>
+			<br />
+			<P>
+				You can modify or delete your recurring donation as well as
+				top-up funds to your stream balance from the 
+				<Link href={Routes.MyRecurringDonations}>
+					Recurring Donations page
+				</Link>
+				.
+			</P>
+			<P>
+				To learn more about how recurring donations work, visit our{' '}
+				<a href={links.RECURRING_DONATION_DOCS} target='_blank'>
+					documentation article
+				</a>
+				 .
+			</P>
+		</Box>
+	);
+};
+
+const Title = styled(H5)`
+	color: ${brandColors.deep[800]};
+`;
+
+const Box = styled.div`
+	padding: 16px;
+	border-radius: 12px;
+	border: 1px solid ${brandColors.giv[200]};
+	a {
+		color: ${brandColors.pinky[500]};
+		&:hover {
+			color: ${brandColors.pinky[600]};
+		}
+	}
+`;

src/components/views/donate/ModifySuperToken/DepositSuperToken.tsx

@@ -22,6 +22,7 @@ import { EModifySuperTokenSteps, actionButtonLabel } from './common';
 import { wagmiConfig } from '@/wagmiConfigs';
 import { getEthersProvider, getEthersSigner } from '@/helpers/ethers';
 import { EToastType } from '@/components/toasts/InlineToast';
+import { ensureCorrectNetwork } from '@/helpers/network';
 
 interface IDepositSuperTokenProps extends IModifySuperTokenInnerModalProps {
 	token?: IToken;
@@ -73,8 +74,9 @@ export const DepositSuperToken: FC<IDepositSuperTokenProps> = ({
 	const onApprove = async () => {
 		console.log('Approve', amount, address, superToken, token);
 		if (!address || !superToken || !token) return;
-		setStep(EModifySuperTokenSteps.APPROVING);
 		try {
+			setStep(EModifySuperTokenSteps.APPROVING);
+			await ensureCorrectNetwork(config.OPTIMISM_NETWORK_NUMBER);
 			const approve = await approveERC20tokenTransfer(
 				amount,
 				address,
@@ -95,8 +97,9 @@ export const DepositSuperToken: FC<IDepositSuperTokenProps> = ({
 	};
 
 	const onDeposit = async () => {
-		setStep(EModifySuperTokenSteps.DEPOSITING);
 		try {
+			setStep(EModifySuperTokenSteps.DEPOSITING);
+			await ensureCorrectNetwork(config.OPTIMISM_NETWORK_NUMBER);
 			if (!address) {
 				throw new Error('address not found1');
 			}
@@ -170,6 +173,7 @@ export const DepositSuperToken: FC<IDepositSuperTokenProps> = ({
 					<ModifyWrapper>
 						<ModifySection
 							titleLabel='label.top_up_stream_balance'
+							amount={amount}
 							setAmount={setAmount}
 							token={token}
 							balance={balance}

src/components/views/donate/ModifySuperToken/ModifySection.tsx

@@ -11,7 +11,7 @@ import {
 } from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
-import { Dispatch, SetStateAction, useState, type FC } from 'react';
+import { Dispatch, SetStateAction, type FC } from 'react';
 import { type GetBalanceReturnType } from '@wagmi/core';
 import { formatUnits } from 'viem';
 import { AmountInput } from '@/components/AmountInput/AmountInput';
@@ -31,6 +31,7 @@ export enum EModifySectionPlace {
 interface IModifySectionProps {
 	titleLabel: string;
 	token?: IToken;
+	amount: bigint;
 	setAmount: Dispatch<SetStateAction<bigint>>;
 	balance?: GetBalanceReturnType;
 	refetch: any;
@@ -44,6 +45,7 @@ interface IModifySectionProps {
 export const ModifySection: FC<IModifySectionProps> = ({
 	titleLabel,
 	token,
+	amount,
 	setAmount,
 	balance,
 	refetch,
@@ -54,15 +56,9 @@ export const ModifySection: FC<IModifySectionProps> = ({
 	modifySectionPlace,
 }) => {
 	const { formatMessage } = useIntl();
-	const [displayAmount, setDisplayAmount] = useState('');
 
 	const handleSetMaxAmount = () => {
 		if (!balance || !balance.value) return; // If balance is not available, return
-		const maxAmountDisplay = truncateToDecimalPlaces(
-			formatUnits(maxAmount, balance.decimals),
-			6,
-		).toString(); // Convert your balance value to string properly
-		setDisplayAmount(maxAmountDisplay); // Update the display amount
 		setAmount(balance.value); // Set the amount to the balance value
 	};
 
@@ -104,19 +100,10 @@ export const ModifySection: FC<IModifySectionProps> = ({
 					</Flex>
 				</SelectTokenWrapper>
 				<Input
+					amount={amount}
 					setAmount={setAmount}
 					disabled={!token}
 					decimals={token?.decimals}
-					displayAmount={
-						modifySectionPlace === EModifySectionPlace.DEPOSIT
-							? displayAmount
-							: undefined
-					}
-					setDisplayAmount={
-						modifySectionPlace === EModifySectionPlace.DEPOSIT
-							? setDisplayAmount
-							: undefined
-					}
 				/>
 			</InputWrapper>
 			<Flex gap='4px'>
@@ -132,7 +119,7 @@ export const ModifySection: FC<IModifySectionProps> = ({
 					{balance
 						? truncateToDecimalPlaces(
 								formatUnits(maxAmount, balance.decimals),
-								6,
+								balance.decimals / 3,
 							)
 						: '--'}
 				</ProperGlink>

src/components/views/donate/ModifySuperToken/StreamInfo.tsx

@@ -72,16 +72,20 @@ export const StreamInfo: FC<IStreamInfoProps> = ({
 					})}{' '}
 					{totalStreamPerSec > 0 ? (
 						<strong>
-							{streamRunOutInMonth < 0n
-								? '0'
-								: streamRunOutInMonth.toString()}{' '}
-							{formatMessage(
-								{
-									id: 'label.months',
-								},
-								{
-									count: streamRunOutInMonth.toString(),
-								},
+							{streamRunOutInMonth < 1n ? (
+								' < 1 Month '
+							) : (
+								<>
+									{streamRunOutInMonth.toString()}{' '}
+									{formatMessage(
+										{
+											id: 'label.months',
+										},
+										{
+											count: streamRunOutInMonth.toString(),
+										},
+									)}
+								</>
 							)}
 						</strong>
 					) : (

src/components/views/donate/ModifySuperToken/WithDrawSuperToken.tsx

@@ -20,6 +20,7 @@ import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
 import { wagmiConfig } from '@/wagmiConfigs';
 import { getEthersProvider, getEthersSigner } from '@/helpers/ethers';
 import { EToastType } from '@/components/toasts/InlineToast';
+import { ensureCorrectNetwork } from '@/helpers/network';
 
 interface IWithDrawSuperTokenProps extends IModifySuperTokenInnerModalProps {
 	token?: IToken;
@@ -59,6 +60,7 @@ export const WithDrawSuperToken: FC<IWithDrawSuperTokenProps> = ({
 	const onWithdraw = async () => {
 		setStep(EModifySuperTokenSteps.WITHDRAWING);
 		try {
+			await ensureCorrectNetwork(config.OPTIMISM_NETWORK_NUMBER);
 			if (!address) {
 				throw new Error('address not found1');
 			}
@@ -148,6 +150,7 @@ export const WithDrawSuperToken: FC<IWithDrawSuperTokenProps> = ({
 					<ModifyWrapper>
 						<ModifySection
 							titleLabel='label.withdraw_from_stream_balance'
+							amount={amount}
 							setAmount={setAmount}
 							token={superToken}
 							// try to put in modified value in place of SuperTokenBalance.value