Skip to content

Commit 406737c

Browse files
RedBeardEthRedBeardEth
committed
various cleanup and merge fixes
1 parent b935417 commit 406737c

File tree

13 files changed

+246
-173
lines changed

13 files changed

+246
-173
lines changed

‎apps/nextjs/src/app/(app)/account/_components/sidebar/NavUser.tsx

+86-82
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,88 @@
11
import {
2-
BadgeCheck,
3-
Bell,
4-
ChevronsUpDown,
5-
CreditCard,
6-
LogOut,
7-
} from "lucide-react"
2+
BadgeCheck,
3+
Bell,
4+
ChevronsUpDown,
5+
CreditCard,
6+
LogOut,
7+
} from "lucide-react";
88

99
import {
10-
Avatar,
11-
AvatarFallback,
12-
AvatarImage,
13-
} from "@realms-world/ui/components/ui/avatar"
10+
Avatar,
11+
AvatarFallback,
12+
AvatarImage,
13+
} from "@realms-world/ui/components/ui/avatar";
1414
import {
15-
DropdownMenu,
16-
DropdownMenuContent,
17-
DropdownMenuGroup,
18-
DropdownMenuItem,
19-
DropdownMenuLabel,
20-
DropdownMenuSeparator,
21-
DropdownMenuTrigger,
22-
} from "@realms-world/ui/components/ui/dropdown-menu"
23-
import { useAccount } from "@starknet-react/core"
24-
import { shortenHex } from "@/utils/utils"
25-
import { StarknetLoginButton } from "@/app/_components/wallet/StarknetLoginButton"
15+
DropdownMenu,
16+
DropdownMenuContent,
17+
DropdownMenuGroup,
18+
DropdownMenuItem,
19+
DropdownMenuLabel,
20+
DropdownMenuSeparator,
21+
DropdownMenuTrigger,
22+
} from "@realms-world/ui/components/ui/dropdown-menu";
23+
import { useAccount, useDisconnect } from "@starknet-react/core";
24+
import { shortenHex } from "@/utils/utils";
25+
import { StarknetLoginButton } from "@/app/_components/wallet/StarknetLoginButton";
2626

2727
export function NavUser({
28-
user,
28+
user,
2929
}: {
30-
user?: {
31-
name: string
32-
email: string
33-
avatar: string
34-
}
30+
user?: {
31+
name: string;
32+
email: string;
33+
avatar: string;
34+
};
3535
}) {
36-
const { address } = useAccount();
36+
const { address } = useAccount();
37+
const { disconnect } = useDisconnect();
3738

38-
return (
39-
<>
40-
41-
<DropdownMenu>
42-
<DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
43-
<div className="flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all">
44-
<Avatar className="h-7 w-7 rounded-md border">
45-
<AvatarImage
46-
src={user?.avatar}
47-
alt={user?.name}
48-
className="animate-in fade-in-50 zoom-in-90"
49-
/>
50-
<AvatarFallback className="rounded-md">CN</AvatarFallback>
51-
</Avatar>
52-
<div className="grid flex-1 leading-none">
53-
<div className="font-medium">{user?.name}</div>
54-
<div className="overflow-hidden text-lg text-muted-foreground">
55-
<div className="line-clamp-1">{address && shortenHex(address, 8)}</div>
56-
</div>
57-
</div>
58-
<ChevronsUpDown className="ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50" />
59-
</div>
60-
</DropdownMenuTrigger>
61-
<DropdownMenuContent
62-
className="w-56"
63-
align="end"
64-
side="right"
65-
sideOffset={4}
66-
>
67-
<DropdownMenuLabel className="p-0 font-normal">
68-
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all">
69-
<Avatar className="h-7 w-7 rounded-md">
70-
<AvatarImage src={user?.avatar} alt={user?.name} />
71-
<AvatarFallback>CN</AvatarFallback>
72-
</Avatar>
73-
<div className="grid flex-1">
74-
<div className="font-medium">{user?.name}</div>
75-
<div className="overflow-hidden text-xs text-muted-foreground">
76-
<div className="line-clamp-1">{user?.email}</div>
77-
</div>
78-
</div>
79-
</div>
80-
</DropdownMenuLabel>
81-
<DropdownMenuSeparator />
39+
return (
40+
<>
41+
<DropdownMenu>
42+
<DropdownMenuTrigger className="w-full rounded-md outline-none ring-ring hover:bg-accent focus-visible:ring-2 data-[state=open]:bg-accent">
43+
<div className="flex items-center gap-2 px-2 py-1.5 text-left text-sm transition-all">
44+
<Avatar className="h-7 w-7 rounded-md border">
45+
<AvatarImage
46+
src={user?.avatar}
47+
alt={user?.name}
48+
className="animate-in fade-in-50 zoom-in-90"
49+
/>
50+
<AvatarFallback className="rounded-md">CN</AvatarFallback>
51+
</Avatar>
52+
<div className="grid flex-1 leading-none">
53+
<div className="font-medium">{user?.name}</div>
54+
<div className="overflow-hidden text-lg text-muted-foreground">
55+
<div className="line-clamp-1">
56+
{address && shortenHex(address, 8)}
57+
</div>
58+
</div>
59+
</div>
60+
<ChevronsUpDown className="ml-auto mr-0.5 h-4 w-4 text-muted-foreground/50" />
61+
</div>
62+
</DropdownMenuTrigger>
63+
<DropdownMenuContent
64+
className="w-56"
65+
align="end"
66+
side="right"
67+
sideOffset={4}
68+
>
69+
<DropdownMenuLabel className="p-0 font-normal">
70+
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm transition-all">
71+
<Avatar className="h-7 w-7 rounded-md">
72+
<AvatarImage src={user?.avatar} alt={address} />
73+
<AvatarFallback>CN</AvatarFallback>
74+
</Avatar>
75+
<div className="grid flex-1">
76+
<div className="font-medium">
77+
{address && shortenHex(address, 8)}
78+
</div>
79+
<div className="overflow-hidden text-xs text-muted-foreground">
80+
<div className="line-clamp-1">{user?.email}</div>
81+
</div>
82+
</div>
83+
</div>
84+
</DropdownMenuLabel>
85+
{/*<DropdownMenuSeparator />
8286
<DropdownMenuGroup>
8387
<DropdownMenuItem className="gap-2">
8488
<BadgeCheck className="h-4 w-4 text-muted-foreground" />
@@ -92,14 +96,14 @@ export function NavUser({
9296
<Bell className="h-4 w-4 text-muted-foreground" />
9397
Notifications
9498
</DropdownMenuItem>
95-
</DropdownMenuGroup>
96-
<DropdownMenuSeparator />
97-
<DropdownMenuItem className="gap-2">
98-
<LogOut className="h-4 w-4 text-muted-foreground" />
99-
Log out
100-
</DropdownMenuItem>
101-
</DropdownMenuContent>
102-
</DropdownMenu>
103-
</>
104-
)
99+
</DropdownMenuGroup>*/}
100+
<DropdownMenuSeparator />
101+
<DropdownMenuItem onClick={disconnect} className="gap-2">
102+
<LogOut className="h-4 w-4 text-muted-foreground" />
103+
Log out
104+
</DropdownMenuItem>
105+
</DropdownMenuContent>
106+
</DropdownMenu>
107+
</>
108+
);
105109
}

‎apps/nextjs/src/app/(app)/account/assets/BridgeNftWrapper.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22
import useStore from "@/hooks/useStore";
33
import { useTransactionManager } from "@/stores/useTransasctionManager";
4-
import { useState } from "react";
4+
import { useEffect, useState } from "react";
55
import { usePendingRealmsWithdrawals } from "@/hooks/bridge/data/usePendingRealmsWithdrawals";
66
import EthereumLogo from "@/icons/ethereum.svg";
77
import StarknetLogo from "@/icons/starknet.svg";
@@ -10,10 +10,9 @@ import { TriangleAlert } from "lucide-react";
1010
import { useAccount } from "wagmi";
1111
import { TransactionFinalityStatus } from "starknet";
1212

13-
import { CollectionAddresses, Collections } from "@realms-world/constants";
13+
import { CollectionAddresses } from "@realms-world/constants";
1414

1515
import AssetL1CollectionPreview from "./AssetL1CollectionPreview";
16-
import AssetL2CollectionPreview from "./AssetL2CollectionPreview";
1716
import {
1817
Tabs,
1918
TabsContent,
@@ -32,10 +31,10 @@ import { Portfolio } from "./Portfolio";
3231
import { useUserTokens } from "@/hooks/reservoir/useUserTokens";
3332

3433
export const BridgeNftWrapper = () => {
35-
const [activeChain, setActiveChain] = useState("l1");
36-
const { address } = useAccount();
34+
const [activeChain, setActiveChain] = useState("l2");
35+
const { address: l1Address } = useAccount();
3736
const { data: pendingWithdrawals } = usePendingRealmsWithdrawals({
38-
address,
37+
address: l1Address,
3938
status: TransactionFinalityStatus.ACCEPTED_ON_L1,
4039
});
4140
const { toggleAccount } = useUIStore((state) => state);

‎apps/nextjs/src/app/(app)/account/assets/Portfolio.tsx

+18-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { useMemo, useState, useEffect, useRef } from "react";
3+
import { useMemo, useState, useEffect, useRef, Suspense } from "react";
44
import { usePendingRealmsWithdrawals } from "@/hooks/bridge/data/usePendingRealmsWithdrawals";
55
import { useAccount } from "wagmi";
66
import { useAccount as useL2Account } from "@starknet-react/core";
@@ -14,11 +14,12 @@ import { ChainId } from "@realms-world/constants";
1414
import { getAddressesForChainId } from "@realms-world/constants/src/Collections";
1515
import type { ViewType } from "@/app/_components/ViewToggleGroup";
1616
import PortfolioItemsToolsBar from "./PortfolioItemsToolsBar";
17-
import { useInView } from "framer-motion";
17+
import { inView, useInView } from "framer-motion";
1818
import PortfolioItemsFiltersPanel from "./PortfolioItemsFiltersPanel";
1919
import { StarknetAccountLogin } from "../_components/StarknetAccountLogin";
2020

2121
import useNftSelection from "@/hooks/useNftSelection";
22+
import { CollectionItemsDataFallback } from "@/app/_components/LoadingSkeletonGrid";
2223

2324
export const Portfolio = ({
2425
collectionAddress,
@@ -44,6 +45,7 @@ export const Portfolio = ({
4445
data: infiniteData,
4546
fetchNextPage,
4647
hasNextPage,
48+
isFetching,
4749
isFetchingNextPage,
4850
} = useInfiniteQuery({
4951
queryKey: ["walletTokens", collectionAddress, l2Address],
@@ -83,7 +85,8 @@ export const Portfolio = ({
8385
const viewRef = useRef(null);
8486
const isInView = useInView(viewRef);
8587
useEffect(() => {
86-
if (isInView) fetchNextPage();
88+
console.log(isInView);
89+
if (isInView && !isFetchingNextPage) fetchNextPage();
8790
}, [isInView, fetchNextPage]);
8891
const {
8992
deselectAllNfts,
@@ -126,17 +129,18 @@ export const Portfolio = ({
126129
deselectAllNfts={deselectAllNfts}
127130
/>
128131
</div>
129-
{filteredWalletTokens.length ? (
130-
<>
131-
<PortfolioItemsGrid
132-
walletTokens={filteredWalletTokens}
133-
viewType={viewType}
134-
selectable={selectable}
135-
isNftSelected={isNftSelected}
136-
toggleNftSelection={toggleNftSelection}
137-
/>
138-
</>
139-
) : null}
132+
<Suspense
133+
fallback={<CollectionItemsDataFallback viewType={viewType} />}
134+
>
135+
<PortfolioItemsGrid
136+
walletTokens={filteredWalletTokens}
137+
viewType={viewType}
138+
selectable={selectable}
139+
isNftSelected={isNftSelected}
140+
toggleNftSelection={toggleNftSelection}
141+
isFetchingNextPage={isFetchingNextPage}
142+
/>
143+
</Suspense>
140144
</div>
141145
</div>
142146
) : (

‎apps/nextjs/src/app/(app)/account/assets/PortfolioItemsGrid.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import type { PortfolioToken } from "@/types/ark";
2020
import { L2ERC721Card } from "../../collection/[id]/(list)/L2ERC721Card";
2121
import { VirtuosoGrid } from "react-virtuoso";
2222
import type { ViewType } from "@/app/_components/ViewToggleGroup";
23+
import { TokenCardSkeleton } from "../../collection/TokenCardSkeleton";
24+
import { LoadingSkeletonGrid } from "@/app/_components/LoadingSkeletonGrid";
2325

2426
const LargeGridContainer: Components["List"] = React.forwardRef(
2527
({ style, children }, ref) => {
@@ -59,7 +61,9 @@ export const PortfolioItemsGrid = ({
5961
selectable,
6062
isNftSelected,
6163
toggleNftSelection,
64+
isFetchingNextPage,
6265
}: {
66+
isFetchingNextPage: boolean;
6367
walletTokens: PortfolioToken[];
6468
viewType: ViewType;
6569
selectable?: boolean;
@@ -75,6 +79,13 @@ export const PortfolioItemsGrid = ({
7579
components={{
7680
List:
7781
viewType === "large-grid" ? LargeGridContainer : SmallGridContainer,
82+
Footer: isFetchingNextPage
83+
? () => (
84+
<div>
85+
<LoadingSkeletonGrid />
86+
</div>
87+
)
88+
: undefined,
7889
}}
7990
itemContent={(index) => {
8091
const token = walletTokens[index];

‎apps/nextjs/src/app/(app)/collection/CollectionsList.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default async function CollectionsList() {
2323
]);
2424

2525
return (
26-
<div className="grid w-full grid-cols-1 gap-6 px-4 sm:px-0">
26+
<div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-6 px-4 sm:px-0">
2727
{collections?.map((collection, index) => {
2828
return (
2929
<CollectionCard
@@ -36,7 +36,9 @@ export default async function CollectionsList() {
3636
/>
3737
);
3838
})}
39-
{REALMS_L2_COLLECTIONS.map((collection, index) => <ArkCollectionCardFetcher source={collection} key={index} />)}
39+
{REALMS_L2_COLLECTIONS.map((collection, index) => (
40+
<ArkCollectionCardFetcher source={collection} key={index} />
41+
))}
4042
</div>
4143
);
4244
}

‎apps/nextjs/src/app/(app)/collection/TokenCardSkeleton.tsx

+5-18
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,10 @@
1-
export function TokenCardSkeleton({ pulse = true }: { pulse?: boolean }) {
1+
export function TokenCardSkeleton({
2+
pulse = true,
3+
children,
4+
}: React.HTMLAttributes<HTMLDivElement> & { pulse?: boolean }) {
25
return (
36
<div className="flex min-h-[300px] flex-row border-2 bg-background/90">
4-
<div className="flex-grow">
5-
<div className="h-[200px] w-full animate-pulse bg-black/60"></div>
6-
<div className="space-y-3 p-4">
7-
<div
8-
className={`w-1/2 bg-medium-dark-green ${pulse && "animate-pulse"}`}
9-
>
10-
&nbsp;
11-
</div>
12-
<p
13-
className={`w-1/3 bg-medium-dark-green text-sm ${
14-
pulse && "animate-pulse"
15-
}`}
16-
>
17-
&nbsp;
18-
</p>
19-
</div>
20-
</div>
7+
{children}
218
</div>
229
);
2310
}

0 commit comments

Comments
 (0)