Compose Hash balance layouts
Building blocks behind the HashBalance reporting composite — assemble a custom hash-balance layout from the same parts.
@tetherto/mdk-react-devkit/foundation
The HashBalance composite renders a fixed two-tab layout (revenue and cost). To build a custom arrangement, compose it from the two tab panels below — each takes pre-shaped data as props and does no fetching.
Building blocks
| Component | Description |
|---|---|
HashBalanceRevenuePanel | Hash balance revenue tab panel |
HashBalanceCostPanel | Hash balance cost tab panel |
HashBalanceRevenuePanel
Revenue tab panel for hash balance - site hash revenue, network hashrate, hashprice charts, and currency toggle for per-PH/day units. Building block of the HashBalance composite.
import { HashBalanceRevenuePanel } from '@tetherto/mdk-react-devkit/foundation'Renders inside the revenue tab of HashBalance.
HashBalanceCostPanel
Cost tab panel for hash balance - metric tiles and combined cost / revenue / network hashprice bar chart for the selected period. Building block of the HashBalance composite.
import { HashBalanceCostPanel } from '@tetherto/mdk-react-devkit/foundation'Renders inside the cost tab of HashBalance.