The UserPositionSummary component displays a comprehensive summary of a user’s position in the Compound III protocol, including supplied assets, borrowed amount, and health factor.

​
Usage

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

function MyComponent() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <UserPositionSummary 
      provider={provider}
      chainId={1} // Ethereum Mainnet
      userAddress="0x..." // The address to display the position for
    />
  );
}

​
Props

PropTypeDescription
providerProviderThe Ethereum provider to use for fetching data
chainIdnumberThe chain ID of the network to connect to
userAddressstringThe address to display the position for (defaults to connected wallet)
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

<UserPositionSummary 
  provider={provider}
  chainId={1}
  userAddress="0x..."
  baseAssetSymbol="USDC"
  baseAssetDecimals={6}
  className="max-w-lg mx-auto"
  onRefresh={() => console.log('Position refreshed')}
/>

​
Displayed Information

The component displays the following information about the user’s position:

  • Total Supplied: The total value of all supplied assets
  • Total Borrowed: The total amount borrowed
  • Available to Borrow: The remaining amount available to borrow
  • Health Factor: A measure of the position’s safety (higher is better)
  • Liquidation Threshold: The point at which the position becomes eligible for liquidation
  • Supplied Assets: A breakdown of all supplied assets with their values
  • Collateral Assets: A breakdown of assets being used as collateral

​
Health Factor Indicator

The component includes a visual health factor indicator that changes color based on the position’s risk level:

  • Green: Safe position (health factor > 1.5)
  • Yellow: Moderate risk (health factor between 1.1 and 1.5)
  • Orange: High risk (health factor between 1.0 and 1.1)
  • Red: Danger of liquidation (health factor < 1.0)

​
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 the user has no position, an appropriate message is shown

​
Customization

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

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