osias-trade/nexa-trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Small changes

Browse Source
This commit is contained in:
selimaj-dev
2026-02-12 15:05:35 +01:00
parent 2e16ed4127
commit 582b706f68
1 changed files with 101 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/markets/components/TokenCard.tsx
+101 -87
View File
@@ -1,10 +1,5 @@
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import MinimalTooltip from "@/components/utils/MinimalTooltip"; import MinimalTooltip from "@/components/utils/MinimalTooltip";
import { humanizeNumber } from "@/lib/renderUtils"; import { humanizeNumber } from "@/lib/renderUtils";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -40,7 +35,10 @@ export default function TokenCard({ token }: { token: Token }) {
return ( return (
<div <div
className="flex gap-4 cursor-pointer" className="
flex flex-col gap-3 cursor-pointer
md:flex-row md:gap-4
"
onClick={(e) => { onClick={(e) => {
if (e.ctrlKey || e.metaKey) { if (e.ctrlKey || e.metaKey) {
window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer"); window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer");
@@ -52,114 +50,130 @@ export default function TokenCard({ token }: { token: Token }) {
window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer") window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
} }
> >
<div className="h-full overflow-hidden min-w-0"> {/* Left: logo */}
{token.logoURI ? ( <div className="flex gap-3 md:gap-4 min-w-0">
<img <div className="h-full overflow-hidden">
src={token.logoURI} {token.logoURI ? (
alt="Token" <img
className="w-16 h-16 rounded-lg" src={token.logoURI}
/> alt="Token"
) : ( className="w-14 h-14 md:w-16 md:h-16 rounded-lg"
<div className="w-16 h-16 bg-primary/20 rounded-lg flex items-center justify-center"> />
<CoinsIcon className="text-primary" /> ) : (
<div className="w-14 h-14 md:w-16 md:h-16 bg-primary/20 rounded-lg flex items-center justify-center">
<CoinsIcon className="text-primary" />
</div>
)}
</div>
{/* Main content */}
<div className="flex flex-col gap-1 min-w-0">
{/* Symbol + name */}
<div className="flex gap-1.5 items-center flex-wrap">
<p className="font-semibold">{token.symbol}</p>
<p
className="text-muted-foreground flex gap-1 items-center cursor-pointer hover:text-accent truncate"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
navigator.clipboard.writeText(token.mint);
}}
>
{token.name}
<CopyIcon className="w-4 h-4 shrink-0" />
</p>
</div> </div>
)}
<p className="mt-1 truncate text-xs text-muted-foreground"></p> {/* Stats */}
</div> <div className="items-center flex gap-3 flex-wrap text-xs md:text-sm">
<div className="flex flex-col gap-1"> <p className="text-green-500">20m</p>
<div className="flex gap-1.5">
<p className="font-semibold">{token.symbol}</p> <MinimalTooltip label="Holders">
<p <p className="flex gap-1 items-center">
className="text-muted-foreground flex gap-1 items-center h-max cursor-pointer hover:text-accent" <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
onClick={(e) => { 10
e.preventDefault(); </p>
e.stopPropagation(); </MinimalTooltip>
navigator.clipboard.writeText(token.mint);
}} <MinimalTooltip label="Live NEXA viewers">
> <p className="flex gap-1 items-center">
{token.name} <CopyIcon className="w-4 h-4" /> <EyeIcon className="w-3.5 h-3.5" />
</p> 10
</div> </p>
<div className="items-center flex gap-3"> </MinimalTooltip>
<p className="text-green-500 text-sm">20m</p> </div>
<MinimalTooltip label="Holders">
<p className="text-sm flex gap-1 items-center"> {/* Twitter */}
<UsersIcon className="w-3.5 h-3.5 text-muted-foreground" /> <div className="flex gap-2 items-center text-xs text-[#5DBCFF] flex-wrap">
10 {token.twitterPost ? (
</p> <>
</MinimalTooltip>
<MinimalTooltip label="Live NEXA viewers">
<p className="text-sm flex gap-1 items-center">
<EyeIcon className="w-3.5 h-3.5" />
10
</p>
</MinimalTooltip>
</div>
<div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
{token.twitterPost ? (
<>
<MinimalTooltip label="Twitter author">
<Link <Link
className="hover:underline" className="hover:underline"
target="_blank" target="_blank"
href={`https://x.com/${token.twitterPost.author?.username}`} href={`https://x.com/${token.twitterPost.author?.username}`}
onClick={(e) => { onClick={(e) => e.stopPropagation()}
e.stopPropagation();
}}
> >
by @{token.twitterPost.author?.username} by @{token.twitterPost.author?.username}
</Link> </Link>
</MinimalTooltip>
<MinimalTooltip label="Followers">
<p className="flex gap-0.5 items-center"> <p className="flex gap-0.5 items-center">
<UserIcon className="w-3 h-3" /> <UserIcon className="w-3 h-3" />
{humanizeNumber(token.twitterPost.author?.followers)} {humanizeNumber(token.twitterPost.author?.followers)}
</p> </p>
</MinimalTooltip> </>
</> ) : (
) : ( <span className="invisible">by @username</span>
<span className="invisible">by @username</span> )}
)} </div>
</div>
<div className="items-center flex gap-2">
<MinimalTooltip independent label="Top 10 holders">
<TokenBadge value={live.topHolder} icon={UserStarIcon} />
</MinimalTooltip>
<MinimalTooltip independent label="Developer holdings"> {/* Badges */}
<TokenBadge value={live.devHold} icon={ChefHatIcon} /> <div className="flex gap-1.5 items-center flex-wrap">
</MinimalTooltip> <MinimalTooltip independent label="Top 10 Holders">
<TokenBadge value={live.topHolder} icon={UserStarIcon} />
</MinimalTooltip>
<MinimalTooltip independent label="Snipers"> <MinimalTooltip independent label="Dev Holdings">
<TokenBadge value={live.snipersHold} icon={CrosshairIcon} /> <TokenBadge value={live.devHold} icon={ChefHatIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Insiders"> <MinimalTooltip independent label="Snipers">
<TokenBadge value={live.insidersHold} icon={GhostIcon} /> <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Bundlers"> <MinimalTooltip independent label="Insiders">
<TokenBadge value={live.bundleHold} icon={BoxesIcon} /> <TokenBadge value={live.insidersHold} icon={GhostIcon} />
</MinimalTooltip> </MinimalTooltip>
<MinimalTooltip independent label="Bundlers">
<TokenBadge value={live.bundleHold} icon={BoxesIcon} />
</MinimalTooltip>
</div>
</div> </div>
</div> </div>
<div className="ml-auto flex flex-col">
<MinimalTooltip label="Market Cap">
<TokenDigit name="MC" value="$15.6k" />
</MinimalTooltip>
<MinimalTooltip label="Volume"> {/* Right column */}
<div
className="
flex flex-row justify-between items-center gap-3
md:ml-auto md:flex-col md:items-end
"
>
<div className="flex gap-4 md:flex-col md:gap-1">
<TokenDigit name="MC" value="$15.6k" />
<TokenDigit name="V" value="$42k" /> <TokenDigit name="V" value="$42k" />
</MinimalTooltip> </div>
<Button <Button
className="mt-auto ml-auto p-1.5! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs" className="
ml-auto rounded-full bg-primary/20 text-primary gap-1 text-xs
py-1.5! h-max md:rounded-full hover:text-accent-foreground
"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}} }}
> >
<ZapIcon />1 SOL <ZapIcon className="w-4 h-4" />1 SOL
</Button> </Button>
</div> </div>
</div> </div>