Add ending stream

lang/ca.json

@@ -7,7 +7,6 @@
 	"bipoc-comomunities": "Comunitats BIPOC",
 	"children-health": "Salut Infantil",
 	"climate-action": "Acció climàtica",
-	"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",
@@ -592,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",
@@ -872,14 +872,17 @@
 	"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",
 	"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",
+	"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",

lang/en.json

@@ -5,7 +5,6 @@
 	"animals": "Animals",
 	"art": "Art",
 	"bipoc-comomunities": "Bipoc Communities",
-	"label.state": "State",
 	"children-health": "Children's Health",
 	"climate-action": "Climate Action",
 	"component.already_donated.incorrect_estimate": "You have already donated to this project so the estimated matching will be incorrect.",
@@ -592,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",
@@ -872,14 +872,17 @@
 	"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",
 	"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",
+	"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",

lang/es.json

@@ -7,7 +7,6 @@
 	"bipoc-comomunities": "Comunidades Bipoc",
 	"children-health": "Salud de los niños",
 	"climate-action": "Acción Climática",
-	"label.state": "Estado",
 	"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",
@@ -592,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",
@@ -872,14 +872,17 @@
 	"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",
 	"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",
+	"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",

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
 		}
 	}
 `;

src/apollo/gql/gqlUser.ts

@@ -144,6 +144,10 @@ export const FETCH_USER_RECURRING_DONATIONS = gql`
 					id
 					title
 					slug
+					anchorContracts {
+						address
+						isActive
+					}
 				}
 				finished
 				createdAt

src/apollo/types/types.ts

@@ -282,6 +282,7 @@ export interface IWalletRecurringDonation {
 	totalDonated: string;
 	networkId: number;
 	finished: boolean;
+	anonymous: boolean;
 }
 
 export interface IMediumBlogPost {
@@ -473,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',
+}

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>

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>

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>

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>

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 {
@@ -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
@@ -225,7 +231,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 />}
@@ -326,16 +334,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)
@@ -380,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 && (
@@ -693,16 +701,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 +735,7 @@ const Input = styled(AmountInput)`
 	}
 `;
 
-const IconWrapper = styled.div`
+export const IconWrapper = styled.div`
 	cursor: pointer;
 	color: ${brandColors.giv[500]};
 `;

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

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>

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,16 +86,16 @@ const Tabs = styled(Flex)`
 `;
 
 interface ITab {
-	isActive: boolean;
+	$isActive: boolean;
 }
 
 const Tab = styled(P)<ITab>`
 	padding: 16px;
 	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);