mirror of
https://github.com/Such-Software/wowcheckout.git
synced 2026-10-17 05:51:45 +02:00
Fork xmrcheckout for Wownero (WOW)
Minimal changes from upstream xmrcheckout to support Wownero: - Rate provider: Nonlogs WOW-BTC via Kraken BTC/USD - Subaddress derivation: Wownero network byte overrides (53/63/54) - Payment URI scheme: wownero: - Dockerfile: Wownero binaries from Codeberg - Display text: Monero→Wownero, XMR→WOW throughout UI - Default daemon: 192.168.88.235:34568 - Added wownero-logo.svg File and folder structure kept identical to upstream for easy sync.
This commit is contained in:
jwinterm
@@ -0,0 +1,295 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
import BtcpayModalBridge from "../../../components/btcpay-modal-bridge";
|
||||
import BtcpayClassicCheckout from "../../../components/btcpay-classic-checkout";
|
||||
import InvoicePaymentDetails from "../../../components/invoice-payment-details";
|
||||
import InvoiceStatusAutoRefresh from "../../../components/invoice-status-auto-refresh";
|
||||
import { formatRelativeTime } from "../../../components/relative-time";
|
||||
import StatusRefreshButton from "../../../components/status-refresh-button";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const metadata: Metadata = {
|
||||
title: "Payment Request",
|
||||
};
|
||||
|
||||
const apiBaseUrl = process.env.API_BASE_URL ?? "http://localhost:8000";
|
||||
|
||||
type InvoiceStatus =
|
||||
| "pending"
|
||||
| "payment_detected"
|
||||
| "confirmed"
|
||||
| "expired"
|
||||
| "invalid";
|
||||
|
||||
type InvoiceStatusResponse = {
|
||||
id: string;
|
||||
address: string;
|
||||
subaddress_index: number | null;
|
||||
amount_xmr: string;
|
||||
amount_paid_xmr?: string | null;
|
||||
status: InvoiceStatus;
|
||||
confirmation_target: number;
|
||||
confirmations: number;
|
||||
checkout_continue_available?: boolean;
|
||||
created_at: string;
|
||||
expires_at: string | null;
|
||||
detected_at: string | null;
|
||||
confirmed_at: string | null;
|
||||
btcpay_amount?: string | null;
|
||||
btcpay_currency?: string | null;
|
||||
btcpay_checkout_style?: "standard" | "btcpay_classic" | null;
|
||||
btcpay_redirect_url?: string | null;
|
||||
btcpay_redirect_automatically?: boolean | null;
|
||||
btcpay_order_id?: string | null;
|
||||
btcpay_order_number?: string | null;
|
||||
qr_logo?: "monero" | "none" | "custom" | null;
|
||||
qr_logo_data_url?: string | null;
|
||||
quote?: {
|
||||
fiat_amount: string;
|
||||
fiat_currency: string;
|
||||
rate: string;
|
||||
source: string;
|
||||
quoted_at: string;
|
||||
} | null;
|
||||
};
|
||||
|
||||
const formatStatus = (status: InvoiceStatus) => {
|
||||
if (status === "payment_detected") {
|
||||
return "Payment detected";
|
||||
}
|
||||
if (status === "pending") {
|
||||
return "Awaiting funds";
|
||||
}
|
||||
if (status === "confirmed") {
|
||||
return "Confirmed";
|
||||
}
|
||||
if (status === "invalid") {
|
||||
return "Invalid";
|
||||
}
|
||||
return "Expired";
|
||||
};
|
||||
|
||||
const formatTimestamp = (value: string | null) => {
|
||||
if (!value) {
|
||||
return { label: "-", relative: null };
|
||||
}
|
||||
return {
|
||||
label: new Date(value).toLocaleString(),
|
||||
relative: formatRelativeTime(value),
|
||||
};
|
||||
};
|
||||
|
||||
const statusPillStyles: Record<InvoiceStatus, string> = {
|
||||
pending: "bg-amber-100 text-amber-900",
|
||||
payment_detected: "bg-emerald-100 text-emerald-900",
|
||||
confirmed: "bg-ink/20 text-ink",
|
||||
expired: "bg-red-100 text-red-700",
|
||||
invalid: "bg-clay/15 text-clay",
|
||||
};
|
||||
|
||||
export default async function BtcpayModalInvoicePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ invoiceId: string }>;
|
||||
}) {
|
||||
const { invoiceId } = await params;
|
||||
const response = await fetch(
|
||||
`${apiBaseUrl}/api/core/public/invoice/${encodeURIComponent(invoiceId)}`,
|
||||
{ cache: "no-store" }
|
||||
);
|
||||
|
||||
if (response.status === 404) {
|
||||
return (
|
||||
<main className="min-h-screen bg-cream px-6 py-6 text-ink">
|
||||
<BtcpayModalBridge invoiceId={invoiceId} status="invalid" />
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-clay">
|
||||
Payment request
|
||||
</p>
|
||||
<h1 className="mt-2 font-serif text-2xl">Invoice not found</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-ink-soft">
|
||||
The invoice id does not match a known invoice. Check the id and try
|
||||
again.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
return (
|
||||
<main className="min-h-screen bg-cream px-6 py-6 text-ink">
|
||||
<BtcpayModalBridge invoiceId={invoiceId} status="invalid" />
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-clay">
|
||||
Payment request
|
||||
</p>
|
||||
<h1 className="mt-2 font-serif text-2xl">Status unavailable</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-ink-soft">
|
||||
We could not load this invoice status. Refresh the page or try again
|
||||
later.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const invoice = (await response.json()) as InvoiceStatusResponse;
|
||||
const statusLabel = formatStatus(invoice.status);
|
||||
const confirmations = Math.max(0, invoice.confirmations ?? 0);
|
||||
const confirmationTarget = Math.max(0, invoice.confirmation_target);
|
||||
const hasDetectedPayment =
|
||||
invoice.status === "payment_detected" || invoice.status === "confirmed";
|
||||
const createdTimestamp = formatTimestamp(invoice.created_at);
|
||||
const expiresTimestamp = formatTimestamp(invoice.expires_at);
|
||||
const isBtcpayInvoice = Boolean(invoice.btcpay_amount && invoice.btcpay_currency);
|
||||
const useClassicCheckout =
|
||||
isBtcpayInvoice && invoice.btcpay_checkout_style === "btcpay_classic";
|
||||
const shouldShowBtcpayActions = isBtcpayInvoice && invoice.status === "confirmed";
|
||||
const checkoutContinueAvailable =
|
||||
!isBtcpayInvoice &&
|
||||
invoice.status === "confirmed" &&
|
||||
Boolean(invoice.checkout_continue_available);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-cream px-6 py-6 text-ink">
|
||||
<InvoiceStatusAutoRefresh intervalMs={30000} />
|
||||
<BtcpayModalBridge invoiceId={invoiceId} status={invoice.status} />
|
||||
{useClassicCheckout ? (
|
||||
<div className="mx-auto grid max-w-md gap-5">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-clay">
|
||||
Payment request
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusRefreshButton label="Refresh" className="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<BtcpayClassicCheckout
|
||||
invoiceId={invoiceId}
|
||||
address={invoice.address}
|
||||
amountXmr={invoice.amount_xmr}
|
||||
amountPaidXmr={invoice.amount_paid_xmr ?? null}
|
||||
btcpayAmount={invoice.btcpay_amount ?? null}
|
||||
btcpayCurrency={invoice.btcpay_currency ?? null}
|
||||
quote={invoice.quote ?? null}
|
||||
status={invoice.status}
|
||||
confirmationTarget={confirmationTarget}
|
||||
redirectUrl={invoice.btcpay_redirect_url ?? null}
|
||||
redirectAutomatically={invoice.btcpay_redirect_automatically ?? null}
|
||||
orderId={invoice.btcpay_order_id ?? null}
|
||||
orderNumber={invoice.btcpay_order_number ?? null}
|
||||
qrLogoMode={invoice.qr_logo ?? "monero"}
|
||||
qrLogoDataUrl={invoice.qr_logo_data_url ?? null}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-clay">
|
||||
Payment request
|
||||
</p>
|
||||
<h1 className="mt-2 font-serif text-2xl">Payment request</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusRefreshButton label="Refresh" className="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-2xl border border-stroke bg-card p-5 shadow-card backdrop-blur">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="rounded-full bg-ink/10 px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.12em] text-ink">
|
||||
Status
|
||||
</span>
|
||||
<span
|
||||
className={`rounded-full px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.12em] ${statusPillStyles[invoice.status]}`}
|
||||
>
|
||||
{statusLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-4 grid gap-4 sm:grid-cols-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-ink-soft">
|
||||
Confirmations
|
||||
</p>
|
||||
<p className="mt-1 text-lg font-semibold">
|
||||
{confirmations}/{confirmationTarget}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-ink-soft">
|
||||
Created
|
||||
</p>
|
||||
<p
|
||||
className="mt-1 text-sm font-semibold"
|
||||
title={createdTimestamp.relative ?? undefined}
|
||||
>
|
||||
{createdTimestamp.label}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-ink-soft">
|
||||
Expires
|
||||
</p>
|
||||
<p
|
||||
className="mt-1 text-sm font-semibold"
|
||||
title={expiresTimestamp.relative ?? undefined}
|
||||
>
|
||||
{expiresTimestamp.label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{checkoutContinueAvailable ? (
|
||||
<a
|
||||
className="mt-5 inline-flex w-fit items-center justify-center rounded-full bg-ink px-5 py-2 text-sm font-semibold text-cream shadow-[0_16px_30px_rgba(16,18,23,0.18)] transition hover:-translate-y-0.5"
|
||||
href={`/api/core/public/invoice/${encodeURIComponent(invoiceId)}/continue`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
Continue to merchant
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<InvoicePaymentDetails
|
||||
address={invoice.address}
|
||||
amount={invoice.amount_xmr}
|
||||
hasDetectedPayment={hasDetectedPayment}
|
||||
status={invoice.status}
|
||||
confirmationTarget={confirmationTarget}
|
||||
qrLogoMode={invoice.qr_logo ?? "monero"}
|
||||
qrLogoDataUrl={invoice.qr_logo_data_url ?? null}
|
||||
/>
|
||||
</div>
|
||||
{shouldShowBtcpayActions ? (
|
||||
<div className="mt-6 grid gap-3">
|
||||
<a
|
||||
className="inline-flex items-center justify-center rounded-full bg-sage px-6 py-3 text-sm font-semibold text-cream shadow-[0_14px_22px_rgba(93,122,106,0.25)] transition hover:-translate-y-0.5"
|
||||
href={`/i/${encodeURIComponent(invoiceId)}/receipt`}
|
||||
>
|
||||
View receipt
|
||||
</a>
|
||||
{invoice.btcpay_redirect_url ? (
|
||||
<a
|
||||
className="inline-flex items-center justify-center rounded-full border border-stroke bg-white px-6 py-3 text-sm font-semibold text-sage transition hover:bg-cream"
|
||||
href={invoice.btcpay_redirect_url}
|
||||
target="_top"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Return to store
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
import type { Metadata } from "next";
|
||||
import { headers } from "next/headers";
|
||||
|
||||
import BtcpayModalBridge from "../../../../components/btcpay-modal-bridge";
|
||||
import CopyIconButton from "../../../../components/copy-icon-button";
|
||||
import PrintButton from "../../../../components/print-button";
|
||||
import { formatRelativeTime } from "../../../../components/relative-time";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const metadata: Metadata = {
|
||||
title: "Receipt",
|
||||
};
|
||||
|
||||
const apiBaseUrl = process.env.API_BASE_URL ?? "http://localhost:8000";
|
||||
|
||||
type InvoiceStatus =
|
||||
| "pending"
|
||||
| "payment_detected"
|
||||
| "confirmed"
|
||||
| "expired"
|
||||
| "invalid";
|
||||
|
||||
type InvoiceStatusResponse = {
|
||||
id: string;
|
||||
address: string;
|
||||
amount_xmr: string;
|
||||
amount_paid_xmr?: string | null;
|
||||
status: InvoiceStatus;
|
||||
confirmation_target: number;
|
||||
confirmations: number;
|
||||
created_at: string;
|
||||
confirmed_at: string | null;
|
||||
btcpay_amount?: string | null;
|
||||
btcpay_currency?: string | null;
|
||||
btcpay_redirect_url?: string | null;
|
||||
btcpay_order_id?: string | null;
|
||||
btcpay_order_number?: string | null;
|
||||
quote?: {
|
||||
fiat_amount: string;
|
||||
fiat_currency: string;
|
||||
rate: string;
|
||||
source: string;
|
||||
quoted_at: string;
|
||||
} | null;
|
||||
qr_url?: string | null;
|
||||
};
|
||||
|
||||
const formatFiatAmount = (value: string, currency: string) => {
|
||||
const amount = Number.parseFloat(value);
|
||||
if (!Number.isFinite(amount)) {
|
||||
return `${value} ${currency}`;
|
||||
}
|
||||
try {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency,
|
||||
maximumFractionDigits: 2,
|
||||
minimumFractionDigits: 2,
|
||||
}).format(amount);
|
||||
} catch {
|
||||
return `${amount.toFixed(2)} ${currency}`;
|
||||
}
|
||||
};
|
||||
|
||||
const receiptTitle = (redirectUrl: string | null | undefined) => {
|
||||
if (!redirectUrl) {
|
||||
return "Receipt";
|
||||
}
|
||||
try {
|
||||
const parsed = new URL(redirectUrl);
|
||||
return parsed.hostname ? `${parsed.hostname}` : "Receipt";
|
||||
} catch {
|
||||
return "Receipt";
|
||||
}
|
||||
};
|
||||
|
||||
const resolveQrSrc = (invoiceId: string, qrUrl: string | null | undefined) => {
|
||||
if (!qrUrl) {
|
||||
return `/qr/${encodeURIComponent(invoiceId)}.png`;
|
||||
}
|
||||
if (qrUrl.startsWith("/qr/")) {
|
||||
return qrUrl;
|
||||
}
|
||||
try {
|
||||
const parsed = new URL(qrUrl);
|
||||
if (parsed.pathname.startsWith("/qr/")) {
|
||||
return parsed.pathname;
|
||||
}
|
||||
} catch {
|
||||
// Ignore malformed URLs and fall back to the provided value.
|
||||
}
|
||||
return qrUrl;
|
||||
};
|
||||
|
||||
const closeLinkClassName =
|
||||
"rounded-md border border-neutral-200 bg-white px-3 py-2 text-xs font-semibold text-neutral-700 transition hover:bg-neutral-50";
|
||||
|
||||
export default async function BtcpayReceiptPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ invoiceId: string }>;
|
||||
}) {
|
||||
const { invoiceId } = await params;
|
||||
const requestHeaders = await headers();
|
||||
const forwardedProto = requestHeaders.get("x-forwarded-proto");
|
||||
const forwardedHost = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host");
|
||||
const response = await fetch(
|
||||
`${apiBaseUrl}/api/core/public/invoice/${encodeURIComponent(invoiceId)}`,
|
||||
{
|
||||
cache: "no-store",
|
||||
headers: {
|
||||
...(forwardedProto ? { "x-forwarded-proto": forwardedProto } : {}),
|
||||
...(forwardedHost ? { "x-forwarded-host": forwardedHost } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.status === 404) {
|
||||
return (
|
||||
<main className="min-h-screen bg-white px-4 py-10 text-ink">
|
||||
<BtcpayModalBridge invoiceId={invoiceId} status="invalid" />
|
||||
<div className="mx-auto w-full max-w-4xl">
|
||||
<div className="flex justify-end">
|
||||
<a className={closeLinkClassName} href={`/i/${encodeURIComponent(invoiceId)}`}>
|
||||
Close
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<h1 className="text-3xl font-semibold">Invoice not found</h1>
|
||||
<p className="mt-3 text-sm text-ink-soft">
|
||||
The invoice id does not match a known invoice. Check the id and try again.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
return (
|
||||
<main className="min-h-screen bg-white px-4 py-10 text-ink">
|
||||
<BtcpayModalBridge invoiceId={invoiceId} status="invalid" />
|
||||
<div className="mx-auto w-full max-w-4xl">
|
||||
<div className="flex justify-end">
|
||||
<a className={closeLinkClassName} href={`/i/${encodeURIComponent(invoiceId)}`}>
|
||||
Close
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-6 text-center">
|
||||
<h1 className="text-3xl font-semibold">Status unavailable</h1>
|
||||
<p className="mt-3 text-sm text-ink-soft">
|
||||
We could not load this invoice status. Refresh the page or try again later.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const invoice = (await response.json()) as InvoiceStatusResponse;
|
||||
const orderId = invoice.btcpay_order_number ?? invoice.btcpay_order_id ?? null;
|
||||
const receiptTimestamp = invoice.confirmed_at ?? invoice.created_at;
|
||||
const timestampLabel = new Date(receiptTimestamp).toLocaleString();
|
||||
const timestampRelative = formatRelativeTime(receiptTimestamp);
|
||||
const totalFiat =
|
||||
invoice.btcpay_amount && invoice.btcpay_currency && invoice.btcpay_currency !== "WOW"
|
||||
? formatFiatAmount(invoice.btcpay_amount, invoice.btcpay_currency)
|
||||
: invoice.btcpay_amount && invoice.btcpay_currency
|
||||
? `${invoice.btcpay_amount} ${invoice.btcpay_currency}`
|
||||
: null;
|
||||
const paidXmr = invoice.amount_paid_xmr ?? invoice.amount_xmr;
|
||||
const qrSrc = resolveQrSrc(invoiceId, invoice.qr_url);
|
||||
const storeTitle = receiptTitle(invoice.btcpay_redirect_url);
|
||||
const amountPaidLabel = totalFiat ? totalFiat : `${paidXmr} WOW`;
|
||||
const returnLabel = invoice.btcpay_redirect_url ? `Return to ${storeTitle}` : "Return to invoice";
|
||||
const returnHref = invoice.btcpay_redirect_url ?? `/i/${encodeURIComponent(invoiceId)}`;
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-neutral-100 px-4 py-10 text-neutral-900">
|
||||
<BtcpayModalBridge invoiceId={invoiceId} status={invoice.status} />
|
||||
<div className="mx-auto w-full max-w-4xl">
|
||||
<header className="text-center">
|
||||
<h1 className="text-3xl font-semibold tracking-tight">{storeTitle}</h1>
|
||||
</header>
|
||||
|
||||
{invoice.status !== "confirmed" ? (
|
||||
<div className="mt-6 text-center">
|
||||
{orderId ? <p className="mt-3 text-lg">Order ID: {orderId}</p> : null}
|
||||
<p className="mt-1 text-base text-neutral-600" title={timestampRelative ?? undefined}>
|
||||
{timestampLabel}
|
||||
</p>
|
||||
<p className="mt-10 text-sm text-neutral-600">
|
||||
This receipt is available after the payment is confirmed.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mt-8 rounded-xl bg-white p-6 shadow-soft">
|
||||
<div className="grid gap-6 md:grid-cols-[auto_minmax(0,1fr)] md:items-start">
|
||||
<div className="rounded-lg bg-neutral-100 p-4">
|
||||
{qrSrc ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img alt="Payment QR" src={qrSrc} className="h-56 w-56" />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
|
||||
<div className="grid gap-5">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-neutral-500">Amount Paid</p>
|
||||
<p className="mt-1 text-3xl font-semibold">{amountPaidLabel}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-neutral-500">Date</p>
|
||||
<p className="mt-1 text-base" title={timestampRelative ?? undefined}>
|
||||
{timestampLabel}
|
||||
</p>
|
||||
</div>
|
||||
{orderId ? (
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-neutral-500">Order ID</p>
|
||||
<p className="mt-1 text-base">{orderId}</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="md:self-start">
|
||||
<PrintButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-8 rounded-xl bg-white p-6 shadow-soft">
|
||||
<h2 className="text-xl font-semibold">Payment Details</h2>
|
||||
|
||||
<div className="mt-6 text-sm text-neutral-500">
|
||||
<div className="grid grid-cols-3 gap-6 border-b border-neutral-200 pb-3">
|
||||
<div>Date</div>
|
||||
<div className="text-right">Paid</div>
|
||||
<div className="text-right">Payment</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-6 pt-4 text-neutral-900">
|
||||
<div title={timestampRelative ?? undefined}>{timestampLabel}</div>
|
||||
<div className="text-right">{totalFiat ?? "-"}</div>
|
||||
<div className="text-right">{paidXmr} WOW</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 flex flex-col gap-3 text-sm md:flex-row md:items-center">
|
||||
<p className="font-semibold text-neutral-500 md:w-28">Destination</p>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="min-w-0 truncate rounded-md bg-neutral-100 px-3 py-2 font-mono text-xs">
|
||||
{invoice.address}
|
||||
</span>
|
||||
<CopyIconButton value={invoice.address} label="Copy destination address" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-10 flex justify-center">
|
||||
<a
|
||||
className="inline-flex items-center justify-center rounded-full border border-emerald-200 bg-white px-10 py-3 text-sm font-semibold text-emerald-700 shadow-soft transition hover:bg-emerald-50"
|
||||
href={returnHref}
|
||||
target={invoice.btcpay_redirect_url ? "_top" : undefined}
|
||||
rel={invoice.btcpay_redirect_url ? "noreferrer" : undefined}
|
||||
>
|
||||
{returnLabel}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user