From c463698ebc9da4f9435a5e32bea833a2575b6244 Mon Sep 17 00:00:00 2001 From: kkatusic Date: Thu, 19 Dec 2024 18:00:00 +0100 Subject: [PATCH 1/4] Feat/Showing base super tokens on user recurring tab --- .../views/donate/TokenIcon/TokenIcon.tsx | 1 + .../donationsTab/recurringTab/StreamRow.tsx | 25 +++++--- src/services/donation.ts | 63 ++++++++++++++++--- src/types/superFluid.ts | 1 + 4 files changed, 73 insertions(+), 17 deletions(-) diff --git a/src/components/views/donate/TokenIcon/TokenIcon.tsx b/src/components/views/donate/TokenIcon/TokenIcon.tsx index f16fedb201..045c30066a 100644 --- a/src/components/views/donate/TokenIcon/TokenIcon.tsx +++ b/src/components/views/donate/TokenIcon/TokenIcon.tsx @@ -7,6 +7,7 @@ export interface ITokenIconProps { } export const TokenIcon: FC = ({ symbol, size = 24 }) => { + console.log({symbol}); const [src, setSrc] = useState(`/images/tokens/UNKOWN.svg`); useEffect(() => { setSrc(`/images/tokens/${symbol}.svg`); diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx index bb5bf9661a..ff2f8319e7 100644 --- a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx +++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx @@ -19,13 +19,22 @@ interface IStreamRowProps { } export const StreamRow: FC = ({ tokenStream }) => { - const superToken = useMemo( - () => - config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find( - s => s.id === tokenStream[0].token.id, - ), - [tokenStream], - ); + const superToken = useMemo(() => { + // Check the networkId of the token + const networkId = tokenStream[0].networkId; + + // Use the appropriate configuration based on the networkId + const tokenConfig = + networkId === config.BASE_NETWORK_NUMBER + ? config.BASE_CONFIG.SUPER_FLUID_TOKENS + : networkId === config.OPTIMISM_NETWORK_NUMBER + ? config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS + : []; + + // Find the super token in the selected configuration + return tokenConfig.find(s => s.id === tokenStream[0].token.id) || null; + }, [tokenStream]); + const [showModifyModal, setShowModifyModal] = useState(false); const { address, chain } = useAccount(); const { switchChain } = useSwitchChain(); @@ -36,7 +45,7 @@ export const StreamRow: FC = ({ tokenStream }) => { const { data: balance, refetch } = useBalance({ token: tokenStream[0].token.id, address: address, - chainId: config.OPTIMISM_NETWORK_NUMBER, + chainId: tokenStream[0].networkId, }); const token = findTokenByAddress(tokenStream[0].token.id); diff --git a/src/services/donation.ts b/src/services/donation.ts index b5ae210e9d..412d572e58 100644 --- a/src/services/donation.ts +++ b/src/services/donation.ts @@ -112,23 +112,68 @@ const createDonation = async (props: IOnTxHash) => { }; export const fetchUserStreams = async (address: Address) => { - const { data } = await gqlRequest( + const { data: baseData } = await gqlRequest( + config.BASE_CONFIG.superFluidSubgraph, + undefined, + FETCH_USER_STREAMS, + { address: address.toLowerCase() }, + ); + const baseStreams: ISuperfluidStream[] = baseData?.streams; + + // Categorize streams by token for Base config + const baseTokenStreams: ITokenStreams = {}; + baseStreams.forEach(stream => { + if (!baseTokenStreams[stream.token.id]) { + baseTokenStreams[stream.token.id] = []; + } + stream.networkId = config.BASE_NETWORK_NUMBER; + baseTokenStreams[stream.token.id].push(stream); + }); + + const { data: optimismData } = await gqlRequest( config.OPTIMISM_CONFIG.superFluidSubgraph, undefined, FETCH_USER_STREAMS, { address: address.toLowerCase() }, ); - const streams: ISuperfluidStream[] = data?.streams; + const optimismStreams: ISuperfluidStream[] = optimismData?.streams; - //categorize streams by token - const _tokenStreams: ITokenStreams = {}; - streams.forEach(stream => { - if (!_tokenStreams[stream.token.id]) { - _tokenStreams[stream.token.id] = []; + // Categorize streams by token for Optimism config + const optimismTokenStreams: ITokenStreams = {}; + optimismStreams.forEach(stream => { + if (!optimismTokenStreams[stream.token.id]) { + optimismTokenStreams[stream.token.id] = []; } - _tokenStreams[stream.token.id].push(stream); + stream.networkId = config.OPTIMISM_NETWORK_NUMBER; + optimismTokenStreams[stream.token.id].push(stream); }); - return _tokenStreams; + + const combinedTokenStreams: ITokenStreams = { ...baseTokenStreams }; + + Object.keys(optimismTokenStreams).forEach(tokenId => { + if (!combinedTokenStreams[tokenId]) { + combinedTokenStreams[tokenId] = []; + } + combinedTokenStreams[tokenId].push(...optimismTokenStreams[tokenId]); + }); + + // Combina and sort by flow rate in descending order + const sortedTokenStreams = Object.entries(combinedTokenStreams) + .map(([tokenId, streams]) => { + const totalFlowRate = streams.reduce( + (sum, stream) => + sum + parseFloat(stream.currentFlowRate || '0'), + 0, + ); + return { tokenId, streams, totalFlowRate }; + }) + .sort((a, b) => b.totalFlowRate - a.totalFlowRate) + .reduce((acc, { tokenId, streams }) => { + acc[tokenId] = streams; + return acc; + }, {} as ITokenStreams); + + return sortedTokenStreams; }; interface ICreateRecurringDonationBase { diff --git a/src/types/superFluid.ts b/src/types/superFluid.ts index a45afd248a..51270b63ea 100644 --- a/src/types/superFluid.ts +++ b/src/types/superFluid.ts @@ -24,6 +24,7 @@ export interface ISuperfluidStream { }; token: ISuperToken; currentFlowRate: string; + networkId: number; } export interface IStream { From 19c5bf92aaac9652a97782778d462dc3d8009f03 Mon Sep 17 00:00:00 2001 From: kkatusic Date: Thu, 19 Dec 2024 18:18:47 +0100 Subject: [PATCH 2/4] adding image for token and fixing network id --- public/images/tokens/USDCx.svg | 28 +++++++++++++++++++ .../ModifySuperToken/DepositSuperToken.tsx | 1 + .../ModifySuperToken/ModifySection.tsx | 4 ++- .../ModifySuperTokenModal.tsx | 2 +- .../ModifySuperToken/WithDrawSuperToken.tsx | 1 + .../SelectTokenModal/SelectTokenModal.tsx | 1 + .../Recurring/SelectTokenModal/StreamInfo.tsx | 4 ++- .../views/donate/TokenIcon/TokenIcon.tsx | 1 - .../donationsTab/recurringTab/StreamRow.tsx | 5 +++- src/helpers/superfluid.ts | 20 +++++++++++-- 10 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 public/images/tokens/USDCx.svg diff --git a/public/images/tokens/USDCx.svg b/public/images/tokens/USDCx.svg new file mode 100644 index 0000000000..f0409e0259 --- /dev/null +++ b/public/images/tokens/USDCx.svg @@ -0,0 +1,28 @@ + + + + + + diff --git a/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx b/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx index 9bbfbabf0e..f12348b68a 100644 --- a/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx +++ b/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx @@ -186,6 +186,7 @@ export const DepositSuperToken: FC = ({ 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 index fcd999c1d3..04b012df9a 100644 --- 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>; balance?: GetBalanceReturnType; @@ -45,6 +46,7 @@ interface IModifySectionProps { export const ModifySection: FC = ({ titleLabel, token, + recurringNetworkID, amount, setAmount, balance, @@ -62,7 +64,7 @@ export const ModifySection: FC = ({ 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 index d1b6774d3c..fd6923ef9d 100644 --- 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 index 8c3d1501db..fbd87d0b44 100644 --- 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 = ({ 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 index d111d7f59c..26e4579aa1 100644 --- 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 = ({ = ({ stream, + recurringNetworkId, balance, superToken, disable, @@ -36,7 +38,7 @@ export const StreamInfo: FC = ({ ? 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/donate/TokenIcon/TokenIcon.tsx b/src/components/views/donate/TokenIcon/TokenIcon.tsx index 045c30066a..f16fedb201 100644 --- a/src/components/views/donate/TokenIcon/TokenIcon.tsx +++ b/src/components/views/donate/TokenIcon/TokenIcon.tsx @@ -7,7 +7,6 @@ export interface ITokenIconProps { } export const TokenIcon: FC = ({ symbol, size = 24 }) => { - console.log({symbol}); const [src, setSrc] = useState(`/images/tokens/UNKOWN.svg`); useEffect(() => { setSrc(`/images/tokens/${symbol}.svg`); diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx index ff2f8319e7..f1e837efc0 100644 --- a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx +++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx @@ -48,7 +48,10 @@ export const StreamRow: FC = ({ tokenStream }) => { chainId: tokenStream[0].networkId, }); - const token = findTokenByAddress(tokenStream[0].token.id); + const token = findTokenByAddress( + tokenStream[0].token.id, + tokenStream[0].networkId, + ); const underlyingSymbol = token?.underlyingToken?.symbol || ''; const totalFlowRate = tokenStream.reduce( (acc, curr) => acc + BigInt(curr.currentFlowRate), diff --git a/src/helpers/superfluid.ts b/src/helpers/superfluid.ts index 83b80f23f1..199f298f0b 100644 --- a/src/helpers/superfluid.ts +++ b/src/helpers/superfluid.ts @@ -2,13 +2,27 @@ import { Address } from 'viem'; import config from '@/configuration'; import { IAnchorContractData } from '@/apollo/types/types'; -export const findTokenByAddress = (address?: Address) => { +export const findTokenByAddress = ( + address?: Address, + networkId: number = config.BASE_NETWORK_NUMBER, +) => { if (!address) return undefined; const _address = address.toLowerCase(); - return config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.find( + + // Choose the token configuration based on networkId + const tokenConfig = + networkId === config.BASE_NETWORK_NUMBER + ? config.BASE_CONFIG.SUPER_FLUID_TOKENS + : networkId === config.OPTIMISM_NETWORK_NUMBER + ? config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS + : []; + + // Find the token by address in the selected configuration + return tokenConfig.find( superFluidToken => superFluidToken.id.toLowerCase() === _address || - superFluidToken.underlyingToken.id.toLowerCase() === _address, + (superFluidToken.underlyingToken && + superFluidToken.underlyingToken.id.toLowerCase() === _address), ); }; From 6b25c4eaf48fdab8288de4735ad3554f03dec5f7 Mon Sep 17 00:00:00 2001 From: kkatusic Date: Thu, 19 Dec 2024 18:37:38 +0100 Subject: [PATCH 3/4] fixing fetching token for deposit --- .../ModifySuperToken/DepositSuperToken.tsx | 2 -- .../donationsTab/recurringTab/StreamRow.tsx | 32 ++++++++++++------- src/hooks/useUserStreams.ts | 1 - 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx b/src/components/views/donate/Recurring/ModifySuperToken/DepositSuperToken.tsx index f12348b68a..07a26d23a9 100644 --- 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 = ({ .parseUnits(currentAmount.toString(), 18) .toBigInt(); } - console.log('token', token); - console.log('supertoken', superToken); const upgradeOperation = await superTokenAsset.upgrade({ amount: newAmount.toString(), }); diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx index f1e837efc0..a00dd6a94a 100644 --- a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx +++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx @@ -20,9 +20,7 @@ interface IStreamRowProps { export const StreamRow: FC = ({ tokenStream }) => { const superToken = useMemo(() => { - // Check the networkId of the token const networkId = tokenStream[0].networkId; - // Use the appropriate configuration based on the networkId const tokenConfig = networkId === config.BASE_NETWORK_NUMBER @@ -32,7 +30,13 @@ export const StreamRow: FC = ({ tokenStream }) => { : []; // Find the super token in the selected configuration - return tokenConfig.find(s => s.id === tokenStream[0].token.id) || null; + return ( + tokenConfig.find( + s => + s.id.toLowerCase() === + tokenStream[0].token.id.toLowerCase(), + ) || null + ); }, [tokenStream]); const [showModifyModal, setShowModifyModal] = useState(false); @@ -40,6 +44,8 @@ export const StreamRow: FC = ({ tokenStream }) => { const { switchChain } = useSwitchChain(); const { formatMessage } = useIntl(); + const recurringNetworkId = tokenStream[0].networkId; + const chainId = chain?.id; const { data: balance, refetch } = useBalance({ @@ -116,9 +122,9 @@ export const StreamRow: FC = ({ tokenStream }) => { { - if (chainId !== config.OPTIMISM_NETWORK_NUMBER) { + if (chainId !== recurringNetworkId) { switchChain?.({ - chainId: config.OPTIMISM_NETWORK_NUMBER, + chainId: recurringNetworkId, }); } else { setShowModifyModal(true); @@ -129,13 +135,15 @@ export const StreamRow: FC = ({ tokenStream }) => { {showModifyModal && superToken && ( - + <> + + )} ); diff --git a/src/hooks/useUserStreams.ts b/src/hooks/useUserStreams.ts index c4b7a81199..6a3052459a 100644 --- a/src/hooks/useUserStreams.ts +++ b/src/hooks/useUserStreams.ts @@ -9,7 +9,6 @@ export const useUserStreams = () => { const fetchUserStreamsData = useCallback(async () => { if (!address) return; - console.log('Fetching token streams'); const _tokenStreams = await fetchUserStreams(address); setTokenStreams(_tokenStreams); }, [address]); // `address` is a dependency here From a71d8cf24fff3332495aaabdb2b7d1051178428c Mon Sep 17 00:00:00 2001 From: kkatusic Date: Fri, 20 Dec 2024 17:26:18 +0100 Subject: [PATCH 4/4] finished deposit/withdraw and filtering --- src/apollo/gql/gqlUser.ts | 2 + .../recurringTab/ActiveProjectsSection.tsx | 6 + .../recurringTab/ActiveStreamsSection.tsx | 9 +- .../donationsTab/recurringTab/FilterMenu.tsx | 108 ++++++++++++++++++ .../RecurringDonationFiltersButton.tsx | 4 + .../donationsTab/recurringTab/StreamRow.tsx | 11 ++ 6 files changed, 139 insertions(+), 1 deletion(-) diff --git a/src/apollo/gql/gqlUser.ts b/src/apollo/gql/gqlUser.ts index 7238d10f02..ea5210f53a 100644 --- 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/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ActiveProjectsSection.tsx index 37f8ba9400..5bac17b9b4 100644 --- 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([]); const [totalDonations, setTotalDonations] = useState(0); + const [networkIds, setNetworkIds] = useState([]); const [page, setPage] = useState(0); const [order, setOrder] = useState({ 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 ( @@ -122,6 +126,8 @@ export const ActiveProjectsSection = () => { setStatusFilters={setStatusFilters} tokenFilters={tokenFilters} setTokenFilters={setTokenFilters} + networkIds={networkIds} + setNetworkIds={setNetworkIds} /> )} diff --git a/src/components/views/userProfile/donationsTab/recurringTab/ActiveStreamsSection.tsx b/src/components/views/userProfile/donationsTab/recurringTab/ActiveStreamsSection.tsx index f8d32ad08c..d2b742596b 100644 --- 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 = () => { })} + + + {formatMessage({ + id: 'label.network', + })} + + {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 index 37ff53f7c1..f5b5924d4f 100644 --- 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( setStatusFilters, tokenFilters, setTokenFilters, + networkIds, + setNetworkIds, }, ref, ) => { @@ -81,6 +84,83 @@ export const FilterMenu = forwardRef(
+ {formatMessage({ id: 'label.network' })} + + { + 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} + > + + + Optimism + + + + + { + 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} + > + + + Base + + + {formatMessage({ id: 'label.tokens' })} {config.OPTIMISM_CONFIG.SUPER_FLUID_TOKENS.map(token => ( @@ -105,6 +185,34 @@ export const FilterMenu = forwardRef( ))} + {config.BASE_CONFIG.SUPER_FLUID_TOKENS.filter( + token => + token.underlyingToken.symbol !== 'USDC' && + token.underlyingToken.symbol !== 'DAI' && + token.underlyingToken.symbol !== 'ETH', + ).map(token => ( + + { + handleSelectFilter(e, token); + }} + checked={tokenFilters.includes( + token.underlyingToken.symbol, + )} + size={14} + > + + + + {token.underlyingToken.symbol} + + + + + ))}
{formatMessage({ id: 'label.state' })} diff --git a/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationFiltersButton.tsx b/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationFiltersButton.tsx index c8721122d1..8317f34c34 100644 --- a/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationFiltersButton.tsx +++ b/src/components/views/userProfile/donationsTab/recurringTab/RecurringDonationFiltersButton.tsx @@ -22,6 +22,8 @@ export interface IRecurringDonationFiltersButtonProps { setTokenFilters: Dispatch>; statusFilters: IFinishStatus; setStatusFilters: Dispatch>; + networkIds: number[]; + setNetworkIds: Dispatch>; } export const RecurringDonationFiltersButton: FC< @@ -64,6 +66,8 @@ export const RecurringDonationFiltersButton: FC< isOpen={isFilterOpen} handleClose={handleFilterClose} ref={filterMenuRef} + networkIds={props.networkIds} + setNetworkIds={props.setNetworkIds} /> )} diff --git a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx index a00dd6a94a..c931aeb179 100644 --- a/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx +++ b/src/components/views/userProfile/donationsTab/recurringTab/StreamRow.tsx @@ -13,6 +13,7 @@ import config from '@/configuration'; import { countActiveStreams } from '@/helpers/donate'; import { findTokenByAddress } from '@/helpers/superfluid'; import { ModifySuperTokenModal } from '@/components/views/donate/Recurring/ModifySuperToken/ModifySuperTokenModal'; +import NetworkLogo from '@/components/NetworkLogo'; interface IStreamRowProps { tokenStream: ISuperfluidStream[]; @@ -21,6 +22,7 @@ interface IStreamRowProps { export const StreamRow: FC = ({ tokenStream }) => { const superToken = useMemo(() => { const networkId = tokenStream[0].networkId; + // Use the appropriate configuration based on the networkId const tokenConfig = networkId === config.BASE_NETWORK_NUMBER @@ -94,6 +96,11 @@ export const StreamRow: FC = ({ tokenStream }) => {  monthly

+ + + + + {activeStreamCount}   @@ -160,3 +167,7 @@ const ModifyButton = styled(P)` color: ${brandColors.pinky[700]}; } `; + +const NetworkLogoWrapper = styled.div` + margin-left: 5px; +`;