newOS for Developers

Back to Overview

Watts

output~85 lines

WATTS token display component showing user's computational credits balance.

Props Interface

{
  amount: number;                  // WATTS balance to display
  showIcon?: boolean;              // Show ⚡ icon (default: true)
  size?: "sm" | "md" | "lg";       // Display size (default: "md")
  animated?: boolean;              // Animate count changes (default: false)
  className?: string;
}

Data Flow

Data Source

user.watts — From UserReadPrivateResponse
current() — Fetches current user including WATTS

What are WATTS?

WATTS are computational credits in the newOS ecosystem. They represent capacity to perform actions like uploading content, creating folders, and interacting with AI features. WATTS regenerate over time and can be earned or purchased.

Key Features

Animated Count

When enabled, smoothly animates from old value to new value using eased transitions.

Size Variants

Three size options for different contexts: compact headers (sm), cards (md), or hero displays (lg).

Number Formatting

Automatically formats large numbers with locale-appropriate separators (e.g., 1,250).

Edge Cases & Gotchas

Zero balance — Shows "0 WATTS" with optional low-balance styling
Large numbers — Consider abbreviating (e.g., 1.2M WATTS) for very large values
Loading state — Show skeleton while fetching user data

Related Components

ConnectDialogUserCard