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
Connect/disconnect wallet button with truncated address display and network indicator. Supports Nyuchi custodial wallet (default) and self-custody upgrade path. Used across all Web3-enabled features.
View the full component source code below.
"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface WalletConnectButtonProps extends React.ComponentProps<"button"> {
address?: string
connected?: boolean
onConnect?: () => void
onDisconnect?: () => void
network?: string
variant?: "default" | "compact"
}
function truncateAddress(addr: string): string {
if (addr.length <= 12) return addr
return `${addr.slice(0, 6)}...${addr.slice(-4)}`
}
function WalletConnectButton({
address, connected = false, onConnect, onDisconnect, network, variant = "default", loading = false, className, ...props
}: WalletConnectButtonProps) {
return (
<button
data-slot="wallet-connect-button" data-portal="https://design.nyuchi.com/components/wallet-connect-button" role="button" aria-label="Connect wallet"
onClick={connected ? onDisconnect : onConnect}
className={cn(
"inline-flex items-center gap-2 rounded-full font-medium transition-colors",
variant === "compact" ? "h-8 px-3 text-xs" : "h-12 px-5 text-sm",
connected
? "border border-border bg-card hover:bg-muted"
: "bg-primary text-primary-foreground hover:bg-primary/80",
className
)}
{...props}
>
{connected ? (
<>
<div className="size-2 rounded-full bg-[var(--color-malachite,#64FFDA)]" />
<span className="font-mono text-xs">{address ? truncateAddress(address) : "Connected"}</span>
{network && <span className="text-[10px] text-muted-foreground">({network})</span>}
</>
) : (
<span>Connect Wallet</span>
)}
</button>
)
}
export { WalletConnectButton }
export type { WalletConnectButtonProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/wallet-connect-buttonFetch this component's metadata and source code from the registry API.
/api/v1/ui/wallet-connect-button