Merge pull request #4902 from Giveth/feat/user_recurring_tab

Feat/Showing base super tokens on user recurring tab
Giveth · Dec 23, 2024 · cad8f44 · cad8f44
2 parents 527a232 + 5996a4b
commit cad8f44
Show file tree

Hide file tree

Showing 17 changed files with 287 additions and 37 deletions.
diff --git a/public/images/tokens/USDCx.svg b/public/images/tokens/USDCx.svg
diff --git a/src/apollo/gql/gqlUser.ts b/src/apollo/gql/gqlUser.ts
@@ -125,6 +125,7 @@ export const FETCH_USER_RECURRING_DONATIONS = gql`
 		$userId: Int!
 		$filteredTokens: [String!]
 		$includeArchived: Boolean
+		$networkId: Int
 	) {
 		recurringDonationsByUserId(
 			take: $take
@@ -135,6 +136,7 @@ export const FETCH_USER_RECURRING_DONATIONS = gql`
 			finishStatus: $finishStatus
 			filteredTokens: $filteredTokens
 			includeArchived: $includeArchived
+			networkId: $networkId
 		) {
 			recurringDonations {
 				id

diff --git a/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx b/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx
@@ -142,8 +142,6 @@ export const DepositSuperToken: FC<IDepositSuperTokenProps> = ({
 					.parseUnits(currentAmount.toString(), 18)
 					.toBigInt();
 			}
-			console.log('token', token);
-			console.log('supertoken', superToken);
 			const upgradeOperation = await superTokenAsset.upgrade({
 				amount: newAmount.toString(),
 			});
@@ -186,6 +184,7 @@ export const DepositSuperToken: FC<IDepositSuperTokenProps> = ({
 							amount={amount}
 							setAmount={setAmount}
 							token={token}
+							recurringNetworkID={recurringNetworkID}
 							balance={balance}
 							refetch={refetch}
 							isRefetching={isRefetching}

diff --git a/src/components/views/donate/Recurring/ModifySuperToken/ModifySection.tsx b/src/components/views/donate/Recurring/ModifySuperToken/ModifySection.tsx
@@ -31,6 +31,7 @@ export enum EModifySectionPlace {
 interface IModifySectionProps {
 	titleLabel: string;
 	token?: IToken;
+	recurringNetworkID: number;
 	amount: bigint;
 	setAmount: Dispatch<SetStateAction<bigint>>;
 	balance?: GetBalanceReturnType;
@@ -45,6 +46,7 @@ interface IModifySectionProps {
 export const ModifySection: FC<IModifySectionProps> = ({
 	titleLabel,
 	token,
+	recurringNetworkID,
 	amount,
 	setAmount,
 	balance,
@@ -62,7 +64,7 @@ export const ModifySection: FC<IModifySectionProps> = ({
 		setAmount(balance.value); // Set the amount to the balance value
 	};
 
-	const _token = findTokenByAddress(token?.id);
+	const _token = findTokenByAddress(token?.id, recurringNetworkID);
 	const ProperGlink =
 		modifySectionPlace === EModifySectionPlace.DEPOSIT
 			? CustomGLink

diff --git a/src/components/views/donate/Recurring/ModifySuperToken/ModifySuperTokenModal.tsx b/src/components/views/donate/Recurring/ModifySuperToken/ModifySuperTokenModal.tsx
@@ -102,7 +102,7 @@ const ModifySuperTokenInnerModal: FC<
 		let superTokens: any[] = [];
 		if (props.recurringNetworkID === config.OPTIMISM_NETWORK_NUMBER) {
 			superTokens = config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS;
-		} else if (props.recurringNetworkID === config.POLYGON_NETWORK_NUMBER) {
+		} else if (props.recurringNetworkID === config.BASE_NETWORK_NUMBER) {
 			superTokens = config.BASE_CONFIG.SUPER_FLUID_TOKENS;
 		}
 

diff --git a/src/components/views/donate/Recurring/ModifySuperToken/WithDrawSuperToken.tsx b/src/components/views/donate/Recurring/ModifySuperToken/WithDrawSuperToken.tsx
@@ -154,6 +154,7 @@ export const WithDrawSuperToken: FC<IWithDrawSuperTokenProps> = ({
 							amount={amount}
 							setAmount={setAmount}
 							token={superToken}
+							recurringNetworkID={recurringNetworkID}
 							// try to put in modified value in place of SuperTokenBalance.value
 							refetch={refetch}
 							balance={modifiedValue}

diff --git a/src/components/views/donate/Recurring/SelectTokenModal/SelectTokenModal.tsx b/src/components/views/donate/Recurring/SelectTokenModal/SelectTokenModal.tsx
@@ -141,6 +141,7 @@ const SelectTokenInnerModal: FC<ISelectTokenModalProps> = ({
 								<StreamInfo
 									key={tokenId}
 									stream={tokenStreams[tokenId.toLowerCase()]}
+									recurringNetworkId={chain?.id}
 									superToken={token}
 									balance={balances[token.symbol]}
 									disable={

diff --git a/src/components/views/donate/Recurring/SelectTokenModal/StreamInfo.tsx b/src/components/views/donate/Recurring/SelectTokenModal/StreamInfo.tsx
@@ -11,6 +11,7 @@ import { TokenIconWithGIVBack } from '../../TokenIcon/TokenIconWithGIVBack';
 
 interface IStreamInfoProps {
 	stream: ISuperfluidStream[];
+	recurringNetworkId?: number;
 	superToken: IToken;
 	balance: bigint;
 	disable: boolean;
@@ -20,6 +21,7 @@ interface IStreamInfoProps {
 
 export const StreamInfo: FC<IStreamInfoProps> = ({
 	stream,
+	recurringNetworkId,
 	balance,
 	superToken,
 	disable,
@@ -36,7 +38,7 @@ export const StreamInfo: FC<IStreamInfoProps> = ({
 			? balance / totalFlowRate / 2628000n
 			: 0n;
 
-	const token = findTokenByAddress(stream[0].token.id);
+	const token = findTokenByAddress(stream[0].token.id, recurringNetworkId);
 	const underlyingToken = token?.underlyingToken;
 	const activeStreamCount = countActiveStreams(stream);
 	return (

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx
@@ -38,6 +38,7 @@ export const ActiveProjectsSection = () => {
 	const [loading, setLoading] = useState(false);
 	const [donations, setDonations] = useState<IWalletRecurringDonation[]>([]);
 	const [totalDonations, setTotalDonations] = useState<number>(0);
+	const [networkIds, setNetworkIds] = useState<number[]>([]);
 	const [page, setPage] = useState(0);
 	const [order, setOrder] = useState<IOrder>({
 		by: ERecurringDonationSortField.createdAt,
@@ -82,6 +83,7 @@ export const ActiveProjectsSection = () => {
 					finishStatus: statusFilters,
 					filteredTokens: tokenFilters,
 					includeArchived: myAccount ? showArchive : true,
+					networkId: networkIds.length === 1 ? networkIds[0] : 0,
 				},
 			});
 			setLoading(false);
@@ -103,7 +105,9 @@ export const ActiveProjectsSection = () => {
 		statusFilters,
 		tokenFilters,
 		trigger,
+		networkIds,
 	]);
+
 	return (
 		<Wrapper>
 			<Flex $justifyContent='space-between'>
@@ -122,6 +126,8 @@ export const ActiveProjectsSection = () => {
 							setStatusFilters={setStatusFilters}
 							tokenFilters={tokenFilters}
 							setTokenFilters={setTokenFilters}
+							networkIds={networkIds}
+							setNetworkIds={setNetworkIds}
 						/>
 					</Flex>
 				)}

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ActiveStreamsSection.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ActiveStreamsSection.tsx
@@ -52,6 +52,13 @@ export const ActiveStreamsSection: FC = () => {
 							})}
 						</B>
 					</TableHeader>
+					<TableHeader>
+						<B>
+							{formatMessage({
+								id: 'label.network',
+							})}
+						</B>
+					</TableHeader>
 					<TableHeader>
 						<B>
 							{formatMessage({
@@ -95,7 +102,7 @@ const DonationTableContainer = styled.div<{ $myAccount?: boolean }>`
 	grid-template-columns: ${props =>
 		props.$myAccount
 			? '1fr 4fr 1fr 1.5fr 1fr 1fr'
-			: 'auto auto auto auto auto'};
+			: 'auto auto auto auto auto auto'};
 	overflow: auto;
 `;
 

diff --git a/src/components/views/userProfile/donationsTab/recurringTab/FilterMenu.tsx b/src/components/views/userProfile/donationsTab/recurringTab/FilterMenu.tsx
@@ -18,6 +18,7 @@ import { ISuperToken } from '@/types/superFluid';
 import { PinkyColoredNumber } from '@/components/styled-components/PinkyColoredNumber';
 import { TokenIcon } from '@/components/views/donate/TokenIcon/TokenIcon';
 import { IRecurringDonationFiltersButtonProps } from './RecurringDonationFiltersButton';
+import NetworkLogo from '@/components/NetworkLogo';
 
 interface IFilterMenuProps extends IRecurringDonationFiltersButtonProps {
 	handleClose: (e?: any) => void;
@@ -33,6 +34,8 @@ export const FilterMenu = forwardRef<HTMLDivElement, IFilterMenuProps>(
 			setStatusFilters,
 			tokenFilters,
 			setTokenFilters,
+			networkIds,
+			setNetworkIds,
 		},
 		ref,
 	) => {
@@ -81,6 +84,83 @@ export const FilterMenu = forwardRef<HTMLDivElement, IFilterMenuProps>(
 					</FlexCenter>
 				</Header>
 				<Section>
+					<B>{formatMessage({ id: 'label.network' })}</B>
+					<FeatureItem>
+						<CheckBox
+							onChange={() => {
+								if (
+									networkIds.includes(
+										config.OPTIMISM_NETWORK_NUMBER,
+									)
+								) {
+									setNetworkIds(prev =>
+										prev.filter(
+											id =>
+												id !==
+												config.OPTIMISM_NETWORK_NUMBER,
+										),
+									);
+								} else {
+									setNetworkIds(prev => [
+										...prev,
+										config.OPTIMISM_NETWORK_NUMBER,
+									]);
+								}
+
+								handleClose();
+							}}
+							checked={networkIds.includes(
+								config.OPTIMISM_NETWORK_NUMBER,
+							)}
+							size={14}
+						>
+							<Flex $alignItems='center' gap='4px'>
+								<NetworkLogo
+									chainId={config.OPTIMISM_NETWORK_NUMBER}
+									logoSize={16}
+								/>
+								<GLink size='Medium'>Optimism</GLink>
+							</Flex>
+						</CheckBox>
+					</FeatureItem>
+					<FeatureItem>
+						<CheckBox
+							onChange={() => {
+								if (
+									networkIds.includes(
+										config.BASE_NETWORK_NUMBER,
+									)
+								) {
+									setNetworkIds(prev =>
+										prev.filter(
+											id =>
+												id !==
+												config.BASE_NETWORK_NUMBER,
+										),
+									);
+								} else {
+									setNetworkIds(prev => [
+										...prev,
+										config.BASE_NETWORK_NUMBER,
+									]);
+								}
+
+								handleClose();
+							}}
+							checked={networkIds.includes(
+								config.BASE_NETWORK_NUMBER,
+							)}
+							size={14}
+						>
+							<Flex $alignItems='center' gap='4px'>
+								<NetworkLogo
+									chainId={config.BASE_NETWORK_NUMBER}
+									logoSize={16}
+								/>
+								<GLink size='Medium'>Base</GLink>
+							</Flex>
+						</CheckBox>
+					</FeatureItem>
 					<B>{formatMessage({ id: 'label.tokens' })}</B>
 					{config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.map(token => (
 						<FeatureItem key={token.id}>
@@ -105,6 +185,34 @@ export const FilterMenu = forwardRef<HTMLDivElement, IFilterMenuProps>(
 							</CheckBox>
 						</FeatureItem>
 					))}
+					{config.BASE_CONFIG.SUPER_FLUID_TOKENS.filter(
+						token =>
+							token.underlyingToken.symbol !== 'USDC' &&
+							token.underlyingToken.symbol !== 'DAI' &&
+							token.underlyingToken.symbol !== 'ETH',
+					).map(token => (
+						<FeatureItem key={token.id}>
+							<CheckBox
+								onChange={e => {
+									handleSelectFilter(e, token);
+								}}
+								checked={tokenFilters.includes(
+									token.underlyingToken.symbol,
+								)}
+								size={14}
+							>
+								<Flex $alignItems='center' gap='4px'>
+									<TokenIcon
+										symbol={token.underlyingToken.symbol}
+										size={16}
+									/>
+									<GLink size='Medium'>
+										{token.underlyingToken.symbol}
+									</GLink>
+								</Flex>
+							</CheckBox>
+						</FeatureItem>
+					))}
 				</Section>
 				<Section>
 					<B>{formatMessage({ id: 'label.state' })}</B>

diff --git a/...components/views/userProfile/donationsTab/recurringTab/RecurringDonationFiltersButton.tsx b/...components/views/userProfile/donationsTab/recurringTab/RecurringDonationFiltersButton.tsx
@@ -22,6 +22,8 @@ export interface IRecurringDonationFiltersButtonProps {
 	setTokenFilters: Dispatch<SetStateAction<string[]>>;
 	statusFilters: IFinishStatus;
 	setStatusFilters: Dispatch<SetStateAction<IFinishStatus>>;
+	networkIds: number[];
+	setNetworkIds: Dispatch<SetStateAction<number[]>>;
 }
 
 export const RecurringDonationFiltersButton: FC<
@@ -64,6 +66,8 @@ export const RecurringDonationFiltersButton: FC<
 					isOpen={isFilterOpen}
 					handleClose={handleFilterClose}
 					ref={filterMenuRef}
+					networkIds={props.networkIds}
+					setNetworkIds={props.setNetworkIds}
 				/>
 			)}
 		</Relative>