255 lines
11 KiB
TypeScript
255 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import useSWR from 'swr'
|
|
import { Header } from '@/components/header'
|
|
import { CoinCard } from '@/components/coin-card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Coin } from '@/types'
|
|
import {
|
|
LgStar,
|
|
LgFolderInvoices,
|
|
LgBox,
|
|
LgIdea,
|
|
LgSearch,
|
|
LgClock,
|
|
LgComboChart,
|
|
LgCancel
|
|
} from '@/components/icons'
|
|
|
|
const fetcher = (url: string) => fetch(url).then((res) => res.json())
|
|
|
|
type SortOption = 'newest' | 'marketCap' | 'volume' | 'price' | 'verified'
|
|
|
|
const iconMap = {
|
|
newest: LgClock,
|
|
marketCap: LgComboChart,
|
|
volume: LgComboChart, // reusing combo chart
|
|
price: LgFolderInvoices,
|
|
verified: LgStar,
|
|
}
|
|
|
|
export default function Home() {
|
|
|
|
const { data: coins, isLoading } = useSWR<Coin[]>('/api/coins', fetcher, {
|
|
refreshInterval: 15000,
|
|
})
|
|
const { data: solPriceData } = useSWR('/api/sol-price', fetcher, {
|
|
refreshInterval: 60000,
|
|
})
|
|
const { data: noticeData } = useSWR('/api/notice', fetcher, {
|
|
refreshInterval: 30000,
|
|
})
|
|
const solPrice = solPriceData?.price || 0
|
|
const notice = noticeData?.notice
|
|
|
|
const [search, setSearch] = useState('')
|
|
const [sortBy, setSortBy] = useState<SortOption>('price')
|
|
const [discordBannerVisible, setDiscordBannerVisible] = useState(true)
|
|
|
|
// i thought of this but then i realized i hat5e my users
|
|
// useEffect(() => {
|
|
// try {
|
|
// const hidden = localStorage.getItem('hideDiscordBanner');
|
|
// if (hidden === '1') setDiscordBannerVisible(false);
|
|
// } catch (e) {
|
|
// // ignore (SSR safety)
|
|
// }
|
|
// }, [])
|
|
|
|
const filteredCoins = coins
|
|
?.filter((coin) =>
|
|
coin.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
coin.ticker.toLowerCase().includes(search.toLowerCase())
|
|
)
|
|
.filter((coin) => sortBy === 'verified' ? coin.verified : true)
|
|
.sort((a, b) => {
|
|
// verified > boosted > regular
|
|
if (a.verified && !b.verified) return -1;
|
|
if (!a.verified && b.verified) return 1;
|
|
|
|
// if both verified or both not verified, check boosted status
|
|
if (a.boosted && !b.boosted) return -1;
|
|
if (!a.boosted && b.boosted) return 1;
|
|
|
|
switch (sortBy) {
|
|
case 'marketCap':
|
|
return b.marketCap - a.marketCap
|
|
case 'volume':
|
|
return b.volume24h - a.volume24h
|
|
case 'price':
|
|
return b.price - a.price
|
|
case 'verified':
|
|
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
|
default:
|
|
return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
|
}
|
|
})
|
|
|
|
const totalMarketCap = coins?.reduce((sum, coin) => sum + coin.marketCap, 0) || 0;
|
|
const totalHolders = coins?.reduce((sum, coin) => sum + coin.holders, 0) || 0;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<Header />
|
|
|
|
{/* Announcement Banner */}
|
|
{notice && (
|
|
<div className="bg-red-600 text-white text-center py-3 px-4">
|
|
<div className="mx-auto max-w-7xl">
|
|
<p className="text-sm font-medium">
|
|
<strong>Notice:</strong> {notice.message}
|
|
{notice.reason && ` (Reason: ${notice.reason})`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{discordBannerVisible && (
|
|
<div className="mx-auto max-w-7xl px-4 py-4">
|
|
<div className="flex items-center justify-between gap-4 rounded-xl bg-gradient-to-r from-[#374151] to-[#5865f2] text-white px-4 py-3 shadow-md">
|
|
<div className="flex items-center gap-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="24" height="24" viewBox="0 0 16 16">
|
|
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
|
|
</svg>
|
|
<div>
|
|
<p className="font-semibold">Join our Discord</p>
|
|
<p className="text-xs text-white/90">Giveaways, events & notifications. Or... just connect with the community {`:)`}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<a href="/discord" className="inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-semibold text-[#5865f2] shadow-sm hover:opacity-95">
|
|
Join Discord
|
|
</a>
|
|
<button
|
|
aria-label="Dismiss discord banner"
|
|
onClick={() => {
|
|
try { localStorage.setItem('hideDiscordBanner', '1') } catch (e) {}
|
|
setDiscordBannerVisible(false)
|
|
}}
|
|
className="text-white/80 hover:text-white"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden border-b border-border/50">
|
|
<div className="relative mx-auto max-w-7xl px-4 py-20 text-center">
|
|
<h1 className="mb-6 text-balance text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl">
|
|
pummmp<span className="text-[#286eca]">.fun</span>
|
|
</h1>
|
|
|
|
<p className="mx-auto mb-10 max-w-2xl text-pretty text-muted-foreground">
|
|
made w/ love by <a href='https://github.com/focat69' target='_blank' className='underline underline-offset-2 hover:text-[#286eca]'>focat</a> 💜<br />
|
|
</p>
|
|
|
|
<img src="/logo.svg" alt="Logo" className="pointer-events-none mx-auto mb-6 h-80 w-80 absolute top-10 left-1/2 -translate-x-1/2 opacity-10" />
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
|
<div className="flex items-center gap-3 rounded-xl border border-border bg-card px-5 py-3">
|
|
<LgFolderInvoices className="h-6 w-6" />
|
|
<div className="text-left">
|
|
<p className="text-2xl font-bold">{coins?.length ?? 'N/A'}</p>
|
|
<p className="text-xs text-muted-foreground">Active Coins</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-xl border border-border bg-card px-5 py-3">
|
|
<LgBox className="h-6 w-6" />
|
|
<div className="text-left">
|
|
<p className="text-2xl font-bold flex items-center gap-2">
|
|
{totalMarketCap ? (() => {
|
|
const value = totalMarketCap * solPrice
|
|
if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(2)}M+`
|
|
if (value >= 1_000) return `$${(value / 1_000).toFixed(2)}K+`
|
|
return `$${value.toLocaleString('en-US', { maximumFractionDigits: 2 })}`
|
|
})() : 'N/A'}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">Total Market Cap</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-xl border border-border bg-card px-5 py-3">
|
|
<LgIdea className="h-6 w-6" />
|
|
<div className="text-left">
|
|
<p className="text-2xl font-bold">{totalHolders ?? 'N/A'}</p>
|
|
<p className="text-xs text-muted-foreground">Total Holders</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Coins Section */}
|
|
<section className="mx-auto max-w-7xl px-4 py-12">
|
|
{/* Filters */}
|
|
<div className="mb-8 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="relative max-w-md flex-1">
|
|
<LgSearch className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search coins..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="h-11 bg-card/50 pl-10"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
{[
|
|
{ value: 'newest', label: 'Newest', iconKey: 'newest' },
|
|
{ value: 'verified', label: 'Verified', iconKey: 'verified' },
|
|
{ value: 'marketCap', label: 'Market Cap', iconKey: 'marketCap' },
|
|
{ value: 'volume', label: 'Volume', iconKey: 'volume' },
|
|
{ value: 'price', label: 'Price', iconKey: 'price' },
|
|
].map((option) => {
|
|
const Icon = iconMap[option.iconKey as keyof typeof iconMap]
|
|
return (
|
|
<button
|
|
key={option.value}
|
|
onClick={() => setSortBy(option.value as SortOption)}
|
|
className={`flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all ${
|
|
sortBy === option.value
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'bg-card/50 text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span className="hidden sm:inline">{option.label}</span>
|
|
</button>
|
|
)})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Coins Grid */}
|
|
{isLoading ? (
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{Array.from({ length: 8 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="h-64 animate-pulse rounded-2xl bg-card/50"
|
|
/>
|
|
))}
|
|
</div>
|
|
) : filteredCoins && filteredCoins.length > 0 ? (
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{filteredCoins.map((coin) => (
|
|
<CoinCard key={coin._id} coin={coin} solPrice={solPrice} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-20 text-center">
|
|
<LgCancel className="mb-4 h-16 w-16 opacity-50" />
|
|
<h3 className="mb-2 text-lg font-medium">No coins found</h3>
|
|
<p className="text-muted-foreground">
|
|
{search ? 'Try a different search term' : 'Be the first to create a coin!'}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|