Michilis/SatsFaucet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Transactions page: spacing, mobile cards, filters, skeleton & empty states

Browse Source 
Made-with: Cursor
This commit is contained in:
Michaël
2026-02-26 19:28:24 -03:00
parent 921d223533
commit f31bbb12ab
3 changed files with 436 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -85,7 +85,7 @@ export default function App() {
<Route <Route
path="/transactions" path="/transactions"
element={ element={
<div className="container container--single"> <div className="container container--single container--transactions">
<main className="main main--full"> <main className="main main--full">
<TransactionsPage /> <TransactionsPage />
</main> </main>

218
frontend/src/pages/TransactionsPage.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect, useMemo } from "react"; import { useState, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { getStats, type Stats, type DepositSource } from "../api"; import { getStats, type Stats, type DepositSource } from "../api";
type TxDirection = "in" | "out"; type TxDirection = "in" | "out";
@@ -16,10 +17,17 @@ function formatSource(s: DepositSource): TxType {
return s === "cashu" ? "cashu" : "lightning"; return s === "cashu" ? "cashu" : "lightning";
} }
type DirectionFilter = "all" | "in" | "out";
type TypeFilter = "all" | "lightning" | "cashu";
type SortOrder = "newest" | "oldest";
export function TransactionsPage() { export function TransactionsPage() {
const [stats, setStats] = useState<Stats | null>(null); const [stats, setStats] = useState<Stats | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [directionFilter, setDirectionFilter] = useState<DirectionFilter>("all");
const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
const [sortOrder, setSortOrder] = useState<SortOrder>("newest");
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
@@ -41,7 +49,6 @@ export function TransactionsPage() {
}, []); }, []);
const n = (v: number | undefined | null) => Number(v ?? 0).toLocaleString(); const n = (v: number | undefined | null) => Number(v ?? 0).toLocaleString();
/** Display amount: backend may have stored incoming Lightning in msats; show sats. */
const displaySats = (tx: UnifiedTx): number => { const displaySats = (tx: UnifiedTx): number => {
const a = tx.amount_sats; const a = tx.amount_sats;
if (tx.direction === "in" && tx.type === "lightning" && a >= 1000) return Math.floor(a / 1000); if (tx.direction === "in" && tx.type === "lightning" && a >= 1000) return Math.floor(a / 1000);
@@ -75,68 +82,189 @@ export function TransactionsPage() {
return merged.slice(0, 50); return merged.slice(0, 50);
}, [stats]); }, [stats]);
return ( const filteredAndSorted = useMemo(() => {
<div className="transactions-page"> let list = [...transactions];
<h1 className="transactions-title">Transactions</h1> if (directionFilter !== "all") {
<p className="transactions-intro"> list = list.filter((tx) => tx.direction === directionFilter);
Incoming (deposits) and outgoing (faucet payouts). Lightning and Cashu. }
</p> if (typeFilter !== "all") {
list = list.filter((tx) => tx.type === typeFilter);
}
if (sortOrder === "oldest") {
list = [...list].reverse();
}
return list;
}, [transactions, directionFilter, typeFilter, sortOrder]);
return (
<div className="tx-page">
{/* Desktop layout: container + hierarchy */}
<header className="tx-page-header">
<h1 className="tx-page-title">Transactions</h1>
<p className="tx-page-subtitle">
Incoming (deposits) and outgoing (faucet payouts). Lightning and Cashu.
</p>
</header>
{/* Filters section */}
{!loading && !error && (
<div className="tx-filters">
<div className="tx-filters-row">
<div className="tx-filter-group">
<label htmlFor="tx-direction" className="tx-filter-label">Direction</label>
<select
id="tx-direction"
className="tx-filter-select"
value={directionFilter}
onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
>
<option value="all">All</option>
<option value="in">In</option>
<option value="out">Out</option>
</select>
</div>
<div className="tx-filter-group">
<label htmlFor="tx-type" className="tx-filter-label">Type</label>
<select
id="tx-type"
className="tx-filter-select"
value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value as TypeFilter)}
>
<option value="all">All</option>
<option value="lightning">Lightning</option>
<option value="cashu">Cashu</option>
</select>
</div>
<div className="tx-filter-group">
<label htmlFor="tx-sort" className="tx-filter-label">Sort</label>
<select
id="tx-sort"
className="tx-filter-select"
value={sortOrder}
onChange={(e) => setSortOrder(e.target.value as SortOrder)}
>
<option value="newest">Newest first</option>
<option value="oldest">Oldest first</option>
</select>
</div>
</div>
</div>
)}
{/* Loading skeleton */}
{loading && ( {loading && (
<div className="transactions-loading"> <div className="tx-loading">
<div className="stats-skeleton"> <div className="tx-skeleton-card">
<div className="skeleton-line balance" /> <div className="tx-skeleton-line tx-skeleton-date" />
<div className="skeleton-line" /> <div className="tx-skeleton-line tx-skeleton-amount" />
<div className="skeleton-line" /> <div className="tx-skeleton-line tx-skeleton-badges" />
<div className="skeleton-line" /> <div className="tx-skeleton-line tx-skeleton-details" />
</div>
<div className="tx-skeleton-card">
<div className="tx-skeleton-line tx-skeleton-date" />
<div className="tx-skeleton-line tx-skeleton-amount" />
<div className="tx-skeleton-line tx-skeleton-badges" />
<div className="tx-skeleton-line tx-skeleton-details" />
</div>
<div className="tx-skeleton-card">
<div className="tx-skeleton-line tx-skeleton-date" />
<div className="tx-skeleton-line tx-skeleton-amount" />
<div className="tx-skeleton-line tx-skeleton-badges" />
<div className="tx-skeleton-line tx-skeleton-details" />
</div> </div>
</div> </div>
)} )}
{error && ( {error && (
<div className="transactions-error"> <div className="tx-error">
<p>{error}</p> <p>{error}</p>
</div> </div>
)} )}
{!loading && !error && ( {!loading && !error && (
<div className="transactions-box"> <div className="tx-card">
{transactions.length === 0 ? ( {filteredAndSorted.length === 0 ? (
<p className="transactions-empty">No transactions yet.</p> <div className="tx-empty">
<p className="tx-empty-title">No transactions yet</p>
<p className="tx-empty-desc">
When you deposit or claim, your transactions will show up here.
</p>
</div>
) : ( ) : (
<table className="transactions-table"> <>
<thead> {/* Desktop: grid table */}
<tr> <div className="tx-table-wrap">
<th>Date</th> <div className="tx-table-header">
<th>Direction</th> <span className="tx-th-date">Date</span>
<th>Type</th> <span className="tx-th-direction">Direction</span>
<th>Amount</th> <span className="tx-th-type">Type</span>
<th>Details</th> <span className="tx-th-amount">Amount</span>
</tr> <span className="tx-th-details">Details</span>
</thead> </div>
<tbody> <AnimatePresence initial={false}>
{transactions.map((tx, i) => ( {filteredAndSorted.map((tx, i) => (
<tr key={i}> <motion.div
<td>{formatDate(tx.at)}</td> key={`${tx.at}-${i}`}
<td> className={`tx-table-row ${i % 2 === 1 ? "tx-table-row--alt" : ""}`}
<span className={`transactions-direction transactions-direction--${tx.direction}`}> initial={{ opacity: 0 }}
{tx.direction === "in" ? "In" : "Out"} animate={{ opacity: 1 }}
transition={{ duration: 0.2, delay: i * 0.02 }}
>
<span className="tx-td-date">{formatDate(tx.at)}</span>
<span className="tx-td-direction">
<span className={`tx-badge tx-badge--direction tx-badge--${tx.direction}`}>
{tx.direction === "in" ? "In" : "Out"}
</span>
</span> </span>
</td> <span className="tx-td-type">
<td> <span className={`tx-badge tx-badge--type tx-badge--${tx.type}`}>
<span className={`transactions-type transactions-type--${tx.type}`}> {tx.type === "cashu" ? "Cashu" : "Lightning"}
{tx.type === "cashu" ? "Cashu" : "Lightning"} </span>
</span> </span>
</td> <span className="tx-td-amount">{n(displaySats(tx))} sats</span>
<td className="transactions-amount">{n(displaySats(tx))} sats</td> <span className="tx-td-details">{tx.details}</span>
<td className="transactions-details">{tx.details}</td> </motion.div>
</tr> ))}
))} </AnimatePresence>
</tbody> </div>
</table>
{/* Mobile: stacked cards */}
<div className="tx-cards-mobile">
<AnimatePresence initial={false}>
{filteredAndSorted.map((tx, i) => (
<motion.article
key={`card-${tx.at}-${i}`}
className="tx-mobile-card"
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.25, delay: i * 0.03 }}
>
<div className="tx-mobile-row1">
<span className="tx-mobile-date">{formatDate(tx.at)}</span>
<span className="tx-mobile-amount">{n(displaySats(tx))} sats</span>
</div>
<div className="tx-mobile-row2">
<span className={`tx-badge tx-badge--direction tx-badge--${tx.direction}`}>
{tx.direction === "in" ? "In" : "Out"}
</span>
<span className={`tx-badge tx-badge--type tx-badge--${tx.type}`}>
{tx.type === "cashu" ? "Cashu" : "Lightning"}
</span>
</div>
<div className="tx-mobile-row3">
<span className="tx-mobile-details">{tx.details}</span>
</div>
</motion.article>
))}
</AnimatePresence>
</div>
</>
)} )}
</div> </div>
)} )}
<div className="tx-page-bottom" aria-hidden />
</div> </div>
); );
} }

310
frontend/src/styles/global.css
View File

@@ -238,6 +238,7 @@ body {
.main { min-width: 0; } .main { min-width: 0; }
} }
.main--full { max-width: 800px; margin: 0 auto; } .main--full { max-width: 800px; margin: 0 auto; }
.container--transactions .main--full { max-width: none; }
.container--single { justify-content: center; } .container--single { justify-content: center; }
/* Site footer */ /* Site footer */
@@ -273,67 +274,142 @@ body {
margin: 0; margin: 0;
} }
/* Transactions page */ /* ---- Transactions page (desktop layout) ---- */
.transactions-page { .tx-page {
padding: 0 0 32px; max-width: 1100px;
margin: 0 auto;
padding: 80px 32px;
} }
.transactions-title { .tx-page-header {
font-size: 1.75rem; margin-bottom: 64px;
}
.tx-page-title {
font-size: 2rem;
font-weight: 600; font-weight: 600;
color: var(--text); color: var(--text);
margin-bottom: 8px; margin-bottom: 24px;
} }
.transactions-intro { .tx-page-subtitle {
font-size: 15px; font-size: 16px;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 28px; opacity: 0.9;
margin-bottom: 48px;
} }
.transactions-box { .tx-page-bottom {
height: 80px;
}
/* Filters section */
.tx-filters {
margin-bottom: 32px;
}
.tx-filters-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: flex-end;
}
.tx-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.tx-filter-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-soft);
}
.tx-filter-select {
min-width: 140px;
padding: 10px 14px;
font-size: 14px;
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-card); border-radius: 10px;
padding: 24px; color: var(--text);
box-shadow: var(--shadow); cursor: pointer;
overflow-x: auto;
} }
.transactions-table { .tx-filter-select:focus {
width: 100%; outline: none;
border-collapse: collapse; border-color: var(--accent);
font-size: 14px;
} }
.transactions-table th,
.transactions-table td { /* Transactions card (desktop) */
padding: 12px 16px; .tx-card {
text-align: left; background: var(--bg-card);
border-bottom: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px;
padding: 40px;
min-height: 420px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
} }
.transactions-table th {
/* Desktop: grid table (hidden on mobile) */
.tx-table-wrap {
display: none;
}
@media (min-width: 768px) {
.tx-table-wrap {
display: block;
}
}
.tx-table-header {
display: grid;
grid-template-columns: 180px 100px 140px 140px 1fr;
column-gap: 32px;
padding: 0 0 24px;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: var(--text-soft); color: var(--text-soft);
align-items: center;
} }
.transactions-table tbody tr:last-child td { .tx-table-row {
border-bottom: none; display: grid;
grid-template-columns: 180px 100px 140px 140px 1fr;
column-gap: 32px;
min-height: 72px;
align-items: center;
padding: 0;
margin-bottom: 20px;
font-size: 14px;
border-radius: 10px;
transition: background 0.15s ease;
} }
.transactions-table tbody tr:hover td { .tx-table-row:last-child {
margin-bottom: 0;
}
.tx-table-row:hover {
background: var(--bg-card-hover); background: var(--bg-card-hover);
} }
.transactions-amount { .tx-table-row--alt {
font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.02);
color: var(--accent-soft);
font-weight: 500;
} }
.transactions-pubkey, .tx-table-row--alt:hover {
.transactions-details { background: var(--bg-card-hover);
}
.tx-td-date {
color: var(--text-soft);
font-size: 13px;
}
.tx-td-amount {
font-size: 1.0625rem;
font-weight: 600;
color: var(--accent-soft);
font-variant-numeric: tabular-nums;
}
.tx-td-details {
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
font-size: 13px; font-size: 13px;
color: var(--text-muted); color: var(--text-muted);
word-break: break-all; word-break: break-all;
} }
.transactions-direction,
.transactions-type { /* Badges (direction / type) */
.tx-badge {
display: inline-block; display: inline-block;
padding: 4px 10px; padding: 4px 10px;
border-radius: 6px; border-radius: 6px;
@@ -341,36 +417,142 @@ body {
font-weight: 600; font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
} }
.transactions-direction--in { .tx-badge--direction.tx-badge--in {
background: rgba(34, 197, 94, 0.15); background: rgba(34, 197, 94, 0.15);
color: var(--accent-soft); color: var(--accent-soft);
} }
.transactions-direction--out { .tx-badge--direction.tx-badge--out {
background: rgba(249, 115, 22, 0.15); background: rgba(249, 115, 22, 0.15);
color: var(--accent); color: var(--accent);
} }
.transactions-type--lightning { .tx-badge--type.tx-badge--lightning {
background: rgba(251, 191, 36, 0.15); background: rgba(251, 191, 36, 0.15);
color: #fbbf24; color: #fbbf24;
} }
.transactions-type--cashu { .tx-badge--type.tx-badge--cashu {
background: rgba(168, 85, 247, 0.15); background: rgba(168, 85, 247, 0.15);
color: #a855f7; color: #a855f7;
} }
.transactions-loading {
max-width: 400px; /* Mobile: stacked cards (visible only on mobile) */
.tx-cards-mobile {
display: block;
} }
.transactions-error { @media (min-width: 768px) {
.tx-cards-mobile {
display: none;
}
}
.tx-mobile-card {
padding: 20px;
border-radius: 14px;
margin-bottom: 16px;
background: var(--bg);
border: 1px solid var(--border);
}
.tx-mobile-card:last-child {
margin-bottom: 0;
}
.tx-mobile-row1 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.tx-mobile-date {
font-size: 13px;
color: var(--text-soft);
}
.tx-mobile-amount {
font-size: 1.25rem;
font-weight: 600;
color: var(--accent-soft);
font-variant-numeric: tabular-nums;
}
.tx-mobile-row2 {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.tx-mobile-row3 .tx-mobile-details {
font-size: 12px;
color: var(--text-muted);
font-family: ui-monospace, monospace;
word-break: break-all;
}
/* Empty state */
.tx-empty {
text-align: center;
padding: 48px 24px;
}
.tx-empty-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.tx-empty-desc {
font-size: 15px;
color: var(--text-muted);
margin: 0;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
/* Loading skeleton */
.tx-loading {
margin-bottom: 0;
}
.tx-skeleton-card {
padding: 20px;
border-radius: 14px;
margin-bottom: 16px;
background: var(--bg-card);
border: 1px solid var(--border);
}
.tx-skeleton-line {
height: 14px;
background: linear-gradient(90deg, var(--border) 25%, var(--bg-card-hover) 50%, var(--border) 75%);
background-size: 200% 100%;
animation: skeleton-shine 1.2s ease-in-out infinite;
border-radius: 4px;
margin-bottom: 10px;
}
.tx-skeleton-line:last-child {
margin-bottom: 0;
}
.tx-skeleton-date {
width: 60%;
height: 12px;
}
.tx-skeleton-amount {
width: 45%;
height: 20px;
margin-left: auto;
margin-bottom: 12px;
}
.tx-skeleton-badges {
width: 70%;
height: 12px;
}
.tx-skeleton-details {
width: 90%;
height: 12px;
}
/* Error state */
.tx-error {
padding: 20px; padding: 20px;
background: var(--error-bg); background: var(--error-bg);
border: 1px solid rgba(248, 113, 113, 0.3); border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: var(--radius-card); border-radius: 14px;
color: var(--error); color: var(--error);
} }
.transactions-empty { .tx-error p {
color: var(--text-muted);
font-size: 15px;
margin: 0; margin: 0;
font-size: 15px;
} }
.header { .header {
@@ -2041,8 +2223,19 @@ h1 {
.site-nav-link { padding: 8px 12px; font-size: 13px; } .site-nav-link { padding: 8px 12px; font-size: 13px; }
.site-footer { padding: 20px 16px 24px; } .site-footer { padding: 20px 16px 24px; }
.site-footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; } .site-footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
.transactions-table th,
.transactions-table td { padding: 10px 12px; font-size: 13px; } .tx-page {
padding: 48px 24px;
}
.tx-filters-row {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.tx-filter-select {
min-width: 0;
width: 100%;
}
.container { .container {
padding: var(--space-sm) var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-md);
@@ -2073,6 +2266,27 @@ h1 {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.tx-page {
padding: 24px 20px;
}
.tx-page-header {
margin-bottom: 40px;
}
.tx-page-title {
font-size: 1.5rem;
margin-bottom: 16px;
}
.tx-page-subtitle {
margin-bottom: 32px;
}
.tx-card {
padding: 24px 20px;
min-height: 280px;
}
.tx-page-bottom {
height: 48px;
}
.container { .container {
padding: 12px 12px 20px; padding: 12px 12px 20px;
padding-bottom: max(20px, env(safe-area-inset-bottom)); padding-bottom: max(20px, env(safe-area-inset-bottom));