More Refactoring

apps/ui/app/providers/ProviderCard.tsx

@@ -5,8 +5,8 @@ import Link from 'next/link';
 import type { Route } from 'next';
 import { useMemo } from 'react';
 
-import { AnimatedNumber } from '@/components/AnimatedNumber';
-import { StatusIndicator } from '@/components/StatusIndicator';
+import { AnimatedNumber } from '@/components/ui/animated-number';
+import { StatusIndicator } from '@/components/ui/status-indicator';
 import { formatPercent, formatUSD } from '@/lib/format';
 import { useMarketStream } from '@/lib/hooks/use-market-stream';
 import type { ProviderSummary } from '@/lib/server/providers';

apps/ui/app/providers/ProviderStatsStrip.tsx

@@ -2,8 +2,8 @@
 
 import { useMemo, type ReactNode } from 'react';
 
-import { AnimatedNumber } from '@/components/AnimatedNumber';
-import { StatusIndicator } from '@/components/StatusIndicator';
+import { AnimatedNumber } from '@/components/ui/animated-number';
+import { StatusIndicator } from '@/components/ui/status-indicator';
 import { formatPercent, formatUSD } from '@/lib/format';
 import { useMarketStream } from '@/lib/hooks/use-market-stream';
 import { cn } from '@/lib/utils';

apps/ui/app/providers/[provider]/depthBook.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { cardStyles } from '@/styles/design-tokens';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatAdaptiveNumber, formatNumber, formatTimestamp, formatUSD } from '@/lib/format';
@@ -143,6 +143,12 @@ export const DepthBook = ({ asset, orderbook, metadata, summary, loading, error
 
   const displayedDepth = hydrated ? animatedDepth : staticDepth;
   const isEmpty = depthTarget.bids.length === 0 && depthTarget.asks.length === 0;
+  const aggregateTotals = useMemo(
+    () => computeTotals(depthTarget.bids, depthTarget.asks),
+    [depthTarget]
+  );
+  const footerTotals =
+    depthTarget.bids.length > 0 || depthTarget.asks.length > 0 ? aggregateTotals : displayedDepth.totals;
 
   return (
     <Card className={cn(cardStyles.base, 'h-full')}>
@@ -199,7 +205,7 @@ export const DepthBook = ({ asset, orderbook, metadata, summary, loading, error
                 Bid Depth (Qty)
               </p>
               <AnimatedNumber
-                value={sanitizeAggregateValue(displayedDepth.totals.bidCumulative)}
+                value={sanitizeAggregateValue(footerTotals.bidCumulative)}
                 format={(value) => formatAdaptiveNumber(value)}
                 className="font-mono text-lg font-normal text-[#00FFA3] tabular-nums tracking-[-0.01em]"
               />
@@ -209,7 +215,7 @@ export const DepthBook = ({ asset, orderbook, metadata, summary, loading, error
                 Ask Depth (Qty)
               </p>
               <AnimatedNumber
-                value={sanitizeAggregateValue(displayedDepth.totals.askCumulative)}
+                value={sanitizeAggregateValue(footerTotals.askCumulative)}
                 format={(value) => formatAdaptiveNumber(value)}
                 className="font-mono text-lg font-normal text-[#FF3B69] tabular-nums tracking-[-0.01em]"
               />
@@ -219,9 +225,7 @@ export const DepthBook = ({ asset, orderbook, metadata, summary, loading, error
                 Total Book (USD)
               </p>
               <AnimatedNumber
-                value={sanitizeAggregateValue(
-                  (displayedDepth.totals.bidNotional ?? 0) + (displayedDepth.totals.askNotional ?? 0)
-                )}
+                value={sanitizeAggregateValue((footerTotals.bidNotional ?? 0) + (footerTotals.askNotional ?? 0))}
                 format={(value) => formatUSD(value, { fractionDigits: 0 })}
                 className="font-mono text-lg font-normal text-slate-200 tabular-nums tracking-[-0.01em]"
               />

apps/ui/app/providers/[provider]/providerDashboard.tsx

@@ -19,7 +19,7 @@ import {
   sortMarketsByOpenInterest,
   type HeroOverview
 } from '@/components/provider-dashboard/utils/overview';
-import { StatusIndicator } from '@/components/StatusIndicator';
+import { StatusIndicator } from '@/components/ui/status-indicator';
 import { useMarketStream } from '@/lib/hooks/use-market-stream';
 import { cn } from '@/lib/utils';
 import { dashboardTypography, typography } from '@/styles/typography';

apps/ui/components/asset-dashboard/elements/MetricValue.tsx

@@ -1,4 +1,4 @@
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { formatAdaptiveNumber } from '@/lib/format';
 import { cn } from '@/lib/utils';
 

apps/ui/components/asset-dashboard/elements/RadialGauge.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { cn, clamp } from '@/lib/utils';
 
 type RadialGaugeProps = {

apps/ui/components/asset-dashboard/sections/FundingLiquidityCard.tsx

@@ -1,4 +1,4 @@
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { LiveStatusBadge } from '@/components/ui/live-status-badge';
 import { Surface } from '@/components/ui/surface';
 import { formatNumber, formatPercent, formatUSDFull } from '@/lib/format';

apps/ui/components/asset-dashboard/sections/HeroOverviewSection.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import type { Route } from 'next';
 import { useMemo } from 'react';
 
-import AssetAvatar from '@/components/AssetAvatar';
+import { AssetAvatar } from '@/components/ui/asset-avatar';
 import { DepthIndicator, TrendIndicator } from '@/components/ui/data-indicators';
 import { LiveStatusBadge } from '@/components/ui/live-status-badge';
 import { Surface } from '@/components/ui/surface';

apps/ui/components/asset-dashboard/sections/LiveCandlesPanel.tsx

@@ -1,5 +1,5 @@
 import MarketCandlestickChart from '@/components/MarketCandlestickChart';
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { LiveStatusBadge } from '@/components/ui/live-status-badge';
 import { Surface } from '@/components/ui/surface';
 import { formatNumber, formatTimestamp } from '@/lib/format';

apps/ui/components/asset-dashboard/sections/MarketHealthCard.tsx

@@ -1,4 +1,4 @@
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { Surface } from '@/components/ui/surface';
 import { cn, clamp } from '@/lib/utils';
 

apps/ui/components/asset-dashboard/sections/PriceDynamicsCard.tsx

@@ -1,4 +1,4 @@
-import { AnimatedNumber } from '@/components/AnimatedNumber';
+import { AnimatedNumber } from '@/components/ui/animated-number';
 import { LiveStatusBadge } from '@/components/ui/live-status-badge';
 import { Surface } from '@/components/ui/surface';
 import { formatNumber, formatPercent, formatTimestamp, formatUSDFull } from '@/lib/format';