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
Token balance display card for the Mukoko wallet. Shows primary balance with MIT currency, secondary fiat conversion, and quick action buttons (Send, Receive, Swap). Maps to wallet.balance table. Used at the top of wallet views and in mini wallet widgets.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
// ── INFRASTRUCTURE HARNESS (auto-wired) ──
// Every brand component participates in observability, motion, a11y,
// and health monitoring via the harness. Zero manual config.
import { useNyuchiHarness } from "@/lib/harness"
import * as React from "react"
import { ArrowUpRight, ArrowDownLeft, Repeat, Eye, EyeOff } from "@/lib/icons"
import { cn } from "@/lib/utils"
interface NyuchiBalanceDisplayProps {
balance: number
currency?: string
fiatEquivalent?: string
onSend?: () => void
onReceive?: () => void
onSwap?: () => void
className?: string
}
function NyuchiBalanceDisplay({ loading = false,
balance, currency = "MIT", fiatEquivalent, onSend, onReceive, onSwap, className,
}: NyuchiBalanceDisplayProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("balance-display")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
if (loading) return (<div data-slot="nyuchi-balance-display" data-portal="https://design.nyuchi.com/components/nyuchi-balance-display" data-loading role="status" aria-label="Balance" className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 space-y-2"><div className="h-2.5 w-16 rounded bg-muted" /><div className="h-7 w-1/3 rounded bg-muted" /><div className="h-2.5 w-24 rounded bg-muted" /></div>)
if (loading) return (<div data-slot="nyuchi-balance-display" data-loading role="status" aria-label="Balance" className="animate-pulse space-y-2 p-4"><div className="h-2.5 w-16 rounded bg-muted" /><div className="h-8 w-32 rounded bg-muted" /><div className="flex gap-2"><div className="h-2.5 w-12 rounded bg-muted" /><div className="h-2.5 w-8 rounded bg-muted" /></div></div>)
const [hidden, setHidden] = React.useState(false)
return (
<div data-slot="nyuchi-balance-display" role="status" aria-label="Balance"
className={cn("rounded-[var(--radius-card,14px)] bg-card p-5 ring-1 ring-foreground/10", className)}>
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground">Total Balance</span>
<button onClick={() => setHidden(!hidden)} className="p-1 text-muted-foreground">
{hidden ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
</button>
</div>
<div className="mt-2">
<span className="text-3xl font-bold tabular-nums text-foreground">
{hidden ? "••••••" : balance.toLocaleString()}
</span>
<span className="ml-1.5 text-sm font-medium text-muted-foreground">{currency}</span>
</div>
{fiatEquivalent && !hidden && (
<div className="mt-1 text-sm text-muted-foreground">≈ {fiatEquivalent}</div>
)}
{/* Quick actions */}
<div className="mt-5 flex gap-3">
{[
{ label: "Send", icon: ArrowUpRight, action: onSend, color: "var(--color-malachite,#64FFDA)" },
{ label: "Receive", icon: ArrowDownLeft, action: onReceive, color: "var(--color-cobalt,#00B0FF)" },
{ label: "Swap", icon: Repeat, action: onSwap, color: "var(--color-tanzanite,#B388FF)" },
].map((a) => a.action && (
<button key={a.label} onClick={a.action}
className="flex flex-1 flex-col items-center gap-1.5 rounded-[var(--radius-inner,7px)] py-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] min-h-[48px] transition-colors hover:bg-foreground/[0.03]">
<div className="flex size-10 items-center justify-center rounded-full"
style={{ backgroundColor: `color-mix(in srgb, ${a.color} 12%, transparent)` }}>
<a.icon className="size-5" style={{ color: a.color }} />
</div>
<span className="text-xs font-medium text-muted-foreground">{a.label}</span>
</button>
))}
</div>
</div>
)
}
export { NyuchiBalanceDisplay }
export type { NyuchiBalanceDisplayProps }
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/nyuchi-balance-displaynpx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-balance-displaycomponents/mukoko/mukoko-balance-display.tsx