HashBalanceRevenuePanel

Revenue tab panel for hash balance — site hash revenue, network hashrate, hashprice charts, and currency toggle for per-PH/day units.

import { HashBalanceRevenuePanel } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`data`	Optional	`HashRevenueResponse \| null \| undefined`	—	—
`log`	Optional	`HashRevenueLogEntry[] \| undefined`	—	—
`dateRange`	Required	`FinancialDateRange`	—	—
`timeframeType`	Optional	`TimeframeTypeValue \| null \| undefined`	—	—
`isLoading`	Optional	`boolean \| undefined`	—	—
`currency`	Required	`HashBalanceCurrency`	—	—
`onCurrencyChange`	Required	`(currency: HashBalanceCurrency) => void`	—	—

Usage

Composite financial view for site hash revenue, network hashrate, hashprice, and hash cost. Use HashBalance for the full page (tabs + timeframe controls), or compose HashBalanceRevenuePanel / HashBalanceCostPanel with your own chrome.

HashBalance

Prop	Type	Required	Default	Description
`data`	`HashRevenueResponse \| null`	no	—	Revenue / cost log and summary.
`isLoading`	`boolean`	no	—	Show loading state.
`isError`	`boolean`	no	—	Show error state.
`errorMessage`	`string`	no	—	Error copy when `isError`.
`initialDateRange`	`FinancialDateRange`	no	year-to-date	Initial period.
`onDateRangeChange`	`(range, query) => void`	no	—	Fired when the user changes the period.
`className`	`string`	no	—	Root layout class.
`tabsClassName`	`string`	no	—	Tabs wrapper class.
`tabsListClassName`	`string`	no	—	Tab list class.

import { HashBalance } from "@tetherto/mdk-react-devkit";

<HashBalance data={response} isLoading={false} />

HashBalanceRevenuePanel

Prop	Type	Required	Default	Description
`data`	`HashRevenueResponse \| null`	no	—	Same payload as `HashBalance`.
`log`	`HashRevenueLogEntry[]`	no	—	Optional log override.
`dateRange`	`FinancialDateRange`	yes	—	Active reporting window.
`currency`	`HashBalanceCurrency`	yes	—	`USD` or `BTC` label for per-PH/day units.
`onCurrencyChange`	`(currency) => void`	yes	—	Currency toggle handler.
`isLoading`	`boolean`	no	—	Loading state.
`timeframeType`	`TimeframeTypeValue \| null`	no	—	Year / month / week mode.

HashBalanceCostPanel

Prop	Type	Required	Default	Description
`data`	`HashRevenueResponse \| null`	no	—	Same payload as `HashBalance`.
`log`	`HashRevenueLogEntry[]`	no	—	Optional log override.
`dateRange`	`FinancialDateRange`	yes	—	Active reporting window.
`isLoading`	`boolean`	no	—	Loading state.
`timeframeType`	`TimeframeTypeValue \| null`	no	—	Year / month / week mode.

Examples

import type { HashRevenueResponse } from '@domain/types/finance'import { getInitialHashBalanceDateRange, HashBalanceCostPanel } from '@tetherto/mdk-react-devkit'const mockHashBalanceData: HashRevenueResponse = {  log: [    {      ts: Date.UTC(2026, 4, 15, 12),      revenueBTC: 0.01,      feesBTC: 0,      revenueUSD: 100,      feesUSD: 0,      btcPrice: 60_000,      hashrateMhs: 1,      hashRevenueBTCPerPHsPerDay: 0.00001,      hashRevenueUSDPerPHsPerDay: 0.4,      hashCostBTCPerPHsPerDay: 0,      hashCostUSDPerPHsPerDay: 0,      networkHashPriceBTCPerPHsPerDay: 0.007,      networkHashPriceUSDPerPHsPerDay: 0.01,      networkHashrateMhs: 36_000_000_000_000,    },  ],  summary: {    avgHashRevenueBTCPerPHsPerDay: 0.00001,    avgHashRevenueUSDPerPHsPerDay: 0.4,    avgHashCostBTCPerPHsPerDay: 0,    avgHashCostUSDPerPHsPerDay: 0,    avgNetworkHashPriceBTCPerPHsPerDay: 0.007,    avgNetworkHashPriceUSDPerPHsPerDay: 0.01,    totalRevenueBTC: 0.01,    totalRevenueUSD: 100,    totalFeesBTC: 0,    totalFeesUSD: 0,  },}export const HashBalanceCostPanelExample = () => (  <div className="mdk-example-row">    <HashBalanceCostPanel      data={mockHashBalanceData}      dateRange={getInitialHashBalanceDateRange(new Date(2026, 4, 19))}      isLoading={false}    />  </div>)

import type { HashRevenueResponse } from '@domain/types/finance'import {  CURRENCY,  getInitialHashBalanceDateRange,  type HashBalanceCurrency,  HashBalanceRevenuePanel,} from '@tetherto/mdk-react-devkit'import { useState } from 'react'const mockHashBalanceData: HashRevenueResponse = {  log: [    {      ts: Date.UTC(2026, 4, 15, 12),      revenueBTC: 0.01,      feesBTC: 0,      revenueUSD: 100,      feesUSD: 0,      btcPrice: 60_000,      hashrateMhs: 1,      hashRevenueBTCPerPHsPerDay: 0.00001,      hashRevenueUSDPerPHsPerDay: 0.4,      hashCostBTCPerPHsPerDay: 0,      hashCostUSDPerPHsPerDay: 0,      networkHashPriceBTCPerPHsPerDay: 0.007,      networkHashPriceUSDPerPHsPerDay: 0.01,      networkHashrateMhs: 36_000_000_000_000,    },  ],  summary: {    avgHashRevenueBTCPerPHsPerDay: 0.00001,    avgHashRevenueUSDPerPHsPerDay: 0.4,    avgHashCostBTCPerPHsPerDay: 0,    avgHashCostUSDPerPHsPerDay: 0,    avgNetworkHashPriceBTCPerPHsPerDay: 0.007,    avgNetworkHashPriceUSDPerPHsPerDay: 0.01,    totalRevenueBTC: 0.01,    totalRevenueUSD: 100,    totalFeesBTC: 0,    totalFeesUSD: 0,  },}export const HashBalanceRevenuePanelExample = () => {  const [currency, setCurrency] = useState<HashBalanceCurrency>(CURRENCY.USD_LABEL)  return (    <div className="mdk-example-row">      <HashBalanceRevenuePanel        data={mockHashBalanceData}        dateRange={getInitialHashBalanceDateRange(new Date(2026, 4, 19))}        currency={currency}        onCurrencyChange={setCurrency}        isLoading={false}      />    </div>  )}

import type { HashRevenueResponse } from '@domain/types/finance'import { HashBalance } from '@tetherto/mdk-react-devkit'const mockHashBalanceData: HashRevenueResponse = {  log: [    {      ts: Date.UTC(2026, 4, 15, 12),      revenueBTC: 0.01,      feesBTC: 0,      revenueUSD: 100,      feesUSD: 0,      btcPrice: 60_000,      hashrateMhs: 1,      hashRevenueBTCPerPHsPerDay: 0.00001,      hashRevenueUSDPerPHsPerDay: 0.4,      hashCostBTCPerPHsPerDay: 0,      hashCostUSDPerPHsPerDay: 0,      networkHashPriceBTCPerPHsPerDay: 0.007,      networkHashPriceUSDPerPHsPerDay: 0.01,      networkHashrateMhs: 36_000_000_000_000,    },  ],  summary: {    avgHashRevenueBTCPerPHsPerDay: 0.00001,    avgHashRevenueUSDPerPHsPerDay: 0.4,    avgHashCostBTCPerPHsPerDay: 0,    avgHashCostUSDPerPHsPerDay: 0,    avgNetworkHashPriceBTCPerPHsPerDay: 0.007,    avgNetworkHashPriceUSDPerPHsPerDay: 0.01,    totalRevenueBTC: 0.01,    totalRevenueUSD: 100,    totalFeesBTC: 0,    totalFeesUSD: 0,  },}export const HashBalanceExample = () => (  <div className="mdk-example-row">    <HashBalance data={mockHashBalanceData} isLoading={false} />  </div>)