Unified Balance

1"use client";
2import React, { memo, useMemo } from "react";
3import { useNexus } from "../nexus/NexusProvider";
4import { Label } from "../ui/label";
5import { DollarSign } from "lucide-react";
6import {
7  Accordion,
8  AccordionContent,
9  AccordionItem,
10  AccordionTrigger,
11} from "../ui/accordion";
12import { Separator } from "../ui/separator";
13import { cn } from "@/lib/utils";
14import { type UserAsset } from "../nexus/NexusProvider";
15import { formatTokenBalance } from "@avail-project/nexus-core/utils";
16import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
17import { Skeleton } from "../ui/skeleton";
18 
19const BalanceBreakdown = ({
20  className,
21  isLoading = false,
22  totalFiat,
23  tokens,
24}: {
25  totalFiat: string;
26  tokens: UserAsset[];
27  className?: string;
28  isLoading?: boolean;
29}) => {
30  return (
31    <div className={cn(className)}>
32      <div className="flex items-center justify-start w-full">
33        <Label className="font-semibold text-muted-foreground">
34          Total Balance:
35        </Label>
36 
37        {isLoading ? (
38          <Skeleton className="h-6 w-24" />
39        ) : (
40          <Label className="text-lg font-bold gap-x-0">
41            <DollarSign className="w-4 h-4 font-bold" strokeWidth={3} />
42            {totalFiat}
43          </Label>
44        )}
45      </div>
46      <Accordion type="single" collapsible className="w-full space-y-4">
47        {isLoading &&
48          tokens.length === 0 &&
49          Array.from({ length: 3 }).map((_, index) => (
50            <div
51              // biome-ignore lint/suspicious/noArrayIndexKey: static loading placeholders.
52              key={index}
53              className="flex items-center justify-between px-4 py-3"
54            >
55              <div className="flex items-center gap-3">
56                <Skeleton className="size-8 rounded-full" />
57                <div className="space-y-2">
58                  <Skeleton className="h-4 w-16" />
59                  <Skeleton className="h-3 w-20" />
60                </div>
61              </div>
62              <div className="flex flex-col items-end gap-2">
63                <Skeleton className="h-4 w-24" />
64                <Skeleton className="h-3 w-14" />
65              </div>
66            </div>
67          ))}
68        {tokens.map((token) => {
69          const positiveBreakdown = token.breakdown.filter(
70            (chain) => Number.parseFloat(chain.balance) > 0,
71          );
72          const chainsCount = positiveBreakdown.length;
73          const chainsLabel =
74// … truncated