From 741f6add55ce47f07a86f7de16ecc454888fa016 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 17 Mar 2024 12:54:55 +0330
Subject: [PATCH 01/47] fix select state

---
 .../donationsTab/recurringTab/FilterMenu.tsx  |  4 ++--
 .../recurringTab/StreamActionButton.tsx       | 24 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/FilterMenu.tsx b/src/components/views/userProfile/donationsTab/recurringTab/FilterMenu.tsx
index e282f50d21..f4bb2e6522 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/FilterMenu.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/FilterMenu.tsx
@@ -111,7 +111,7 @@ export const FilterMenu = forwardRef<HTMLDivElement, IFilterMenuProps>(
 						<CheckBox
 							label='Active'
 							onChange={e => {
-								setStatusFilters(s => [e, s[1]]);
+								setStatusFilters(s => [e, s[1] || false]);
 								handleClose();
 							}}
 							checked={statusFilters[0]}
@@ -122,7 +122,7 @@ export const FilterMenu = forwardRef<HTMLDivElement, IFilterMenuProps>(
 						<CheckBox
 							label='Ended'
 							onChange={e => {
-								setStatusFilters(s => [s[0], e]);
+								setStatusFilters(s => [s[0] || false, e]);
 								handleClose();
 							}}
 							checked={statusFilters[1]}
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 1f425063da..ac5cd7aaa5 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -29,18 +29,6 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 
 	const options: IOption[] = finished
 		? [
-				{
-					label: formatMessage({ id: 'label.modify_flow_rate' }),
-					icon: <IconEye16 />,
-				},
-				{
-					label: formatMessage({
-						id: 'label.end_recurring_donation',
-					}),
-					icon: <IconUpdate16 />,
-				},
-			]
-		: [
 				{
 					label: formatMessage({ id: 'label.start_new_donation' }),
 					icon: <IconEdit16 />,
@@ -51,6 +39,18 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 					),
 					icon: <IconWalletOutline16 />,
 				},
+			]
+		: [
+				{
+					label: formatMessage({ id: 'label.modify_flow_rate' }),
+					icon: <IconEye16 />,
+				},
+				{
+					label: formatMessage({
+						id: 'label.end_recurring_donation',
+					}),
+					icon: <IconUpdate16 />,
+				},
 			];
 
 	const dropdownStyle = {

From 4fe6b1c802875eac8fa3602bdb3e5f472a76bc84 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 17 Mar 2024 15:03:57 +0330
Subject: [PATCH 02/47] remove unused vars

---
 .../recurringTab/StreamActionButton.tsx       | 59 ++++---------------
 1 file changed, 11 insertions(+), 48 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index ac5cd7aaa5..4c47ee9e8c 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -1,18 +1,14 @@
 import {
-	GLink,
 	IconEdit16,
 	IconEye16,
 	IconUpdate16,
 	IconWalletOutline16,
-	neutralColors,
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
 import { type FC, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { EProjectStatus } from '@/apollo/types/gqlEnums';
 import { Dropdown, IOption } from '@/components/Dropdown';
 import { capitalizeAllWords } from '@/lib/helpers';
-import { isRecurringActive } from '@/configuration';
 
 interface IStreamActionButtonProps {
 	finished: boolean;
@@ -21,7 +17,7 @@ interface IStreamActionButtonProps {
 export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 	finished,
 }) => {
-	const isCancelled = status === EProjectStatus.CANCEL;
+	const [showModify, setshowModify] = useState(false);
 
 	const { formatMessage } = useIntl();
 
@@ -44,6 +40,7 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 				{
 					label: formatMessage({ id: 'label.modify_flow_rate' }),
 					icon: <IconEye16 />,
+					cb: () => {},
 				},
 				{
 					label: formatMessage({
@@ -59,58 +56,24 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 		background: isHover ? 'white' : '',
 	};
 
-	return isRecurringActive ? (
+	return (
 		<Actions
 			onMouseEnter={() => setIsHover(true)}
 			onMouseLeave={() => setIsHover(false)}
 			$isOpen={isHover}
-			$isCancelled={isCancelled}
 		>
-			{isCancelled ? (
-				<CancelledWrapper>CANCELLED</CancelledWrapper>
-			) : (
-				<Dropdown
-					style={dropdownStyle}
-					label=''
-					options={options}
-					stickToRight
-				/>
-			)}
+			<Dropdown
+				style={dropdownStyle}
+				label=''
+				options={options}
+				stickToRight
+			/>
 		</Actions>
-	) : (
-		<ActionsOld
-			onMouseEnter={() => setIsHover(true)}
-			onMouseLeave={() => setIsHover(false)}
-			$isOpen={isHover}
-			$isCancelled={isCancelled}
-			size='Big'
-		>
-			{isCancelled ? (
-				<CancelledWrapper>CANCELLED</CancelledWrapper>
-			) : (
-				<Dropdown
-					style={dropdownStyle}
-					label='Actions'
-					options={options}
-					stickToRight
-				/>
-			)}
-		</ActionsOld>
 	);
 };
 
-const CancelledWrapper = styled.div`
-	padding: 4px 16px;
-`;
-
-const Actions = styled.div<{ $isCancelled: boolean; $isOpen: boolean }>`
-	cursor: ${props => (props.$isCancelled ? 'default' : 'pointer')};
+const Actions = styled.div<{ $isOpen: boolean }>`
+	cursor: pointer;
 	border-radius: 8px;
 	padding: 8px 10px;
 `;
-
-const ActionsOld = styled(GLink)<{ $isCancelled: boolean; $isOpen: boolean }>`
-	color: ${props =>
-		props.$isCancelled ? neutralColors.gray[500] : neutralColors.gray[900]};
-	cursor: ${props => (props.$isCancelled ? 'default' : 'pointer')};
-`;

From 227d01ba147616121b8a90eb125414fb30f46788 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Sun, 17 Mar 2024 15:06:24 +0330
Subject: [PATCH 03/47] fix styles

---
 .../donationsTab/recurringTab/StreamActionButton.tsx   | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 4c47ee9e8c..6620edc1bc 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -53,15 +53,10 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 	const dropdownStyle = {
 		padding: '4px 16px',
 		borderRadius: '8px',
-		background: isHover ? 'white' : '',
 	};
 
 	return (
-		<Actions
-			onMouseEnter={() => setIsHover(true)}
-			onMouseLeave={() => setIsHover(false)}
-			$isOpen={isHover}
-		>
+		<Actions $isOpen={isHover}>
 			<Dropdown
 				style={dropdownStyle}
 				label=''
@@ -76,4 +71,7 @@ const Actions = styled.div<{ $isOpen: boolean }>`
 	cursor: pointer;
 	border-radius: 8px;
 	padding: 8px 10px;
+	:hover {
+		background-color: white;
+	}
 `;

From 748a176de138d4cd08e1cbb9fdfa0e1962d4e1a4 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 11:22:45 +0330
Subject: [PATCH 04/47] init modify stream

---
 .../recurringTab/ModifyStreamModal.tsx        | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
new file mode 100644
index 0000000000..823c16cfaf
--- /dev/null
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -0,0 +1,34 @@
+import { IconDonation32 } from '@giveth/ui-design-system';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import { Modal } from '@/components/modals/Modal';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+import { IModal } from '@/types/common';
+
+interface IModifyStreamModalProps extends IModal {}
+
+export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
+	...props
+}) => {
+	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
+
+	const { formatMessage } = useIntl();
+
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={isAnimating}
+			headerTitle={formatMessage({
+				id: 'label.modify_recurring_donation_amount',
+			})}
+			headerTitlePosition='left'
+			headerIcon={<IconDonation32 />}
+		>
+			<ModifyStreamInnerModal {...props} />
+		</Modal>
+	);
+};
+
+const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = () => {
+	return <div>ModifyStreamInnerModal</div>;
+};

From e858cfebbff2dc57fa428f047ffdd5b7aeddb0e1 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 11:22:54 +0330
Subject: [PATCH 05/47] show modify stream

---
 .../donationsTab/recurringTab/StreamActionButton.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 6620edc1bc..88bf705a2e 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -9,6 +9,7 @@ import { type FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Dropdown, IOption } from '@/components/Dropdown';
 import { capitalizeAllWords } from '@/lib/helpers';
+import { ModifyStreamModal } from './ModifyStreamModal';
 
 interface IStreamActionButtonProps {
 	finished: boolean;
@@ -17,12 +18,10 @@ interface IStreamActionButtonProps {
 export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 	finished,
 }) => {
-	const [showModify, setshowModify] = useState(false);
+	const [showModify, setShowModify] = useState(false);
 
 	const { formatMessage } = useIntl();
 
-	const [isHover, setIsHover] = useState(false);
-
 	const options: IOption[] = finished
 		? [
 				{
@@ -40,7 +39,7 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 				{
 					label: formatMessage({ id: 'label.modify_flow_rate' }),
 					icon: <IconEye16 />,
-					cb: () => {},
+					cb: () => setShowModify(true),
 				},
 				{
 					label: formatMessage({
@@ -56,18 +55,19 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 	};
 
 	return (
-		<Actions $isOpen={isHover}>
+		<Actions>
 			<Dropdown
 				style={dropdownStyle}
 				label=''
 				options={options}
 				stickToRight
 			/>
+			{showModify && <ModifyStreamModal setShowModal={setShowModify} />}
 		</Actions>
 	);
 };
 
-const Actions = styled.div<{ $isOpen: boolean }>`
+const Actions = styled.div`
 	cursor: pointer;
 	border-radius: 8px;
 	padding: 8px 10px;

From 8556dbd018f3038397f12c2bb645ed5fbc4e5501 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 11:33:10 +0330
Subject: [PATCH 06/47] fix ProfileDonationsTab

---
 .../userProfile/donationsTab/ProfileDonationsTab.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/ProfileDonationsTab.tsx b/src/components/views/userProfile/donationsTab/ProfileDonationsTab.tsx
index 278e1c4fa1..29a7dc3c25 100644
--- a/src/components/views/userProfile/donationsTab/ProfileDonationsTab.tsx
+++ b/src/components/views/userProfile/donationsTab/ProfileDonationsTab.tsx
@@ -64,7 +64,7 @@ const ProfileDonationsTab: FC<IUserProfileView> = () => {
 								key={id}
 								onClick={() => setTab(id)}
 								className={`tab ${tab === id ? 'active' : ''}`}
-								isActive={tab === id}
+								$isActive={tab === id}
 							>
 								{formatMessage({ id: label })}
 							</Tab>
@@ -86,7 +86,7 @@ const Tabs = styled(Flex)`
 `;
 
 interface ITab {
-	isActive: boolean;
+	$isActive: boolean;
 }
 
 const Tab = styled(P)<ITab>`
@@ -94,8 +94,8 @@ const Tab = styled(P)<ITab>`
 	border-radius: 48px;
 	cursor: pointer;
 	transition: background-color 0.2s ease-in-out;
-	${({ isActive }) =>
-		isActive &&
+	${({ $isActive }) =>
+		$isActive &&
 		css`
 			background-color: ${neutralColors.gray[100]};
 			box-shadow: 0px 3px 20px 0px rgba(212, 218, 238, 0.4);

From 86792e27ff4d13a47bff30f44aec757fd0c8bfb5 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 11:33:21 +0330
Subject: [PATCH 07/47] pass donation

---
 .../recurringTab/ModifyStreamModal.tsx             |  8 ++++++--
 .../recurringTab/RecurringDonationsTable.tsx       |  2 +-
 .../recurringTab/StreamActionButton.tsx            | 14 ++++++++++----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 823c16cfaf..086d4d47df 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -4,8 +4,11 @@ import { useIntl } from 'react-intl';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
+import { IWalletRecurringDonation } from '@/apollo/types/types';
 
-interface IModifyStreamModalProps extends IModal {}
+interface IModifyStreamModalProps extends IModal {
+	donation: IWalletRecurringDonation;
+}
 
 export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 	...props
@@ -29,6 +32,7 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 	);
 };
 
-const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = () => {
+const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
+	console.log('donation', donation);
 	return <div>ModifyStreamInnerModal</div>;
 };
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx b/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx
index adaec3046a..29a988a25c 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx
@@ -116,7 +116,7 @@ const RecurringDonationTable: FC<RecurringDonationTable> = ({
 						</DonationTableCell>
 					)}
 					<DonationTableCell>
-						<StreamActionButton finished={donation.finished} />
+						<StreamActionButton donation={donation} />
 					</DonationTableCell>
 				</DonationRowWrapper>
 			))}
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 88bf705a2e..c2728e1f79 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -10,19 +10,20 @@ import { useIntl } from 'react-intl';
 import { Dropdown, IOption } from '@/components/Dropdown';
 import { capitalizeAllWords } from '@/lib/helpers';
 import { ModifyStreamModal } from './ModifyStreamModal';
+import { IWalletRecurringDonation } from '@/apollo/types/types';
 
 interface IStreamActionButtonProps {
-	finished: boolean;
+	donation: IWalletRecurringDonation;
 }
 
 export const StreamActionButton: FC<IStreamActionButtonProps> = ({
-	finished,
+	donation,
 }) => {
 	const [showModify, setShowModify] = useState(false);
 
 	const { formatMessage } = useIntl();
 
-	const options: IOption[] = finished
+	const options: IOption[] = donation.finished
 		? [
 				{
 					label: formatMessage({ id: 'label.start_new_donation' }),
@@ -62,7 +63,12 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 				options={options}
 				stickToRight
 			/>
-			{showModify && <ModifyStreamModal setShowModal={setShowModify} />}
+			{showModify && (
+				<ModifyStreamModal
+					setShowModal={setShowModify}
+					donation={donation}
+				/>
+			)}
 		</Actions>
 	);
 };

From 41dc92d0ecd84b210d57bab3d181b39f49dab51b Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 11:44:22 +0330
Subject: [PATCH 08/47] add modify_recurring_donation_amount

---
 lang/ca.json | 1 +
 lang/en.json | 1 +
 lang/es.json | 1 +
 3 files changed, 3 insertions(+)

diff --git a/lang/ca.json b/lang/ca.json
index e882174206..e9fa2e8e31 100644
--- a/lang/ca.json
+++ b/lang/ca.json
@@ -7,6 +7,7 @@
 	"bipoc-comomunities": "Comunitats BIPOC",
 	"children-health": "Salut Infantil",
 	"climate-action": "Acció climàtica",
+	"label.modify_recurring_donation_amount": "Modifica l'import de la donació recurrent",
 	"label.state": "Estat",
 	"component.already_donated.incorrect_estimate": "You have already donated to this project so the estimated matching will be incorrect.",
 	"component.already_donated.once_more": "Already Donated! Donate once more",
diff --git a/lang/en.json b/lang/en.json
index 2e5f2d28bd..30c463ce3a 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -8,6 +8,7 @@
 	"label.state": "State",
 	"children-health": "Children's Health",
 	"climate-action": "Climate Action",
+	"label.modify_recurring_donation_amount": "Modify Recurring Donation Amount",
 	"component.already_donated.incorrect_estimate": "You have already donated to this project so the estimated matching will be incorrect.",
 	"component.already_donated.once_more": "Already Donated! Donate once more",
 	"component.archive_cover.archived": "ARCHIVED",
diff --git a/lang/es.json b/lang/es.json
index 975bd3ab98..d14307f5dd 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -8,6 +8,7 @@
 	"children-health": "Salud de los niños",
 	"climate-action": "Acción Climática",
 	"label.state": "Estado",
+	"label.modify_recurring_donation_amount": "Modificar la cantidad de donación recurrente",
 	"component.already_donated.incorrect_estimate": "Ya has donado a este proyecto, por lo que la estimación de monto complementado será incorrecta.",
 	"component.already_donated.once_more": "¡Ya has donado! Dona una vez más",
 	"component.archive_cover.archived": "ARCHIVADO",

From 5146c71c85947c3423c13dda24f644936601cd51 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 11:45:21 +0330
Subject: [PATCH 09/47] update translations

---
 lang/ca.json | 4 ++--
 lang/en.json | 4 ++--
 lang/es.json | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lang/ca.json b/lang/ca.json
index e9fa2e8e31..0a942481b2 100644
--- a/lang/ca.json
+++ b/lang/ca.json
@@ -7,8 +7,6 @@
 	"bipoc-comomunities": "Comunitats BIPOC",
 	"children-health": "Salut Infantil",
 	"climate-action": "Acció climàtica",
-	"label.modify_recurring_donation_amount": "Modifica l'import de la donació recurrent",
-	"label.state": "Estat",
 	"component.already_donated.incorrect_estimate": "You have already donated to this project so the estimated matching will be incorrect.",
 	"component.already_donated.once_more": "Already Donated! Donate once more",
 	"component.archive_cover.archived": "ARCHIVED",
@@ -593,6 +591,7 @@
 	"label.mission_vission": "Misió i Visió",
 	"label.modify_flow_rate": "Modificar la taxa de flux",
 	"label.modify_recurring_donation": "Modificar Donació Recurrent",
+	"label.modify_recurring_donation_amount": "Modifica l'import de la donació recurrent",
 	"label.modify_stream_balance": "Modificar el Saldo de la Transmissió",
 	"label.month": "{count, plural, one { Mes} other { Mesos} }",
 	"label.monthly": "Mensualment",
@@ -873,6 +872,7 @@
 	"label.start_donating.desc": "Giveth és el lloc per donar o recaptar fons per a projectes increïbles sense comissions.",
 	"label.start_new_donation": "Iniciar nova donació",
 	"label.start_referring!": "Start Referring!",
+	"label.state": "Estat",
 	"label.status": "Estat",
 	"label.streamed_rewards": "Recompenses en streaming",
 	"label.streaming": "Streaming",
diff --git a/lang/en.json b/lang/en.json
index 30c463ce3a..bca6e075ee 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -5,10 +5,8 @@
 	"animals": "Animals",
 	"art": "Art",
 	"bipoc-comomunities": "Bipoc Communities",
-	"label.state": "State",
 	"children-health": "Children's Health",
 	"climate-action": "Climate Action",
-	"label.modify_recurring_donation_amount": "Modify Recurring Donation Amount",
 	"component.already_donated.incorrect_estimate": "You have already donated to this project so the estimated matching will be incorrect.",
 	"component.already_donated.once_more": "Already Donated! Donate once more",
 	"component.archive_cover.archived": "ARCHIVED",
@@ -593,6 +591,7 @@
 	"label.mission_vission": "Mission & Vision",
 	"label.modify_flow_rate": "Modify flow rate",
 	"label.modify_recurring_donation": "Modify Recurring Donation",
+	"label.modify_recurring_donation_amount": "Modify Recurring Donation Amount",
 	"label.modify_stream_balance": "Modify Stream Balance",
 	"label.month": "{count, plural, one { Month} other { Months} }",
 	"label.monthly": "Monthly",
@@ -873,6 +872,7 @@
 	"label.start_donating.desc": "Giveth is the place to donate to or raise funds for awesome projects with zero added feeds.",
 	"label.start_new_donation": "Start new donation",
 	"label.start_referring!": "Start Referring!",
+	"label.state": "State",
 	"label.status": "Status",
 	"label.streamed_rewards": "Streamed Rewards",
 	"label.streaming": "Streaming",
diff --git a/lang/es.json b/lang/es.json
index d14307f5dd..b3b393248d 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -7,8 +7,6 @@
 	"bipoc-comomunities": "Comunidades Bipoc",
 	"children-health": "Salud de los niños",
 	"climate-action": "Acción Climática",
-	"label.state": "Estado",
-	"label.modify_recurring_donation_amount": "Modificar la cantidad de donación recurrente",
 	"component.already_donated.incorrect_estimate": "Ya has donado a este proyecto, por lo que la estimación de monto complementado será incorrecta.",
 	"component.already_donated.once_more": "¡Ya has donado! Dona una vez más",
 	"component.archive_cover.archived": "ARCHIVADO",
@@ -593,6 +591,7 @@
 	"label.mission_vission": "Misión & Visión",
 	"label.modify_flow_rate": "Modificar la tasa de flujo",
 	"label.modify_recurring_donation": "Modificar Donación Recurrente",
+	"label.modify_recurring_donation_amount": "Modificar la cantidad de donación recurrente",
 	"label.modify_stream_balance": "Modificar el Saldo de Transmisión",
 	"label.month": "{count, plural, one { Mes} other { Meses} }",
 	"label.monthly": "Mensualmente",
@@ -873,6 +872,7 @@
 	"label.start_donating.desc": "Giveth es el lugar para donar o recibir financiación a proyectos increíbles sin comisiones.",
 	"label.start_new_donation": "Iniciar nueva donación",
 	"label.start_referring!": "¡Comienza a referir!",
+	"label.state": "Estado",
 	"label.status": "Estado",
 	"label.streamed_rewards": "Recompensas en streaming",
 	"label.streaming": "Flujo",

From 2c2aede69e651bbcb52c52e3ffa65d48ee82be9c Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 12:01:33 +0330
Subject: [PATCH 10/47] add stream_balance

---
 lang/ca.json | 3 ++-
 lang/en.json | 3 ++-
 lang/es.json | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/lang/ca.json b/lang/ca.json
index 0a942481b2..4832600c93 100644
--- a/lang/ca.json
+++ b/lang/ca.json
@@ -877,7 +877,8 @@
 	"label.streamed_rewards": "Recompenses en streaming",
 	"label.streaming": "Streaming",
 	"label.streams_powered_by": "Fluxos impulsats per",
-	"label.stream_balance": "Diposita Tokens o utilitza el Saldo de Transmissió",
+	"label.deposit_token_use_balance": "Diposita Tokens o utilitza el Saldo de Transmissió",
+	"label.stream_balance": "Saldo de la Transmissió",
 	"label.stream_balances": "Saldos de la Transmissió",
 	"label.stream_balances_description": "Tokens que ja has dipositat per a streaming. Pots utilitzar-los per crear donacions recurrents.",
 	"label.stream_balance_runs_out_in": "Recarrega el teu Saldo de Transmissió dins de",
diff --git a/lang/en.json b/lang/en.json
index bca6e075ee..b2aa3dbd59 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -877,7 +877,8 @@
 	"label.streamed_rewards": "Streamed Rewards",
 	"label.streaming": "Streaming",
 	"label.streams_powered_by": "Streams powered by",
-	"label.stream_balance": "Deposit Tokens or use Stream Balance",
+	"label.deposit_token_use_balance": "Deposit Tokens or use Stream Balance",
+	"label.stream_balance": "Stream Balance",
 	"label.stream_balances": "Streamable Token Balances",
 	"label.stream_balances_description": "Tokens you already deposited for streaming. You can use them to create recurring donations.",
 	"label.stream_balance_runs_out_in": "Top-up your Stream balance within",
diff --git a/lang/es.json b/lang/es.json
index b3b393248d..5b586de4b7 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -877,7 +877,8 @@
 	"label.streamed_rewards": "Recompensas en streaming",
 	"label.streaming": "Flujo",
 	"label.streams_powered_by": "Transmisiones potenciadas por",
-	"label.stream_balance": "Deposita Tokens o usa el Saldo de Transmisión",
+	"label.deposit_token_use_balance": "Deposita Tokens o usa el Saldo de Transmisión",
+	"label.stream_balance": "Saldo de Transmisión",
 	"label.stream_balances": "Saldos de Transmisión",
 	"label.stream_balances_description": "Tokens que ya has depositado para streaming. Puedes usarlos para crear donaciones recurrentes.",
 	"label.stream_balance_runs_out_in": "Recarga tu Saldo de Transmisión dentro de",

From 3229adbe2f63bf5b03b928a3537e0ca2bf799226 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 12:02:09 +0330
Subject: [PATCH 11/47] add input

---
 .../donate/ModifySuperToken/StreamInfo.tsx    |  2 +-
 .../views/donate/RecurringDonationCard.tsx    | 12 +--
 .../recurringTab/ModifyStreamModal.tsx        | 87 ++++++++++++++++++-
 3 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/src/components/views/donate/ModifySuperToken/StreamInfo.tsx b/src/components/views/donate/ModifySuperToken/StreamInfo.tsx
index f7d0c27507..fba5eaa604 100644
--- a/src/components/views/donate/ModifySuperToken/StreamInfo.tsx
+++ b/src/components/views/donate/ModifySuperToken/StreamInfo.tsx
@@ -36,7 +36,7 @@ export const StreamInfo: FC<IStreamInfoProps> = ({
 			<Flex $alignItems='center' $justifyContent='space-between'>
 				<Caption $medium>
 					{formatMessage({
-						id: 'label.stream_balance',
+						id: 'label.deposit_token_use_balance',
 					})}
 				</Caption>
 				<StreamBalanceInfo $medium>
diff --git a/src/components/views/donate/RecurringDonationCard.tsx b/src/components/views/donate/RecurringDonationCard.tsx
index 1606900041..40b19dee29 100644
--- a/src/components/views/donate/RecurringDonationCard.tsx
+++ b/src/components/views/donate/RecurringDonationCard.tsx
@@ -225,7 +225,9 @@ export const RecurringDonationCard = () => {
 				<Flex $flexDirection='column' gap='8px'>
 					<Flex gap='8px' $alignItems='center'>
 						<Caption $medium>
-							{formatMessage({ id: 'label.stream_balance' })}
+							{formatMessage({
+								id: 'label.deposit_token_use_balance',
+							})}
 						</Caption>
 						<IconWithTooltip
 							icon={<IconHelpFilled16 />}
@@ -693,16 +695,16 @@ const RecurringSection = styled(Flex)`
 // 	text-align: left;
 // `;
 
-const SelectTokenWrapper = styled(Flex)`
+export const SelectTokenWrapper = styled(Flex)`
 	cursor: pointer;
 	gap: 16px;
 `;
 
-const SelectTokenPlaceHolder = styled(B)`
+export const SelectTokenPlaceHolder = styled(B)`
 	white-space: nowrap;
 `;
 
-const InputWrapper = styled(Flex)`
+export const InputWrapper = styled(Flex)`
 	border: 2px solid ${neutralColors.gray[300]};
 	border-radius: 8px;
 	overflow: hidden;
@@ -727,7 +729,7 @@ const Input = styled(AmountInput)`
 	}
 `;
 
-const IconWrapper = styled.div`
+export const IconWrapper = styled.div`
 	cursor: pointer;
 	color: ${brandColors.giv[500]};
 `;
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 086d4d47df..276cd9e531 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -1,10 +1,25 @@
-import { IconDonation32 } from '@giveth/ui-design-system';
+import {
+	B,
+	Caption,
+	Flex,
+	IconCaretDown16,
+	IconDonation32,
+	IconHelpFilled16,
+} from '@giveth/ui-design-system';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
 import { IWalletRecurringDonation } from '@/apollo/types/types';
+import { FlowRateTooltip } from '@/components/GIVeconomyPages/GIVstream.sc';
+import { IconWithTooltip } from '@/components/IconWithToolTip';
+import { TokenIcon } from '@/components/views/donate/TokenIcon/TokenIcon';
+import {
+	SelectTokenWrapper,
+	InputWrapper,
+} from '@/components/views/donate/RecurringDonationCard';
+import config from '@/configuration';
 
 interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
@@ -33,6 +48,74 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 };
 
 const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
+	const { formatMessage } = useIntl();
+
 	console.log('donation', donation);
-	return <div>ModifyStreamInnerModal</div>;
+	const superToken = config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
+		s => s.underlyingToken.symbol === donation.currency,
+	);
+	console.log('superToken', superToken);
+	return (
+		<Flex $flexDirection='column' gap='8px'>
+			<Flex gap='8px' $alignItems='center'>
+				<Caption $medium>
+					{formatMessage({ id: 'label.stream_balance' })}
+				</Caption>
+				<IconWithTooltip
+					icon={<IconHelpFilled16 />}
+					direction='right'
+					align='bottom'
+				>
+					<FlowRateTooltip>
+						{formatMessage({
+							id: 'tooltip.flowrate',
+						})}
+					</FlowRateTooltip>
+				</IconWithTooltip>
+			</Flex>
+			<InputWrapper>
+				<SelectTokenWrapper
+					$alignItems='center'
+					$justifyContent='space-between'
+					// onClick={() => setShowSelectTokenModal(true)}
+				>
+					<Flex gap='8px' $alignItems='center'>
+						<TokenIcon
+							symbol={superToken?.underlyingToken.symbol}
+							size={24}
+						/>
+						<B>{superToken?.symbol}</B>
+					</Flex>
+					<IconCaretDown16 />
+				</SelectTokenWrapper>
+				<p>
+					{/* {limitFraction(
+						formatUnits(
+							balance?.value || 0n,
+							selectedToken.token.decimals,
+						),
+					)} */}
+				</p>
+			</InputWrapper>
+			{/* {!selectedToken?.token.isSuperToken &&
+				selectedToken !== undefined &&
+				balance !== undefined && (
+					<Flex gap='4px'>
+						<GLink size='Small'>
+							{formatMessage({
+								id: 'label.available',
+							})}
+							: {limitFraction(balance?.formatted)}
+						</GLink>
+						<IconWrapper onClick={() => !isRefetching && refetch()}>
+							{isRefetching ? (
+								<Spinner size={16} />
+							) : (
+								<IconRefresh16 />
+							)}
+						</IconWrapper>
+					</Flex>
+				)} */}
+		</Flex>
+	);
 };

From 042dbf303dded5acbf22e0848a756669049fa211 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 12:21:27 +0330
Subject: [PATCH 12/47] update styles

---
 .../recurringTab/ModifyStreamModal.tsx        | 151 ++++++++++--------
 1 file changed, 85 insertions(+), 66 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 276cd9e531..ce387daec3 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -2,12 +2,16 @@ import {
 	B,
 	Caption,
 	Flex,
-	IconCaretDown16,
 	IconDonation32,
 	IconHelpFilled16,
+	mediaQueries,
+	neutralColors,
 } from '@giveth/ui-design-system';
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { useAccount, useBalance } from 'wagmi';
+import { formatUnits } from 'viem';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
@@ -15,11 +19,8 @@ import { IWalletRecurringDonation } from '@/apollo/types/types';
 import { FlowRateTooltip } from '@/components/GIVeconomyPages/GIVstream.sc';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
 import { TokenIcon } from '@/components/views/donate/TokenIcon/TokenIcon';
-import {
-	SelectTokenWrapper,
-	InputWrapper,
-} from '@/components/views/donate/RecurringDonationCard';
 import config from '@/configuration';
+import { limitFraction } from '@/helpers/number';
 
 interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
@@ -49,73 +50,91 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 
 const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	const { formatMessage } = useIntl();
+	const { address } = useAccount();
 
 	console.log('donation', donation);
-	const superToken = config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
-		s => s.underlyingToken.symbol === donation.currency,
+	const superToken = useMemo(
+		() =>
+			config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
+				s => s.underlyingToken.symbol === donation.currency,
+			),
+		[donation.currency],
 	);
-	console.log('superToken', superToken);
+	const { data: balance } = useBalance({
+		token: superToken?.id,
+		address,
+	});
+
+	console.log('superToken', superToken, balance);
 	return (
-		<Flex $flexDirection='column' gap='8px'>
-			<Flex gap='8px' $alignItems='center'>
-				<Caption $medium>
-					{formatMessage({ id: 'label.stream_balance' })}
-				</Caption>
-				<IconWithTooltip
-					icon={<IconHelpFilled16 />}
-					direction='right'
-					align='bottom'
-				>
-					<FlowRateTooltip>
-						{formatMessage({
-							id: 'tooltip.flowrate',
-						})}
-					</FlowRateTooltip>
-				</IconWithTooltip>
-			</Flex>
-			<InputWrapper>
-				<SelectTokenWrapper
-					$alignItems='center'
-					$justifyContent='space-between'
-					// onClick={() => setShowSelectTokenModal(true)}
-				>
-					<Flex gap='8px' $alignItems='center'>
+		<Wrapper>
+			<Flex $flexDirection='column' gap='8px'>
+				<Flex gap='8px' $alignItems='center'>
+					<Caption $medium>
+						{formatMessage({ id: 'label.stream_balance' })}
+					</Caption>
+					<IconWithTooltip
+						icon={<IconHelpFilled16 />}
+						direction='right'
+						align='bottom'
+					>
+						<FlowRateTooltip>
+							{formatMessage({
+								id: 'tooltip.flowrate',
+							})}
+						</FlowRateTooltip>
+					</IconWithTooltip>
+				</Flex>
+				<TokenInfoWrapper>
+					<TokenSymbol gap='8px' $alignItems='center'>
 						<TokenIcon
 							symbol={superToken?.underlyingToken.symbol}
 							size={24}
 						/>
-						<B>{superToken?.symbol}</B>
-					</Flex>
-					<IconCaretDown16 />
-				</SelectTokenWrapper>
-				<p>
-					{/* {limitFraction(
-						formatUnits(
-							balance?.value || 0n,
-							selectedToken.token.decimals,
-						),
-					)} */}
-				</p>
-			</InputWrapper>
-			{/* {!selectedToken?.token.isSuperToken &&
-				selectedToken !== undefined &&
-				balance !== undefined && (
-					<Flex gap='4px'>
-						<GLink size='Small'>
-							{formatMessage({
-								id: 'label.available',
-							})}
-							: {limitFraction(balance?.formatted)}
-						</GLink>
-						<IconWrapper onClick={() => !isRefetching && refetch()}>
-							{isRefetching ? (
-								<Spinner size={16} />
-							) : (
-								<IconRefresh16 />
-							)}
-						</IconWrapper>
-					</Flex>
-				)} */}
-		</Flex>
+						<B>{superToken?.underlyingToken.symbol}</B>
+					</TokenSymbol>
+					<TokenBalance>
+						{limitFraction(
+							formatUnits(
+								balance?.value || 0n,
+								balance?.decimals || 18,
+							),
+						)}
+						&nbsp;
+						{superToken?.symbol}
+					</TokenBalance>
+				</TokenInfoWrapper>
+			</Flex>
+		</Wrapper>
 	);
 };
+
+const Wrapper = styled(Flex)`
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: stretch;
+	gap: 16px;
+	width: 100%;
+	padding: 16px 24px 24px 24px;
+	${mediaQueries.tablet} {
+		width: 630px;
+	}
+`;
+
+const TokenInfoWrapper = styled(Flex)`
+	border: 2px solid ${neutralColors.gray[300]};
+	border-radius: 8px;
+	overflow: hidden;
+	& > * {
+		padding: 13px 16px;
+	}
+	align-items: center;
+`;
+
+const TokenSymbol = styled(Flex)`
+	min-width: 140px;
+`;
+
+const TokenBalance = styled(B)`
+	border-left: 2px solid ${neutralColors.gray[300]};
+`;

From d37611a6ce30bb7bca0194a23aa3277614e296cd Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 14:03:45 +0330
Subject: [PATCH 13/47] add slider

---
 .../views/donate/RecurringDonationCard.tsx    |  24 +--
 .../recurringTab/ModifyStreamModal.tsx        | 152 +++++++++++++++++-
 2 files changed, 162 insertions(+), 14 deletions(-)

diff --git a/src/components/views/donate/RecurringDonationCard.tsx b/src/components/views/donate/RecurringDonationCard.tsx
index 40b19dee29..bb4b64ed47 100644
--- a/src/components/views/donate/RecurringDonationCard.tsx
+++ b/src/components/views/donate/RecurringDonationCard.tsx
@@ -55,7 +55,7 @@ import links from '@/lib/constants/links';
  * If the slider value is between 90 and 100, it maps it to a range of 50 to 100.
  * This makes the first 90% of the slider represent 0-50% of the range, and the last 10% represent 50-100%.
  */
-function mapValue(value: number) {
+export function mapValue(value: number) {
 	if (value <= 90) {
 		return value * (50 / 90);
 	} else {
@@ -70,7 +70,7 @@ function mapValue(value: number) {
  * If the value is between 50 and 100, it maps it to a range of 90 to 100.
  * This is used to set the slider's position based on the value from the range.
  */
-function mapValueInverse(value: number) {
+export function mapValueInverse(value: number) {
 	if (value <= 50) {
 		return value * (90 / 50);
 	} else {
@@ -328,16 +328,16 @@ export const RecurringDonationCard = () => {
 								min={0}
 								max={100}
 								step={0.1}
-								railStyle={{
-									backgroundColor: sliderColor[200],
-								}}
-								trackStyle={{
-									backgroundColor: sliderColor[500],
-								}}
-								handleStyle={{
-									backgroundColor: sliderColor[500],
-									border: `3px solid ${sliderColor[200]}`,
-									opacity: 1,
+								styles={{
+									rail: { backgroundColor: sliderColor[200] },
+									track: {
+										backgroundColor: sliderColor[500],
+									},
+									handle: {
+										backgroundColor: sliderColor[500],
+										border: `3px solid ${sliderColor[200]}`,
+										opacity: 1,
+									},
 								}}
 								onChange={(value: any) => {
 									const _value = Array.isArray(value)
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index ce387daec3..2db8865513 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -2,16 +2,21 @@ import {
 	B,
 	Caption,
 	Flex,
+	IconChevronRight16,
 	IconDonation32,
 	IconHelpFilled16,
+	brandColors,
 	mediaQueries,
 	neutralColors,
+	semanticColors,
 } from '@giveth/ui-design-system';
-import { FC, useMemo } from 'react';
+import { FC, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { useAccount, useBalance } from 'wagmi';
 import { formatUnits } from 'viem';
+import Slider from 'rc-slider';
+import BigNumber from 'bignumber.js';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
@@ -21,6 +26,12 @@ import { IconWithTooltip } from '@/components/IconWithToolTip';
 import { TokenIcon } from '@/components/views/donate/TokenIcon/TokenIcon';
 import config from '@/configuration';
 import { limitFraction } from '@/helpers/number';
+import { ITokenStreams } from '@/context/donate.context';
+import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
+import {
+	mapValue,
+	mapValueInverse,
+} from '@/components/views/donate/RecurringDonationCard';
 
 interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
@@ -30,7 +41,6 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 	...props
 }) => {
 	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
-
 	const { formatMessage } = useIntl();
 
 	return (
@@ -49,6 +59,8 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 };
 
 const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
+	const [amount, setAmount] = useState(0n);
+	const [percentage, setPercentage] = useState(0);
 	const { formatMessage } = useIntl();
 	const { address } = useAccount();
 
@@ -64,6 +76,30 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 		token: superToken?.id,
 		address,
 	});
+	const totalPerMonth =
+		BigInt(
+			new BigNumber((amount || 0n).toString())
+				.multipliedBy(percentage)
+				.toFixed(0),
+		) / 100n;
+	const totalPerSec = totalPerMonth / ONE_MONTH_SECONDS;
+	const projectPerMonth = totalPerMonth;
+	const tokenStreams = [] as unknown as ITokenStreams;
+	const tokenStream = tokenStreams[superToken?.id || ''];
+	const totalStreamPerSec =
+		tokenStream?.reduce(
+			(acc, stream) => acc + BigInt(stream.currentFlowRate),
+			totalPerSec,
+		) || totalPerSec;
+	const streamRunOutInMonth =
+		totalStreamPerSec > 0
+			? amount / totalStreamPerSec / ONE_MONTH_SECONDS
+			: 0n;
+	const isTotalStreamExceed =
+		streamRunOutInMonth < 1n && totalStreamPerSec > 0;
+	const sliderColor = isTotalStreamExceed
+		? semanticColors.punch
+		: brandColors.giv;
 
 	console.log('superToken', superToken, balance);
 	return (
@@ -104,12 +140,117 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 						{superToken?.symbol}
 					</TokenBalance>
 				</TokenInfoWrapper>
+				<Flex $flexDirection='column' gap='8px' $alignItems='stretch'>
+					<Caption>
+						{formatMessage({
+							id: 'label.amount_to_donate_monthly',
+						})}
+					</Caption>
+					<SliderWrapper>
+						<StyledSlider
+							min={0}
+							max={100}
+							step={0.1}
+							styles={{
+								rail: { backgroundColor: sliderColor[200] },
+								track: {
+									backgroundColor: sliderColor[500],
+								},
+								handle: {
+									backgroundColor: sliderColor[500],
+									border: `3px solid ${sliderColor[200]}`,
+									opacity: 1,
+								},
+							}}
+							onChange={(value: any) => {
+								const _value = Array.isArray(value)
+									? value[0]
+									: value;
+								setPercentage(mapValue(_value));
+							}}
+							value={mapValueInverse(percentage)}
+							disabled={amount === 0n}
+						/>
+					</SliderWrapper>
+					<Flex $justifyContent='space-between'>
+						<Flex gap='4px'>
+							<Caption>
+								{formatMessage({
+									id: 'label.donating_to',
+								})}
+							</Caption>
+							<Caption $medium>{donation.project.title}</Caption>
+						</Flex>
+						<Flex gap='4px'>
+							<Caption $medium>
+								{amount !== 0n && percentage !== 0
+									? limitFraction(
+											formatUnits(
+												totalPerMonth,
+												superToken?.decimals || 18,
+											),
+										)
+									: 0}
+							</Caption>
+							<Caption $medium>{superToken?.symbol}</Caption>
+							<Caption>
+								{formatMessage({ id: 'label.per_month' })}
+							</Caption>
+						</Flex>
+					</Flex>
+					<Flex $justifyContent='space-between' gap='4px'>
+						<Flex gap='4px'>
+							<Caption>
+								{formatMessage({
+									id: 'label.stream_balance_runs_out_in',
+								})}
+							</Caption>
+
+							<Flex gap='4px'>
+								<Caption $medium>
+									{streamRunOutInMonth.toString()}
+								</Caption>
+								<Caption>
+									{formatMessage(
+										{ id: 'label.months' },
+										{
+											count: streamRunOutInMonth.toString(),
+										},
+									)}
+								</Caption>
+							</Flex>
+						</Flex>
+					</Flex>
+					{tokenStream?.length > 0 && (
+						<Flex $justifyContent='space-between'>
+							<Caption>
+								{formatMessage(
+									{
+										id: 'label.you_are_supporting_other_projects_with_this_stream',
+									},
+									{
+										count: tokenStream.length - 1,
+									},
+								)}
+							</Caption>
+							<Flex gap='4px' $alignItems='center'>
+								<Caption $medium>
+									{formatMessage({
+										id: 'label.manage_recurring_donations',
+									})}
+								</Caption>
+								<IconChevronRight16 />
+							</Flex>
+						</Flex>
+					)}
+				</Flex>
 			</Flex>
 		</Wrapper>
 	);
 };
 
 const Wrapper = styled(Flex)`
+	text-align: left;
 	flex-direction: column;
 	align-items: stretch;
 	justify-content: stretch;
@@ -138,3 +279,10 @@ const TokenSymbol = styled(Flex)`
 const TokenBalance = styled(B)`
 	border-left: 2px solid ${neutralColors.gray[300]};
 `;
+
+const SliderWrapper = styled.div`
+	width: 100%;
+	position: relative;
+`;
+
+const StyledSlider = styled(Slider)``;

From fd142a3bac02f798fee088c72423b6d07ea35a8e Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 15:19:11 +0330
Subject: [PATCH 14/47] remove current flow from calculation

---
 .../views/donate/RecurringDonationCard.tsx         | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/views/donate/RecurringDonationCard.tsx b/src/components/views/donate/RecurringDonationCard.tsx
index bb4b64ed47..74b3589406 100644
--- a/src/components/views/donate/RecurringDonationCard.tsx
+++ b/src/components/views/donate/RecurringDonationCard.tsx
@@ -135,10 +135,16 @@ export const RecurringDonationCard = () => {
 	const tokenBalance = balance?.value;
 	const tokenStream = tokenStreams[selectedToken?.token.id || ''];
 	const totalStreamPerSec =
-		tokenStream?.reduce(
-			(acc, stream) => acc + BigInt(stream.currentFlowRate),
-			totalPerSec,
-		) || totalPerSec;
+		tokenStream
+			?.filter(
+				ts =>
+					project.anchorContracts?.length > 0 &&
+					ts.receiver.id !== project.anchorContracts[0]?.address,
+			)
+			.reduce(
+				(acc, stream) => acc + BigInt(stream.currentFlowRate),
+				totalPerSec,
+			) || totalPerSec;
 	const streamRunOutInMonth =
 		totalStreamPerSec > 0
 			? amount / totalStreamPerSec / ONE_MONTH_SECONDS

From d3a84daee781af5d5d23a705075570861cdf0750 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 15:37:35 +0330
Subject: [PATCH 15/47] fix translation

---
 lang/ca.json                                          | 3 ++-
 lang/en.json                                          | 3 ++-
 lang/es.json                                          | 3 ++-
 src/components/views/donate/RecurringDonationCard.tsx | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/lang/ca.json b/lang/ca.json
index 4832600c93..13bf4d2ace 100644
--- a/lang/ca.json
+++ b/lang/ca.json
@@ -881,7 +881,8 @@
 	"label.stream_balance": "Saldo de la Transmissió",
 	"label.stream_balances": "Saldos de la Transmissió",
 	"label.stream_balances_description": "Tokens que ja has dipositat per a streaming. Pots utilitzar-los per crear donacions recurrents.",
-	"label.stream_balance_runs_out_in": "Recarrega el teu Saldo de Transmissió dins de",
+	"label.top_up_your_stream_balance_within": "Recarrega el teu Saldo de Transmissió dins de",
+	"label.stream_balance_runs_out_in": "El saldo de la transmissió s'esgota en",
 	"label.stream_flowrate": "caudal del fluxe",
 	"label.stream_flowrate_when_you_claim": "caudal del fluxe quan reclames les recompenses líquides!",
 	"label.stream_progress": "Progrés del {token}stream",
diff --git a/lang/en.json b/lang/en.json
index b2aa3dbd59..4beccb21bf 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -881,7 +881,8 @@
 	"label.stream_balance": "Stream Balance",
 	"label.stream_balances": "Streamable Token Balances",
 	"label.stream_balances_description": "Tokens you already deposited for streaming. You can use them to create recurring donations.",
-	"label.stream_balance_runs_out_in": "Top-up your Stream balance within",
+	"label.stream_balance_runs_out_in": "Stream balance runs out in",
+	"label.top_up_your_stream_balance_within": "Top-up your Stream balance within",
 	"label.stream_flowrate": "stream flowrate",
 	"label.stream_flowrate_when_you_claim": "stream flowrate when you claim liquid rewards!",
 	"label.stream_progress": "{token}stream progress",
diff --git a/lang/es.json b/lang/es.json
index 5b586de4b7..abb5aeba43 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -881,7 +881,8 @@
 	"label.stream_balance": "Saldo de Transmisión",
 	"label.stream_balances": "Saldos de Transmisión",
 	"label.stream_balances_description": "Tokens que ya has depositado para streaming. Puedes usarlos para crear donaciones recurrentes.",
-	"label.stream_balance_runs_out_in": "Recarga tu Saldo de Transmisión dentro de",
+	"label.top_up_your_stream_balance_within": "Recarga tu Saldo de Transmisión dentro de",
+	"label.stream_balance_runs_out_in": "El Saldo de Transmisión se agota en",
 	"label.stream_flowrate": "flujo de stream",
 	"label.stream_flowrate_when_you_claim": "flujo de stream cuando reclamas recompensas líquidas!",
 	"label.stream_progress": "Progreso del {token}stream",
diff --git a/src/components/views/donate/RecurringDonationCard.tsx b/src/components/views/donate/RecurringDonationCard.tsx
index 74b3589406..f39c589e49 100644
--- a/src/components/views/donate/RecurringDonationCard.tsx
+++ b/src/components/views/donate/RecurringDonationCard.tsx
@@ -388,7 +388,7 @@ export const RecurringDonationCard = () => {
 							<Flex gap='4px'>
 								<Caption>
 									{formatMessage({
-										id: 'label.stream_balance_runs_out_in',
+										id: 'label.top_up_your_stream_balance_within',
 									})}
 								</Caption>
 								{selectedToken?.token.isSuperToken && (

From b3b57e8344e4c08664b89108109995fae2ca77e9 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 15:42:05 +0330
Subject: [PATCH 16/47] add runs out

---
 .../recurringTab/ModifyStreamModal.tsx        | 99 ++++++++++---------
 1 file changed, 51 insertions(+), 48 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 2db8865513..09a2070f45 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -2,7 +2,6 @@ import {
 	B,
 	Caption,
 	Flex,
-	IconChevronRight16,
 	IconDonation32,
 	IconHelpFilled16,
 	brandColors,
@@ -26,12 +25,12 @@ import { IconWithTooltip } from '@/components/IconWithToolTip';
 import { TokenIcon } from '@/components/views/donate/TokenIcon/TokenIcon';
 import config from '@/configuration';
 import { limitFraction } from '@/helpers/number';
-import { ITokenStreams } from '@/context/donate.context';
 import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
 import {
 	mapValue,
 	mapValueInverse,
 } from '@/components/views/donate/RecurringDonationCard';
+import { useUserStreams } from '@/hooks/useUserStreams';
 
 interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
@@ -59,7 +58,6 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 };
 
 const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
-	const [amount, setAmount] = useState(0n);
 	const [percentage, setPercentage] = useState(0);
 	const { formatMessage } = useIntl();
 	const { address } = useAccount();
@@ -78,22 +76,28 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	});
 	const totalPerMonth =
 		BigInt(
-			new BigNumber((amount || 0n).toString())
+			new BigNumber((balance?.value || 0n).toString())
 				.multipliedBy(percentage)
 				.toFixed(0),
 		) / 100n;
 	const totalPerSec = totalPerMonth / ONE_MONTH_SECONDS;
-	const projectPerMonth = totalPerMonth;
-	const tokenStreams = [] as unknown as ITokenStreams;
+	const tokenStreams = useUserStreams();
 	const tokenStream = tokenStreams[superToken?.id || ''];
 	const totalStreamPerSec =
-		tokenStream?.reduce(
-			(acc, stream) => acc + BigInt(stream.currentFlowRate),
-			totalPerSec,
-		) || totalPerSec;
+		tokenStream
+			?.filter(
+				ts =>
+					donation.project.anchorContracts?.length > 0 &&
+					ts.receiver.id !==
+						donation.project.anchorContracts[0]?.address,
+			)
+			.reduce(
+				(acc, stream) => acc + BigInt(stream.currentFlowRate),
+				totalPerSec,
+			) || totalPerSec;
 	const streamRunOutInMonth =
 		totalStreamPerSec > 0
-			? amount / totalStreamPerSec / ONE_MONTH_SECONDS
+			? (balance?.value || 0n) / totalStreamPerSec / ONE_MONTH_SECONDS
 			: 0n;
 	const isTotalStreamExceed =
 		streamRunOutInMonth < 1n && totalStreamPerSec > 0;
@@ -101,7 +105,13 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 		? semanticColors.punch
 		: brandColors.giv;
 
-	console.log('superToken', superToken, balance);
+	console.log(
+		'superToken',
+		superToken,
+		balance,
+		tokenStream,
+		totalStreamPerSec,
+	);
 	return (
 		<Wrapper>
 			<Flex $flexDirection='column' gap='8px'>
@@ -169,7 +179,6 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 								setPercentage(mapValue(_value));
 							}}
 							value={mapValueInverse(percentage)}
-							disabled={amount === 0n}
 						/>
 					</SliderWrapper>
 					<Flex $justifyContent='space-between'>
@@ -183,7 +192,7 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 						</Flex>
 						<Flex gap='4px'>
 							<Caption $medium>
-								{amount !== 0n && percentage !== 0
+								{balance?.value !== 0n && percentage !== 0
 									? limitFraction(
 											formatUnits(
 												totalPerMonth,
@@ -199,49 +208,37 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 						</Flex>
 					</Flex>
 					<Flex $justifyContent='space-between' gap='4px'>
+						<Caption>
+							{formatMessage({
+								id: 'label.stream_balance_runs_out_in',
+							})}
+						</Caption>
+
 						<Flex gap='4px'>
-							<Caption>
-								{formatMessage({
-									id: 'label.stream_balance_runs_out_in',
-								})}
+							<Caption $medium>
+								{streamRunOutInMonth.toString()}
 							</Caption>
-
-							<Flex gap='4px'>
-								<Caption $medium>
-									{streamRunOutInMonth.toString()}
-								</Caption>
-								<Caption>
-									{formatMessage(
-										{ id: 'label.months' },
-										{
-											count: streamRunOutInMonth.toString(),
-										},
-									)}
-								</Caption>
-							</Flex>
-						</Flex>
-					</Flex>
-					{tokenStream?.length > 0 && (
-						<Flex $justifyContent='space-between'>
 							<Caption>
 								{formatMessage(
+									{ id: 'label.months' },
 									{
-										id: 'label.you_are_supporting_other_projects_with_this_stream',
-									},
-									{
-										count: tokenStream.length - 1,
+										count: streamRunOutInMonth.toString(),
 									},
 								)}
 							</Caption>
-							<Flex gap='4px' $alignItems='center'>
-								<Caption $medium>
-									{formatMessage({
-										id: 'label.manage_recurring_donations',
-									})}
-								</Caption>
-								<IconChevronRight16 />
-							</Flex>
 						</Flex>
+					</Flex>
+					{tokenStream?.length > 0 && (
+						<OtherStreamsInfo>
+							{formatMessage(
+								{
+									id: 'label.you_are_supporting_other_projects_with_this_stream',
+								},
+								{
+									count: tokenStream.length - 1,
+								},
+							)}
+						</OtherStreamsInfo>
 					)}
 				</Flex>
 			</Flex>
@@ -286,3 +283,9 @@ const SliderWrapper = styled.div`
 `;
 
 const StyledSlider = styled(Slider)``;
+
+const OtherStreamsInfo = styled(Caption)`
+	padding: 8px;
+	border-radius: 8px;
+	background: var(--Neutral-Gray-200, #f7f7f9);
+`;

From d0634d62d751736eca31956224e23e97a55a4d74 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 15:46:12 +0330
Subject: [PATCH 17/47] fetch anchorContracts in
 fetchRecurringDonationsByUserId

---
 src/apollo/gql/gqlUser.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/apollo/gql/gqlUser.ts b/src/apollo/gql/gqlUser.ts
index f8579eecac..16104cb6bb 100644
--- a/src/apollo/gql/gqlUser.ts
+++ b/src/apollo/gql/gqlUser.ts
@@ -144,6 +144,10 @@ export const FETCH_USER_RECURRING_DONATIONS = gql`
 					id
 					title
 					slug
+					anchorContracts {
+						address
+						isActive
+					}
 				}
 				finished
 				createdAt

From d12274ee9f59f7d82dd4dd46e0a7b706215813d3 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 15:57:46 +0330
Subject: [PATCH 18/47] fix error

---
 src/components/ToggleSwitch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ToggleSwitch.tsx b/src/components/ToggleSwitch.tsx
index b39b3cf6cb..8ef891b31b 100644
--- a/src/components/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch.tsx
@@ -26,7 +26,7 @@ const ToggleSwitch: FC<IToggleButton> = ({
 			$disabled={disabled}
 			className={className}
 		>
-			<InputStyled checked={isOn} type='checkbox' />
+			<InputStyled checked={isOn} type='checkbox' onChange={() => {}} />
 			<Switch $isOn={isOn}>
 				<Bullet $isOn={isOn} />
 			</Switch>

From 21cf381e23aa358bb8bfb7916a43c1edffd4d21b Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 15:57:56 +0330
Subject: [PATCH 19/47] add button

---
 .../recurringTab/ModifyStreamModal.tsx        | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 09a2070f45..1932f64c4a 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -1,5 +1,6 @@
 import {
 	B,
+	Button,
 	Caption,
 	Flex,
 	IconDonation32,
@@ -31,6 +32,7 @@ import {
 	mapValueInverse,
 } from '@/components/views/donate/RecurringDonationCard';
 import { useUserStreams } from '@/hooks/useUserStreams';
+import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
 
 interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
@@ -105,13 +107,6 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 		? semanticColors.punch
 		: brandColors.giv;
 
-	console.log(
-		'superToken',
-		superToken,
-		balance,
-		tokenStream,
-		totalStreamPerSec,
-	);
 	return (
 		<Wrapper>
 			<Flex $flexDirection='column' gap='8px'>
@@ -240,7 +235,20 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 							)}
 						</OtherStreamsInfo>
 					)}
+					<InlineToast
+						type={EToastType.Info}
+						message='Modifying your active recurring donations will affect when your stream balance runs out.'
+					/>
 				</Flex>
+				<ActionButton
+					label={formatMessage({ id: 'label.confirm' })}
+					onClick={() => {}}
+					disabled={
+						balance?.value === undefined ||
+						balance?.value === 0n ||
+						isTotalStreamExceed
+					}
+				/>
 			</Flex>
 		</Wrapper>
 	);
@@ -289,3 +297,7 @@ const OtherStreamsInfo = styled(Caption)`
 	border-radius: 8px;
 	background: var(--Neutral-Gray-200, #f7f7f9);
 `;
+
+const ActionButton = styled(Button)`
+	width: 100%;
+`;

From 791d1eb44079b84e0542db646de60ab3fd92f5f1 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 16:36:24 +0330
Subject: [PATCH 20/47] set percentage

---
 .../recurringTab/ModifyStreamModal.tsx        | 55 ++++++++++++++-----
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 1932f64c4a..6b7e94d765 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -10,7 +10,7 @@ import {
 	neutralColors,
 	semanticColors,
 } from '@giveth/ui-design-system';
-import { FC, useMemo, useState } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { useAccount, useBalance } from 'wagmi';
@@ -33,6 +33,12 @@ import {
 } from '@/components/views/donate/RecurringDonationCard';
 import { useUserStreams } from '@/hooks/useUserStreams';
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
+import { ISuperfluidStream } from '@/types/superFluid';
+
+interface IGeneralInfo {
+	projectStream?: ISuperfluidStream;
+	otherStreamsTotalFlowRate: bigint;
+}
 
 interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
@@ -61,10 +67,12 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 
 const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	const [percentage, setPercentage] = useState(0);
+	const [info, setInfo] = useState<IGeneralInfo>({
+		otherStreamsTotalFlowRate: 0n,
+	});
 	const { formatMessage } = useIntl();
 	const { address } = useAccount();
 
-	console.log('donation', donation);
 	const superToken = useMemo(
 		() =>
 			config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
@@ -85,18 +93,8 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	const totalPerSec = totalPerMonth / ONE_MONTH_SECONDS;
 	const tokenStreams = useUserStreams();
 	const tokenStream = tokenStreams[superToken?.id || ''];
-	const totalStreamPerSec =
-		tokenStream
-			?.filter(
-				ts =>
-					donation.project.anchorContracts?.length > 0 &&
-					ts.receiver.id !==
-						donation.project.anchorContracts[0]?.address,
-			)
-			.reduce(
-				(acc, stream) => acc + BigInt(stream.currentFlowRate),
-				totalPerSec,
-			) || totalPerSec;
+
+	const totalStreamPerSec = totalPerSec + info.otherStreamsTotalFlowRate;
 	const streamRunOutInMonth =
 		totalStreamPerSec > 0
 			? (balance?.value || 0n) / totalStreamPerSec / ONE_MONTH_SECONDS
@@ -107,6 +105,35 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 		? semanticColors.punch
 		: brandColors.giv;
 
+	useEffect(() => {
+		if (!tokenStream || tokenStream.length === 0 || !balance?.value) return;
+		const _streamInfo: IGeneralInfo = {
+			otherStreamsTotalFlowRate: 0n,
+		};
+		for (let i = 0; i < tokenStream.length; i++) {
+			const ts = tokenStream[i];
+			if (
+				ts.receiver.id === donation.project.anchorContracts[0]?.address
+			) {
+				_streamInfo.projectStream = ts;
+				const _percentage = BigNumber(
+					(
+						BigInt(ts.currentFlowRate) *
+						ONE_MONTH_SECONDS *
+						100n
+					).toString(),
+				).dividedBy(balance?.value.toString());
+				setPercentage(parseFloat(_percentage.toString()));
+			} else {
+				_streamInfo.otherStreamsTotalFlowRate += BigInt(
+					ts.currentFlowRate,
+				);
+			}
+		}
+
+		setInfo(_streamInfo);
+	}, [balance?.value, donation.project.anchorContracts, tokenStream]);
+
 	return (
 		<Wrapper>
 			<Flex $flexDirection='column' gap='8px'>

From 12a4738ab06bf5ffb8ae729d24638be0a71648c6 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 16:38:21 +0330
Subject: [PATCH 21/47] disable on zero percentage

---
 .../donationsTab/recurringTab/ModifyStreamModal.tsx            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 6b7e94d765..0c1cc561fc 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -273,7 +273,8 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 					disabled={
 						balance?.value === undefined ||
 						balance?.value === 0n ||
-						isTotalStreamExceed
+						isTotalStreamExceed ||
+						percentage === 0
 					}
 				/>
 			</Flex>

From 5651922847dee678a43ca3a7c06b2ebe0ae47d14 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 16:50:58 +0330
Subject: [PATCH 22/47] dont manipulate percentage if it is already set

---
 .../donationsTab/recurringTab/ModifyStreamModal.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 0c1cc561fc..d374a7a79e 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -106,7 +106,13 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 		: brandColors.giv;
 
 	useEffect(() => {
-		if (!tokenStream || tokenStream.length === 0 || !balance?.value) return;
+		if (
+			!tokenStream ||
+			tokenStream.length === 0 ||
+			!balance?.value ||
+			percentage > 0 // don't manipulate percentage if it's already set
+		)
+			return;
 		const _streamInfo: IGeneralInfo = {
 			otherStreamsTotalFlowRate: 0n,
 		};

From d542d330a2a25ad6287be1b2b46f024b51955a10 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 16:57:07 +0330
Subject: [PATCH 23/47] update styles

---
 .../recurringTab/ModifyStreamModal.tsx        | 216 +++++++++---------
 1 file changed, 110 insertions(+), 106 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index d374a7a79e..77f43acc48 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -141,107 +141,106 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	}, [balance?.value, donation.project.anchorContracts, tokenStream]);
 
 	return (
-		<Wrapper>
-			<Flex $flexDirection='column' gap='8px'>
-				<Flex gap='8px' $alignItems='center'>
-					<Caption $medium>
-						{formatMessage({ id: 'label.stream_balance' })}
-					</Caption>
-					<IconWithTooltip
-						icon={<IconHelpFilled16 />}
-						direction='right'
-						align='bottom'
-					>
-						<FlowRateTooltip>
-							{formatMessage({
-								id: 'tooltip.flowrate',
-							})}
-						</FlowRateTooltip>
-					</IconWithTooltip>
-				</Flex>
-				<TokenInfoWrapper>
-					<TokenSymbol gap='8px' $alignItems='center'>
-						<TokenIcon
-							symbol={superToken?.underlyingToken.symbol}
-							size={24}
-						/>
-						<B>{superToken?.underlyingToken.symbol}</B>
-					</TokenSymbol>
-					<TokenBalance>
-						{limitFraction(
-							formatUnits(
-								balance?.value || 0n,
-								balance?.decimals || 18,
-							),
-						)}
-						&nbsp;
-						{superToken?.symbol}
-					</TokenBalance>
-				</TokenInfoWrapper>
-				<Flex $flexDirection='column' gap='8px' $alignItems='stretch'>
-					<Caption>
+		<Wrapper $flexDirection='column' gap='8px'>
+			<Flex gap='8px' $alignItems='center'>
+				<Caption $medium>
+					{formatMessage({ id: 'label.stream_balance' })}
+				</Caption>
+				<IconWithTooltip
+					icon={<IconHelpFilled16 />}
+					direction='right'
+					align='bottom'
+				>
+					<FlowRateTooltip>
 						{formatMessage({
-							id: 'label.amount_to_donate_monthly',
+							id: 'tooltip.flowrate',
 						})}
-					</Caption>
-					<SliderWrapper>
-						<StyledSlider
-							min={0}
-							max={100}
-							step={0.1}
-							styles={{
-								rail: { backgroundColor: sliderColor[200] },
-								track: {
-									backgroundColor: sliderColor[500],
-								},
-								handle: {
-									backgroundColor: sliderColor[500],
-									border: `3px solid ${sliderColor[200]}`,
-									opacity: 1,
-								},
-							}}
-							onChange={(value: any) => {
-								const _value = Array.isArray(value)
-									? value[0]
-									: value;
-								setPercentage(mapValue(_value));
-							}}
-							value={mapValueInverse(percentage)}
-						/>
-					</SliderWrapper>
-					<Flex $justifyContent='space-between'>
-						<Flex gap='4px'>
-							<Caption>
-								{formatMessage({
-									id: 'label.donating_to',
-								})}
-							</Caption>
-							<Caption $medium>{donation.project.title}</Caption>
-						</Flex>
-						<Flex gap='4px'>
-							<Caption $medium>
-								{balance?.value !== 0n && percentage !== 0
-									? limitFraction(
-											formatUnits(
-												totalPerMonth,
-												superToken?.decimals || 18,
-											),
-										)
-									: 0}
-							</Caption>
-							<Caption $medium>{superToken?.symbol}</Caption>
-							<Caption>
-								{formatMessage({ id: 'label.per_month' })}
-							</Caption>
-						</Flex>
+					</FlowRateTooltip>
+				</IconWithTooltip>
+			</Flex>
+			<TokenInfoWrapper>
+				<TokenSymbol gap='8px' $alignItems='center'>
+					<TokenIcon
+						symbol={superToken?.underlyingToken.symbol}
+						size={24}
+					/>
+					<B>{superToken?.underlyingToken.symbol}</B>
+				</TokenSymbol>
+				<TokenBalance>
+					{limitFraction(
+						formatUnits(
+							balance?.value || 0n,
+							balance?.decimals || 18,
+						),
+					)}
+					&nbsp;
+					{superToken?.symbol}
+				</TokenBalance>
+			</TokenInfoWrapper>
+			<Flex $flexDirection='column' gap='8px' $alignItems='stretch'>
+				<Caption>
+					{formatMessage({
+						id: 'label.amount_to_donate_monthly',
+					})}
+				</Caption>
+				<SliderWrapper>
+					<StyledSlider
+						min={0}
+						max={100}
+						step={0.1}
+						styles={{
+							rail: { backgroundColor: sliderColor[200] },
+							track: {
+								backgroundColor: sliderColor[500],
+							},
+							handle: {
+								backgroundColor: sliderColor[500],
+								border: `3px solid ${sliderColor[200]}`,
+								opacity: 1,
+							},
+						}}
+						onChange={(value: any) => {
+							const _value = Array.isArray(value)
+								? value[0]
+								: value;
+							setPercentage(mapValue(_value));
+						}}
+						value={mapValueInverse(percentage)}
+					/>
+				</SliderWrapper>
+				<Flex $justifyContent='space-between'>
+					<Flex gap='4px'>
+						<Caption>
+							{formatMessage({
+								id: 'label.donating_to',
+							})}
+						</Caption>
+						<Caption $medium>{donation.project.title}</Caption>
 					</Flex>
+					<Flex gap='4px'>
+						<Caption $medium>
+							{balance?.value !== 0n && percentage !== 0
+								? limitFraction(
+										formatUnits(
+											totalPerMonth,
+											superToken?.decimals || 18,
+										),
+									)
+								: 0}
+						</Caption>
+						<Caption $medium>{superToken?.symbol}</Caption>
+						<Caption>
+							{formatMessage({ id: 'label.per_month' })}
+						</Caption>
+					</Flex>
+				</Flex>
+				<StreamInfo gap='16px'>
 					<Flex $justifyContent='space-between' gap='4px'>
 						<Caption>
 							{formatMessage({
 								id: 'label.stream_balance_runs_out_in',
 							})}
 						</Caption>
-
 						<Flex gap='4px'>
 							<Caption $medium>
 								{streamRunOutInMonth.toString()}
@@ -268,22 +267,22 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 							)}
 						</OtherStreamsInfo>
 					)}
-					<InlineToast
-						type={EToastType.Info}
-						message='Modifying your active recurring donations will affect when your stream balance runs out.'
-					/>
-				</Flex>
-				<ActionButton
-					label={formatMessage({ id: 'label.confirm' })}
-					onClick={() => {}}
-					disabled={
-						balance?.value === undefined ||
-						balance?.value === 0n ||
-						isTotalStreamExceed ||
-						percentage === 0
-					}
+				</StreamInfo>
+				<InlineToast
+					type={EToastType.Info}
+					message='Modifying your active recurring donations will affect when your stream balance runs out.'
 				/>
 			</Flex>
+			<ActionButton
+				label={formatMessage({ id: 'label.confirm' })}
+				onClick={() => {}}
+				disabled={
+					balance?.value === undefined ||
+					balance?.value === 0n ||
+					isTotalStreamExceed ||
+					percentage === 0
+				}
+			/>
 		</Wrapper>
 	);
 };
@@ -335,3 +334,8 @@ const OtherStreamsInfo = styled(Caption)`
 const ActionButton = styled(Button)`
 	width: 100%;
 `;
+
+const StreamInfo = styled(Flex)`
+	flex-direction: column;
+	margin-top: 16px;
+`;

From af9daaf998909ed2e1a932552990f06b5389dd37 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Mon, 18 Mar 2024 17:04:25 +0330
Subject: [PATCH 24/47] add superfluid logo

---
 .../recurringTab/ModifyStreamModal.tsx          | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
index 77f43acc48..b0aef90c7c 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
@@ -5,6 +5,7 @@ import {
 	Flex,
 	IconDonation32,
 	IconHelpFilled16,
+	P,
 	brandColors,
 	mediaQueries,
 	neutralColors,
@@ -17,6 +18,7 @@ import { useAccount, useBalance } from 'wagmi';
 import { formatUnits } from 'viem';
 import Slider from 'rc-slider';
 import BigNumber from 'bignumber.js';
+import Image from 'next/image';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
@@ -283,6 +285,15 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 					percentage === 0
 				}
 			/>
+			<SuperfluidLogoContainer gap='16px'>
+				<P>{formatMessage({ id: 'label.streams_powered_by' })}</P>
+				<Image
+					src='/images/logo/superfluid-logo.svg'
+					width={120}
+					height={30}
+					alt='Superfluid logo'
+				/>
+			</SuperfluidLogoContainer>
 		</Wrapper>
 	);
 };
@@ -296,7 +307,7 @@ const Wrapper = styled(Flex)`
 	width: 100%;
 	padding: 16px 24px 24px 24px;
 	${mediaQueries.tablet} {
-		width: 630px;
+		width: 430px;
 	}
 `;
 
@@ -339,3 +350,7 @@ const StreamInfo = styled(Flex)`
 	flex-direction: column;
 	margin-top: 16px;
 `;
+
+const SuperfluidLogoContainer = styled(Flex)`
+	margin-top: 32px;
+`;

From db4d517e9d39e458f0c805f5b18a2efdd2ff2758 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 14:01:59 +0330
Subject: [PATCH 25/47] move to folder

---
 .../ModifyStreamInnerModal.tsx}               | 67 ++++++-------------
 .../ModifyStreamModal/ModifyStreamModal.tsx   | 62 +++++++++++++++++
 .../UpdateStreamInnerModal.tsx                |  5 ++
 .../recurringTab/StreamActionButton.tsx       |  2 +-
 4 files changed, 88 insertions(+), 48 deletions(-)
 rename src/components/views/userProfile/donationsTab/recurringTab/{ModifyStreamModal.tsx => ModifyStreamModal/ModifyStreamInnerModal.tsx} (83%)
 create mode 100644 src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
 create mode 100644 src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
similarity index 83%
rename from src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
rename to src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
index b0aef90c7c..20bc5bd73b 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
@@ -3,7 +3,6 @@ import {
 	Button,
 	Caption,
 	Flex,
-	IconDonation32,
 	IconHelpFilled16,
 	P,
 	brandColors,
@@ -11,7 +10,7 @@ import {
 	neutralColors,
 	semanticColors,
 } from '@giveth/ui-design-system';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { useAccount, useBalance } from 'wagmi';
@@ -19,55 +18,37 @@ import { formatUnits } from 'viem';
 import Slider from 'rc-slider';
 import BigNumber from 'bignumber.js';
 import Image from 'next/image';
-import { Modal } from '@/components/modals/Modal';
-import { useModalAnimation } from '@/hooks/useModalAnimation';
-import { IModal } from '@/types/common';
-import { IWalletRecurringDonation } from '@/apollo/types/types';
 import { FlowRateTooltip } from '@/components/GIVeconomyPages/GIVstream.sc';
 import { IconWithTooltip } from '@/components/IconWithToolTip';
 import { TokenIcon } from '@/components/views/donate/TokenIcon/TokenIcon';
-import config from '@/configuration';
 import { limitFraction } from '@/helpers/number';
 import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
 import {
 	mapValue,
 	mapValueInverse,
 } from '@/components/views/donate/RecurringDonationCard';
-import { useUserStreams } from '@/hooks/useUserStreams';
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
-import { ISuperfluidStream } from '@/types/superFluid';
+import { ISuperfluidStream, IToken } from '@/types/superFluid';
+import { ITokenStreams } from '@/context/donate.context';
+import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
+
+interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
+	setStep: (step: EDonationSteps) => void;
+	superToken: IToken;
+	tokenStreams: ITokenStreams;
+}
 
 interface IGeneralInfo {
 	projectStream?: ISuperfluidStream;
 	otherStreamsTotalFlowRate: bigint;
 }
 
-interface IModifyStreamModalProps extends IModal {
-	donation: IWalletRecurringDonation;
-}
-
-export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
-	...props
+export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
+	donation,
+	superToken,
+	setStep,
+	tokenStreams,
 }) => {
-	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
-	const { formatMessage } = useIntl();
-
-	return (
-		<Modal
-			closeModal={closeModal}
-			isAnimating={isAnimating}
-			headerTitle={formatMessage({
-				id: 'label.modify_recurring_donation_amount',
-			})}
-			headerTitlePosition='left'
-			headerIcon={<IconDonation32 />}
-		>
-			<ModifyStreamInnerModal {...props} />
-		</Modal>
-	);
-};
-
-const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	const [percentage, setPercentage] = useState(0);
 	const [info, setInfo] = useState<IGeneralInfo>({
 		otherStreamsTotalFlowRate: 0n,
@@ -75,15 +56,8 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 	const { formatMessage } = useIntl();
 	const { address } = useAccount();
 
-	const superToken = useMemo(
-		() =>
-			config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
-				s => s.underlyingToken.symbol === donation.currency,
-			),
-		[donation.currency],
-	);
 	const { data: balance } = useBalance({
-		token: superToken?.id,
+		token: superToken.id,
 		address,
 	});
 	const totalPerMonth =
@@ -93,8 +67,7 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 				.toFixed(0),
 		) / 100n;
 	const totalPerSec = totalPerMonth / ONE_MONTH_SECONDS;
-	const tokenStreams = useUserStreams();
-	const tokenStream = tokenStreams[superToken?.id || ''];
+	const tokenStream = tokenStreams[superToken.id || ''];
 
 	const totalStreamPerSec = totalPerSec + info.otherStreamsTotalFlowRate;
 	const streamRunOutInMonth =
@@ -163,10 +136,10 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 			<TokenInfoWrapper>
 				<TokenSymbol gap='8px' $alignItems='center'>
 					<TokenIcon
-						symbol={superToken?.underlyingToken.symbol}
+						symbol={superToken.underlyingToken?.symbol}
 						size={24}
 					/>
-					<B>{superToken?.underlyingToken.symbol}</B>
+					<B>{superToken.underlyingToken?.symbol}</B>
 				</TokenSymbol>
 				<TokenBalance>
 					{limitFraction(
@@ -277,7 +250,7 @@ const ModifyStreamInnerModal: FC<IModifyStreamModalProps> = ({ donation }) => {
 			</Flex>
 			<ActionButton
 				label={formatMessage({ id: 'label.confirm' })}
-				onClick={() => {}}
+				onClick={() => setStep(EDonationSteps.CONFIRM)}
 				disabled={
 					balance?.value === undefined ||
 					balance?.value === 0n ||
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
new file mode 100644
index 0000000000..745dcc8136
--- /dev/null
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
@@ -0,0 +1,62 @@
+import { IconDonation32 } from '@giveth/ui-design-system';
+import { FC, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Modal } from '@/components/modals/Modal';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+import { IModal } from '@/types/common';
+import { IWalletRecurringDonation } from '@/apollo/types/types';
+import config from '@/configuration';
+import { useUserStreams } from '@/hooks/useUserStreams';
+import { ModifyStreamInnerModal } from './ModifyStreamInnerModal';
+import { UpdateStreamInnerModal } from './UpdateStreamInnerModal';
+
+export enum EDonationSteps {
+	MODIFY,
+	CONFIRM,
+	DONATING,
+	SUCCESS,
+}
+
+export interface IModifyStreamModalProps extends IModal {
+	donation: IWalletRecurringDonation;
+}
+
+export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
+	...props
+}) => {
+	const [step, setStep] = useState(EDonationSteps.MODIFY);
+	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
+	const { formatMessage } = useIntl();
+	const tokenStreams = useUserStreams();
+
+	const superToken = useMemo(
+		() =>
+			config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
+				s => s.underlyingToken.symbol === props.donation.currency,
+			),
+		[props.donation.currency],
+	);
+
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={isAnimating}
+			headerTitle={formatMessage({
+				id: 'label.modify_recurring_donation_amount',
+			})}
+			headerTitlePosition='left'
+			headerIcon={<IconDonation32 />}
+		>
+			{step === EDonationSteps.MODIFY ? (
+				<ModifyStreamInnerModal
+					{...props}
+					setStep={setStep}
+					tokenStreams={tokenStreams}
+					superToken={superToken!}
+				/>
+			) : (
+				<UpdateStreamInnerModal />
+			)}
+		</Modal>
+	);
+};
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
new file mode 100644
index 0000000000..e7aaf0ae75
--- /dev/null
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const UpdateStreamInnerModal = () => {
+	return <div>UpdateStreamInnerModal</div>;
+};
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index c2728e1f79..80b6d0e094 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -9,7 +9,7 @@ import { type FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Dropdown, IOption } from '@/components/Dropdown';
 import { capitalizeAllWords } from '@/lib/helpers';
-import { ModifyStreamModal } from './ModifyStreamModal';
+import { ModifyStreamModal } from './ModifyStreamModal/ModifyStreamModal';
 import { IWalletRecurringDonation } from '@/apollo/types/types';
 
 interface IStreamActionButtonProps {

From 70fb8b756ff1a6916bfa296ca877f8fd101b9f84 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 14:27:19 +0330
Subject: [PATCH 26/47] init UpdateStreamInnerModal

---
 .../UpdateStreamInnerModal.tsx                | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index e7aaf0ae75..dd9e5ed219 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -1,5 +1,42 @@
-import React from 'react';
+import React, { FC } from 'react';
+import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
+import { Wrapper } from './ModifyStreamInnerModal';
+import { Item } from '@/components/views/donate/RecurringDonationModal/Item';
+import { IToken } from '@/types/superFluid';
+import { RunOutInfo } from '@/components/views/donate/RunOutInfo';
+import { useTokenPrice } from '@/hooks/useTokenPrice';
 
-export const UpdateStreamInnerModal = () => {
-	return <div>UpdateStreamInnerModal</div>;
+interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
+	step: EDonationSteps;
+	setStep: (step: EDonationSteps) => void;
+	token: IToken;
+	amount: bigint;
+	totalPerMonth: bigint;
+}
+
+export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
+	donation,
+	step,
+	setStep,
+	token,
+	amount,
+	totalPerMonth,
+}) => {
+	const tokenPrice = useTokenPrice(token);
+	return (
+		<Wrapper>
+			<Item
+				title={`Donate to ${donation.project.title}`}
+				subtext={'per month'}
+				amount={amount}
+				price={tokenPrice}
+				token={token}
+			/>
+			<RunOutInfo
+				amount={amount}
+				totalPerMonth={totalPerMonth}
+				symbol={token.symbol || ''}
+			/>
+		</Wrapper>
+	);
 };

From f0d5479aff9989b242dbd31165c87042e292198c Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 14:27:33 +0330
Subject: [PATCH 27/47] pass modifyInfo

---
 .../ModifyStreamInnerModal.tsx                | 21 +++++++++++++++----
 .../ModifyStreamModal/ModifyStreamModal.tsx   | 18 +++++++++++++++-
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
index 20bc5bd73b..381c468463 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
@@ -10,7 +10,7 @@ import {
 	neutralColors,
 	semanticColors,
 } from '@giveth/ui-design-system';
-import { FC, useEffect, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { useAccount, useBalance } from 'wagmi';
@@ -30,12 +30,17 @@ import {
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
 import { ISuperfluidStream, IToken } from '@/types/superFluid';
 import { ITokenStreams } from '@/context/donate.context';
-import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
+import {
+	EDonationSteps,
+	IModifyDonationInfo,
+	IModifyStreamModalProps,
+} from './ModifyStreamModal';
 
 interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
 	setStep: (step: EDonationSteps) => void;
 	superToken: IToken;
 	tokenStreams: ITokenStreams;
+	setModifyInfo: Dispatch<SetStateAction<IModifyDonationInfo | undefined>>;
 }
 
 interface IGeneralInfo {
@@ -48,6 +53,7 @@ export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	superToken,
 	setStep,
 	tokenStreams,
+	setModifyInfo,
 }) => {
 	const [percentage, setPercentage] = useState(0);
 	const [info, setInfo] = useState<IGeneralInfo>({
@@ -250,7 +256,14 @@ export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 			</Flex>
 			<ActionButton
 				label={formatMessage({ id: 'label.confirm' })}
-				onClick={() => setStep(EDonationSteps.CONFIRM)}
+				onClick={() => {
+					setModifyInfo({
+						amount: totalPerMonth,
+						totalPerMonth,
+						token: superToken,
+					});
+					setStep(EDonationSteps.CONFIRM);
+				}}
 				disabled={
 					balance?.value === undefined ||
 					balance?.value === 0n ||
@@ -271,7 +284,7 @@ export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	);
 };
 
-const Wrapper = styled(Flex)`
+export const Wrapper = styled(Flex)`
 	text-align: left;
 	flex-direction: column;
 	align-items: stretch;
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
index 745dcc8136..dbd928e963 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
@@ -9,6 +9,7 @@ import config from '@/configuration';
 import { useUserStreams } from '@/hooks/useUserStreams';
 import { ModifyStreamInnerModal } from './ModifyStreamInnerModal';
 import { UpdateStreamInnerModal } from './UpdateStreamInnerModal';
+import { IToken } from '@/types/superFluid';
 
 export enum EDonationSteps {
 	MODIFY,
@@ -17,6 +18,12 @@ export enum EDonationSteps {
 	SUCCESS,
 }
 
+export interface IModifyDonationInfo {
+	amount: bigint;
+	totalPerMonth: bigint;
+	token: IToken;
+}
+
 export interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
 }
@@ -25,6 +32,7 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 	...props
 }) => {
 	const [step, setStep] = useState(EDonationSteps.MODIFY);
+	const [modifyInfo, setModifyInfo] = useState<IModifyDonationInfo>();
 	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
 	const { formatMessage } = useIntl();
 	const tokenStreams = useUserStreams();
@@ -53,9 +61,17 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 					setStep={setStep}
 					tokenStreams={tokenStreams}
 					superToken={superToken!}
+					setModifyInfo={setModifyInfo}
 				/>
 			) : (
-				<UpdateStreamInnerModal />
+				<UpdateStreamInnerModal
+					step={step}
+					setStep={setStep}
+					amount={modifyInfo?.amount!}
+					totalPerMonth={modifyInfo?.totalPerMonth!}
+					token={modifyInfo?.token!}
+					{...props}
+				/>
 			)}
 		</Modal>
 	);

From 0861e382179dc99073433b05e4155898a05ca902 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 14:32:28 +0330
Subject: [PATCH 28/47] add confirm button

---
 .../ModifyStreamModal/ModifyStreamInnerModal.tsx       |  2 +-
 .../ModifyStreamModal/UpdateStreamInnerModal.tsx       | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
index 381c468463..a6c93df8e9 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
@@ -328,7 +328,7 @@ const OtherStreamsInfo = styled(Caption)`
 	background: var(--Neutral-Gray-200, #f7f7f9);
 `;
 
-const ActionButton = styled(Button)`
+export const ActionButton = styled(Button)`
 	width: 100%;
 `;
 
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index dd9e5ed219..4501df5aec 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
+import { useIntl } from 'react-intl';
 import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
-import { Wrapper } from './ModifyStreamInnerModal';
+import { ActionButton, Wrapper } from './ModifyStreamInnerModal';
 import { Item } from '@/components/views/donate/RecurringDonationModal/Item';
 import { IToken } from '@/types/superFluid';
 import { RunOutInfo } from '@/components/views/donate/RunOutInfo';
@@ -22,6 +23,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	amount,
 	totalPerMonth,
 }) => {
+	const { formatMessage } = useIntl();
 	const tokenPrice = useTokenPrice(token);
 	return (
 		<Wrapper>
@@ -37,6 +39,12 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 				totalPerMonth={totalPerMonth}
 				symbol={token.symbol || ''}
 			/>
+			<ActionButton
+				label={formatMessage({ id: 'label.confirm' })}
+				onClick={() => {
+					setStep(EDonationSteps.DONATING);
+				}}
+			/>
 		</Wrapper>
 	);
 };

From 8deb60a4dcf329c0b073787ec565b30a92425dcb Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 14:45:58 +0330
Subject: [PATCH 29/47] add anonymous to IWalletRecurringDonation

---
 src/apollo/types/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/apollo/types/types.ts b/src/apollo/types/types.ts
index e755b564b3..63723a4a08 100644
--- a/src/apollo/types/types.ts
+++ b/src/apollo/types/types.ts
@@ -282,6 +282,7 @@ export interface IWalletRecurringDonation {
 	totalDonated: string;
 	networkId: number;
 	finished: boolean;
+	anonymous: boolean;
 }
 
 export interface IMediumBlogPost {

From cd7104c9ca21984f44844c19ac51470069ec00e3 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 15:27:51 +0330
Subject: [PATCH 30/47] update RunOutInfo

---
 src/components/views/donate/RunOutInfo.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/views/donate/RunOutInfo.tsx b/src/components/views/donate/RunOutInfo.tsx
index ec4424bc41..9af7a0384e 100644
--- a/src/components/views/donate/RunOutInfo.tsx
+++ b/src/components/views/donate/RunOutInfo.tsx
@@ -6,22 +6,23 @@ import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
 import { smallFormatDate } from '@/lib/helpers';
 
 interface IRunOutInfoProps {
-	amount: bigint;
-	totalPerMonth: bigint;
+	superTokenBalance: bigint;
+	streamFlowRatePerMonth: bigint;
 	symbol: string;
 }
 
 export const RunOutInfo: FC<IRunOutInfoProps> = ({
-	amount,
-	totalPerMonth,
+	superTokenBalance,
+	streamFlowRatePerMonth,
 	symbol,
 }) => {
 	const { formatMessage } = useIntl();
-	const totalPerSecond = totalPerMonth / ONE_MONTH_SECONDS;
+	const totalPerSecond = streamFlowRatePerMonth / ONE_MONTH_SECONDS;
 	const secondsUntilRunOut =
-		totalPerSecond > 0 ? amount / totalPerSecond : 0n;
+		totalPerSecond > 0 ? superTokenBalance / totalPerSecond : 0n;
 	const date = new Date();
 	date.setSeconds(date.getSeconds() + Number(secondsUntilRunOut.toString()));
+
 	return (
 		<RunOutSection>
 			<P>

From 58056f26157ac05d958bfcf4f6683e42e4b8ac8b Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Wed, 20 Mar 2024 15:28:49 +0330
Subject: [PATCH 31/47] add comment

---
 .../RecurringDonationModal.tsx                |  4 +--
 .../ModifyStreamInnerModal.tsx                | 33 ++++++++++++++-----
 .../ModifyStreamModal/ModifyStreamModal.tsx   | 10 +++---
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/views/donate/RecurringDonationModal/RecurringDonationModal.tsx b/src/components/views/donate/RecurringDonationModal/RecurringDonationModal.tsx
index 86d1c137c0..0a96999c3d 100644
--- a/src/components/views/donate/RecurringDonationModal/RecurringDonationModal.tsx
+++ b/src/components/views/donate/RecurringDonationModal/RecurringDonationModal.tsx
@@ -442,8 +442,8 @@ const RecurringDonationInnerModal: FC<IRecurringDonationInnerModalProps> = ({
 				)}
 			</Items>
 			<RunOutInfo
-				amount={amount}
-				totalPerMonth={totalPerMonth}
+				superTokenBalance={amount}
+				streamFlowRatePerMonth={totalPerMonth}
 				symbol={selectedToken?.token.symbol || ''}
 			/>
 			<ActionButton
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
index a6c93df8e9..0e83a86301 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamInnerModal.tsx
@@ -62,30 +62,46 @@ export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	const { formatMessage } = useIntl();
 	const { address } = useAccount();
 
+	// Get the balance of the super token
 	const { data: balance } = useBalance({
 		token: superToken.id,
 		address,
 	});
-	const totalPerMonth =
+
+	// Calculate the total amount to donate per month
+	const flowRatePerMonth =
 		BigInt(
 			new BigNumber((balance?.value || 0n).toString())
 				.multipliedBy(percentage)
 				.toFixed(0),
 		) / 100n;
-	const totalPerSec = totalPerMonth / ONE_MONTH_SECONDS;
-	const tokenStream = tokenStreams[superToken.id || ''];
 
-	const totalStreamPerSec = totalPerSec + info.otherStreamsTotalFlowRate;
+	// Calculate the flow rate per second
+	const flowRatePerSec = flowRatePerMonth / ONE_MONTH_SECONDS;
+
+	// Calculate the total stream per second
+	const totalStreamPerSec = flowRatePerSec + info.otherStreamsTotalFlowRate;
+
+	// Calculate the total stream per month
+	const totalStreamPerMonth = totalStreamPerSec * ONE_MONTH_SECONDS;
+
+	// Calculate the stream run out in month
 	const streamRunOutInMonth =
 		totalStreamPerSec > 0
-			? (balance?.value || 0n) / totalStreamPerSec / ONE_MONTH_SECONDS
+			? (balance?.value || 0n) / totalStreamPerMonth
 			: 0n;
+
+	// Check if the total stream exceed
 	const isTotalStreamExceed =
 		streamRunOutInMonth < 1n && totalStreamPerSec > 0;
+
+	// Calculate the color of the slider
 	const sliderColor = isTotalStreamExceed
 		? semanticColors.punch
 		: brandColors.giv;
 
+	const tokenStream = tokenStreams[superToken.id || ''];
+
 	useEffect(() => {
 		if (
 			!tokenStream ||
@@ -203,7 +219,7 @@ export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 							{balance?.value !== 0n && percentage !== 0
 								? limitFraction(
 										formatUnits(
-											totalPerMonth,
+											flowRatePerMonth,
 											superToken?.decimals || 18,
 										),
 									)
@@ -258,8 +274,9 @@ export const ModifyStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 				label={formatMessage({ id: 'label.confirm' })}
 				onClick={() => {
 					setModifyInfo({
-						amount: totalPerMonth,
-						totalPerMonth,
+						flowRatePerMonth: flowRatePerMonth,
+						streamFlowRatePerMonth: totalStreamPerMonth,
+						superTokenBalance: balance?.value!,
 						token: superToken,
 					});
 					setStep(EDonationSteps.CONFIRM);
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
index dbd928e963..ba4672fe2e 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
@@ -19,8 +19,9 @@ export enum EDonationSteps {
 }
 
 export interface IModifyDonationInfo {
-	amount: bigint;
-	totalPerMonth: bigint;
+	superTokenBalance: bigint;
+	flowRatePerMonth: bigint;
+	streamFlowRatePerMonth: bigint;
 	token: IToken;
 }
 
@@ -67,8 +68,9 @@ export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
 				<UpdateStreamInnerModal
 					step={step}
 					setStep={setStep}
-					amount={modifyInfo?.amount!}
-					totalPerMonth={modifyInfo?.totalPerMonth!}
+					superTokenBalance={modifyInfo?.superTokenBalance!}
+					flowRatePerMonth={modifyInfo?.flowRatePerMonth!}
+					streamFlowRatePerMonth={modifyInfo?.streamFlowRatePerMonth!}
 					token={modifyInfo?.token!}
 					{...props}
 				/>

From b914608c40766706315bb161521d0cd500bbae02 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 12:25:54 +0330
Subject: [PATCH 32/47] add onDonate

---
 .../UpdateStreamInnerModal.tsx                | 108 ++++++++++++++++--
 1 file changed, 101 insertions(+), 7 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index 4501df5aec..bef5090622 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -1,18 +1,28 @@
 import React, { FC } from 'react';
 import { useIntl } from 'react-intl';
+import { useAccount } from 'wagmi';
+import { Framework } from '@superfluid-finance/sdk-core';
+
 import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
 import { ActionButton, Wrapper } from './ModifyStreamInnerModal';
 import { Item } from '@/components/views/donate/RecurringDonationModal/Item';
 import { IToken } from '@/types/superFluid';
 import { RunOutInfo } from '@/components/views/donate/RunOutInfo';
 import { useTokenPrice } from '@/hooks/useTokenPrice';
+import config, { isProduction } from '@/configuration';
+import { getEthersProvider, getEthersSigner } from '@/helpers/ethers';
+import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
+import { showToastError } from '@/lib/helpers';
+import { updateRecurringDonation } from '@/services/donation';
+import { wagmiConfig } from '@/wagmiConfigs';
 
 interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
 	step: EDonationSteps;
 	setStep: (step: EDonationSteps) => void;
 	token: IToken;
-	amount: bigint;
-	totalPerMonth: bigint;
+	superTokenBalance: bigint;
+	flowRatePerMonth: bigint;
+	streamFlowRatePerMonth: bigint;
 }
 
 export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
@@ -20,23 +30,107 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	step,
 	setStep,
 	token,
-	amount,
-	totalPerMonth,
+	superTokenBalance,
+	flowRatePerMonth,
+	streamFlowRatePerMonth,
 }) => {
 	const { formatMessage } = useIntl();
 	const tokenPrice = useTokenPrice(token);
+	const { address } = useAccount();
+
+	const onDonate = async () => {
+		setStep(EDonationSteps.DONATING);
+		try {
+			const projectAnchorContract =
+				donation.project.anchorContracts[0]?.address;
+			if (!projectAnchorContract) {
+				throw new Error('Project anchor address not found');
+			}
+			if (!address || !token) {
+				throw new Error('address not found');
+			}
+			const provider = await getEthersProvider(wagmiConfig);
+			const signer = await getEthersSigner(wagmiConfig);
+
+			if (!provider || !signer)
+				throw new Error('Provider or signer not found');
+
+			const _options = {
+				chainId: config.OPTIMISM_CONFIG.id,
+				provider: provider,
+				resolverAddress: isProduction
+					? undefined
+					: '0x554c06487bEc8c890A0345eb05a5292C1b1017Bd',
+			};
+			const sf = await Framework.create(_options);
+
+			// EThx is not a Wrapper Super Token and should load separately
+			let superToken;
+			if (token.symbol === 'ETHx') {
+				superToken = await sf.loadNativeAssetSuperToken(token.id);
+			} else {
+				superToken = await sf.loadWrapperSuperToken(token.id);
+			}
+
+			const _flowRatePerSec = flowRatePerMonth / ONE_MONTH_SECONDS;
+
+			const options = {
+				sender: address,
+				receiver: projectAnchorContract,
+				flowRate: _flowRatePerSec.toString(),
+			};
+
+			let projectFlowOp = superToken.updateFlow(options);
+
+			const tx = await projectFlowOp.exec(signer);
+
+			let donationId = 0;
+			// saving project donation to backend
+			try {
+				const projectDonationInfo = {
+					projectId: +donation.project.id,
+					anonymous: donation.anonymous,
+					chainId: config.OPTIMISM_NETWORK_NUMBER,
+					txHash: tx.hash,
+					flowRate: _flowRatePerSec,
+					superToken: token,
+				};
+				console.log('Start Update Project Donation Info');
+				const projectBackendRes =
+					await updateRecurringDonation(projectDonationInfo);
+				console.log('Project Donation Update Info', projectBackendRes);
+			} catch (error) {
+				console.log('error', error);
+			}
+
+			const res = await tx.wait();
+			if (!res.status) {
+				throw new Error('Transaction failed');
+			}
+			setStep(EDonationSteps.SUCCESS);
+			if (tx.hash) {
+			}
+		} catch (error: any) {
+			setStep(EDonationSteps.CONFIRM);
+			if (error?.code !== 'ACTION_REJECTED') {
+				showToastError(error);
+			}
+			console.log('Error on recurring donation', { error });
+		}
+	};
+
 	return (
 		<Wrapper>
 			<Item
 				title={`Donate to ${donation.project.title}`}
 				subtext={'per month'}
-				amount={amount}
+				amount={flowRatePerMonth}
 				price={tokenPrice}
 				token={token}
 			/>
 			<RunOutInfo
-				amount={amount}
-				totalPerMonth={totalPerMonth}
+				superTokenBalance={superTokenBalance}
+				streamFlowRatePerMonth={streamFlowRatePerMonth}
 				symbol={token.symbol || ''}
 			/>
 			<ActionButton

From 4e8b360a7ccd0ba7bc7e93faf864fa1529f33228 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 12:34:13 +0330
Subject: [PATCH 33/47] add buttons and toasts

---
 .../UpdateStreamInnerModal.tsx                | 43 ++++++++++++++++---
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index bef5090622..dc7deda57c 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -15,6 +15,7 @@ import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
 import { showToastError } from '@/lib/helpers';
 import { updateRecurringDonation } from '@/services/donation';
 import { wagmiConfig } from '@/wagmiConfigs';
+import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
 
 interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
 	step: EDonationSteps;
@@ -33,6 +34,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	superTokenBalance,
 	flowRatePerMonth,
 	streamFlowRatePerMonth,
+	setShowModal,
 }) => {
 	const { formatMessage } = useIntl();
 	const tokenPrice = useTokenPrice(token);
@@ -64,7 +66,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 			};
 			const sf = await Framework.create(_options);
 
-			// EThx is not a Wrapper Super Token and should load separately
+			// ETHx is not a Wrapper Super Token and should load separately
 			let superToken;
 			if (token.symbol === 'ETHx') {
 				superToken = await sf.loadNativeAssetSuperToken(token.id);
@@ -133,12 +135,39 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 				streamFlowRatePerMonth={streamFlowRatePerMonth}
 				symbol={token.symbol || ''}
 			/>
-			<ActionButton
-				label={formatMessage({ id: 'label.confirm' })}
-				onClick={() => {
-					setStep(EDonationSteps.DONATING);
-				}}
-			/>
+			{step === EDonationSteps.CONFIRM ? (
+				<ActionButton
+					label={formatMessage({ id: 'label.confirm' })}
+					onClick={() => {
+						onDonate();
+					}}
+				/>
+			) : step === EDonationSteps.DONATING ? (
+				<>
+					<ActionButton
+						label={formatMessage({ id: 'label.donating' })}
+						disabled={true}
+						loading={true}
+					/>
+					<InlineToast
+						type={EToastType.Info}
+						message='Your recurring donation to the Giveth community of Makers is being processed.'
+					/>
+				</>
+			) : step === EDonationSteps.SUCCESS ? (
+				<>
+					<ActionButton
+						label={formatMessage({ id: 'label.done' })}
+						onClick={() => {
+							setShowModal(false);
+						}}
+					/>
+					<InlineToast
+						type={EToastType.Success}
+						message='Your recurring donation to the Giveth community of Makers is now active!'
+					/>
+				</>
+			) : null}
 		</Wrapper>
 	);
 };

From 675ee9778a02197d50b4c224c01ffea09512c318 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 12:44:30 +0330
Subject: [PATCH 34/47] add view on block explorer

---
 .../UpdateStreamInnerModal.tsx                | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index dc7deda57c..ec06e7e291 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
 import { Framework } from '@superfluid-finance/sdk-core';
 
+import { GLink } from '@giveth/ui-design-system';
 import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
 import { ActionButton, Wrapper } from './ModifyStreamInnerModal';
 import { Item } from '@/components/views/donate/RecurringDonationModal/Item';
@@ -12,10 +13,11 @@ import { useTokenPrice } from '@/hooks/useTokenPrice';
 import config, { isProduction } from '@/configuration';
 import { getEthersProvider, getEthersSigner } from '@/helpers/ethers';
 import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
-import { showToastError } from '@/lib/helpers';
+import { formatTxLink, showToastError } from '@/lib/helpers';
 import { updateRecurringDonation } from '@/services/donation';
 import { wagmiConfig } from '@/wagmiConfigs';
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
+import { ChainType } from '@/types/config';
 
 interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
 	step: EDonationSteps;
@@ -36,6 +38,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	streamFlowRatePerMonth,
 	setShowModal,
 }) => {
+	const [tx, setTx] = useState('');
 	const { formatMessage } = useIntl();
 	const tokenPrice = useTokenPrice(token);
 	const { address } = useAccount();
@@ -85,6 +88,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 			let projectFlowOp = superToken.updateFlow(options);
 
 			const tx = await projectFlowOp.exec(signer);
+			setTx(tx.hash);
 
 			let donationId = 0;
 			// saving project donation to backend
@@ -153,6 +157,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 						type={EToastType.Info}
 						message='Your recurring donation to the Giveth community of Makers is being processed.'
 					/>
+					{tx && <TXLink tx={tx} />}
 				</>
 			) : step === EDonationSteps.SUCCESS ? (
 				<>
@@ -166,8 +171,31 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 						type={EToastType.Success}
 						message='Your recurring donation to the Giveth community of Makers is now active!'
 					/>
+					{tx && <TXLink tx={tx} />}
 				</>
 			) : null}
 		</Wrapper>
 	);
 };
+
+interface ITXLinkProps {
+	tx: string;
+}
+
+const TXLink: FC<ITXLinkProps> = ({ tx }) => {
+	const { formatMessage } = useIntl();
+	return (
+		<GLink
+			as='a'
+			href={formatTxLink({
+				txHash: tx,
+				chainType: ChainType.EVM,
+				networkId: config.OPTIMISM_NETWORK_NUMBER,
+			})}
+			target='_blank'
+			rel='noreferrer'
+		>
+			{formatMessage({ id: 'label.view_on_block_explorer' })}
+		</GLink>
+	);
+};

From a5056756fd2292890266a5517429e50a8b769d36 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 12:53:32 +0330
Subject: [PATCH 35/47] separate TXLink

---
 .../recurringTab/ModifyStreamModal/TXLink.tsx | 44 ++++++++++++++++
 .../UpdateStreamInnerModal.tsx                | 50 ++++++-------------
 2 files changed, 60 insertions(+), 34 deletions(-)
 create mode 100644 src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/TXLink.tsx

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/TXLink.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/TXLink.tsx
new file mode 100644
index 0000000000..53d7fa392a
--- /dev/null
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/TXLink.tsx
@@ -0,0 +1,44 @@
+import {
+	Flex,
+	GLink,
+	IconExternalLink16,
+	brandColors,
+} from '@giveth/ui-design-system';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { ChainType } from '@/types/config';
+import { formatTxLink } from '@/lib/helpers';
+import config from '@/configuration';
+
+interface ITXLinkProps {
+	tx: string;
+}
+
+export const TXLink: FC<ITXLinkProps> = ({ tx }) => {
+	const { formatMessage } = useIntl();
+	return (
+		<Wrapper gap='8px' $alignItems='center' $justifyContent='center'>
+			<GLink
+				as='a'
+				href={formatTxLink({
+					txHash: tx,
+					chainType: ChainType.EVM,
+					networkId: config.OPTIMISM_NETWORK_NUMBER,
+				})}
+				target='_blank'
+				rel='noreferrer'
+			>
+				{formatMessage({ id: 'label.view_on_block_explorer' })}
+			</GLink>
+			<IconExternalLink16 />
+		</Wrapper>
+	);
+};
+
+const Wrapper = styled(Flex)`
+	color: ${brandColors.pinky[500]};
+	:hover {
+		color: ${brandColors.pinky[700]};
+	}
+`;
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index ec06e7e291..4ba9c4e96f 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
 import { Framework } from '@superfluid-finance/sdk-core';
 
-import { GLink } from '@giveth/ui-design-system';
+import styled from 'styled-components';
 import { EDonationSteps, IModifyStreamModalProps } from './ModifyStreamModal';
 import { ActionButton, Wrapper } from './ModifyStreamInnerModal';
 import { Item } from '@/components/views/donate/RecurringDonationModal/Item';
@@ -13,11 +13,11 @@ import { useTokenPrice } from '@/hooks/useTokenPrice';
 import config, { isProduction } from '@/configuration';
 import { getEthersProvider, getEthersSigner } from '@/helpers/ethers';
 import { ONE_MONTH_SECONDS } from '@/lib/constants/constants';
-import { formatTxLink, showToastError } from '@/lib/helpers';
+import { showToastError } from '@/lib/helpers';
 import { updateRecurringDonation } from '@/services/donation';
 import { wagmiConfig } from '@/wagmiConfigs';
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
-import { ChainType } from '@/types/config';
+import { TXLink } from './TXLink';
 
 interface IModifyStreamInnerModalProps extends IModifyStreamModalProps {
 	step: EDonationSteps;
@@ -148,54 +148,36 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 				/>
 			) : step === EDonationSteps.DONATING ? (
 				<>
+					<StyledToast
+						type={EToastType.Info}
+						message='Your recurring donation to the Giveth community of Makers is being processed.'
+					/>
+					{tx && <TXLink tx={tx} />}
 					<ActionButton
 						label={formatMessage({ id: 'label.donating' })}
 						disabled={true}
 						loading={true}
 					/>
-					<InlineToast
-						type={EToastType.Info}
-						message='Your recurring donation to the Giveth community of Makers is being processed.'
-					/>
-					{tx && <TXLink tx={tx} />}
 				</>
 			) : step === EDonationSteps.SUCCESS ? (
 				<>
+					<StyledToast
+						type={EToastType.Success}
+						message='Your recurring donation to the Giveth community of Makers is now active!'
+					/>
+					{tx && <TXLink tx={tx} />}
 					<ActionButton
 						label={formatMessage({ id: 'label.done' })}
 						onClick={() => {
 							setShowModal(false);
 						}}
 					/>
-					<InlineToast
-						type={EToastType.Success}
-						message='Your recurring donation to the Giveth community of Makers is now active!'
-					/>
-					{tx && <TXLink tx={tx} />}
 				</>
 			) : null}
 		</Wrapper>
 	);
 };
 
-interface ITXLinkProps {
-	tx: string;
-}
-
-const TXLink: FC<ITXLinkProps> = ({ tx }) => {
-	const { formatMessage } = useIntl();
-	return (
-		<GLink
-			as='a'
-			href={formatTxLink({
-				txHash: tx,
-				chainType: ChainType.EVM,
-				networkId: config.OPTIMISM_NETWORK_NUMBER,
-			})}
-			target='_blank'
-			rel='noreferrer'
-		>
-			{formatMessage({ id: 'label.view_on_block_explorer' })}
-		</GLink>
-	);
-};
+const StyledToast = styled(InlineToast)`
+	margin: 0;
+`;

From e70f7ad5352bf7fe9d967588f001f49a690a0b26 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 13:02:57 +0330
Subject: [PATCH 36/47] add ability to return to modify step

---
 .../UpdateStreamInnerModal.tsx                | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index 4ba9c4e96f..ee6afe1eed 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -140,12 +140,17 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 				symbol={token.symbol || ''}
 			/>
 			{step === EDonationSteps.CONFIRM ? (
-				<ActionButton
-					label={formatMessage({ id: 'label.confirm' })}
-					onClick={() => {
-						onDonate();
-					}}
-				/>
+				<>
+					<ActionButton
+						label={formatMessage({ id: 'label.confirm' })}
+						onClick={() => onDonate()}
+					/>
+					<ActionButton
+						label={formatMessage({ id: 'label.edit' })}
+						onClick={() => setStep(EDonationSteps.MODIFY)}
+						buttonType='texty-gray'
+					/>
+				</>
 			) : step === EDonationSteps.DONATING ? (
 				<>
 					<StyledToast
@@ -168,9 +173,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 					{tx && <TXLink tx={tx} />}
 					<ActionButton
 						label={formatMessage({ id: 'label.done' })}
-						onClick={() => {
-							setShowModal(false);
-						}}
+						onClick={() => setShowModal(false)}
 					/>
 				</>
 			) : null}

From 147c8655b629bcf7139643d8c2a0941502031327 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 14:28:36 +0330
Subject: [PATCH 37/47] refresh table after update

---
 .../recurringTab/ActiveProjectsSection.tsx    |  4 +++
 .../ModifyStreamModal/ModifyStreamModal.tsx   |  1 +
 .../UpdateStreamInnerModal.tsx                |  6 +++-
 .../recurringTab/RecurringDonationsTable.tsx  | 32 +++++++++++++------
 .../recurringTab/StreamActionButton.tsx       |  3 ++
 5 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx
index d352a589fb..0ddab5d4e2 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx
@@ -28,6 +28,7 @@ export interface IOrder {
 }
 
 export const ActiveProjectsSection = () => {
+	const [, setTrigger] = useState(false);
 	const [showArchive, setShowArchive] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [donations, setDonations] = useState<IWalletRecurringDonation[]>([]);
@@ -133,6 +134,9 @@ export const ActiveProjectsSection = () => {
 						order={order}
 						changeOrder={changeOrder}
 						myAccount={myAccount}
+						refetch={() => {
+							setTrigger(prev => !prev);
+						}}
 					/>
 				)}
 				{loading && (
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
index ba4672fe2e..5ea25a14e0 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/ModifyStreamModal.tsx
@@ -27,6 +27,7 @@ export interface IModifyDonationInfo {
 
 export interface IModifyStreamModalProps extends IModal {
 	donation: IWalletRecurringDonation;
+	refetch: () => void;
 }
 
 export const ModifyStreamModal: FC<IModifyStreamModalProps> = ({
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
index ee6afe1eed..f4974c08c4 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/ModifyStreamModal/UpdateStreamInnerModal.tsx
@@ -37,6 +37,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 	flowRatePerMonth,
 	streamFlowRatePerMonth,
 	setShowModal,
+	refetch,
 }) => {
 	const [tx, setTx] = useState('');
 	const { formatMessage } = useIntl();
@@ -105,6 +106,7 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 				const projectBackendRes =
 					await updateRecurringDonation(projectDonationInfo);
 				console.log('Project Donation Update Info', projectBackendRes);
+				refetch();
 			} catch (error) {
 				console.log('error', error);
 			}
@@ -173,7 +175,9 @@ export const UpdateStreamInnerModal: FC<IModifyStreamInnerModalProps> = ({
 					{tx && <TXLink tx={tx} />}
 					<ActionButton
 						label={formatMessage({ id: 'label.done' })}
-						onClick={() => setShowModal(false)}
+						onClick={() => {
+							setShowModal(false);
+						}}
 					/>
 				</>
 			) : null}
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx b/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx
index 29a988a25c..a14c068a67 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationsTable.tsx
@@ -31,6 +31,7 @@ interface RecurringDonationTable {
 	order: IOrder;
 	changeOrder: (orderBy: ERecurringDonationSortField) => void;
 	myAccount?: boolean;
+	refetch: () => void;
 }
 
 const RecurringDonationTable: FC<RecurringDonationTable> = ({
@@ -38,6 +39,7 @@ const RecurringDonationTable: FC<RecurringDonationTable> = ({
 	order,
 	changeOrder,
 	myAccount,
+	refetch,
 }) => {
 	const { formatMessage, locale } = useIntl();
 
@@ -72,11 +74,16 @@ const RecurringDonationTable: FC<RecurringDonationTable> = ({
 			</TableHeader>
 
 			{myAccount && (
-				<TableHeader>
-					{formatMessage({ id: 'label.status' })}
-				</TableHeader>
+				<>
+					<TableHeader>
+						{formatMessage({ id: 'label.status' })}
+					</TableHeader>
+					<TableHeader>
+						{formatMessage({ id: 'label.actions' })}
+					</TableHeader>
+				</>
 			)}
-			<TableHeader>{formatMessage({ id: 'label.actions' })}</TableHeader>
+
 			{donations.map(donation => (
 				<DonationRowWrapper key={donation.id}>
 					<DonationTableCell>
@@ -111,13 +118,18 @@ const RecurringDonationTable: FC<RecurringDonationTable> = ({
 						<Currency>{donation.currency}</Currency>
 					</DonationTableCell>
 					{myAccount && (
-						<DonationTableCell>
-							<DonationStatus status={donation.status} />
-						</DonationTableCell>
+						<>
+							<DonationTableCell>
+								<DonationStatus status={donation.status} />
+							</DonationTableCell>
+							<DonationTableCell>
+								<StreamActionButton
+									donation={donation}
+									refetch={refetch}
+								/>
+							</DonationTableCell>
+						</>
 					)}
-					<DonationTableCell>
-						<StreamActionButton donation={donation} />
-					</DonationTableCell>
 				</DonationRowWrapper>
 			))}
 		</DonationTableContainer>
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 80b6d0e094..07c8c58032 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -14,10 +14,12 @@ import { IWalletRecurringDonation } from '@/apollo/types/types';
 
 interface IStreamActionButtonProps {
 	donation: IWalletRecurringDonation;
+	refetch: () => void;
 }
 
 export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 	donation,
+	refetch,
 }) => {
 	const [showModify, setShowModify] = useState(false);
 
@@ -67,6 +69,7 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 				<ModifyStreamModal
 					setShowModal={setShowModify}
 					donation={donation}
+					refetch={refetch}
 				/>
 			)}
 		</Actions>

From 031cd1ba321375020a21eca60ded046de1ffd708 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 14:36:38 +0330
Subject: [PATCH 38/47] update RunOutInfo

---
 .../views/donate/ModifySuperToken/DepositSuperToken.tsx     | 6 ++++--
 .../views/donate/ModifySuperToken/WithDrawSuperToken.tsx    | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/views/donate/ModifySuperToken/DepositSuperToken.tsx b/src/components/views/donate/ModifySuperToken/DepositSuperToken.tsx
index 232b84867b..100f7a7f28 100644
--- a/src/components/views/donate/ModifySuperToken/DepositSuperToken.tsx
+++ b/src/components/views/donate/ModifySuperToken/DepositSuperToken.tsx
@@ -193,8 +193,10 @@ export const DepositSuperToken: FC<IDepositSuperTokenProps> = ({
 						token={token!}
 					/>
 					<RunOutInfo
-						amount={amount + (SuperTokenBalance?.value || 0n)}
-						totalPerMonth={0n}
+						superTokenBalance={
+							amount + (SuperTokenBalance?.value || 0n)
+						}
+						streamFlowRatePerMonth={0n}
 						symbol={token?.symbol || ''}
 					/>
 				</Flex>
diff --git a/src/components/views/donate/ModifySuperToken/WithDrawSuperToken.tsx b/src/components/views/donate/ModifySuperToken/WithDrawSuperToken.tsx
index db71849197..96f2f0303b 100644
--- a/src/components/views/donate/ModifySuperToken/WithDrawSuperToken.tsx
+++ b/src/components/views/donate/ModifySuperToken/WithDrawSuperToken.tsx
@@ -161,8 +161,10 @@ export const WithDrawSuperToken: FC<IWithDrawSuperTokenProps> = ({
 						token={token!}
 					/>
 					<RunOutInfo
-						amount={(SuperTokenBalance?.value || 0n) - amount}
-						totalPerMonth={totalPerMonth}
+						superTokenBalance={
+							(SuperTokenBalance?.value || 0n) - amount
+						}
+						streamFlowRatePerMonth={totalPerMonth}
 						symbol={token?.symbol || ''}
 					/>
 				</Flex>

From 3548d45be152dc552b531ae4bfb30d657cfbc872 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 16:00:03 +0330
Subject: [PATCH 39/47] init EndStreamModal

---
 .../recurringTab/EndStreamModal.tsx           | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
new file mode 100644
index 0000000000..6a3fb97977
--- /dev/null
+++ b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
@@ -0,0 +1,32 @@
+import { IconDonation32 } from '@giveth/ui-design-system';
+import { useIntl } from 'react-intl';
+import { type FC } from 'react';
+import { Modal } from '@/components/modals/Modal';
+import { useModalAnimation } from '@/hooks/useModalAnimation';
+import { IModal } from '@/types/common';
+
+enum EEndStreamSteps {
+	CONFIRM,
+	SUCCESS,
+}
+
+export interface IEndStreamModalProps extends IModal {}
+
+export const EndStreamModal: FC<IEndStreamModalProps> = ({ ...props }) => {
+	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
+	const { formatMessage } = useIntl();
+
+	return (
+		<Modal
+			closeModal={closeModal}
+			isAnimating={isAnimating}
+			headerTitle={formatMessage({
+				id: 'label.modify_recurring_donation_amount',
+			})}
+			headerTitlePosition='left'
+			headerIcon={<IconDonation32 />}
+		>
+			<div>EndStreamModal</div>
+		</Modal>
+	);
+};

From 8148be42d1c47d2320aa0a0988afcdee54c36c04 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 16:29:12 +0330
Subject: [PATCH 40/47] show warning toast

---
 .../recurringTab/EndStreamModal.tsx           | 32 ++++++++++++++++---
 .../recurringTab/StreamActionButton.tsx       |  4 +++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
index 6a3fb97977..90761c871a 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
@@ -1,9 +1,15 @@
-import { IconDonation32 } from '@giveth/ui-design-system';
+import {
+	Flex,
+	IconAlertTriangleOutline32,
+	mediaQueries,
+} from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
 import { type FC } from 'react';
+import styled from 'styled-components';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
+import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
 
 enum EEndStreamSteps {
 	CONFIRM,
@@ -21,12 +27,30 @@ export const EndStreamModal: FC<IEndStreamModalProps> = ({ ...props }) => {
 			closeModal={closeModal}
 			isAnimating={isAnimating}
 			headerTitle={formatMessage({
-				id: 'label.modify_recurring_donation_amount',
+				id: 'label.end_recurring_donation',
 			})}
 			headerTitlePosition='left'
-			headerIcon={<IconDonation32 />}
+			headerIcon={<IconAlertTriangleOutline32 />}
 		>
-			<div>EndStreamModal</div>
+			<Wrapper>
+				<InlineToast
+					type={EToastType.Error}
+					message='You’re about to end an active recurring donation. This project will no longer benefit from your continuous support. Are you sure? '
+				/>
+			</Wrapper>
 		</Modal>
 	);
 };
+
+const Wrapper = styled(Flex)`
+	text-align: left;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: stretch;
+	gap: 16px;
+	width: 100%;
+	padding: 16px 24px 24px 24px;
+	${mediaQueries.tablet} {
+		width: 430px;
+	}
+`;
diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 07c8c58032..96a1bb8821 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -11,6 +11,7 @@ import { Dropdown, IOption } from '@/components/Dropdown';
 import { capitalizeAllWords } from '@/lib/helpers';
 import { ModifyStreamModal } from './ModifyStreamModal/ModifyStreamModal';
 import { IWalletRecurringDonation } from '@/apollo/types/types';
+import { EndStreamModal } from './EndStreamModal';
 
 interface IStreamActionButtonProps {
 	donation: IWalletRecurringDonation;
@@ -22,6 +23,7 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 	refetch,
 }) => {
 	const [showModify, setShowModify] = useState(false);
+	const [showEnd, setShowEnd] = useState(false);
 
 	const { formatMessage } = useIntl();
 
@@ -49,6 +51,7 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 						id: 'label.end_recurring_donation',
 					}),
 					icon: <IconUpdate16 />,
+					cb: () => setShowEnd(true),
 				},
 			];
 
@@ -72,6 +75,7 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 					refetch={refetch}
 				/>
 			)}
+			{showEnd && <EndStreamModal setShowModal={setShowEnd} />}
 		</Actions>
 	);
 };

From 23a645c25a731caa15c6e6a7bf070e1fb42bb824 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 19:28:04 +0330
Subject: [PATCH 41/47] add buttons

---
 .../recurringTab/EndStreamModal.tsx           | 53 ++++++++++++++++---
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
index 90761c871a..1de2787d5d 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
@@ -4,12 +4,13 @@ import {
 	mediaQueries,
 } from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
-import { type FC } from 'react';
+import { useState, type FC } from 'react';
 import styled from 'styled-components';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
+import { ActionButton } from './ModifyStreamModal/ModifyStreamInnerModal';
 
 enum EEndStreamSteps {
 	CONFIRM,
@@ -32,16 +33,52 @@ export const EndStreamModal: FC<IEndStreamModalProps> = ({ ...props }) => {
 			headerTitlePosition='left'
 			headerIcon={<IconAlertTriangleOutline32 />}
 		>
-			<Wrapper>
-				<InlineToast
-					type={EToastType.Error}
-					message='You’re about to end an active recurring donation. This project will no longer benefit from your continuous support. Are you sure? '
-				/>
-			</Wrapper>
+			<EndStreamInnerModal {...props} />
 		</Modal>
 	);
 };
 
+interface IEndStreamInnerModalProps extends IEndStreamModalProps {}
+
+const EndStreamInnerModal: FC<IEndStreamInnerModalProps> = ({
+	setShowModal,
+}) => {
+	const [step, setStep] = useState(EEndStreamSteps.CONFIRM);
+	const { formatMessage } = useIntl();
+	return step === EEndStreamSteps.CONFIRM ? (
+		<Wrapper>
+			<InlineToast
+				type={EToastType.Error}
+				message='You’re about to end an active recurring donation. This project will no longer benefit from your continuous support. Are you sure? '
+			/>
+			<Flex gap='16px'>
+				<ActionButton
+					label={formatMessage({ id: 'label.cancel' })}
+					onClick={() => setShowModal(false)}
+					buttonType='texty-gray'
+				/>
+				<ActionButton
+					label={formatMessage({ id: 'label.confirm' })}
+					onClick={() => setStep(EEndStreamSteps.SUCCESS)}
+				/>
+			</Flex>
+		</Wrapper>
+	) : (
+		<Wrapper>
+			<InlineToast
+				type={EToastType.Success}
+				message='Your recurring donation to the Giveth community of Makers is now inactive.'
+			/>
+			<ActionButton
+				label={formatMessage({ id: 'label.done' })}
+				onClick={() => {
+					setShowModal(false);
+				}}
+			/>
+		</Wrapper>
+	);
+};
+
 const Wrapper = styled(Flex)`
 	text-align: left;
 	flex-direction: column;
@@ -51,6 +88,6 @@ const Wrapper = styled(Flex)`
 	width: 100%;
 	padding: 16px 24px 24px 24px;
 	${mediaQueries.tablet} {
-		width: 430px;
+		width: 530px;
 	}
 `;

From ef994e92cd11d79f28152f229039acb19f27e736 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 21:51:17 +0330
Subject: [PATCH 42/47] update UPDATE_RECURRING_DONATION

---
 src/apollo/gql/gqlSuperfluid.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/apollo/gql/gqlSuperfluid.ts b/src/apollo/gql/gqlSuperfluid.ts
index 5d63e2dbd8..8feddd79f7 100644
--- a/src/apollo/gql/gqlSuperfluid.ts
+++ b/src/apollo/gql/gqlSuperfluid.ts
@@ -46,10 +46,11 @@ export const UPDATE_RECURRING_DONATION = gql`
 	mutation updateRecurringDonationQuery(
 		$projectId: Int!
 		$networkId: Int!
-		$txHash: String!
-		$flowRate: String!
 		$currency: String!
-		$anonymous: Boolean!
+		$txHash: String
+		$flowRate: String
+		$anonymous: Boolean
+		$status: String
 	) {
 		updateRecurringDonationParams(
 			projectId: $projectId
@@ -58,12 +59,14 @@ export const UPDATE_RECURRING_DONATION = gql`
 			anonymous: $anonymous
 			flowRate: $flowRate
 			currency: $currency
+			status: $status
 		) {
 			txHash
 			networkId
 			currency
 			flowRate
 			anonymous
+			status
 		}
 	}
 `;

From 0ea9a62994ae2785af646894f881cf0417720e95 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 22:02:48 +0330
Subject: [PATCH 43/47] add endRecurringDonation

---
 src/services/donation.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/services/donation.ts b/src/services/donation.ts
index 750e0d9b70..48f00e0911 100644
--- a/src/services/donation.ts
+++ b/src/services/donation.ts
@@ -206,3 +206,38 @@ export const updateRecurringDonation = async (
 
 	return donationId;
 };
+
+export interface IEndRecurringDonation {
+	projectId: number;
+	chainId: number;
+	txHash: string;
+	superToken: IToken;
+}
+
+export const endRecurringDonation = async (props: IEndRecurringDonation) => {
+	let donationId = 0;
+	const { chainId, txHash, projectId, superToken } = props;
+	try {
+		const { data } = await client.mutate({
+			mutation: UPDATE_RECURRING_DONATION,
+			variables: {
+				projectId,
+				networkId: chainId,
+				txHash,
+				currency: superToken.underlyingToken?.symbol || 'ETH',
+			},
+		});
+		donationId = data.updateRecurringDonation;
+		return donationId;
+	} catch (error: any) {
+		captureException(error, {
+			tags: {
+				section: SENTRY_URGENT,
+			},
+		});
+		console.log('endRecurringDonation error: ', error);
+		throw error;
+	}
+
+	return donationId;
+};

From 8ddd1cf03275743cf85dca1ebd80e9a39e466e8d Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 22:16:28 +0330
Subject: [PATCH 44/47] add RECURRING_DONATION_STATUS

---
 src/apollo/types/types.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/apollo/types/types.ts b/src/apollo/types/types.ts
index 63723a4a08..6efc955d6f 100644
--- a/src/apollo/types/types.ts
+++ b/src/apollo/types/types.ts
@@ -474,3 +474,12 @@ export interface IGetQfRoundHistory {
 	uniqueDonors: number;
 	estimatedMatching: IEstimatedMatching;
 }
+
+export enum RECURRING_DONATION_STATUS {
+	PENDING = 'pending',
+	VERIFIED = 'verified',
+	ENDED = 'ended',
+	FAILED = 'failed',
+	ARCHIVED = 'archived',
+	ACTIVE = 'active',
+}

From 99fd545562a019b4ec15d83e1242dab1ab03032f Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 22:16:47 +0330
Subject: [PATCH 45/47] set status ended

---
 src/services/donation.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/services/donation.ts b/src/services/donation.ts
index 48f00e0911..01fab9dce6 100644
--- a/src/services/donation.ts
+++ b/src/services/donation.ts
@@ -17,6 +17,7 @@ import {
 	CREATE_RECURRING_DONATION,
 	UPDATE_RECURRING_DONATION,
 } from '@/apollo/gql/gqlSuperfluid';
+import { RECURRING_DONATION_STATUS } from '@/apollo/types/types';
 
 const SAVE_DONATION_ITERATIONS = 5;
 
@@ -225,6 +226,7 @@ export const endRecurringDonation = async (props: IEndRecurringDonation) => {
 				networkId: chainId,
 				txHash,
 				currency: superToken.underlyingToken?.symbol || 'ETH',
+				status: RECURRING_DONATION_STATUS.ENDED,
 			},
 		});
 		donationId = data.updateRecurringDonation;

From 94b3d7d049fc3d952faa1025dbe928c0d9115405 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 22:17:00 +0330
Subject: [PATCH 46/47] pass refetch

---
 .../donationsTab/recurringTab/StreamActionButton.tsx      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
index 96a1bb8821..f0a32054d2 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamActionButton.tsx
@@ -75,7 +75,13 @@ export const StreamActionButton: FC<IStreamActionButtonProps> = ({
 					refetch={refetch}
 				/>
 			)}
-			{showEnd && <EndStreamModal setShowModal={setShowEnd} />}
+			{showEnd && (
+				<EndStreamModal
+					setShowModal={setShowEnd}
+					donation={donation}
+					refetch={refetch}
+				/>
+			)}
 		</Actions>
 	);
 };

From 2a21302c644b298d5fa6ea33c816b8d5ac1964a9 Mon Sep 17 00:00:00 2001
From: Cherik <Pourcheriki@gmail.com>
Date: Thu, 21 Mar 2024 22:17:53 +0330
Subject: [PATCH 47/47] add end functionality

---
 .../recurringTab/EndStreamModal.tsx           | 99 ++++++++++++++++++-
 1 file changed, 96 insertions(+), 3 deletions(-)

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
index 1de2787d5d..6d96e46f22 100644
--- a/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
+++ b/src/components/views/userProfile/donationsTab/recurringTab/EndStreamModal.tsx
@@ -6,18 +6,30 @@ import {
 import { useIntl } from 'react-intl';
 import { useState, type FC } from 'react';
 import styled from 'styled-components';
+import { Framework } from '@superfluid-finance/sdk-core';
+import { useAccount } from 'wagmi';
 import { Modal } from '@/components/modals/Modal';
 import { useModalAnimation } from '@/hooks/useModalAnimation';
 import { IModal } from '@/types/common';
 import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
 import { ActionButton } from './ModifyStreamModal/ModifyStreamInnerModal';
+import config, { isProduction } from '@/configuration';
+import { IWalletRecurringDonation } from '@/apollo/types/types';
+import { getEthersProvider, getEthersSigner } from '@/helpers/ethers';
+import { wagmiConfig } from '@/wagmiConfigs';
+import { endRecurringDonation } from '@/services/donation';
+import { showToastError } from '@/lib/helpers';
 
 enum EEndStreamSteps {
 	CONFIRM,
+	ENDING,
 	SUCCESS,
 }
 
-export interface IEndStreamModalProps extends IModal {}
+export interface IEndStreamModalProps extends IModal {
+	donation: IWalletRecurringDonation;
+	refetch: () => void;
+}
 
 export const EndStreamModal: FC<IEndStreamModalProps> = ({ ...props }) => {
 	const { isAnimating, closeModal } = useModalAnimation(props.setShowModal);
@@ -42,10 +54,88 @@ interface IEndStreamInnerModalProps extends IEndStreamModalProps {}
 
 const EndStreamInnerModal: FC<IEndStreamInnerModalProps> = ({
 	setShowModal,
+	donation,
+	refetch,
 }) => {
 	const [step, setStep] = useState(EEndStreamSteps.CONFIRM);
 	const { formatMessage } = useIntl();
-	return step === EEndStreamSteps.CONFIRM ? (
+	const { address } = useAccount();
+
+	const onDeleteStream = async () => {
+		setStep(EEndStreamSteps.ENDING);
+		try {
+			if (!donation.project.anchorContracts.length) {
+				throw new Error('Project Anchor contract address not found');
+			}
+
+			if (!address) {
+				throw new Error('Please connect your wallet first');
+			}
+
+			const _superToken = config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find(
+				s => s.underlyingToken.symbol === donation.currency,
+			);
+			if (!_superToken) {
+				throw new Error('SuperToken not found');
+			}
+			const provider = await getEthersProvider(wagmiConfig);
+			const signer = await getEthersSigner(wagmiConfig);
+			if (!provider || !signer)
+				throw new Error('Provider or signer not found');
+
+			const _options = {
+				chainId: config.OPTIMISM_CONFIG.id,
+				provider: provider,
+				resolverAddress: isProduction
+					? undefined
+					: '0x554c06487bEc8c890A0345eb05a5292C1b1017Bd',
+			};
+			const sf = await Framework.create(_options);
+
+			let superToken;
+			if (_superToken.symbol === 'ETHx') {
+				superToken = await sf.loadNativeAssetSuperToken(_superToken.id);
+			} else {
+				superToken = await sf.loadWrapperSuperToken(_superToken.id);
+			}
+
+			const deleteOp = superToken.deleteFlow({
+				sender: address,
+				receiver: donation.project.anchorContracts[0].address,
+			});
+
+			const tx = await deleteOp.exec(signer);
+
+			try {
+				const info = {
+					projectId: +donation.project.id,
+					chainId: config.OPTIMISM_NETWORK_NUMBER,
+					txHash: tx.hash,
+					superToken: _superToken,
+				};
+				const projectBackendRes = await endRecurringDonation(info);
+				console.log('Project Donation End Info', projectBackendRes);
+				refetch();
+			} catch (error) {
+				showToastError(error);
+			}
+
+			const res = await tx.wait();
+			if (!res.status) {
+				throw new Error('Transaction failed');
+			}
+			setStep(EEndStreamSteps.SUCCESS);
+		} catch (error: any) {
+			setStep(EEndStreamSteps.CONFIRM);
+			if (error?.code !== 'ACTION_REJECTED') {
+				showToastError(error);
+			}
+			console.log('Error on recurring donation', { error });
+		}
+	};
+
+	return step === EEndStreamSteps.CONFIRM ||
+		step === EEndStreamSteps.ENDING ? (
 		<Wrapper>
 			<InlineToast
 				type={EToastType.Error}
@@ -56,10 +146,13 @@ const EndStreamInnerModal: FC<IEndStreamInnerModalProps> = ({
 					label={formatMessage({ id: 'label.cancel' })}
 					onClick={() => setShowModal(false)}
 					buttonType='texty-gray'
+					disabled={step === EEndStreamSteps.ENDING}
 				/>
 				<ActionButton
 					label={formatMessage({ id: 'label.confirm' })}
-					onClick={() => setStep(EEndStreamSteps.SUCCESS)}
+					onClick={() => onDeleteStream()}
+					disabled={step === EEndStreamSteps.ENDING}
+					loading={step === EEndStreamSteps.ENDING}
 				/>
 			</Flex>
 		</Wrapper>