Add recurring to donation page

package.json

@@ -18,18 +18,19 @@
 	},
 	"dependencies": {
 		"@apollo/client": "^3.8.3",
-		"@giveth/ui-design-system": "^1.11.17",
+		"@giveth/ui-design-system": "^1.11.18",
 		"@reduxjs/toolkit": "^1.9.5",
 		"@segment/snippet": "^4.15.3",
 		"@sentry/nextjs": "^7.69.0",
+		"@superfluid-finance/sdk-core": "^0.6.12",
 		"@uniswap/v3-sdk": "^3.10.0",
 		"@web3modal/wagmi": "^3.1.0",
 		"apollo-upload-client": "^17.0.0",
 		"bignumber.js": "^9.1.2",
 		"deepmerge": "^4.2.2",
-		"ethers": "^6.7.1",
+		"ethers": "5.7.2",
 		"framer-motion": "^10.12.12",
-		"graphql": "^16.8.0",
+		"graphql": "^16.8.1",
 		"lodash.isequal": "^4.5.0",
 		"lottie-react": "^2.3.1",
 		"next": "^13.5.1",

pages/_app.tsx

@@ -169,7 +169,7 @@
 			}
 		};
 		asyncFunc();
 	}, []);
 
 	return (
 		<>
@@ -219,7 +219,7 @@
 											}}
 										/>
 									)}
-									{process.env.NEXT_PUBLIC_ENV !==
+									{/* {process.env.NEXT_PUBLIC_ENV !==
 										'production' && (
 										<Script
 											id='console-script'
@@ -228,7 +228,7 @@
 												__html: `javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();`,
 											}}
 										/>
-									)}
+									)} */}
 
 									<FooterWrapper />
 									<ModalController />

src/apollo/gql/gqlUser.ts

@@ -143,6 +143,37 @@ export const VALIDATE_TOKEN = gql`
 	}
 `;
 
+export const FETCH_USER_STREAMS = `
+	query FetchUserStreams($address: String!) {
+		streams(
+			where: { sender: $address }
+		) {
+			id
+			sender {
+				id
+			}
+			receiver {
+				id
+			}
+			token {
+				__typename
+				id
+				name
+				symbol
+				decimals
+				isSuperToken
+				underlyingToken {
+					id
+					name
+					symbol
+					decimals
+				}
+			}
+			currentFlowRate
+		}
+	}
+`;
+
 export const FETCH_USER_GIVPOWER_BY_ADDRESS = `
 	query unipoolBalance($id: String!) {
 		unipoolBalance(

src/components/AddTokenButton.tsx

@@ -2,9 +2,8 @@ import { brandColors, P } from '@giveth/ui-design-system';
 import Image from 'next/image';
 import { FC, useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { useAccount } from 'wagmi';
+import { type Address, useAccount } from 'wagmi';
 import { Flex } from './styled-components/Flex';
-import { Address } from '@/types/config';
 import { addToken } from '@/lib/metamask';
 
 interface IAddGIVTokenButton {

src/components/Header/Header.tsx

@@ -54,14 +54,14 @@ import { isGIVeconomyRoute as checkIsGIVeconomyRoute } from '@/lib/helpers';
 import { CommunityMenu } from '../menu/CommunityMenu';
 import { useNavigationInfo } from '@/hooks/useNavigationInfo';
 import config from '@/configuration';
+import { useShowHiderByScroll } from '@/hooks/useShowHiderByScroll';
 
 export interface IHeader {
 	theme?: ETheme;
 	show?: boolean;
 }
 
 const Header: FC<IHeader> = () => {
-	const [showHeader, setShowHeader] = useState(true);
 	const [showBackBtn, setShowBackBtn] = useState(false);
 
 	const [showSidebar, sidebarCondition, openSidebar, closeSidebar] =
@@ -87,6 +87,7 @@ const Header: FC<IHeader> = () => {
 	const isDesktop = useMediaQuery(device.laptopL);
 	const isMobile = useMediaQuery(device.mobileL);
 	const { open: openConnectModal } = useWeb3Modal();
+	const showHeader = useShowHiderByScroll();
 
 	const isGIVeconomyRoute = checkIsGIVeconomyRoute(router.route);
 
@@ -128,36 +129,6 @@ const Header: FC<IHeader> = () => {
 		);
 	}, [router.route]);
 
-	useEffect(() => {
-		const threshold = 0;
-		let lastScrollY = window.pageYOffset;
-		let ticking = false;
-
-		const updateScrollDir = () => {
-			const scrollY = window.pageYOffset;
-
-			if (Math.abs(scrollY - lastScrollY) < threshold) {
-				ticking = false;
-				return;
-			}
-			const show = scrollY <= lastScrollY;
-			setShowHeader(show);
-			lastScrollY = scrollY > 0 ? scrollY : 0;
-			ticking = false;
-		};
-
-		const onScroll = () => {
-			if (!ticking) {
-				window.requestAnimationFrame(updateScrollDir);
-				ticking = true;
-			}
-		};
-
-		window.addEventListener('scroll', onScroll);
-
-		return () => window.removeEventListener('scroll', onScroll);
-	}, [showHeader]);
-
 	const { modalCallback: signInThenCreate } = useModalCallback(() =>
 		router.push(Routes.CreateProject),
 	);

src/components/modals/ConfirmSubmit.tsx

@@ -10,15 +10,14 @@ import {
 } from '@giveth/ui-design-system';
 import styled from 'styled-components';
 import { FC } from 'react';
-import { useNetwork } from 'wagmi';
+import { type Address, useNetwork } from 'wagmi';
 import config from '@/configuration';
 import TikAnimation from '@/animations/tik.json';
 import ErrorAnimation from '@/animations/error.json';
 import { AddTokenButton } from '../AddTokenButton';
 import { Flex } from '../styled-components/Flex';
 import LottieControl from '@/components/LottieControl';
 import { WrappedSpinner } from '../Spinner';
-import { Address } from '@/types/config';
 
 const AddTokenRow = styled(Flex)`
 	margin-top: 16px;

src/components/modals/ManageProjectAddresses/AddNewAddress.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 import { useForm } from 'react-hook-form';
 import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { getAddress, isAddress } from 'viem';
+import { type Address } from 'wagmi';
 import { IProject, IWalletAddress } from '@/apollo/types/types';
 import Input from '../../Input';
 import { requiredOptions } from '@/lib/constants/regex';
 import { client } from '@/apollo/apolloClient';
 import { ADD_RECIPIENT_ADDRESS_TO_PROJECT } from '@/apollo/gql/gqlProjects';
 import InlineToast, { EToastType } from '../../toasts/InlineToast';
 import { suggestNewAddress } from '@/lib/helpers';
-import { Address } from '@/types/config';
 import { chainNameById } from '@/lib/network';
 
 interface IAddNewAddress {

src/components/views/create/CreateProject.tsx

@@ -18,6 +18,7 @@ import { captureException } from '@sentry/nextjs';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Container } from '@giveth/ui-design-system';
 import { getAddress } from 'viem';
+import { type Address } from 'wagmi';
 import {
 	ACTIVATE_PROJECT,
 	CREATE_PROJECT,
@@ -47,7 +48,6 @@ import { useAppDispatch } from '@/features/hooks';
 import NameInput from '@/components/views/create/NameInput';
 import CreateProjectAddAddressModal from './CreateProjectAddAddressModal';
 import AddressInterface from './AddressInterface';
-import { Address } from '@/types/config';
 import { ProjectGuidelineModal } from '@/components/modals/ProjectGuidelineModal';
 import StorageLabel from '@/lib/localStorage';
 

src/components/views/donate/DonateHeader.tsx

@@ -0,0 +1,86 @@
+import Image from 'next/image';
+import { FC } from 'react';
+import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
+import { useAccount, useNetwork } from 'wagmi';
+import { useWeb3Modal } from '@web3modal/wagmi/react';
+import Link from 'next/link';
+import { Caption, B, neutralColors } from '@giveth/ui-design-system';
+import styled from 'styled-components';
+import { Flex, FlexSpacer } from '@/components/styled-components/Flex';
+import { useAppSelector } from '@/features/hooks';
+import { ETheme } from '@/features/general/general.slice';
+
+import { isGIVeconomyRoute as checkIsGIVeconomyRoute } from '@/lib/helpers';
+import {
+	StyledHeader,
+	Logo,
+	ConnectButton,
+} from '@/components/Header/Header.sc';
+import { UserButtonWithMenu } from '@/components/menu/UserButtonWithMenu';
+import Routes from '@/lib/constants/Routes';
+import { useDonateData } from '@/context/donate.context';
+import { useShowHiderByScroll } from '@/hooks/useShowHiderByScroll';
+
+export interface IHeader {
+	theme?: ETheme;
+	show?: boolean;
+}
+
+export const DonateHeader: FC<IHeader> = () => {
+	const theme = useAppSelector(state => state.general.theme);
+	const { formatMessage } = useIntl();
+	const { address } = useAccount();
+	const { chain } = useNetwork();
+	const router = useRouter();
+	const { open: openConnectModal } = useWeb3Modal();
+	const { project } = useDonateData();
+	const showHeader = useShowHiderByScroll();
+	const chainId = chain?.id;
+	const isGIVeconomyRoute = checkIsGIVeconomyRoute(router.route);
+
+	return (
+		<StyledHeader alignItems='center' theme={theme} show={showHeader}>
+			<Flex alignItems='center' gap='16px'>
+				<Link href={Routes.Project + '/' + project.slug}>
+					<Logo>
+						<Image
+							width='26'
+							height='26'
+							alt='Giveth logo'
+							src={`/images/back-2.svg`}
+						/>
+					</Logo>
+				</Link>
+				<Flex flexDirection='column' gap='4px'>
+					<StyledCaption medium>Donating to</StyledCaption>
+					<B>{project.title}</B>
+				</Flex>
+			</Flex>
+			<FlexSpacer />
+			<Flex gap='8px'>
+				{address && chainId ? (
+					<UserButtonWithMenu
+						isHeaderShowing={showHeader}
+						theme={theme}
+					/>
+				) : (
+					<ConnectButton
+						buttonType='primary'
+						size='small'
+						label={formatMessage({
+							id: isGIVeconomyRoute
+								? 'component.button.connect_wallet'
+								: 'component.button.sign_in',
+						})}
+						onClick={() => openConnectModal?.()}
+					/>
+				)}
+			</Flex>
+		</StyledHeader>
+	);
+};
+
+const StyledCaption = styled(Caption)`
+	color: ${neutralColors.gray[700]};
+`;