nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Full payment receipt with QR code, transaction ID, amount, parties, timestamp, and shareable format. Maps to wallet.transaction table. Used after successful payments, transfers, and purchases across Wallet, BushTrade, and Nhimbe.
No interactive demo is registered for this component yet — the source is shown directly.
import * as React from "react"
import { cn } from "@/lib/utils"
type TransactionType = "send" | "receive" | "purchase" | "reward" | "swap"
interface TransactionReceiptProps extends React.ComponentProps<"div"> {
type: TransactionType
amount: string
currency?: string
txId: string
from?: string
to?: string
timestamp: Date | string
status: "confirmed" | "pending" | "failed"
memo?: string
onShare?: () => void
}
const typeLabels: Record<TransactionType, string> = {
send: "Sent", receive: "Received", purchase: "Purchase", reward: "Reward", swap: "Swap",
}
function TransactionReceipt({
type, amount, currency = "MXT", txId, from, to, timestamp, status, memo, onShare, loading = false, className, ...props
}: TransactionReceiptProps) {
const d = new Date(timestamp)
return (
<div
data-slot="transaction-receipt" data-portal="https://design.nyuchi.com/components/transaction-receipt" role="article"
className={cn("rounded-[var(--radius-xl,17px)] border border-border bg-card p-5", className)}
{...props}
>
<div className="flex flex-col items-center border-b border-dashed border-border pb-4">
<span className={cn("rounded-full px-3 py-1 text-xs font-medium",
status === "confirmed" ? "bg-[var(--color-malachite,#64FFDA)]/10 text-[var(--color-malachite,#64FFDA)]"
: status === "pending" ? "bg-[var(--color-gold,#FFD740)]/10 text-[var(--color-gold,#FFD740)]"
: "bg-destructive/10 text-destructive"
)}>
{status === "confirmed" ? "✓" : status === "pending" ? "⏳" : "✕"} {typeLabels[type]}
</span>
<div className="mt-3 text-3xl font-bold tabular-nums">{type === "send" ? "-" : "+"}{amount}</div>
<div className="text-sm text-muted-foreground">{currency}</div>
</div>
<div className="mt-4 space-y-2 text-xs">
{from && <div className="flex justify-between"><span className="text-muted-foreground">From</span><span className="font-mono truncate ml-2 max-w-[200px]">{from}</span></div>}
{to && <div className="flex justify-between"><span className="text-muted-foreground">To</span><span className="font-mono truncate ml-2 max-w-[200px]">{to}</span></div>}
<div className="flex justify-between"><span className="text-muted-foreground">Date</span><span>{d.toLocaleDateString()} {d.toLocaleTimeString()}</span></div>
<div className="flex justify-between"><span className="text-muted-foreground">Transaction ID</span><span className="font-mono text-[10px] truncate ml-2 max-w-[160px]">{txId}</span></div>
{memo && <div className="flex justify-between"><span className="text-muted-foreground">Memo</span><span>{memo}</span></div>}
</div>
{onShare && (
<button onClick={onShare} className="mt-4 h-10 w-full rounded-full border border-border text-xs font-medium transition-colors hover:bg-muted">
Share Receipt
</button>
)}
</div>
)
}
export { TransactionReceipt }
export type { TransactionReceiptProps }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/transaction-receiptnpx shadcn@latest add https://mzizi.dev/api/v1/ui/transaction-receipt