diff --git a/package.json b/package.json index ad558ba..d45b2d4 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "dependencies": { "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", + "@radix-ui/react-hover-card": "^1.1.15", "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-scroll-area": "^1.2.10", "@radix-ui/react-slot": "^1.2.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dbdfdd8..a3c45dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: '@radix-ui/react-dropdown-menu': specifier: ^2.1.16 version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@radix-ui/react-hover-card': + specifier: ^1.1.15 + version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@radix-ui/react-popover': specifier: ^1.1.15 version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -792,6 +795,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-hover-card@1.1.15': + resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-id@1.1.1': resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==} peerDependencies: @@ -5197,6 +5213,23 @@ snapshots: '@types/react': 19.2.14 '@types/react-dom': 19.2.3(@types/react@19.2.14) + '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + dependencies: + '@radix-ui/primitive': 1.1.3 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4) + '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4) + '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4) + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + optionalDependencies: + '@types/react': 19.2.14 + '@types/react-dom': 19.2.3(@types/react@19.2.14) + '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.4)': dependencies: '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4) diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx index c1e450b..fa3f1a6 100644 --- a/src/components/common/CreatorCard.tsx +++ b/src/components/common/CreatorCard.tsx @@ -38,6 +38,7 @@ import CreatorListRowDivider from '@/components/common/CreatorListRowDivider'; import BuyActionHelperText from '@/components/common/BuyActionHelperText'; import NetworkFeeHint from '@/components/common/NetworkFeeHint'; import CreatorBio from '@/components/common/CreatorBio'; +import CreatorHandleHoverCard from '@/components/common/CreatorHandleHoverCard'; import { CREATOR_CARD_MEDIA_RADIUS_CLASS } from '@/utils/creatorCardTokens'; interface CreatorCardProps { @@ -257,7 +258,15 @@ const CreatorCard: React.FC = ({ {isRecentlyActive && }

- {displayInstructorHandle} + + {displayInstructorHandle} +

@@ -269,7 +278,15 @@ const CreatorCard: React.FC = ({ {creator.socialHandle ? (
- {displaySocialHandle} + + {displaySocialHandle} +
) : (
= ({ + handle, + volume24h, + change24h, + creatorShareSupply, + isVerified, + children, + className, +}) => { + const hasStats = + volume24h !== undefined || + change24h !== undefined || + creatorShareSupply !== undefined; + + return ( + + + + {children} + + + +
+
+ + {handle} + + {isVerified && } +
+ + {hasStats && ( +
+ {volume24h !== undefined && ( +
+

+ Volume 24h +

+

+ {formatCompactNumber(volume24h)} ETH +

+
+ )} + {change24h !== undefined && ( +
+

+ 24h Change +

+

0 && 'text-emerald-400', + change24h < 0 && 'text-red-400', + change24h === 0 && 'text-white' + )} + > + {formatPercent(change24h, { signed: true })} +

+
+ )} + {creatorShareSupply !== undefined && ( +
+

+ Supply +

+

+ {formatCompactNumber(creatorShareSupply)} +

+
+ )} +
+ )} +
+ + + ); +}; + +export default CreatorHandleHoverCard; diff --git a/src/components/common/CreatorProfileHeader.tsx b/src/components/common/CreatorProfileHeader.tsx index 6bbf0cd..0dddacd 100644 --- a/src/components/common/CreatorProfileHeader.tsx +++ b/src/components/common/CreatorProfileHeader.tsx @@ -8,6 +8,7 @@ import VerifiedBadge from '@/components/common/VerifiedBadge'; import CreatorInitialsAvatar from '@/components/common/CreatorInitialsAvatar'; import CreatorBio from '@/components/common/CreatorBio'; import { formatCreatorHandle } from '@/utils/handleDisplay.utils'; +import CreatorHandleHoverCard from '@/components/common/CreatorHandleHoverCard'; import { CREATOR_CARD_MEDIA_RADIUS_CLASS } from '@/utils/creatorCardTokens'; interface CreatorProfileHeaderProps { @@ -110,7 +111,9 @@ const CreatorProfileHeader: React.FC = ({ CREATOR_PROFILE_SUBTITLE_WRAP_CLASS_NAME )} > - {displayHandle || `@${handle}`} + + {displayHandle || `@${handle}`} +

{/* #315: profile bio auto-collapses with a Show more / less toggle once long enough. Short bios render unchanged. */} diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx new file mode 100644 index 0000000..b25eb5b --- /dev/null +++ b/src/components/ui/hover-card.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import * as HoverCardPrimitive from '@radix-ui/react-hover-card'; + +import { cn } from '@/lib/utils'; + +function HoverCard({ + ...props +}: React.ComponentProps) { + return ; +} + +function HoverCardTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function HoverCardContent({ + className, + align = 'center', + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +export { HoverCard, HoverCardTrigger, HoverCardContent };