Skip to content

Commit

Permalink
feat: add tooltip, fix profile, offers ... UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartianGreed
MartianGreed committed Dec 6, 2024
1 parent 6e63487 commit 325d9af
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 218 deletions.
14 changes: 7 additions & 7 deletions apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default function CollectionHeaderStats({
const parsedCollectionFloor7dPercentage = parseFloat(
collection.floor_7d_percentage,
);
console.log(collection);

return (
<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">
Expand All @@ -23,18 +24,17 @@ export default function CollectionHeaderStats({
<div className="flex items-center gap-2 font-medium font-numbers text-xl">
<LordsLogo className="size-5" />
<p>{formatUnits(collection.floor ?? 0, 18)} LORDS</p>
{/* TODO @YohanTz: Proper color */}
{/* <p
<p
className={cn(
"text-sm font-semibold",
collection.floor_7d_percentage < 0
"text-base font-medium",
parsedCollectionFloor7dPercentage < 0
? "text-red-500"
: "text-green-500",
)}
>
{collection.floor_7d_percentage >= 0 && "+"}
{formatNumber(collection.floor_7d_percentage)}%
</p> */}
{parsedCollectionFloor7dPercentage >= 0 && "+"}
{formatNumber(parsedCollectionFloor7dPercentage)}%
</p>
</div>
</div>
<Separator orientation="vertical" className="hidden md:block" />
Expand Down
16 changes: 14 additions & 2 deletions apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import type { PropsWithClassName } from "@ark-market/ui";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@ark-market/ui/tooltip";
import type { WalletToken } from "~/app/wallet/[walletAddress]/queries/getWalletData";
import Media from "~/components/media";
import { useBeasts } from "~/hooks/useBeasts";
import type { Resources } from "~/hooks/useSeasonPass";
import { useSeasonPass } from "~/hooks/useSeasonPass";
import type { CollectionToken } from "~/types";

interface CollectionTokenImageProps {
token: CollectionToken;
token: CollectionToken | WalletToken;
height?: number;
width?: number;
}
Expand Down Expand Up @@ -73,8 +75,18 @@ export function CollectionTokenImage({ token, height, width }: PropsWithClassNam
/>
);
}

function RealmsResourceItem({ resource }: { resource: Resources }) {
return (
<Media src={resource.img} height={20} width={20} alt={""} />
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Media src={resource.img} height={20} width={20} alt={resource.trait} />
</TooltipTrigger>
<TooltipContent>
<div>{resource.trait}</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
14 changes: 7 additions & 7 deletions apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ export async function generateMetadata({
],
},
twitter: {
images: [
{
url: `https://market.realms.world/og/eternum-season-pass.png`,
width: 1200,
height: 630,
},
],
title: `Eternum Season 0 Pass`,
description: 'Conquer the Realms',
creator: '@RealmsEternum',
images: {
url: `https://market.realms.world/og/eternum-season-pass.png`,
alt: 'Eternum Season 0 Pass',
},
},
}
}
Expand Down
2 changes: 1 addition & 1 deletion apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export function TokenImage({ token }: PropsWithClassName<TokenSummaryProps>) {
function RealmsResourceItem({ resource }: { resource: Resources }) {
return (
<div className="flex items-center">
<Media src={resource.img} height={25} width={25} alt={resource.description} />
<Media src={resource.img} height={25} width={25} alt={resource.trait} />
<span className="pl-2">{resource.trait}</span>
</div>
)
Expand Down
154 changes: 8 additions & 146 deletions apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,151 +36,13 @@ export default function PortfolioActivityData({
);

return (
<Table ref={tableRef}>
<TableHeader className="h-12">
<TableRow
className={cn(
"absolute grid w-full items-center",
gridTemplateColumnValue,
)}
>
<TableHead className="sticky top-0 flex items-center bg-background pl-5">
Event
</TableHead>
<TableHead className="sticky top-0 flex items-center bg-background">
Token
</TableHead>
<TableHead className="sticky top-0 flex items-center bg-background">
Price
</TableHead>
<TableHead className="sticky top-0 flex items-center bg-background">
From
</TableHead>
<TableHead className="sticky top-0 flex items-center bg-background">
To
</TableHead>
<TableHead className="sticky top-0 flex items-center bg-background">
Date
</TableHead>
<TableHead className="sticky top-0 flex items-center bg-background"></TableHead>
</TableRow>
</TableHeader>
<TableBody
className="font-numbers relative text-sm font-medium"
style={{ height: `${rowVirtualizer.getTotalSize() + 2}px` }}
>
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
const activity = portfolioActivity[virtualRow.index];

if (activity === undefined) {
return null;
}

return (
<TableRow
className={cn(
"group absolute grid h-[6.25rem] w-full items-center",
gridTemplateColumnValue,
)}
data-index={virtualRow.index}
key={`${virtualRow.index}-${activity.time_stamp}-${activity.transaction_hash}`}
ref={(node) => rowVirtualizer.measureElement(node)}
style={{
transform: `translateY(${virtualRow.start}px)`,
}}
>
<TableCell className="items-center gap-4 whitespace-nowrap pl-5">
<div className="flex items-center gap-4 whitespace-nowrap">
{activityTypeMetadata[activity.activity_type].icon}
<p>{activityTypeMetadata[activity.activity_type].title}</p>
</div>
</TableCell>
<TableCell>
<div className="flex items-center gap-4">
<Media
className="size-[3.75rem] rounded-xs object-contain"
height={120}
width={120}
alt={activity.metadata?.name ?? "Unnamed Token"}
src={activity.metadata?.image ?? ""}
mediaKey={activity.metadata?.image_key ?? ""}
/>
<div className="w-full overflow-hidden">
<Link
className={focusableStyles}
href={`/token/${activity.collection_address}/${activity.token_id}`}
>
<p
className={cn(
"w-full text-base font-medium",
ellipsableStyles,
)}
>
{activity.metadata?.name ?? "Unnamed Token"}
</p>
</Link>
<div className="flex w-full items-center gap-1">
<Link
className={focusableStyles}
href={`/collection/${activity.collection_address}`}
>
<p
className={cn(
"text-muted-foreground",
ellipsableStyles,
)}
>
{activity.collection_name}
</p>
</Link>
{activity.collection_is_verified && (
<VerifiedIcon className="size-4 text-primary" />
)}
</div>
</div>
</div>
</TableCell>
<TableCell>
{activity.price ? <PriceTag price={activity.price} token="lords" /> : "_"}
</TableCell>
<TableCell>
{activity.from ? (
<Link href={`/wallet/${activity.from}`}>
{ownerOrShortAddress({
ownerAddress: activity.from,
address,
})}
</Link>
) : (
"_"
)}
</TableCell>
<TableCell>
{activity.to ? (
<Link href={`/wallet/${activity.to}`}>
{ownerOrShortAddress({
ownerAddress: activity.to,
address,
})}
</Link>
) : (
"_"
)}
</TableCell>
<TableCell>
{activity.time_stamp ? timeSince(activity.time_stamp) : "_"}
</TableCell>
<TableCell className="pr-5">
<Button asChild size="icon" variant="outline">
<ExternalLink href="/">
<ArrowUpRight className="size-5" />
</ExternalLink>
</Button>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
<div>
<div className="hidden md:block">
<DesktopPortfolioActivity portfolioActivity={portfolioActivity} />
</div>
<div className="md:hidden">
<MobilePortfolioActivity portfolioActivity={portfolioActivity} />
</div>
</div>
);
}
99 changes: 48 additions & 51 deletions apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import type { WalletToken } from "../queries/getWalletData";
import { TokenActionsCreateListing } from "~/app/token/[contractAddress]/[tokenId]/components/token-actions-create-listing";
import Media from "~/components/media";
import { CollectionDescription } from "~/config/homepage";
import { CollectionTokenImage } from "~/app/collection/[collectionAddress]/components/collection-token-image";

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

const canListItem = isOwner && !token.list_price;

return (
// TODO @YohanTz: Extract to NftCard component and sub-components
<NftCard>
<Link
href={`/token/${token.collection_address}/${token.token_id}`}
className={cn("flex items-center gap-1", focusableStyles)}
>
<NftCardMedia>
{/* TODO: Media part of NftCardMedia */}
<Media
alt={token.metadata?.name ?? "Empty"}
className="aspect-square w-full object-contain transition-transform group-hover:scale-110"
src={token.metadata?.image}
mediaKey={token.metadata?.image_key}
thumbnailKey={token.metadata?.image_key_540_540}
height={viewType === "large-grid" ? 540 : 340}
width={viewType === "large-grid" ? 540 : 340}
/>
</NftCardMedia>
</Link>
<NftCardContent>
<div className="flex w-full justify-between">
<div className="w-full overflow-hidden">
<Link
href={`/token/${token.collection_address}/${token.token_id}`}
className={cn("flex items-center gap-1", focusableStyles)}
return (
// TODO @YohanTz: Extract to NftCard component and sub-components
<NftCard>
<Link
href={`/token/${token.collection_address}/${token.token_id}`}
className={cn("flex items-center gap-1", focusableStyles)}
>
<NftCardMedia className="aspect-auto">
{/* TODO: Media part of NftCardMedia */}
<CollectionTokenImage
token={token}
height={viewType === "large-grid" ? 540 : 340}
width={viewType === "large-grid" ? 540 : 340}
/>
</NftCardMedia>
</Link>
<NftCardContent>
<div className="flex w-full justify-between">
<div className="w-full overflow-hidden">
<Link
href={`/token/${token.collection_address}/${token.token_id}`}
className={cn("flex items-center gap-1", focusableStyles)}
>
<p
className={cn(
"text-base font-bold leading-none",
viewType === "large-grid" && "font-bold sm:text-xl",
ellipsableStyles,
)}
>
<p
className={cn(
"text-base font-bold leading-none",
viewType === "large-grid" && "font-bold sm:text-xl",
ellipsableStyles,
)}
>
{token.metadata?.name ?? token.token_id}
</p>
</Link>
<Link
href={`/collection/${token.collection_address}`}
{token.metadata?.name ?? token.token_id}
</p>
</Link>
<Link
href={`/collection/${token.collection_address}`}
className={cn(
"mt-1 flex items-center gap-1",
focusableStyles,
)}
>
<p
className={cn(
"mt-1 flex items-center gap-1",
focusableStyles,
"text-sm font-normal text-accent-foreground transition-colors hover:text-primary",
viewType === "large-grid" && "sm:text-base",
ellipsableStyles,
)}
>
<p
className={cn(
"text-sm font-normal text-accent-foreground transition-colors hover:text-primary",
viewType === "large-grid" && "sm:text-base",
ellipsableStyles,
)}
>
{token.collection_name}
</p>
<VerifiedIcon className="size-4 flex-shrink-0 text-primary" />
</Link>
{token.collection_name}
</p>
<VerifiedIcon className="size-4 flex-shrink-0 text-primary" />
</Link>

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

0 comments on commit 325d9af

Please sign in to comment.