300 lines
11 KiB
TypeScript
300 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { useRouter } from "next/navigation";
|
||
import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
|
||
import { useSearchParams } from "next/navigation";
|
||
import { ProductSocialBlock } from "@/components/shop/ProductSocialBlock";
|
||
import { useCart } from "@/contexts/CartContext";
|
||
import {
|
||
SHOP_PRODUCT_COUNT,
|
||
SHOP_PRODUCTS,
|
||
resolveProductImage,
|
||
shopCategoryCounts,
|
||
type ShopCurrency,
|
||
type ShopProduct,
|
||
} from "@/lib/shopCatalog";
|
||
import { estimateUsdForCryptoAmount } from "@/lib/shopFx";
|
||
import { getProductSocialMetrics } from "@/lib/shopProductSocial";
|
||
import { SHOP_SELLER_COUNT, getSellerById } from "@/lib/shopSellers";
|
||
|
||
function formatPrice(price: number, currency: ShopCurrency): string {
|
||
if (currency === "BTC") return price.toFixed(6);
|
||
if (currency === "ETH") return price.toFixed(4);
|
||
if (currency === "XMR") return price.toFixed(3);
|
||
return price.toFixed(2);
|
||
}
|
||
|
||
const SYM: Record<ShopCurrency, string> = {
|
||
BTC: "₿",
|
||
ETH: "Ξ",
|
||
USD: "$",
|
||
XMR: "⏣",
|
||
};
|
||
|
||
type SortKey = "relevance" | "price-asc" | "price-desc" | "name";
|
||
|
||
function MarketContent() {
|
||
const sp = useSearchParams();
|
||
const router = useRouter();
|
||
const initialCat = sp.get("category") ?? "";
|
||
const [q, setQ] = useState("");
|
||
const [category, setCategory] = useState(initialCat);
|
||
const [sort, setSort] = useState<SortKey>("relevance");
|
||
const [currencyFilter, setCurrencyFilter] = useState<ShopCurrency | "">("");
|
||
const [btcUsd, setBtcUsd] = useState<number | null>(null);
|
||
|
||
const facet = useMemo(() => shopCategoryCounts(), []);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
void (async () => {
|
||
try {
|
||
const res = await fetch(
|
||
"https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd",
|
||
{ cache: "no-store" },
|
||
);
|
||
const j = (await res.json()) as { bitcoin?: { usd?: number } };
|
||
if (!cancelled && j.bitcoin?.usd && Number.isFinite(j.bitcoin.usd)) setBtcUsd(j.bitcoin.usd);
|
||
} catch {
|
||
if (!cancelled) setBtcUsd(96000);
|
||
}
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, []);
|
||
|
||
const spotBtc = btcUsd ?? 96000;
|
||
|
||
const filtered = useMemo(() => {
|
||
const ql = q.trim().toLowerCase();
|
||
const tokens = ql.split(/\s+/).filter(Boolean);
|
||
return SHOP_PRODUCTS.filter((p) => {
|
||
if (category && p.category !== category) return false;
|
||
if (currencyFilter && p.currency !== currencyFilter) return false;
|
||
if (tokens.length === 0) return true;
|
||
const seller = getSellerById(p.sellerId);
|
||
const sellerHay = seller ? `${seller.handle} ${seller.bio} ${seller.specialty}` : "";
|
||
const hay = `${p.name} ${p.description} ${p.category} ${p.id} ${sellerHay}`.toLowerCase();
|
||
return tokens.every((t) => hay.includes(t));
|
||
});
|
||
}, [q, category, currencyFilter]);
|
||
|
||
const sorted = useMemo(() => {
|
||
const list = [...filtered];
|
||
const unitUsd = (p: ShopProduct) => estimateUsdForCryptoAmount(p.price, p.currency, spotBtc);
|
||
switch (sort) {
|
||
case "price-asc":
|
||
return list.sort((a, b) => unitUsd(a) - unitUsd(b));
|
||
case "price-desc":
|
||
return list.sort((a, b) => unitUsd(b) - unitUsd(a));
|
||
case "name":
|
||
return list.sort((a, b) => a.name.localeCompare(b.name));
|
||
default:
|
||
return list;
|
||
}
|
||
}, [filtered, sort, spotBtc]);
|
||
|
||
return (
|
||
<div className="font-mono text-[#00ff41]">
|
||
<section className="mb-6 border-b border-[#00ff41]/20 pb-4">
|
||
<p className="text-[10px] uppercase tracking-[0.4em] text-[#00ff41]/50">Layer 1 · live floor</p>
|
||
<p className="mt-2 max-w-3xl text-sm text-[#00ff41]/65">
|
||
<strong className="text-[#7af598]">{SHOP_PRODUCT_COUNT}</strong> SKUs ·{" "}
|
||
<Link href="/vendors" className="font-bold text-[#9dffc4] underline hover:text-white">
|
||
{SHOP_SELLER_COUNT} vendor stalls
|
||
</Link>
|
||
. Every SKU has a detail page with qty, cart, checkout, or instant USD balance payment. Spot:{" "}
|
||
<span className="text-[#7af598]">${spotBtc.toLocaleString(undefined, { maximumFractionDigits: 0 })}/BTC</span>.
|
||
</p>
|
||
</section>
|
||
|
||
<div className="mb-4 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||
<div className="flex-1">
|
||
<label className="text-[10px] uppercase tracking-widest text-[#00ff41]/50">Search catalog</label>
|
||
<input
|
||
value={q}
|
||
onChange={(e) => setQ(e.target.value)}
|
||
placeholder="title, description, vendor…"
|
||
className="mt-1 w-full max-w-xl border-2 border-[#00ff41]/30 bg-black/80 px-4 py-2.5 text-sm text-[#c8ffd8] placeholder:text-[#00ff41]/25 focus:border-[#00ff41] focus:outline-none"
|
||
/>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-3 text-xs text-[#00ff41]/50">
|
||
<span>
|
||
Showing <span className="text-[#7af598]">{sorted.length}</span> / {SHOP_PRODUCT_COUNT}
|
||
</span>
|
||
<label className="flex items-center gap-2">
|
||
<span className="text-[10px] uppercase">Sort</span>
|
||
<select
|
||
value={sort}
|
||
onChange={(e) => setSort(e.target.value as SortKey)}
|
||
className="border border-[#00ff41]/35 bg-black px-2 py-1 text-[11px] text-[#c8ffd8]"
|
||
>
|
||
<option value="relevance">Default</option>
|
||
<option value="price-asc">Price ↑ (USD est.)</option>
|
||
<option value="price-desc">Price ↓ (USD est.)</option>
|
||
<option value="name">Name A–Z</option>
|
||
</select>
|
||
</label>
|
||
<label className="flex items-center gap-2">
|
||
<span className="text-[10px] uppercase">Currency</span>
|
||
<select
|
||
value={currencyFilter}
|
||
onChange={(e) => setCurrencyFilter((e.target.value || "") as ShopCurrency | "")}
|
||
className="border border-[#00ff41]/35 bg-black px-2 py-1 text-[11px] text-[#c8ffd8]"
|
||
>
|
||
<option value="">All</option>
|
||
<option value="BTC">BTC</option>
|
||
<option value="ETH">ETH</option>
|
||
<option value="USD">USD</option>
|
||
<option value="XMR">XMR</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-6 flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setCategory("")}
|
||
className={`px-3 py-1.5 text-xs uppercase ${category === "" ? "bg-[#00ff41] text-black" : "border border-[#00ff41]/35 hover:bg-[#00ff41]/10"}`}
|
||
>
|
||
All
|
||
</button>
|
||
{facet.map((c) => (
|
||
<button
|
||
key={c.name}
|
||
type="button"
|
||
onClick={() => setCategory(c.name)}
|
||
className={`px-3 py-1.5 text-xs ${category === c.name ? "bg-[#00ff41] text-black" : "border border-[#00ff41]/35 hover:bg-[#00ff41]/10"}`}
|
||
>
|
||
<span className="mr-1">{c.icon}</span>
|
||
{c.name} ({c.count})
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
|
||
{sorted.map((p) => (
|
||
<MarketProductCard key={p.id} product={p} spotBtc={spotBtc} onBuyNow={() => router.push("/checkout")} />
|
||
))}
|
||
</div>
|
||
|
||
{sorted.length === 0 ? (
|
||
<p className="mt-16 border border-dashed border-[#00ff41]/20 py-12 text-center text-sm text-[#00ff41]/50">
|
||
No SKUs match — widen search or pick another category.
|
||
</p>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function MarketPage() {
|
||
return (
|
||
<Suspense fallback={<div className="font-mono text-sm text-[#00ff41]/50">Loading market…</div>}>
|
||
<MarketContent />
|
||
</Suspense>
|
||
);
|
||
}
|
||
|
||
function MarketProductCard({
|
||
product: p,
|
||
spotBtc,
|
||
onBuyNow,
|
||
}: {
|
||
product: ShopProduct;
|
||
spotBtc: number;
|
||
onBuyNow: () => void;
|
||
}) {
|
||
const src = resolveProductImage(p);
|
||
const local = src.startsWith("/");
|
||
const v = getSellerById(p.sellerId);
|
||
const metrics = getProductSocialMetrics(p.id);
|
||
const { addToCart, hydrated } = useCart();
|
||
const [flash, setFlash] = useState(false);
|
||
const unitUsd = estimateUsdForCryptoAmount(p.price, p.currency, spotBtc);
|
||
|
||
const add = () => {
|
||
addToCart(p, 1);
|
||
setFlash(true);
|
||
window.setTimeout(() => setFlash(false), 1400);
|
||
};
|
||
|
||
const buyNow = () => {
|
||
addToCart(p, 1);
|
||
onBuyNow();
|
||
};
|
||
|
||
return (
|
||
<article className="flex h-full flex-col border border-[#00ff41]/20 bg-[#0d0d0d] transition-all hover:border-[#00ff41]/55">
|
||
<Link href={`/market/product/${encodeURIComponent(p.id)}`} className="relative block aspect-square w-full bg-black">
|
||
<Image
|
||
src={src}
|
||
alt=""
|
||
fill
|
||
className="object-cover"
|
||
sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 25vw"
|
||
unoptimized={local}
|
||
/>
|
||
{p.limited ? (
|
||
<span className="absolute left-2 top-2 bg-[#ff00aa] px-2 py-0.5 text-[10px] font-bold uppercase text-black">Limited</span>
|
||
) : null}
|
||
</Link>
|
||
<div className="flex flex-1 flex-col p-4">
|
||
<p className="text-[10px] uppercase tracking-wider text-[#00ff41]/45">{p.category}</p>
|
||
<Link href={`/market/product/${encodeURIComponent(p.id)}`}>
|
||
<h2 className="mt-1 text-base font-bold leading-snug text-[#d8ffe8] hover:text-[#7af598]">{p.name}</h2>
|
||
</Link>
|
||
<div className="mt-2 text-[#9dffc4]">
|
||
<ProductSocialBlock metrics={metrics} compact />
|
||
</div>
|
||
{v ? (
|
||
<p className="mt-2 text-[10px] text-[#00ff41]/55">
|
||
<span className="text-[#00ff41]/40">Seller</span>{" "}
|
||
<Link href={`/vendor/${v.slug}`} className="text-[#7af598] hover:text-white hover:underline">
|
||
{v.handle}
|
||
</Link>
|
||
<span className="text-[#00ff41]/35"> · stall ★{v.rating.toFixed(2)}</span>
|
||
</p>
|
||
) : null}
|
||
<p className="mt-2 line-clamp-2 text-xs leading-relaxed text-[#00ff41]/70">{p.description}</p>
|
||
<div className="mt-3 flex items-baseline justify-between gap-2 border-t border-[#00ff41]/15 pt-3">
|
||
<div>
|
||
<span className="text-lg font-bold text-[#7af598]">
|
||
{SYM[p.currency]}
|
||
{formatPrice(p.price, p.currency)} <span className="text-xs font-normal text-[#00ff41]/50">{p.currency}</span>
|
||
</span>
|
||
<p className="font-mono text-[10px] text-[#5a8f6a]">≈ ${unitUsd.toFixed(2)} USD</p>
|
||
</div>
|
||
<Link
|
||
href={`/market/product/${encodeURIComponent(p.id)}`}
|
||
className="shrink-0 text-[10px] font-bold uppercase text-[#7af598] underline hover:text-white"
|
||
>
|
||
Details
|
||
</Link>
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
disabled={!hydrated}
|
||
onClick={add}
|
||
className="flex-1 border border-[#00ff41] bg-[#00ff41] px-2 py-1.5 text-[10px] font-bold uppercase text-black hover:bg-[#7af598] disabled:opacity-50"
|
||
>
|
||
{flash ? "Added" : "Add"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
disabled={!hydrated}
|
||
onClick={buyNow}
|
||
className="flex-1 border border-[#00ff41]/40 px-2 py-1.5 text-[10px] font-bold uppercase text-[#7af598] hover:bg-[#00ff41]/10 disabled:opacity-50"
|
||
>
|
||
Buy now
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|