diff --git a/apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx b/apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx index 13f7a610..c633f807 100644 --- a/apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx +++ b/apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx @@ -1,84 +1,88 @@ import { - BadgeCheck, - Bell, - ChevronsUpDown, - CreditCard, - LogOut, -} from "lucide-react" + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, +} from "lucide-react"; import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@realms-world/ui/components/ui/avatar" + Avatar, + AvatarFallback, + AvatarImage, +} from "@realms-world/ui/components/ui/avatar"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@realms-world/ui/components/ui/dropdown-menu" -import { useAccount } from "@starknet-react/core" -import { shortenHex } from "@/utils/utils" -import { StarknetLoginButton } from "@/app/_components/wallet/StarknetLoginButton" + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@realms-world/ui/components/ui/dropdown-menu"; +import { useAccount, useDisconnect } from "@starknet-react/core"; +import { shortenHex } from "@/utils/utils"; +import { StarknetLoginButton } from "@/app/_components/wallet/StarknetLoginButton"; export function NavUser({ - user, + user, }: { - user?: { - name: string - email: string - avatar: string - } + user?: { + name: string; + email: string; + avatar: string; + }; }) { - const { address } = useAccount(); + const { address } = useAccount(); + const { disconnect } = useDisconnect(); - return ( - <> - - - -
- - - CN - -
-
{user?.name}
-
-
{address && shortenHex(address, 8)}
-
-
- -
- - - -
- - - CN - -
-
{user?.name}
-
-
{user?.email}
-
-
-
- - + return ( + <> + + +
+ + + CN + +
+
{user?.name}
+
+
+ {address && shortenHex(address, 8)} +
+
+
+ +
+ + + +
+ + + CN + +
+
+ {address && shortenHex(address, 8)} +
+
+
{user?.email}
+
+
+
+ + {/* @@ -92,14 +96,14 @@ export function NavUser({ Notifications - - - - - Log out - - - - - ) + */} + + + + Log out + + + + + ); } diff --git a/apps/nextjs/src/app/(app)/account/assets/BridgeNftWrapper.tsx b/apps/nextjs/src/app/(app)/account/assets/BridgeNftWrapper.tsx index 6481296b..0070f70f 100644 --- a/apps/nextjs/src/app/(app)/account/assets/BridgeNftWrapper.tsx +++ b/apps/nextjs/src/app/(app)/account/assets/BridgeNftWrapper.tsx @@ -1,7 +1,7 @@ "use client"; import useStore from "@/hooks/useStore"; import { useTransactionManager } from "@/stores/useTransasctionManager"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { usePendingRealmsWithdrawals } from "@/hooks/bridge/data/usePendingRealmsWithdrawals"; import EthereumLogo from "@/icons/ethereum.svg"; import StarknetLogo from "@/icons/starknet.svg"; @@ -10,10 +10,9 @@ import { TriangleAlert } from "lucide-react"; import { useAccount } from "wagmi"; import { TransactionFinalityStatus } from "starknet"; -import { CollectionAddresses, Collections } from "@realms-world/constants"; +import { CollectionAddresses } from "@realms-world/constants"; import AssetL1CollectionPreview from "./AssetL1CollectionPreview"; -import AssetL2CollectionPreview from "./AssetL2CollectionPreview"; import { Tabs, TabsContent, @@ -32,10 +31,10 @@ import { Portfolio } from "./Portfolio"; import { useUserTokens } from "@/hooks/reservoir/useUserTokens"; export const BridgeNftWrapper = () => { - const [activeChain, setActiveChain] = useState("l1"); - const { address } = useAccount(); + const [activeChain, setActiveChain] = useState("l2"); + const { address: l1Address } = useAccount(); const { data: pendingWithdrawals } = usePendingRealmsWithdrawals({ - address, + address: l1Address, status: TransactionFinalityStatus.ACCEPTED_ON_L1, }); const { toggleAccount } = useUIStore((state) => state); diff --git a/apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx b/apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx index 8036143d..637fdcc1 100644 --- a/apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx +++ b/apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx @@ -1,6 +1,6 @@ "use client"; -import { useMemo, useState, useEffect, useRef } from "react"; +import { useMemo, useState, useEffect, useRef, Suspense } from "react"; import { usePendingRealmsWithdrawals } from "@/hooks/bridge/data/usePendingRealmsWithdrawals"; import { useAccount } from "wagmi"; import { useAccount as useL2Account } from "@starknet-react/core"; @@ -14,11 +14,12 @@ import { ChainId } from "@realms-world/constants"; import { getAddressesForChainId } from "@realms-world/constants/src/Collections"; import type { ViewType } from "@/app/_components/ViewToggleGroup"; import PortfolioItemsToolsBar from "./PortfolioItemsToolsBar"; -import { useInView } from "framer-motion"; +import { inView, useInView } from "framer-motion"; import PortfolioItemsFiltersPanel from "./PortfolioItemsFiltersPanel"; import { StarknetAccountLogin } from "../_components/StarknetAccountLogin"; import useNftSelection from "@/hooks/useNftSelection"; +import { CollectionItemsDataFallback } from "@/app/_components/LoadingSkeletonGrid"; export const Portfolio = ({ collectionAddress, @@ -44,6 +45,7 @@ export const Portfolio = ({ data: infiniteData, fetchNextPage, hasNextPage, + isFetching, isFetchingNextPage, } = useInfiniteQuery({ queryKey: ["walletTokens", collectionAddress, l2Address], @@ -83,7 +85,8 @@ export const Portfolio = ({ const viewRef = useRef(null); const isInView = useInView(viewRef); useEffect(() => { - if (isInView) fetchNextPage(); + console.log(isInView); + if (isInView && !isFetchingNextPage) fetchNextPage(); }, [isInView, fetchNextPage]); const { deselectAllNfts, @@ -126,17 +129,18 @@ export const Portfolio = ({ deselectAllNfts={deselectAllNfts} /> - {filteredWalletTokens.length ? ( - <> - - - ) : null} + } + > + + ) : ( diff --git a/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsGrid.tsx b/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsGrid.tsx index 6e9869f7..604d0a9c 100644 --- a/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsGrid.tsx +++ b/apps/nextjs/src/app/(app)/account/assets/PortfolioItemsGrid.tsx @@ -20,6 +20,8 @@ import type { PortfolioToken } from "@/types/ark"; import { L2ERC721Card } from "../../collection/[id]/(list)/L2ERC721Card"; import { VirtuosoGrid } from "react-virtuoso"; import type { ViewType } from "@/app/_components/ViewToggleGroup"; +import { TokenCardSkeleton } from "../../collection/TokenCardSkeleton"; +import { LoadingSkeletonGrid } from "@/app/_components/LoadingSkeletonGrid"; const LargeGridContainer: Components["List"] = React.forwardRef( ({ style, children }, ref) => { @@ -59,7 +61,9 @@ export const PortfolioItemsGrid = ({ selectable, isNftSelected, toggleNftSelection, + isFetchingNextPage, }: { + isFetchingNextPage: boolean; walletTokens: PortfolioToken[]; viewType: ViewType; selectable?: boolean; @@ -75,6 +79,13 @@ export const PortfolioItemsGrid = ({ components={{ List: viewType === "large-grid" ? LargeGridContainer : SmallGridContainer, + Footer: isFetchingNextPage + ? () => ( +
+ +
+ ) + : undefined, }} itemContent={(index) => { const token = walletTokens[index]; diff --git a/apps/nextjs/src/app/(app)/collection/CollectionsList.tsx b/apps/nextjs/src/app/(app)/collection/CollectionsList.tsx index 379b18a2..6b4aea79 100644 --- a/apps/nextjs/src/app/(app)/collection/CollectionsList.tsx +++ b/apps/nextjs/src/app/(app)/collection/CollectionsList.tsx @@ -23,7 +23,7 @@ export default async function CollectionsList() { ]); return ( -
+
{collections?.map((collection, index) => { return ( ); })} - {REALMS_L2_COLLECTIONS.map((collection, index) => )} + {REALMS_L2_COLLECTIONS.map((collection, index) => ( + + ))}
); } diff --git a/apps/nextjs/src/app/(app)/collection/TokenCardSkeleton.tsx b/apps/nextjs/src/app/(app)/collection/TokenCardSkeleton.tsx index 386ba99f..fbd717d8 100644 --- a/apps/nextjs/src/app/(app)/collection/TokenCardSkeleton.tsx +++ b/apps/nextjs/src/app/(app)/collection/TokenCardSkeleton.tsx @@ -1,23 +1,10 @@ -export function TokenCardSkeleton({ pulse = true }: { pulse?: boolean }) { +export function TokenCardSkeleton({ + pulse = true, + children, +}: React.HTMLAttributes & { pulse?: boolean }) { return (
-
-
-
-
-   -
-

-   -

-
-
+ {children}
); } diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Table.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Table.tsx index 0db2468d..54a91190 100644 --- a/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Table.tsx +++ b/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Table.tsx @@ -67,10 +67,20 @@ const L2ERC721Table = ({ } const { marketplace: arkClient } = useArkClient(); - const { data: erc721Tokens, fetchNextPage, hasNextPage, isFetching } = useSuspenseInfiniteQuery({ - queryKey: ['erc721Tokens', contractAddress, ownerAddress, filters], + const { + data: erc721Tokens, + fetchNextPage, + hasNextPage, + isFetching, + } = useSuspenseInfiniteQuery({ + queryKey: ["erc721Tokens", contractAddress, ownerAddress, filters], queryFn: async ({ pageParam }) => { - return await getCollectionTokens({ client: arkClient, collectionAddress: contractAddress, page: pageParam ?? 1, ...filters }); + return await getCollectionTokens({ + client: arkClient, + collectionAddress: contractAddress, + page: pageParam ?? 1, + ...filters, + }); }, getNextPageParam: (lastPage) => lastPage.next_page, }); @@ -96,7 +106,7 @@ const L2ERC721Table = ({ return ( <> - {selectable && + {selectable && ( - } + )}
{erc721Tokens.pages.map((page) => page.data.map((token, index) => { @@ -124,29 +134,21 @@ const L2ERC721Table = ({ ) } > - selectable - ) + ); } return ( - - - + token={token} + layout={isGrid ? "grid" : "list"} + /> ); }), )} diff --git a/apps/nextjs/src/app/(app)/page.tsx b/apps/nextjs/src/app/(app)/page.tsx index a9222392..1f2af4b7 100644 --- a/apps/nextjs/src/app/(app)/page.tsx +++ b/apps/nextjs/src/app/(app)/page.tsx @@ -4,14 +4,20 @@ import DojoDark from "@/icons/mark-dark.svg"; import Starknet from "@/icons/starknet.svg"; import { Button } from "@realms-world/ui/components/ui/button"; -import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@realms-world/ui/components/ui/carousel"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@realms-world/ui/components/ui/carousel"; import { PageLayout } from "../_components/PageLayout"; import { Partners } from "../_components/Partners"; import { BlogGrid } from "./blogs/BlogGrid"; import CollectionsList from "./collection/CollectionsList"; import { EventGrid } from "./events/EventGrid"; -import Image from "next/image" +import Image from "next/image"; import { reader } from "@/utils/keystatic"; export default async function Home() { @@ -33,17 +39,17 @@ export default async function Home() { {carouselItems.map((item, index) => ( -
+
{item.alt} -
+

{item.title}

-

{item.description}

+

{item.description}

@@ -54,33 +60,34 @@ export default async function Home() { +
+ - - -

All Games

-
- {games.map((game, index) => ( - - ))} -
- - -
-

News

- -
+

All Games

+
+ {games.map((game, index) => ( + + ))} +
-
+
+

News

+ +
-

Events

- -
+
+

Events

+ +
-
-
-

Featured Collections

- +
+
+

+ Featured Collections +

+ +
); -} \ No newline at end of file +} diff --git a/apps/nextjs/src/app/_components/LoadingSkeletonGrid.tsx b/apps/nextjs/src/app/_components/LoadingSkeletonGrid.tsx index 971799e0..22b61afb 100644 --- a/apps/nextjs/src/app/_components/LoadingSkeletonGrid.tsx +++ b/apps/nextjs/src/app/_components/LoadingSkeletonGrid.tsx @@ -9,3 +9,61 @@ export const LoadingSkeletonGrid = () => {
); }; + +import { cn } from "@realms-world/utils"; + +const ITEMS_COUNT = 30; + +type ViewType = "large-grid" | "small-grid" | "list"; + +function Card({ viewType }: { viewType: ViewType }) { + return ( + +
+
+
+
+
+ + ); +} + +export function CollectionItemsDataFallback({ + viewType, +}: { + viewType: ViewType; +}) { + if (viewType === "list") { + return null; + } + + return ( +
+ {Array.from(Array(ITEMS_COUNT).keys()).map((index) => ( + + ))} +
+ ); +} diff --git a/apps/nextjs/src/app/_components/wallet/transactions/TransactionStatusL2.tsx b/apps/nextjs/src/app/_components/wallet/transactions/TransactionStatusL2.tsx index f7e845f9..73a8398d 100644 --- a/apps/nextjs/src/app/_components/wallet/transactions/TransactionStatusL2.tsx +++ b/apps/nextjs/src/app/_components/wallet/transactions/TransactionStatusL2.tsx @@ -1,10 +1,11 @@ import { useTransactionReceipt } from "@starknet-react/core"; import { Badge } from "@realms-world/ui/components/ui/badge"; +import { padAddress } from "@realms-world/utils"; export function TransactionStatusL2({ hash }: { hash: string }) { const { data, error, isLoading, isError } = useTransactionReceipt({ - hash, + hash: padAddress(hash), watch: true, retry: true, }); diff --git a/apps/nextjs/src/hooks/reservoir/useUserTokens.ts b/apps/nextjs/src/hooks/reservoir/useUserTokens.ts index db873b20..45aefabb 100644 --- a/apps/nextjs/src/hooks/reservoir/useUserTokens.ts +++ b/apps/nextjs/src/hooks/reservoir/useUserTokens.ts @@ -10,7 +10,6 @@ export const useUserTokens = ({ address }: { address?: string }) => { }) .then((res) => res.json()) .then((res) => { - console.log(res); return res as paths["/users/{user}/tokens/v10"]["get"]["responses"]["200"]["schema"]; }), enabled: !!address, diff --git a/apps/nextjs/src/hooks/useNftSelection.ts b/apps/nextjs/src/hooks/useNftSelection.ts index 6e5863f6..5152b1b2 100644 --- a/apps/nextjs/src/hooks/useNftSelection.ts +++ b/apps/nextjs/src/hooks/useNftSelection.ts @@ -114,7 +114,6 @@ export default function useNftSelection({ tokenIds: string[], // | RouterOutputs["erc721Tokens"]["all"]["items"], ) { - console.log(tokenIds); if (tokenIds.length === 0) { return; } diff --git a/apps/nextjs/src/lib/ark/getPortfolioTokens.ts b/apps/nextjs/src/lib/ark/getPortfolioTokens.ts index cce46b79..e967c657 100644 --- a/apps/nextjs/src/lib/ark/getPortfolioTokens.ts +++ b/apps/nextjs/src/lib/ark/getPortfolioTokens.ts @@ -21,7 +21,7 @@ export async function getPortfolioTokens({ walletAddress, collectionAddress, page = 1, - itemsPerPage = 50, + itemsPerPage = 80, }: GetPortfolioActivityParams): Promise { const queryParams = [ `items_per_page=${itemsPerPage}`,