diff --git a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx index 8ef3c3a2..37461349 100644 --- a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx +++ b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx @@ -85,7 +85,7 @@ export default function TokenList({ nftContractAddress }: TokenListProps) { // const hasMoreThan100Nfts = // nftsData.pages.length > 1 || (nftsData.pages.length === 1 && hasNextPage); const hasMoreThanMaxSelectNfts = - nftsData.pages[0]?.ownedNfts.length ?? 0 > MAX_SELECTED_ITEMS; + (nftsData.pages[0]?.ownedNfts.length ?? 0) > MAX_SELECTED_ITEMS; const isAllSelected = (totalSelectedNfts === MAX_SELECTED_ITEMS || diff --git a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx index 9adbcc0a..a455745f 100644 --- a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx +++ b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import CollectionNftsEmptyState from "~/app/_components/CollectionNftsEmptyState"; import ConditionalWrapper from "~/app/_components/ConditionalWrapper"; +import InfiniteScrollButton from "~/app/_components/InfiniteScrollButton"; import NftCard from "~/app/_components/NftCard/NftCard"; import NftsLoadingState from "~/app/_components/NftsLoadingState"; import useCurrentChain from "~/app/_hooks/useCurrentChain"; @@ -11,6 +12,9 @@ import { type Collection } from "~/server/api/types"; import useNftSelection from "../_hooks/useNftSelection"; interface CollectionGridProps { + fetchNextPage: () => void; + hasNextPage?: boolean; + isFetchingNextPage: boolean; nftCollectionPages?: Array<{ collections: Array; totalCount: number; @@ -21,6 +25,9 @@ interface CollectionGridProps { * TODO @YohanTz: Take time to optimize the lists with React.memo etc. */ export default function CollectionGrid({ + fetchNextPage, + hasNextPage, + isFetchingNextPage, nftCollectionPages, }: CollectionGridProps) { const { sourceChain } = useCurrentChain(); @@ -36,43 +43,52 @@ export default function CollectionGrid({ } return ( -
- {nftCollectionPages?.map((nftCollectionPage) => { - return nftCollectionPage.collections.map((nftCollection) => { - return ( - - nftCollection.isBridgeable ? ( - - {children} - - ) : ( -
{children}
- ) - } - key={nftCollection.contractAddress} - > - +
+ {nftCollectionPages?.map((nftCollectionPage) => { + return nftCollectionPage.collections.map((nftCollection) => { + return ( + + nftCollection.isBridgeable ? ( + + {children} + + ) : ( +
{children}
+ ) } - cardType="collection" - chain={sourceChain} - disabled={!nftCollection.isBridgeable} - isBridgeable={nftCollection.isBridgeable} - media={nftCollection.media} - numberOfNfts={nftCollection.totalBalance} - onClick={() => {}} - title={nftCollection.name} - /> -
- ); - }); - })} -
+ key={nftCollection.contractAddress} + > + {}} + title={nftCollection.name} + /> +
+ ); + }); + })} +
+ + ); } diff --git a/apps/web/src/app/(routes)/bridge/_components/Collections.tsx b/apps/web/src/app/(routes)/bridge/_components/Collections.tsx index 5c4ad7fa..8ca39c43 100644 --- a/apps/web/src/app/(routes)/bridge/_components/Collections.tsx +++ b/apps/web/src/app/(routes)/bridge/_components/Collections.tsx @@ -8,25 +8,45 @@ import CollectionHeader from "./CollectionHeader"; export default function Collections() { const { sourceChain } = useCurrentChain(); - const { data: l1CollectionsData, totalCount: l1CollectionsTotalCount } = - useInfiniteEthereumCollections(); - const { data: l2CollectionsData, totalCount: l2CollectionsTotalCount } = - useInfiniteStarknetCollections(); + const { + data: l1CollectionsData, + fetchNextPage: l1FetchNextPage, + hasNextPage: l1HasNextPage, + isFetchingNextPage: l1IsFetchingNextPage, + totalCount: l1CollectionsTotalCount, + } = useInfiniteEthereumCollections(); + const { + data: l2CollectionsData, + fetchNextPage: l2FetchNextPage, + hasNextPage: l2HasNextPage, + isFetchingNextPage: l2IsFetchingNextPage, + totalCount: l2CollectionsTotalCount, + } = useInfiniteStarknetCollections(); const pages = sourceChain === "Ethereum" ? l1CollectionsData?.pages : l2CollectionsData?.pages; - const totalCount = sourceChain === "Ethereum" ? l1CollectionsTotalCount : l2CollectionsTotalCount; + const hasNextPage = + sourceChain === "Ethereum" ? l1HasNextPage : l2HasNextPage; + const fetchNextPage = + sourceChain === "Ethereum" ? l1FetchNextPage : l2FetchNextPage; + const isFetchingNextPage = + sourceChain === "Ethereum" ? l1IsFetchingNextPage : l2IsFetchingNextPage; return ( <> - + void fetchNextPage()} + hasNextPage={hasNextPage} + isFetchingNextPage={isFetchingNextPage} + nftCollectionPages={pages} + /> ); }