Skip to content

Commit 325d9af

Browse files
MartianGreedMartianGreed
committed
feat: add tooltip, fix profile, offers ... UX
1 parent 6e63487 commit 325d9af

File tree

9 files changed

+91
-218
lines changed

9 files changed

+91
-218
lines changed

‎apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default function CollectionHeaderStats({
1515
const parsedCollectionFloor7dPercentage = parseFloat(
1616
collection.floor_7d_percentage,
1717
);
18+
console.log(collection);
1819

1920
return (
2021
<div className="hidden grid-cols-2 items-center justify-between gap-2 md:flex md:h-12 md:gap-6 md:pr-5 xl:flex">
@@ -23,18 +24,17 @@ export default function CollectionHeaderStats({
2324
<div className="flex items-center gap-2 font-medium font-numbers text-xl">
2425
<LordsLogo className="size-5" />
2526
<p>{formatUnits(collection.floor ?? 0, 18)} LORDS</p>
26-
{/* TODO @YohanTz: Proper color */}
27-
{/* <p
27+
<p
2828
className={cn(
29-
"text-sm font-semibold",
30-
collection.floor_7d_percentage < 0
29+
"text-base font-medium",
30+
parsedCollectionFloor7dPercentage < 0
3131
? "text-red-500"
3232
: "text-green-500",
3333
)}
3434
>
35-
{collection.floor_7d_percentage >= 0 && "+"}
36-
{formatNumber(collection.floor_7d_percentage)}%
37-
</p> */}
35+
{parsedCollectionFloor7dPercentage >= 0 && "+"}
36+
{formatNumber(parsedCollectionFloor7dPercentage)}%
37+
</p>
3838
</div>
3939
</div>
4040
<Separator orientation="vertical" className="hidden md:block" />

‎apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import type { PropsWithClassName } from "@ark-market/ui";
2+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ark-market/ui/tooltip";
3+
import type { WalletToken } from "~/app/wallet/[walletAddress]/queries/getWalletData";
24
import Media from "~/components/media";
35
import { useBeasts } from "~/hooks/useBeasts";
46
import type { Resources } from "~/hooks/useSeasonPass";
57
import { useSeasonPass } from "~/hooks/useSeasonPass";
68
import type { CollectionToken } from "~/types";
79

810
interface CollectionTokenImageProps {
9-
token: CollectionToken;
11+
token: CollectionToken | WalletToken;
1012
height?: number;
1113
width?: number;
1214
}
@@ -73,8 +75,18 @@ export function CollectionTokenImage({ token, height, width }: PropsWithClassNam
7375
/>
7476
);
7577
}
78+
7679
function RealmsResourceItem({ resource }: { resource: Resources }) {
7780
return (
78-
<Media src={resource.img} height={20} width={20} alt={""} />
81+
<TooltipProvider>
82+
<Tooltip>
83+
<TooltipTrigger>
84+
<Media src={resource.img} height={20} width={20} alt={resource.trait} />
85+
</TooltipTrigger>
86+
<TooltipContent>
87+
<div>{resource.trait}</div>
88+
</TooltipContent>
89+
</Tooltip>
90+
</TooltipProvider>
7991
)
8092
}

‎apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ export async function generateMetadata({
3232
],
3333
},
3434
twitter: {
35-
images: [
36-
{
37-
url: `https://market.realms.world/og/eternum-season-pass.png`,
38-
width: 1200,
39-
height: 630,
40-
},
41-
],
35+
title: `Eternum Season 0 Pass`,
36+
description: 'Conquer the Realms',
37+
creator: '@RealmsEternum',
38+
images: {
39+
url: `https://market.realms.world/og/eternum-season-pass.png`,
40+
alt: 'Eternum Season 0 Pass',
41+
},
4242
},
4343
}
4444
}

‎apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export function TokenImage({ token }: PropsWithClassName<TokenSummaryProps>) {
7575
function RealmsResourceItem({ resource }: { resource: Resources }) {
7676
return (
7777
<div className="flex items-center">
78-
<Media src={resource.img} height={25} width={25} alt={resource.description} />
78+
<Media src={resource.img} height={25} width={25} alt={resource.trait} />
7979
<span className="pl-2">{resource.trait}</span>
8080
</div>
8181
)

‎apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx‎

Lines changed: 8 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -36,151 +36,13 @@ export default function PortfolioActivityData({
3636
);
3737

3838
return (
39-
<Table ref={tableRef}>
40-
<TableHeader className="h-12">
41-
<TableRow
42-
className={cn(
43-
"absolute grid w-full items-center",
44-
gridTemplateColumnValue,
45-
)}
46-
>
47-
<TableHead className="sticky top-0 flex items-center bg-background pl-5">
48-
Event
49-
</TableHead>
50-
<TableHead className="sticky top-0 flex items-center bg-background">
51-
Token
52-
</TableHead>
53-
<TableHead className="sticky top-0 flex items-center bg-background">
54-
Price
55-
</TableHead>
56-
<TableHead className="sticky top-0 flex items-center bg-background">
57-
From
58-
</TableHead>
59-
<TableHead className="sticky top-0 flex items-center bg-background">
60-
To
61-
</TableHead>
62-
<TableHead className="sticky top-0 flex items-center bg-background">
63-
Date
64-
</TableHead>
65-
<TableHead className="sticky top-0 flex items-center bg-background"></TableHead>
66-
</TableRow>
67-
</TableHeader>
68-
<TableBody
69-
className="font-numbers relative text-sm font-medium"
70-
style={{ height: `${rowVirtualizer.getTotalSize() + 2}px` }}
71-
>
72-
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
73-
const activity = portfolioActivity[virtualRow.index];
74-
75-
if (activity === undefined) {
76-
return null;
77-
}
78-
79-
return (
80-
<TableRow
81-
className={cn(
82-
"group absolute grid h-[6.25rem] w-full items-center",
83-
gridTemplateColumnValue,
84-
)}
85-
data-index={virtualRow.index}
86-
key={`${virtualRow.index}-${activity.time_stamp}-${activity.transaction_hash}`}
87-
ref={(node) => rowVirtualizer.measureElement(node)}
88-
style={{
89-
transform: `translateY(${virtualRow.start}px)`,
90-
}}
91-
>
92-
<TableCell className="items-center gap-4 whitespace-nowrap pl-5">
93-
<div className="flex items-center gap-4 whitespace-nowrap">
94-
{activityTypeMetadata[activity.activity_type].icon}
95-
<p>{activityTypeMetadata[activity.activity_type].title}</p>
96-
</div>
97-
</TableCell>
98-
<TableCell>
99-
<div className="flex items-center gap-4">
100-
<Media
101-
className="size-[3.75rem] rounded-xs object-contain"
102-
height={120}
103-
width={120}
104-
alt={activity.metadata?.name ?? "Unnamed Token"}
105-
src={activity.metadata?.image ?? ""}
106-
mediaKey={activity.metadata?.image_key ?? ""}
107-
/>
108-
<div className="w-full overflow-hidden">
109-
<Link
110-
className={focusableStyles}
111-
href={`/token/${activity.collection_address}/${activity.token_id}`}
112-
>
113-
<p
114-
className={cn(
115-
"w-full text-base font-medium",
116-
ellipsableStyles,
117-
)}
118-
>
119-
{activity.metadata?.name ?? "Unnamed Token"}
120-
</p>
121-
</Link>
122-
<div className="flex w-full items-center gap-1">
123-
<Link
124-
className={focusableStyles}
125-
href={`/collection/${activity.collection_address}`}
126-
>
127-
<p
128-
className={cn(
129-
"text-muted-foreground",
130-
ellipsableStyles,
131-
)}
132-
>
133-
{activity.collection_name}
134-
</p>
135-
</Link>
136-
{activity.collection_is_verified && (
137-
<VerifiedIcon className="size-4 text-primary" />
138-
)}
139-
</div>
140-
</div>
141-
</div>
142-
</TableCell>
143-
<TableCell>
144-
{activity.price ? <PriceTag price={activity.price} token="lords" /> : "_"}
145-
</TableCell>
146-
<TableCell>
147-
{activity.from ? (
148-
<Link href={`/wallet/${activity.from}`}>
149-
{ownerOrShortAddress({
150-
ownerAddress: activity.from,
151-
address,
152-
})}
153-
</Link>
154-
) : (
155-
"_"
156-
)}
157-
</TableCell>
158-
<TableCell>
159-
{activity.to ? (
160-
<Link href={`/wallet/${activity.to}`}>
161-
{ownerOrShortAddress({
162-
ownerAddress: activity.to,
163-
address,
164-
})}
165-
</Link>
166-
) : (
167-
"_"
168-
)}
169-
</TableCell>
170-
<TableCell>
171-
{activity.time_stamp ? timeSince(activity.time_stamp) : "_"}
172-
</TableCell>
173-
<TableCell className="pr-5">
174-
<Button asChild size="icon" variant="outline">
175-
<ExternalLink href="/">
176-
<ArrowUpRight className="size-5" />
177-
</ExternalLink>
178-
</Button>
179-
</TableCell>
180-
</TableRow>
181-
);
182-
})}
183-
</TableBody>
184-
</Table>
39+
<div>
40+
<div className="hidden md:block">
41+
<DesktopPortfolioActivity portfolioActivity={portfolioActivity} />
42+
</div>
43+
<div className="md:hidden">
44+
<MobilePortfolioActivity portfolioActivity={portfolioActivity} />
45+
</div>
46+
</div>
18547
);
18648
}

‎apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx‎

Lines changed: 48 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import type { WalletToken } from "../queries/getWalletData";
2323
import { TokenActionsCreateListing } from "~/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing";
2424
import Media from "~/components/media";
2525
import { CollectionDescription } from "~/config/homepage";
26+
import { CollectionTokenImage } from "~/app/collection/[collectionAddress]/components/collection-token-image";
2627

2728
const LargeGridContainer: Components["List"] = React.forwardRef(
2829
({ style, children }, ref) => {
@@ -89,61 +90,57 @@ export default function CollectionItemsDataGridView({
8990

9091
const canListItem = isOwner && !token.list_price;
9192

92-
return (
93-
// TODO @YohanTz: Extract to NftCard component and sub-components
94-
<NftCard>
95-
<Link
96-
href={`/token/${token.collection_address}/${token.token_id}`}
97-
className={cn("flex items-center gap-1", focusableStyles)}
98-
>
99-
<NftCardMedia>
100-
{/* TODO: Media part of NftCardMedia */}
101-
<Media
102-
alt={token.metadata?.name ?? "Empty"}
103-
className="aspect-square w-full object-contain transition-transform group-hover:scale-110"
104-
src={token.metadata?.image}
105-
mediaKey={token.metadata?.image_key}
106-
thumbnailKey={token.metadata?.image_key_540_540}
107-
height={viewType === "large-grid" ? 540 : 340}
108-
width={viewType === "large-grid" ? 540 : 340}
109-
/>
110-
</NftCardMedia>
111-
</Link>
112-
<NftCardContent>
113-
<div className="flex w-full justify-between">
114-
<div className="w-full overflow-hidden">
115-
<Link
116-
href={`/token/${token.collection_address}/${token.token_id}`}
117-
className={cn("flex items-center gap-1", focusableStyles)}
93+
return (
94+
// TODO @YohanTz: Extract to NftCard component and sub-components
95+
<NftCard>
96+
<Link
97+
href={`/token/${token.collection_address}/${token.token_id}`}
98+
className={cn("flex items-center gap-1", focusableStyles)}
99+
>
100+
<NftCardMedia className="aspect-auto">
101+
{/* TODO: Media part of NftCardMedia */}
102+
<CollectionTokenImage
103+
token={token}
104+
height={viewType === "large-grid" ? 540 : 340}
105+
width={viewType === "large-grid" ? 540 : 340}
106+
/>
107+
</NftCardMedia>
108+
</Link>
109+
<NftCardContent>
110+
<div className="flex w-full justify-between">
111+
<div className="w-full overflow-hidden">
112+
<Link
113+
href={`/token/${token.collection_address}/${token.token_id}`}
114+
className={cn("flex items-center gap-1", focusableStyles)}
115+
>
116+
<p
117+
className={cn(
118+
"text-base font-bold leading-none",
119+
viewType === "large-grid" && "font-bold sm:text-xl",
120+
ellipsableStyles,
121+
)}
118122
>
119-
<p
120-
className={cn(
121-
"text-base font-bold leading-none",
122-
viewType === "large-grid" && "font-bold sm:text-xl",
123-
ellipsableStyles,
124-
)}
125-
>
126-
{token.metadata?.name ?? token.token_id}
127-
</p>
128-
</Link>
129-
<Link
130-
href={`/collection/${token.collection_address}`}
123+
{token.metadata?.name ?? token.token_id}
124+
</p>
125+
</Link>
126+
<Link
127+
href={`/collection/${token.collection_address}`}
128+
className={cn(
129+
"mt-1 flex items-center gap-1",
130+
focusableStyles,
131+
)}
132+
>
133+
<p
131134
className={cn(
132-
"mt-1 flex items-center gap-1",
133-
focusableStyles,
135+
"text-sm font-normal text-accent-foreground transition-colors hover:text-primary",
136+
viewType === "large-grid" && "sm:text-base",
137+
ellipsableStyles,
134138
)}
135139
>
136-
<p
137-
className={cn(
138-
"text-sm font-normal text-accent-foreground transition-colors hover:text-primary",
139-
viewType === "large-grid" && "sm:text-base",
140-
ellipsableStyles,
141-
)}
142-
>
143-
{token.collection_name}
144-
</p>
145-
<VerifiedIcon className="size-4 flex-shrink-0 text-primary" />
146-
</Link>
140+
{token.collection_name}
141+
</p>
142+
<VerifiedIcon className="size-4 flex-shrink-0 text-primary" />
143+
</Link>
147144

148145
{token.list_price ? (
149146
<p className={cn("mt-2 text-sm font-semibold", ellipsableStyles)}>

0 commit comments

Comments
 (0)