mirror of
https://github.com/Zproger/Aurum.git
synced 2026-10-14 03:26:40 +07:00
feat: full CoinMarketCap-style crypto portfolio (buy/sell log, 1h/24h/7d%, P&L)
Replaces the plain quantity field with a CryptoTransaction log (same
"record events, derive the total" shape as Goal/GoalContribution): quantity
and average buy price are now computed via weighted-average cost — a buy
blends into the running average, a sell reduces quantity but leaves the
average cost of what's still held unchanged.
Switches price fetching from /simple/price to CoinGecko's /coins/markets
(still one batched call for every coin), which also returns 1h/24h/7d %
change in the same request. Old PATCH /crypto/holdings/{id} is replaced by
POST .../transactions (buy/sell, rejects selling more than held), GET
.../transactions (history), and DELETE /crypto/transactions/{id}.
Frontend: CryptoHoldingsTable replaces the simple list with a real table
(Name/Price/1h%/24h%/7d%/Holdings/Avg Buy Price/Profit-Loss/Actions),
horizontally scrollable on mobile rather than dropping columns. New
CryptoTransactionModal (buy/sell) and CryptoTransactionHistoryModal.
Backend: 79/79 tests passing (13 in test_crypto.py, up from 9). Also
verified live end-to-end against the real CoinGecko API with the user's own
key — create, buy, sell, oversell rejection, history, manual refresh, all
against real BTC/ETH prices in EUR — test data cleaned up after.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01855PiW5Wd8n4aRW4n9kByY
This commit is contained in:
ZProger
151
frontend/src/components/crypto/CryptoHoldingsTable.tsx
Normal file
151
frontend/src/components/crypto/CryptoHoldingsTable.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import { Bitcoin, History, Plus, Trash2 } from "lucide-react";
|
||||
import { formatCurrency } from "@/lib/format";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import type { CryptoHolding } from "@/types";
|
||||
|
||||
interface CryptoHoldingsTableProps {
|
||||
items: CryptoHolding[];
|
||||
onTrade: (holding: CryptoHolding) => void;
|
||||
onViewHistory: (holding: CryptoHolding) => void;
|
||||
onDelete: (holding: CryptoHolding) => void;
|
||||
}
|
||||
|
||||
function PercentCell({ value }: { value: string | null }) {
|
||||
if (value === null) return <span className="text-text-muted">—</span>;
|
||||
const num = Number(value);
|
||||
const color = num > 0 ? "var(--success)" : num < 0 ? "var(--danger)" : "var(--text-muted)";
|
||||
return (
|
||||
<span className="tabular-nums" style={{ color }}>
|
||||
{num > 0 ? "+" : ""}
|
||||
{num.toFixed(2)}%
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CryptoHoldingsTable({ items, onTrade, onViewHistory, onDelete }: CryptoHoldingsTableProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (items.length === 0) {
|
||||
return <p className="py-10 text-center text-sm text-text-muted">{t("crypto.empty")}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[860px] text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border text-left text-xs text-text-muted">
|
||||
<th className="py-2 pr-3 font-medium">{t("crypto.table.name")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.price")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.change1h")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.change24h")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.change7d")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.holdings")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.avgBuyPrice")}</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">{t("crypto.table.profitLoss")}</th>
|
||||
<th className="py-2 pl-3 text-right font-medium">{t("crypto.table.actions")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gridline">
|
||||
{items.map((holding) => {
|
||||
const profitColor =
|
||||
holding.profit_loss === null
|
||||
? undefined
|
||||
: Number(holding.profit_loss) > 0
|
||||
? "var(--success)"
|
||||
: Number(holding.profit_loss) < 0
|
||||
? "var(--danger)"
|
||||
: "var(--text-muted)";
|
||||
const sign = holding.profit_loss !== null && Number(holding.profit_loss) > 0 ? "+" : "";
|
||||
|
||||
return (
|
||||
<tr key={holding.asset_id}>
|
||||
<td className="py-3 pr-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
{holding.thumb_url ? (
|
||||
<img src={holding.thumb_url} alt="" className="h-7 w-7 shrink-0 rounded-full" />
|
||||
) : (
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-surface-2">
|
||||
<Bitcoin size={14} className="text-text-secondary" />
|
||||
</span>
|
||||
)}
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate text-sm font-medium text-text-primary">{holding.name}</span>
|
||||
<span className="block text-xs text-text-muted">{holding.symbol}</span>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right tabular-nums text-text-primary">
|
||||
{holding.current_price !== null ? formatCurrency(holding.current_price) : t("crypto.pendingPrice")}
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right">
|
||||
<PercentCell value={holding.price_change_1h} />
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right">
|
||||
<PercentCell value={holding.price_change_24h} />
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right">
|
||||
<PercentCell value={holding.price_change_7d} />
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right">
|
||||
<span className="block tabular-nums text-text-primary">
|
||||
{holding.value !== null ? formatCurrency(holding.value) : t("crypto.pendingPrice")}
|
||||
</span>
|
||||
<span className="block text-xs tabular-nums text-text-muted">
|
||||
{Number(holding.quantity)} {holding.symbol}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right tabular-nums text-text-primary">
|
||||
{holding.avg_buy_price !== null ? formatCurrency(holding.avg_buy_price) : "—"}
|
||||
</td>
|
||||
<td className="py-3 pr-3 text-right">
|
||||
{holding.profit_loss !== null && holding.profit_loss_percent !== null ? (
|
||||
<>
|
||||
<span className="block tabular-nums" style={{ color: profitColor }}>
|
||||
{sign}
|
||||
{formatCurrency(holding.profit_loss)}
|
||||
</span>
|
||||
<span className="block text-xs tabular-nums" style={{ color: profitColor }}>
|
||||
{sign}
|
||||
{holding.profit_loss_percent.toFixed(2)}%
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-text-muted">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-3 pl-3">
|
||||
<div className="flex justify-end gap-1">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("crypto.form.tradeButton")}
|
||||
onClick={() => onTrade(holding)}
|
||||
className="rounded-md p-1.5 text-text-muted hover:bg-surface-2 hover:text-text-primary"
|
||||
>
|
||||
<Plus size={15} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("crypto.history.viewButton")}
|
||||
onClick={() => onViewHistory(holding)}
|
||||
className="rounded-md p-1.5 text-text-muted hover:bg-surface-2 hover:text-text-primary"
|
||||
>
|
||||
<History size={15} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={t("common.delete")}
|
||||
onClick={() => onDelete(holding)}
|
||||
className="rounded-md p-1.5 text-text-muted hover:bg-surface-2 hover:text-danger"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user