The AssetInfoCard component displays detailed information about a collateral asset in the Compound III protocol, including collateral factors, supply caps, and other important parameters.

​
Usage

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

function MyComponent() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  
  // Create a CometClient instance
  const client = new CometClient({
    provider,
    chainId: 1, // Ethereum Mainnet
  });
  
  return (
    <AssetInfoCard 
      client={client}
      assetIndex={0} // The index of the asset in the protocol
      onRefresh={() => console.log('Asset info refreshed')}
    />
  );
}

​
Props

PropTypeDescription
clientCometClient | nullThe CometClient instance to use for fetching data
assetIndexnumberThe index of the asset in the protocol
classNamestringOptional CSS class name to apply to the component
onRefresh() => voidOptional callback function to call when the refresh button is clicked

​
Example

<AssetInfoCard 
  client={client}
  assetIndex={0}
  className="max-w-lg mx-auto"
  onRefresh={() => console.log('Asset info refreshed')}
/>

​
Displayed Information

The component displays the following information about the asset:
  • Asset address
  • Price feed address
  • Borrow collateral factor
  • Liquidate collateral factor
  • Liquidation factor
  • Supply cap

​
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
  • If no asset information is available, a message is displayed

​
Customization

You can customize the appearance of the component using the className prop: 
<AssetInfoCard 
  client={client}
  assetIndex={0}
  className="bg-gray-50 border-gray-200 dark:bg-gray-800 dark:border-gray-700"
/>