The MarketStats component displays key statistics about a Compound III market, including total supply, total borrow, utilization rate, and reserve factor.

​
Usage

import { MarketStats } from 'compound-react';
import { providers } from 'ethers';

function MyComponent() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <MarketStats 
      provider={provider}
      chainId={1} // Ethereum Mainnet
    />
  );
}

​
Props

PropTypeDescription
providerProviderThe Ethereum provider to use for fetching data
chainIdnumberThe chain ID of the network to connect to
baseAssetSymbolstringOptional symbol of the base asset (e.g., “USDC”)
baseAssetDecimalsnumberOptional decimals of the base asset (e.g., 6 for USDC)
classNamestringOptional CSS class name to apply to the component
onRefresh() => voidOptional callback function to call when the refresh button is clicked

​
Example

<MarketStats 
  provider={provider}
  chainId={1}
  baseAssetSymbol="USDC"
  baseAssetDecimals={6}
  className="max-w-lg mx-auto"
  onRefresh={() => console.log('Market stats refreshed')}
/>

​
Displayed Information

The component displays the following market statistics:

  • Total Supply: The total value of all assets supplied to the protocol
  • Total Borrow: The total value of all assets borrowed from the protocol
  • Utilization Rate: The percentage of supplied assets that are currently borrowed
  • Reserve Factor: The percentage of interest that goes to the protocol reserves
  • Supply APY: The annual percentage yield for suppliers
  • Borrow APY: The annual percentage yield for borrowers
  • Market Address: The address of the Compound III market contract
  • Base Asset: The symbol and address of the base asset

​
Charts and Visualizations

The component includes visual elements to help users understand the market:

  • Utilization Chart: A visual representation of the utilization rate
  • Supply/Borrow Distribution: A breakdown of the supply and borrow amounts

​
Loading and Error States

The component handles loading and error states automatically:

  • While data is being fetched, a loading indicator is displayed
  • If an error occurs during data fetching, an error message is displayed

​
Customization

You can customize the appearance of the component using the className prop:

<MarketStats 
  provider={provider}
  chainId={1}
  className="bg-gray-50 p-6 rounded-xl shadow-md dark:bg-gray-800"
/>