various cleanup and merge fixes

BibliothecaDAO · Oct 6, 2024 · 406737c · 406737c
1 parent b935417
commit 406737c
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 173 deletions.
diff --git 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 (
-        <>
-
-            <DropdownMenu>
-                <DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
-                    <div className="flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all">
-                        <Avatar className="h-7 w-7 rounded-md border">
-                            <AvatarImage
-                                src={user?.avatar}
-                                alt={user?.name}
-                                className="animate-in fade-in-50 zoom-in-90"
-                            />
-                            <AvatarFallback className="rounded-md">CN</AvatarFallback>
-                        </Avatar>
-                        <div className="grid flex-1 leading-none">
-                            <div className="font-medium">{user?.name}</div>
-                            <div className="overflow-hidden text-lg text-muted-foreground">
-                                <div className="line-clamp-1">{address && shortenHex(address, 8)}</div>
-                            </div>
-                        </div>
-                        <ChevronsUpDown className="ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50" />
-                    </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent
-                    className="w-56"
-                    align="end"
-                    side="right"
-                    sideOffset={4}
-                >
-                    <DropdownMenuLabel className="p-0 font-normal">
-                        <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all">
-                            <Avatar className="h-7 w-7 rounded-md">
-                                <AvatarImage src={user?.avatar} alt={user?.name} />
-                                <AvatarFallback>CN</AvatarFallback>
-                            </Avatar>
-                            <div className="grid flex-1">
-                                <div className="font-medium">{user?.name}</div>
-                                <div className="overflow-hidden text-xs text-muted-foreground">
-                                    <div className="line-clamp-1">{user?.email}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </DropdownMenuLabel>
-                    <DropdownMenuSeparator />
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
+          <div className="flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all">
+            <Avatar className="h-7 w-7 rounded-md border">
+              <AvatarImage
+                src={user?.avatar}
+                alt={user?.name}
+                className="animate-in fade-in-50 zoom-in-90"
+              />
+              <AvatarFallback className="rounded-md">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 leading-none">
+              <div className="font-medium">{user?.name}</div>
+              <div className="overflow-hidden text-lg text-muted-foreground">
+                <div className="line-clamp-1">
+                  {address && shortenHex(address, 8)}
+                </div>
+              </div>
+            </div>
+            <ChevronsUpDown className="ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50" />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="w-56"
+          align="end"
+          side="right"
+          sideOffset={4}
+        >
+          <DropdownMenuLabel className="p-0 font-normal">
+            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all">
+              <Avatar className="h-7 w-7 rounded-md">
+                <AvatarImage src={user?.avatar} alt={address} />
+                <AvatarFallback>CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1">
+                <div className="font-medium">
+                  {address && shortenHex(address, 8)}
+                </div>
+                <div className="overflow-hidden text-xs text-muted-foreground">
+                  <div className="line-clamp-1">{user?.email}</div>
+                </div>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          {/*<DropdownMenuSeparator />
                     <DropdownMenuGroup>
                         <DropdownMenuItem className="gap-2">
                             <BadgeCheck className="h-4 w-4 text-muted-foreground" />
@@ -92,14 +96,14 @@ export function NavUser({
                             <Bell className="h-4 w-4 text-muted-foreground" />
                             Notifications
                         </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem className="gap-2">
-                        <LogOut className="h-4 w-4 text-muted-foreground" />
-                        Log out
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </>
-    )
+    </DropdownMenuGroup>*/}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={disconnect} className="gap-2">
+            <LogOut className="h-4 w-4 text-muted-foreground" />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
 }
diff --git 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
@@ -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}
               />
             </div>
-            {filteredWalletTokens.length ? (
-              <>
-                <PortfolioItemsGrid
-                  walletTokens={filteredWalletTokens}
-                  viewType={viewType}
-                  selectable={selectable}
-                  isNftSelected={isNftSelected}
-                  toggleNftSelection={toggleNftSelection}
-                />
-              </>
-            ) : null}
+            <Suspense
+              fallback={<CollectionItemsDataFallback viewType={viewType} />}
+            >
+              <PortfolioItemsGrid
+                walletTokens={filteredWalletTokens}
+                viewType={viewType}
+                selectable={selectable}
+                isNftSelected={isNftSelected}
+                toggleNftSelection={toggleNftSelection}
+                isFetchingNextPage={isFetchingNextPage}
+              />
+            </Suspense>
           </div>
         </div>
       ) : (

diff --git 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
+          ? () => (
+              <div>
+                <LoadingSkeletonGrid />
+              </div>
+            )
+          : 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
@@ -23,7 +23,7 @@ export default async function CollectionsList() {
   ]);
 
   return (
-    <div className="grid w-full grid-cols-1 gap-6 px-4 sm:px-0">
+    <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-6 px-4 sm:px-0">
       {collections?.map((collection, index) => {
         return (
           <CollectionCard
@@ -36,7 +36,9 @@ export default async function CollectionsList() {
           />
         );
       })}
-      {REALMS_L2_COLLECTIONS.map((collection, index) => <ArkCollectionCardFetcher source={collection} key={index} />)}
+      {REALMS_L2_COLLECTIONS.map((collection, index) => (
+        <ArkCollectionCardFetcher source={collection} key={index} />
+      ))}
     </div>
   );
 }
diff --git 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<HTMLDivElement> & { pulse?: boolean }) {
   return (
     <div className="flex min-h-[300px] flex-row border-2 bg-background/90">
-      <div className="flex-grow">
-        <div className="h-[200px] w-full animate-pulse bg-black/60"></div>
-        <div className="space-y-3 p-4">
-          <div
-            className={`w-1/2 bg-medium-dark-green ${pulse && "animate-pulse"}`}
-          >
-            &nbsp;
-          </div>
-          <p
-            className={`w-1/3 bg-medium-dark-green text-sm ${
-              pulse && "animate-pulse"
-            }`}
-          >
-            &nbsp;
-          </p>
-        </div>
-      </div>
+      {children}
     </div>
   );
 }