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
Multi-token balance overview showing all four Mukoko tokens (MIT, MXT, NST, NHC) with individual balances, fiat equivalents, and combined portfolio value. Maps to wallet.balance and wallet.mit_token tables.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface TokenBalance {
symbol: "MIT" | "MXT" | "NST" | "NHC"
name: string
balance: number
fiatValue?: number
fiatCurrency?: string
change24h?: number
}
interface TokenBalanceCardProps extends React.ComponentProps<"div"> {
tokens: TokenBalance[]
totalFiatValue?: number
fiatCurrency?: string
}
const tokenColors: Record<string, string> = {
MIT: "var(--color-tanzanite, #B388FF)",
MXT: "var(--color-malachite, #64FFDA)",
NST: "var(--color-cobalt, #00B0FF)",
NHC: "var(--color-gold, #FFD740)",
}
function TokenBalanceCard({ tokens, totalFiatValue, fiatCurrency = "USD", loading = false, className, ...props }: TokenBalanceCardProps) {
return (
<div
data-slot="token-balance-card" data-portal="https://design.nyuchi.com/components/token-balance-card" role="article"
className={cn("rounded-[var(--radius-xl,17px)] border border-border bg-card p-5", className)}
{...props}
>
{totalFiatValue !== undefined && (
<div className="mb-4">
<div className="text-xs text-muted-foreground">Total Portfolio</div>
<div className="text-2xl font-bold tabular-nums">${totalFiatValue.toLocaleString(undefined, { minimumFractionDigits: 2 })}</div>
</div>
)}
<div className="space-y-3">
{tokens.map((token) => (
<div key={token.symbol} className="flex items-center justify-between">
<div className="flex items-center gap-2.5">
<div className="flex size-8 items-center justify-center rounded-full text-[10px] font-bold" style={{ backgroundColor: `${tokenColors[token.symbol]}20`, color: tokenColors[token.symbol] }}>
{token.symbol.charAt(0)}
</div>
<div>
<div className="text-sm font-medium">{token.symbol}</div>
<div className="text-[10px] text-muted-foreground">{token.name}</div>
</div>
</div>
<div className="text-right">
<div className="text-sm font-medium tabular-nums">{token.balance.toLocaleString()}</div>
{token.fiatValue !== undefined && (
<div className="flex items-center gap-1 text-[10px] text-muted-foreground">
<span>${token.fiatValue.toFixed(2)}</span>
{token.change24h !== undefined && (
<span className={token.change24h >= 0 ? "text-[var(--color-malachite,#64FFDA)]" : "text-destructive"}>
{token.change24h >= 0 ? "+" : ""}{token.change24h.toFixed(1)}%
</span>
)}
</div>
)}
</div>
</div>
))}
</div>
</div>
)
}
export { TokenBalanceCard }
export type { TokenBalanceCardProps, TokenBalance }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/token-balance-cardFetch this component's metadata and source code from the registry API.
/api/v1/ui/token-balance-card