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.
View the full component source code below.
"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 }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/nyuchi-balance-displayFetch this component's metadata and source code from the registry API.
/api/v1/ui/nyuchi-balance-displaycomponents/mukoko/mukoko-balance-display.tsx