75c9cc4010
The card was role=button wrapping the Add <Button> (and a terms <a>), so Enter on Add also opened the detail sheet. The name is now a real button and the card no longer carries a button role.
532 lines
22 KiB
TypeScript
532 lines
22 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { useSeoMeta } from '@unhead/react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
|
import { useMintDirectory, type MintDirectoryEntry } from '@/hooks/useMintDirectory';
|
|
import { useCashu } from '@/hooks/wallet/useCashu';
|
|
import { useToast } from '@/hooks/useToast';
|
|
import { isNativePlatform } from '@/lib/platform';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import { cn } from '@/lib/utils';
|
|
import { Search, Coins, ExternalLink, Plus, Loader2, Check, ShieldAlert, Activity, ChevronRight, Copy, Info, Star } from 'lucide-react';
|
|
|
|
function hostOf(url: string): string {
|
|
try {
|
|
return new URL(url).host;
|
|
} catch {
|
|
return url;
|
|
}
|
|
}
|
|
|
|
function healthBadge(mint: MintDirectoryEntry) {
|
|
if (mint.archived) {
|
|
return { label: 'walletUi.mints.archived', className: 'border-gray-600 bg-gray-800/60 text-gray-400' };
|
|
}
|
|
if (mint.degraded) {
|
|
return { label: 'walletUi.mints.degraded', className: 'border-amber-500/40 bg-amber-500/10 text-amber-400' };
|
|
}
|
|
if (mint.online === false) {
|
|
return { label: 'walletUi.mints.offline', className: 'border-red-500/40 bg-red-500/10 text-red-400' };
|
|
}
|
|
return { label: 'walletUi.mints.online', className: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]' };
|
|
}
|
|
|
|
function MintRow({
|
|
mint,
|
|
added,
|
|
canAdd,
|
|
adding,
|
|
onAdd,
|
|
onSelect,
|
|
}: {
|
|
mint: MintDirectoryEntry;
|
|
added: boolean;
|
|
canAdd: boolean;
|
|
adding: boolean;
|
|
onAdd: () => void;
|
|
onSelect: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const health = healthBadge(mint);
|
|
return (
|
|
<Card
|
|
className="bg-black/90 border-2 border-white/10 hover:border-[#ccff00]/30 transition-colors"
|
|
>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start gap-3">
|
|
{mint.iconUrl ? (
|
|
<img
|
|
src={mint.iconUrl}
|
|
alt=""
|
|
loading="lazy"
|
|
className="h-10 w-10 rounded-xl object-cover border border-white/10 bg-white/5"
|
|
onError={(e) => {
|
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
) : (
|
|
<div className="h-10 w-10 rounded-xl border border-white/10 bg-white/5 flex items-center justify-center">
|
|
<Coins className="h-5 w-5 text-[#ccff00]/60" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<h3 className="font-bold text-white truncate">
|
|
{/* A real button (not a card-wide role=button) so there are no
|
|
nested interactive elements — the Add button and the terms
|
|
link live alongside it. */}
|
|
<button
|
|
type="button"
|
|
onClick={onSelect}
|
|
className="text-left transition-colors hover:text-[#ccff00]"
|
|
>
|
|
{mint.name || hostOf(mint.url)}
|
|
</button>
|
|
</h3>
|
|
<Badge variant="outline" className={cn('text-[10px]', health.className)}>
|
|
{t(health.label)}
|
|
</Badge>
|
|
{typeof mint.latencyMs === 'number' && mint.online && (
|
|
<span className="inline-flex items-center gap-1 text-[10px] text-gray-500">
|
|
<Activity className="h-3 w-3" /> {mint.latencyMs} ms
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 truncate">{hostOf(mint.url)}</p>
|
|
{mint.descriptionLong && (
|
|
<p className="mt-1 text-xs text-gray-400 line-clamp-2">{mint.descriptionLong}</p>
|
|
)}
|
|
<div className="mt-2 flex items-center gap-3 text-[11px] text-gray-500">
|
|
{typeof mint.nutCount === 'number' && <span>{mint.nutCount} NUTs</span>}
|
|
{mint.version && <span className="truncate max-w-40">{mint.version}</span>}
|
|
{mint.tosUrl && (
|
|
<a
|
|
href={mint.tosUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-gray-400 hover:text-white"
|
|
>
|
|
{t('walletUi.mints.terms')} <ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
{/* Community signal — ratings + reliability from MintRadar. */}
|
|
{((typeof mint.reviewAvgRating === 'number' && (mint.reviewCount ?? 0) > 0) ||
|
|
typeof mint.reliabilityScore === 'number' ||
|
|
typeof mint.uptimePct24h === 'number') && (
|
|
<div className="mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 text-[11px]">
|
|
{typeof mint.reviewAvgRating === 'number' && (mint.reviewCount ?? 0) > 0 && (
|
|
<span className="inline-flex items-center gap-1 font-bold text-amber-400">
|
|
<Star className="h-3 w-3 fill-current" />
|
|
{mint.reviewAvgRating.toFixed(1)}
|
|
<span className="font-normal text-gray-500">({mint.reviewCount})</span>
|
|
</span>
|
|
)}
|
|
{typeof mint.reliabilityScore === 'number' && (
|
|
<span className="text-gray-400">{t('walletUi.mints.reliability')} {mint.reliabilityScore}/100</span>
|
|
)}
|
|
{typeof mint.uptimePct24h === 'number' && (
|
|
<span className="text-gray-400">{Math.round(mint.uptimePct24h)}% up · 24h</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="shrink-0 flex items-center gap-1.5">
|
|
{added ? (
|
|
<Badge className="gap-1 bg-[#ccff00]/15 text-[#ccff00] border border-[#ccff00]/30">
|
|
<Check className="h-3 w-3" /> {t('walletUi.mints.addedBadge')}
|
|
</Badge>
|
|
) : canAdd ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onAdd();
|
|
}}
|
|
disabled={adding}
|
|
className="gap-1.5 border-[#ccff00]/40 text-[#ccff00] hover:bg-[#ccff00]/10"
|
|
>
|
|
{adding ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
|
|
{t('walletUi.mints.add')}
|
|
</Button>
|
|
) : null}
|
|
<ChevronRight className="h-4 w-4 shrink-0 text-gray-600" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function MintsPage() {
|
|
const { t } = useTranslation();
|
|
const { data, isLoading, error } = useMintDirectory();
|
|
const { coco, mints, isInitialized, refreshMints } = useCashu();
|
|
const { toast } = useToast();
|
|
const [query, setQuery] = useState('');
|
|
const [onlineOnly, setOnlineOnly] = useState(false);
|
|
const [addingUrl, setAddingUrl] = useState<string | null>(null);
|
|
const [selected, setSelected] = useState<MintDirectoryEntry | null>(null);
|
|
|
|
const copyUrl = async (url: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
toast({ title: t('walletUi.mints.urlCopied') });
|
|
} catch {
|
|
toast({ title: t('walletUi.share.copyFailed'), variant: 'destructive' });
|
|
}
|
|
};
|
|
|
|
useSeoMeta({
|
|
title: 'Cashu Mints — SkateSpots',
|
|
description: 'Browse Cashu mints, check their health, and add one to your wallet.',
|
|
});
|
|
|
|
const canAdd = isNativePlatform() && isInitialized && !!coco;
|
|
const addedUrls = useMemo(
|
|
() => new Set(mints.map((m) => m.url.toLowerCase())),
|
|
[mints],
|
|
);
|
|
|
|
const filtered = useMemo(() => {
|
|
const list = data ?? [];
|
|
const q = query.trim().toLowerCase();
|
|
return list
|
|
.filter((m) => {
|
|
if (onlineOnly && (m.archived || m.online === false)) return false;
|
|
if (!q) return true;
|
|
return (
|
|
m.url.toLowerCase().includes(q) ||
|
|
(m.name ?? '').toLowerCase().includes(q)
|
|
);
|
|
})
|
|
.sort((a, b) => {
|
|
const rank = (m: MintDirectoryEntry) =>
|
|
m.archived ? 3 : m.online === false ? 2 : m.degraded ? 1 : 0;
|
|
const r = rank(a) - rank(b);
|
|
if (r !== 0) return r;
|
|
return (a.latencyMs ?? 9999) - (b.latencyMs ?? 9999);
|
|
});
|
|
}, [data, query, onlineOnly]);
|
|
|
|
const handleAdd = async (url: string) => {
|
|
if (!coco) return;
|
|
setAddingUrl(url);
|
|
try {
|
|
await coco.mint.addMint(url, { trusted: true });
|
|
await refreshMints();
|
|
toast({ title: t('walletUi.mints.added'), description: t('walletUi.mints.addedDesc', { host: hostOf(url) }) });
|
|
} catch (e) {
|
|
toast({
|
|
title: t('walletUi.mints.couldNotAdd'),
|
|
description: e instanceof Error ? e.message : t('walletUi.addToCollection.somethingWrong'),
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setAddingUrl(null);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="container mx-auto max-w-3xl px-4 py-8">
|
|
<div className="mb-6">
|
|
<h1 className="flex items-center gap-3 text-3xl font-black uppercase text-white">
|
|
<Coins className="h-8 w-8 text-[#ccff00]" /> {t('walletUi.mints.title')}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-gray-400">
|
|
{t('walletUi.mints.subtitle')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder={t('walletUi.mints.searchPlaceholder')}
|
|
className="h-11 border-gray-700 bg-gray-900 pl-10 text-white"
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant={onlineOnly ? 'default' : 'outline'}
|
|
onClick={() => setOnlineOnly((v) => !v)}
|
|
className={cn(
|
|
'h-11 shrink-0 gap-1.5',
|
|
onlineOnly ? 'bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90' : 'border-white/15',
|
|
)}
|
|
>
|
|
<Activity className="h-4 w-4" /> {t('walletUi.mints.onlineOnly')}
|
|
</Button>
|
|
</div>
|
|
|
|
{!isLoading && !error && (
|
|
<p className="mb-3 text-xs text-gray-500">
|
|
{t('walletUi.mints.count', { filtered: filtered.length, total: data?.length ?? 0 })}
|
|
</p>
|
|
)}
|
|
|
|
{isLoading && (
|
|
<div className="space-y-3" aria-busy="true">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-24 w-full rounded-xl" />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error && !isLoading && (
|
|
<Card className="border-dashed border-white/15 bg-black/60">
|
|
<CardContent className="py-12 text-center space-y-3">
|
|
<ShieldAlert className="mx-auto h-8 w-8 text-amber-400" />
|
|
<p className="text-sm text-gray-300">
|
|
{error instanceof Error ? error.message : t('walletUi.mints.directoryError')}
|
|
</p>
|
|
<p className="text-xs text-gray-500">
|
|
{t('walletUi.mints.directoryHint')}
|
|
</p>
|
|
<Button asChild variant="outline" className="border-white/15">
|
|
<Link to="/wallet">{t('walletUi.mints.goToWallet')}</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{!isLoading && !error && (
|
|
<>
|
|
{!canAdd && (
|
|
<p className="mb-3 text-xs text-gray-500">
|
|
{t('walletUi.mints.appOnly')}
|
|
</p>
|
|
)}
|
|
<div className="space-y-3">
|
|
{filtered.map((mint) => (
|
|
<MintRow
|
|
key={mint.url}
|
|
mint={mint}
|
|
added={addedUrls.has(mint.url.toLowerCase())}
|
|
canAdd={canAdd}
|
|
adding={addingUrl === mint.url}
|
|
onAdd={() => handleAdd(mint.url)}
|
|
onSelect={() => setSelected(mint)}
|
|
/>
|
|
))}
|
|
</div>
|
|
{filtered.length === 0 && (
|
|
<p className="py-12 text-center text-sm text-gray-500">
|
|
{t('walletUi.mints.noMatch', { query })}
|
|
</p>
|
|
)}
|
|
<p className="mt-6 text-center text-[11px] text-gray-600">
|
|
{t('walletUi.mints.footer')}
|
|
</p>
|
|
</>
|
|
)}
|
|
|
|
{/* Mint detail — everything the directory knows, plus what to watch for. */}
|
|
<Sheet
|
|
open={!!selected}
|
|
onOpenChange={(o) => {
|
|
if (!o) setSelected(null);
|
|
}}
|
|
>
|
|
<SheetContent side="bottom" className="max-h-[88vh] overflow-y-auto rounded-t-2xl px-4 pb-8">
|
|
{selected && (
|
|
<>
|
|
<SheetHeader className="pb-3 text-left">
|
|
<div className="flex items-center gap-3 pr-8">
|
|
{selected.iconUrl ? (
|
|
<img
|
|
src={selected.iconUrl}
|
|
alt=""
|
|
className="h-12 w-12 rounded-xl border border-white/10 bg-white/5 object-cover"
|
|
onError={(e) => {
|
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
) : (
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5">
|
|
<Coins className="h-6 w-6 text-[#ccff00]/60" />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<SheetTitle className="truncate text-lg">
|
|
{selected.name || hostOf(selected.url)}
|
|
</SheetTitle>
|
|
<SheetDescription className="truncate text-xs">
|
|
{hostOf(selected.url)}
|
|
</SheetDescription>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={cn('shrink-0 text-[10px]', healthBadge(selected).className)}
|
|
>
|
|
{healthBadge(selected).label}
|
|
</Badge>
|
|
</div>
|
|
</SheetHeader>
|
|
|
|
{selected.descriptionLong && (
|
|
<p className="text-sm leading-relaxed text-gray-300">{selected.descriptionLong}</p>
|
|
)}
|
|
|
|
<div className="mt-4 grid grid-cols-2 gap-2">
|
|
{[
|
|
{
|
|
label: t('walletUi.mints.communityRating'),
|
|
value:
|
|
typeof selected.reviewAvgRating === 'number' && (selected.reviewCount ?? 0) > 0
|
|
? `${selected.reviewAvgRating.toFixed(1)} / 5 · ${selected.reviewCount}`
|
|
: '—',
|
|
},
|
|
{
|
|
label: t('walletUi.mints.reliabilityLabel'),
|
|
value:
|
|
typeof selected.reliabilityScore === 'number'
|
|
? `${selected.reliabilityScore} / 100`
|
|
: '—',
|
|
},
|
|
{
|
|
label: t('walletUi.mints.uptime'),
|
|
value:
|
|
typeof selected.uptimePct24h === 'number' && typeof selected.uptimePct7d === 'number'
|
|
? `${Math.round(selected.uptimePct24h)}% / ${Math.round(selected.uptimePct7d)}%`
|
|
: '—',
|
|
},
|
|
{ label: t('walletUi.mints.location'), value: selected.serverLocation ?? '—' },
|
|
{
|
|
label: t('walletUi.mints.latency'),
|
|
value:
|
|
selected.online && typeof selected.latencyMs === 'number'
|
|
? `${selected.latencyMs} ms`
|
|
: '—',
|
|
},
|
|
{
|
|
label: t('walletUi.mints.nuts'),
|
|
value: typeof selected.nutCount === 'number' ? String(selected.nutCount) : '—',
|
|
},
|
|
{
|
|
label: t('walletUi.mints.units'),
|
|
value: selected.units?.length ? selected.units.join(', ') : '—',
|
|
},
|
|
{ label: t('walletUi.mints.version'), value: selected.version ?? '—' },
|
|
].map((f) => (
|
|
<div
|
|
key={f.label}
|
|
className="rounded-xl border border-white/8 bg-white/[0.03] px-3 py-2"
|
|
>
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
|
{f.label}
|
|
</p>
|
|
<p className="truncate text-sm font-bold text-white">{f.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-3 space-y-1.5 text-[11px] leading-relaxed text-gray-500">
|
|
<p className="flex items-start gap-2">
|
|
<Star className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400" />
|
|
<span>
|
|
{typeof selected.reviewAvgRating === 'number' && (selected.reviewCount ?? 0) > 0
|
|
? t('walletUi.mints.ratedBy', { rating: selected.reviewAvgRating.toFixed(1), count: selected.reviewCount ?? 0 })
|
|
: t('walletUi.mints.noRating')}{' '}
|
|
{t('walletUi.mints.reviewsNote1')}{' '}
|
|
<a
|
|
href="https://mintradar.org/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-gray-300 underline underline-offset-2 hover:text-white"
|
|
>
|
|
{t('walletUi.mints.openMintRadar')}
|
|
</a>{' '}
|
|
{t('walletUi.mints.reviewsNote2')}
|
|
</span>
|
|
</p>
|
|
{typeof selected.auditNMints === 'number' && (
|
|
<p className="flex items-start gap-2">
|
|
<Activity className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[#ccff00]" />
|
|
<span>
|
|
{t('walletUi.mints.liveness', { mints: selected.auditNMints.toLocaleString(), melts: (selected.auditNMelts ?? 0).toLocaleString() })}
|
|
{selected.auditRecentTotal
|
|
? t('walletUi.mints.livenessErrors', { errors: selected.auditRecentErrors ?? 0, total: selected.auditRecentTotal })
|
|
: ''}
|
|
.
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{addedUrls.has(selected.url.toLowerCase()) ? (
|
|
<Badge className="gap-1 border border-[#ccff00]/30 bg-[#ccff00]/15 text-[#ccff00]">
|
|
<Check className="h-3 w-3" /> {t('walletUi.mints.inWallet')}
|
|
</Badge>
|
|
) : canAdd ? (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleAdd(selected.url)}
|
|
disabled={addingUrl === selected.url}
|
|
className="gap-1.5 bg-[#ccff00] font-bold text-black hover:bg-[#ccff00]/90"
|
|
>
|
|
{addingUrl === selected.url ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Plus className="h-4 w-4" />
|
|
)}
|
|
{t('walletUi.mints.addToWallet')}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="gap-1.5 border-white/15"
|
|
onClick={() => void copyUrl(selected.url)}
|
|
>
|
|
<Copy className="h-3.5 w-3.5" /> {t('walletUi.mints.copyUrl')}
|
|
</Button>
|
|
<a href={selected.url} target="_blank" rel="noopener noreferrer">
|
|
<Button size="sm" variant="outline" className="gap-1.5 border-white/15">
|
|
<ExternalLink className="h-3.5 w-3.5" /> {t('walletUi.mints.openMint')}
|
|
</Button>
|
|
</a>
|
|
{selected.tosUrl && (
|
|
<a href={selected.tosUrl} target="_blank" rel="noopener noreferrer">
|
|
<Button size="sm" variant="outline" className="gap-1.5 border-white/15">
|
|
<ExternalLink className="h-3.5 w-3.5" /> {t('walletUi.mints.terms')}
|
|
</Button>
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-4">
|
|
<p className="flex items-center gap-2 text-xs font-bold text-white">
|
|
<Info className="h-4 w-4 text-[#ccff00]" /> {t('walletUi.mints.whatsAMint')}
|
|
</p>
|
|
<p className="text-xs leading-relaxed text-gray-400">
|
|
{t('walletUi.mints.whatsAMintDesc')}
|
|
</p>
|
|
<p className="flex items-start gap-2 text-xs leading-relaxed text-amber-400/90">
|
|
<ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
|
|
{t('walletUi.mints.mintWarning')}
|
|
</p>
|
|
<p className="text-[11px] text-gray-600">
|
|
{t('walletUi.mints.healthDisclaimer')}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|