Unified Balance

Display the user’s unified token balances across chains with per-token and per-chain breakdown.

MAIN POINTS TO NOTE:

This widget reads balances from the Nexus context which is populated via getUnifiedBalances(true) in the provider; it does not perform network calls by itself.
The widget filters out zero balances, groups by token, and shows per-chain breakdown with formatted amounts and approximate fiat.
To refresh balances after actions, call fetchUnifiedBalance() from the provider; the widget will re-render with updated context.
You can find a quickstart example for using nexus-elements in Nexus Elements Quickstart.

Install

You can find the source code for the Unified Balance Widget here:

To install the Unified Balance Widget into your project, you can use the following command:

Terminal


pnpm dlx shadcn@latest add https://elements.nexus.availproject.org/r/unified-balance.json

Terminal


npx shadcn@latest add https://elements.nexus.availproject.org/r/unified-balance.json

Terminal


yarn dlx shadcn@latest add https://elements.nexus.availproject.org/r/unified-balance.json

TypeScript


interface UnifiedBalanceProps {
  className?: string;
}

tsx


"use client";
 
import UnifiedBalance from "@/components/unified-balance/unified-balance";
 
function App() {
  return <UnifiedBalance />;
}