HashBalance Hash balance reporting page — revenue vs cost tabs with site hash revenue, network hashrate, hashprice charts, and integrated timeframe controls.
Hash balance reporting page — revenue vs cost tabs with site hash revenue, network hashrate, hashprice charts, and integrated timeframe controls.
import { HashBalance } from "@tetherto/mdk-react-devkit"; Prop Status Type Default Description isErrorOptional boolean— — isLoadingOptional boolean— — errorMessageOptional string— — classNameOptional string— — tabsClassNameOptional string— — tabsListClassNameOptional string— — dataOptional HashRevenueResponse | null— — initialDateRangeOptional FinancialDateRange— — onDateRangeChangeOptional (dateRange: FinancialDateRange, query: FinanceQueryParams) => 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 dataHashRevenueResponse | nullno — Revenue / cost log and summary. isLoadingbooleanno — Show loading state. isErrorbooleanno — Show error state. errorMessagestringno — Error copy when isError. initialDateRangeFinancialDateRangeno year-to-date Initial period. onDateRangeChange(range, query) => voidno — Fired when the user changes the period. classNamestringno — Root layout class. tabsClassNamestringno — Tabs wrapper class. tabsListClassNamestringno — Tab list class.
import { HashBalance } from "@tetherto/mdk-react-devkit";
<HashBalance data={response} isLoading={false} />
HashBalanceRevenuePanel
Prop Type Required Default Description dataHashRevenueResponse | nullno — Same payload as HashBalance. logHashRevenueLogEntry[]no — Optional log override. dateRangeFinancialDateRangeyes — Active reporting window. currencyHashBalanceCurrencyyes — USD or BTC label for per-PH/day units.onCurrencyChange(currency) => voidyes — Currency toggle handler. isLoadingbooleanno — Loading state. timeframeTypeTimeframeTypeValue | nullno — Year / month / week mode.
HashBalanceCostPanel
Prop Type Required Default Description dataHashRevenueResponse | nullno — Same payload as HashBalance. logHashRevenueLogEntry[]no — Optional log override. dateRangeFinancialDateRangeyes — Active reporting window. isLoadingbooleanno — Loading state. timeframeTypeTimeframeTypeValue | nullno — 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> )
