Skip to main content

​
Overview

The useDashboardData hook is the primary data management hook for the CryptoDash application. It fetches global market statistics, top market coins, Bitcoin performance data, and manages portfolio state. The hook provides comprehensive dashboard data with formatted values ready for display.

​
Import

import { useDashboardData } from '../hooks/useDashboardData'

​
Signature

function useDashboardData(): DashboardData

​
Return Value

Returns an object containing all dashboard state and functions:
​
loading
boolean
Loading state indicator for initial data fetch
​
error
string
Error message if data fetching fails
​
marketCapValue
string
Formatted global market capitalization (e.g., “$2.5T”)
​
marketCapChange
string
Formatted 24h market cap change percentage (e.g., “+2.34%”)
​
marketCapPositive
boolean
Whether the market cap change is positive or negative
​
volumeValue
string
Formatted global trading volume (e.g., “$120.5B”)
​
summaryCards
array
Array of summary card data objects, each containing:
  • title: Card title (e.g., “Total Portfolio Balance”)
  • value: Formatted display value
  • change: Formatted percentage change
  • positive: Boolean indicating positive/negative change
  • path: SVG path for sparkline chart
​
marketRows
array
Array of market table row data, each containing:
  • rank: Market cap rank
  • name: Coin name
  • symbol: Coin symbol (uppercase)
  • price: Formatted price
  • change: Formatted 24h change percentage
  • positive: Boolean for change direction
  • marketCap: Formatted market cap
  • volume: Formatted volume
  • iconBg, iconColor, icon: Icon styling data
  • trendPath: SVG path for 7-day trend
​
mainPerformancePath
string
SVG path string for Bitcoin 30-day performance chart
​
mainPerformanceSeries
array
Raw Bitcoin price data points for the chart
​
mainPerformancePriceLabel
string
Formatted current Bitcoin price
​
mainPerformanceChangeLabel
string
Formatted Bitcoin price change percentage
​
mainPerformancePositive
boolean
Whether Bitcoin performance is positive
​
markets
array
Raw market data array from the API
​
primaryPortfolio
object
Current user’s primary portfolio object with positions
​
portfolioPerformancePath
string
SVG path for portfolio performance chart
​
portfolioPerformanceSeries
array
Portfolio value data points over time
​
portfolioPerformancePriceLabel
string
Formatted current portfolio value
​
portfolioPerformanceChangeLabel
string
Formatted portfolio change percentage
​
portfolioPerformancePositive
boolean
Whether portfolio performance is positive
​
defaultPortfolioAllocationUsd
number
Default USD allocation amount for adding new assets
​
portfolioSummary
object
Portfolio summary object containing:
  • name: Portfolio name
  • totalValueUsd: Total portfolio value in USD
  • investedUsd: Total invested amount
  • change24hUsd: 24-hour change in USD
  • change24hPercent: 24-hour change percentage
​
addAssetToPortfolio
function
Async function to add an asset to the portfolio. See below for details.

​
Functions

​
addAssetToPortfolio

Adds a cryptocurrency asset to the user’s primary portfolio. Signature: 
async function addAssetToPortfolio({ assetId, allocationUsd }): Promise<Portfolio>
​
assetId
string
required
The cryptocurrency asset ID (e.g., “bitcoin”, “ethereum”)
​
allocationUsd
number
USD amount to allocate for this asset. Defaults to getDefaultAllocationUsd()
Returns: Promise that resolves to the updated portfolio object Throws: Error if asset ID is missing, asset not found, or portfolio update fails

​
Usage Example

​
Basic Usage in Layout

useDashboardData.js:7-26
import { useDashboardData } from '../hooks/useDashboardData'

export default function DashboardLayout() {
  const dashboardData = useDashboardData()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)

  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} />

      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
        <TopBar
          marketCapValue={dashboardData.marketCapValue}
          marketCapChange={dashboardData.marketCapChange}
          marketCapPositive={dashboardData.marketCapPositive}
          volumeValue={dashboardData.volumeValue}
          onMenuClick={() => setIsMobileMenuOpen(true)}
        />

        <Outlet context={dashboardData} />
      </main>
    </div>
  )
}

​
Adding Assets to Portfolio

const { addAssetToPortfolio, defaultPortfolioAllocationUsd } = useDashboardData()

const handleAddAsset = async () => {
  try {
    const updatedPortfolio = await addAssetToPortfolio({
      assetId: 'ethereum',
      allocationUsd: 1000 // or use defaultPortfolioAllocationUsd
    })
    console.log('Portfolio updated:', updatedPortfolio)
  } catch (error) {
    console.error('Failed to add asset:', error.message)
  }
}

​
Accessing Market Data

const { marketRows, loading, error } = useDashboardData()

if (loading) return <LoadingSkeleton />
if (error) return <ErrorMessage error={error} />

return (
  <table>
    <tbody>
      {marketRows.map((row) => (
        <tr key={row.symbol}>
          <td>{row.rank}</td>
          <td>{row.name} ({row.symbol})</td>
          <td>{row.price}</td>
          <td className={row.positive ? 'positive' : 'negative'}>
            {row.change}
          </td>
        </tr>
      ))}
    </tbody>
  </table>
)

​
Implementation Details

  • Data Sources: Fetches from multiple APIs concurrently using Promise.all
    • Global market statistics via getGlobalStats()
    • Top market coins via getTopMarketCoins()
    • Bitcoin 30-day chart via getCoinPerformanceChart()
  • Portfolio Management: Automatically creates or retrieves the user’s primary portfolio
  • Performance Calculation: Builds portfolio performance series by combining position amounts with historical sparkline data
  • Memoization: Uses useMemo extensively to prevent unnecessary recalculations
  • Cleanup: Properly handles component unmounting to prevent state updates on unmounted components

​
Source Location

/workspace/source/src/hooks/useDashboardData.js:45

Build docs developers (and LLMs) love

Get started for freeTalk to us