From 325d9af04055f580241854b0d37bee31923483a3 Mon Sep 17 00:00:00 2001 From: Valentin Dosimont Date: Fri, 6 Dec 2024 09:18:27 +0100 Subject: [PATCH] feat: add tooltip, fix profile, offers ... UX --- .../components/collection-header-stats.tsx | 14 +- .../components/collection-token-image.tsx | 16 +- .../collection/[collectionAddress]/page.tsx | 14 +- .../[tokenId]/components/token-image.tsx | 2 +- .../components/portfolio-activity-data.tsx | 154 +----------------- .../portfolio-items-data-grid-view.tsx | 99 ++++++----- apps/arkmarket/src/hooks/useBeasts.ts | 5 +- apps/arkmarket/src/hooks/useSeasonPass.ts | 3 +- packages/ui/src/price-tag.tsx | 2 +- 9 files changed, 91 insertions(+), 218 deletions(-) diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx index fa1b48de..23768e0b 100644 --- a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx +++ b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx @@ -15,6 +15,7 @@ export default function CollectionHeaderStats({ const parsedCollectionFloor7dPercentage = parseFloat( collection.floor_7d_percentage, ); + console.log(collection); return (
@@ -23,18 +24,17 @@ export default function CollectionHeaderStats({

{formatUnits(collection.floor ?? 0, 18)} LORDS

- {/* TODO @YohanTz: Proper color */} - {/*

- {collection.floor_7d_percentage >= 0 && "+"} - {formatNumber(collection.floor_7d_percentage)}% -

*/} + {parsedCollectionFloor7dPercentage >= 0 && "+"} + {formatNumber(parsedCollectionFloor7dPercentage)}% +

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx index 48b12c88..bb10ab0d 100644 --- a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx +++ b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-token-image.tsx @@ -1,4 +1,6 @@ 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"; @@ -6,7 +8,7 @@ import { useSeasonPass } from "~/hooks/useSeasonPass"; import type { CollectionToken } from "~/types"; interface CollectionTokenImageProps { - token: CollectionToken; + token: CollectionToken | WalletToken; height?: number; width?: number; } @@ -73,8 +75,18 @@ export function CollectionTokenImage({ token, height, width }: PropsWithClassNam /> ); } + function RealmsResourceItem({ resource }: { resource: Resources }) { return ( - + + + + + + +
{resource.trait}
+ + + ) } diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx index fbe6def0..4e10374c 100644 --- a/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx +++ b/apps/arkmarket/src/app/collection/[collectionAddress]/page.tsx @@ -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', + }, }, } } diff --git a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx index c35ba702..bef9e689 100644 --- a/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx +++ b/apps/arkmarket/src/app/token/[contractAddress]/[tokenId]/components/token-image.tsx @@ -75,7 +75,7 @@ export function TokenImage({ token }: PropsWithClassName) { function RealmsResourceItem({ resource }: { resource: Resources }) { return (
- + {resource.trait}
) diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx index c94c4e2a..e0d2c5a1 100644 --- a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx +++ b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-activity-data.tsx @@ -36,151 +36,13 @@ export default function PortfolioActivityData({ ); return ( - - - - - Event - - - Token - - - Price - - - From - - - To - - - Date - - - - - - {rowVirtualizer.getVirtualItems().map((virtualRow) => { - const activity = portfolioActivity[virtualRow.index]; - - if (activity === undefined) { - return null; - } - - return ( - rowVirtualizer.measureElement(node)} - style={{ - transform: `translateY(${virtualRow.start}px)`, - }} - > - -
- {activityTypeMetadata[activity.activity_type].icon} -

{activityTypeMetadata[activity.activity_type].title}

-
- - -
- -
- -

- {activity.metadata?.name ?? "Unnamed Token"} -

- -
- -

- {activity.collection_name} -

- - {activity.collection_is_verified && ( - - )} -
-
-
- - - {activity.price ? : "_"} - - - {activity.from ? ( - - {ownerOrShortAddress({ - ownerAddress: activity.from, - address, - })} - - ) : ( - "_" - )} - - - {activity.to ? ( - - {ownerOrShortAddress({ - ownerAddress: activity.to, - address, - })} - - ) : ( - "_" - )} - - - {activity.time_stamp ? timeSince(activity.time_stamp) : "_"} - - - - - - ); - })} - -
+
+
+ +
+
+ +
+
); } diff --git a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx index 67992233..69a11ccc 100644 --- a/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx +++ b/apps/arkmarket/src/app/wallet/[walletAddress]/components/portfolio-items-data-grid-view.tsx @@ -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) => { @@ -89,61 +90,57 @@ export default function CollectionItemsDataGridView({ const canListItem = isOwner && !token.list_price; - return ( - // TODO @YohanTz: Extract to NftCard component and sub-components - - - - {/* TODO: Media part of NftCardMedia */} - - - - -
-
- + + + {/* TODO: Media part of NftCardMedia */} + + + + +
+
+ +

-

- {token.metadata?.name ?? token.token_id} -

- - + + +

-

- {token.collection_name} -

- - + {token.collection_name} +

+ + {token.list_price ? (

diff --git a/apps/arkmarket/src/hooks/useBeasts.ts b/apps/arkmarket/src/hooks/useBeasts.ts index a49543c6..544777ae 100644 --- a/apps/arkmarket/src/hooks/useBeasts.ts +++ b/apps/arkmarket/src/hooks/useBeasts.ts @@ -4,6 +4,7 @@ import type { CollectionToken, Token } from "~/types"; import magicalIcon from "~/../public/beasts/types/magical.svg"; import hunterIcon from "~/../public/beasts/types/hunter.svg"; import bruteIcon from "~/../public/beasts/types/brute.svg"; +import type { WalletToken } from "~/app/wallet/[walletAddress]/queries/getWalletData"; export interface BeastAttributes { prefix: string | number; @@ -21,7 +22,7 @@ const typeIcons = { brute: bruteIcon, }; -export function useBeasts(token: CollectionToken | Token) { +export function useBeasts(token: CollectionToken | Token | WalletToken) { const formatBeastName = (attributes: BeastAttributes): string => { if (attributes.prefix === 0 && attributes.suffix === 0) { return attributes.name; @@ -32,7 +33,7 @@ export function useBeasts(token: CollectionToken | Token) { const isBeast = (collectionAddress: string) => collectionAddress === CollectionAddresses[Collections.BEASTS][ChainId.SN_MAIN]; const attributes: BeastAttributes = useMemo(() => { - if (null === token?.metadata?.attributes) { + if (null === token.metadata?.attributes) { return {}; } diff --git a/apps/arkmarket/src/hooks/useSeasonPass.ts b/apps/arkmarket/src/hooks/useSeasonPass.ts index e5187875..4a1167ff 100644 --- a/apps/arkmarket/src/hooks/useSeasonPass.ts +++ b/apps/arkmarket/src/hooks/useSeasonPass.ts @@ -1,4 +1,5 @@ import { useMemo } from "react"; +import type { WalletToken } from "~/app/wallet/[walletAddress]/queries/getWalletData"; import { ChainId, CollectionAddresses, Collections } from "~/config/homepage"; import type { CollectionToken, Token } from "~/types"; @@ -304,7 +305,7 @@ export const resources: Resources[] = [ }, ]; -export function useSeasonPass(token: Token | CollectionToken) { +export function useSeasonPass(token: Token | CollectionToken | WalletToken) { const isSeasonPass = (collectionAddress: string) => collectionAddress === CollectionAddresses[Collections.ETERNUMSEASONPASS][ChainId.SN_MAIN]; const realmsResources: Resources[] = useMemo(() => { if (null === token.metadata?.attributes) { diff --git a/packages/ui/src/price-tag.tsx b/packages/ui/src/price-tag.tsx index 62d6d41f..d2e50a8e 100644 --- a/packages/ui/src/price-tag.tsx +++ b/packages/ui/src/price-tag.tsx @@ -21,7 +21,7 @@ export function PriceTag({ token = "ethereum", currency, }: PropsWithClassName) { - if (!price || !currency) { + if (!price) { return null; }