From 174f1ff0c1cf34a95cb369646e837b48c138e9a2 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Thu, 12 Feb 2026 00:46:20 +0100 Subject: [PATCH 1/3] Simple token card --- src/app/markets/components/PairsCard.tsx | 10 ++++++++-- src/app/markets/components/TokenCard.tsx | 23 +++++++++++++++++++++++ src/modules/tokens/types.ts | 6 ++++++ 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/app/markets/components/TokenCard.tsx create mode 100644 src/modules/tokens/types.ts diff --git a/src/app/markets/components/PairsCard.tsx b/src/app/markets/components/PairsCard.tsx index f23b176..4fcefad 100644 --- a/src/app/markets/components/PairsCard.tsx +++ b/src/app/markets/components/PairsCard.tsx @@ -1,11 +1,12 @@ import { SolanaLogo } from "@/components/logos"; import { Button } from "@/components/ui/button"; -import { Card, CardHeader, CardTitle } from "@/components/ui/card"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Settings2Icon, ZapIcon } from "lucide-react"; +import TokenCard from "./TokenCard"; export default function PairsCard({ title }: { title: string }) { return ( - + {title}
@@ -38,6 +39,11 @@ export default function PairsCard({ title }: { title: string }) {
+ + + ); } diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx new file mode 100644 index 0000000..fcdb44d --- /dev/null +++ b/src/app/markets/components/TokenCard.tsx @@ -0,0 +1,23 @@ +import { Token } from "@/modules/tokens/types"; +import { CopyIcon } from "lucide-react"; + +export default function TokenCard({ token }: { token: Token }) { + return ( +
+
+ Token +

+
+
+

{token.symbol}

+

+ {token.name} +

+
+
+ ); +} diff --git a/src/modules/tokens/types.ts b/src/modules/tokens/types.ts new file mode 100644 index 0000000..a7b3aff --- /dev/null +++ b/src/modules/tokens/types.ts @@ -0,0 +1,6 @@ +export interface Token { + mint: string; + symbol: string; + name: string; + logoURI?: string; +} From 69681a81cc5b77165eef9aac8ea106ca749a9e2d Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Thu, 12 Feb 2026 01:26:17 +0100 Subject: [PATCH 2/3] Token data --- src/app/globals.css | 2 +- src/app/markets/components/PairsCard.tsx | 2 +- src/app/markets/components/TokenCard.tsx | 95 +++++++++++++++++++++--- src/components/ui/badge.tsx | 48 ++++++++++++ src/modules/tokens/types.ts | 8 ++ 5 files changed, 141 insertions(+), 14 deletions(-) create mode 100644 src/components/ui/badge.tsx diff --git a/src/app/globals.css b/src/app/globals.css index 307df89..4db1fb8 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -69,7 +69,7 @@ --secondary-foreground: oklch(0.96 0 0); /* Muted / subtle text */ - --muted: oklch(0.24 0.015 260); + --muted: oklch(22.068% 0.01327 258.402); --muted-foreground: oklch(0.72 0.01 260); /* Accent – SOL mint */ diff --git a/src/app/markets/components/PairsCard.tsx b/src/app/markets/components/PairsCard.tsx index 4fcefad..ba62ff1 100644 --- a/src/app/markets/components/PairsCard.tsx +++ b/src/app/markets/components/PairsCard.tsx @@ -39,7 +39,7 @@ export default function PairsCard({ title }: { title: string }) { - + diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx index fcdb44d..23032bf 100644 --- a/src/app/markets/components/TokenCard.tsx +++ b/src/app/markets/components/TokenCard.tsx @@ -1,23 +1,94 @@ -import { Token } from "@/modules/tokens/types"; -import { CopyIcon } from "lucide-react"; +import { Badge } from "@/components/ui/badge"; +import { cn } from "@/lib/utils"; +import { Token, TokenLiveData } from "@/modules/tokens/types"; +import { + BoxesIcon, + ChefHatIcon, + CoinsIcon, + CopyIcon, + CrosshairIcon, + EyeIcon, + GhostIcon, + IconNode, + LucideIcon, + UsersIcon, + UserStarIcon, +} from "lucide-react"; export default function TokenCard({ token }: { token: Token }) { + const live: TokenLiveData = { + topHolder: 23, + devHold: 10, + snipersHold: 4, + insidersHold: 2, + bundleHold: 3, + }; + return (
- Token + {token.logoURI ? ( + Token + ) : ( +
+ +
+ )}

-
-

{token.symbol}

-

- {token.name} -

+
+
+

{token.symbol}

+

+ {token.name} +

+
+
+

20m

+

+ + 10 +

+

+ + 10 +

+
+
+ + + + + +
); } + +function TokenBadge({ + value, + icon: Icon, + redWhen = 10, +}: { + value: number; + icon: LucideIcon; + redWhen?: number; +}) { + return ( + redWhen ? "text-red-400" : "text-green-500", + )} + > + + {value}% + + ); +} diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..beb56ed --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,48 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" +import { Slot } from "radix-ui" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + link: "text-primary underline-offset-4 [a&]:hover:underline", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function Badge({ + className, + variant = "default", + asChild = false, + ...props +}: React.ComponentProps<"span"> & + VariantProps & { asChild?: boolean }) { + const Comp = asChild ? Slot.Root : "span" + + return ( + + ) +} + +export { Badge, badgeVariants } diff --git a/src/modules/tokens/types.ts b/src/modules/tokens/types.ts index a7b3aff..958be07 100644 --- a/src/modules/tokens/types.ts +++ b/src/modules/tokens/types.ts @@ -4,3 +4,11 @@ export interface Token { name: string; logoURI?: string; } + +export interface TokenLiveData { + topHolder: number; + devHold: number; + snipersHold: number; + insidersHold: number; + bundleHold: number; +} From 24ad200a4e90b80ca8bd9a249db50e925deb6986 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Thu, 12 Feb 2026 01:42:04 +0100 Subject: [PATCH 3/3] Token data and quick buy --- src/app/markets/components/TokenCard.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx index 23032bf..9ba14dd 100644 --- a/src/app/markets/components/TokenCard.tsx +++ b/src/app/markets/components/TokenCard.tsx @@ -1,4 +1,5 @@ import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { Token, TokenLiveData } from "@/modules/tokens/types"; import { @@ -13,6 +14,7 @@ import { LucideIcon, UsersIcon, UserStarIcon, + ZapIcon, } from "lucide-react"; export default function TokenCard({ token }: { token: Token }) { @@ -66,6 +68,13 @@ export default function TokenCard({ token }: { token: Token }) {
+
+ + + +
); } @@ -92,3 +101,12 @@ function TokenBadge({ ); } + +function TokenDigit({ name, value }: { name: string; value: string }) { + return ( +
+

{name}

+

{value}

+
+ ); +}