Helpers

Utility hooks for working with Compound III

This section contains utility hooks that make it easier to work with Compound III.

Summary of Helper Hooks

• useTotalSupply: Retrieves the total supply of the base asset in the protocol
• useTotalBorrow: Retrieves the total amount borrowed from the protocol
• useTotalCollateral: Retrieves the total collateral for a specific asset
• useSuppliedBaseBalance: Retrieves the supplied base token balance for an account
• useBorrowBalance: Retrieves the borrow balance for an account
• useGetAssetInfo: Retrieves information about a specific asset by its symbol
• useGetAssetInfoByAddress: Retrieves information about an asset by its address
• useGetPrice: Retrieves the current price of an asset
• useGetMaxAssets: Gets the maximum number of assets supported by the protocol
• useGetFactorScale: Retrieves the factor scale used for calculations
• useGetPriceScale: Gets the price scale used for calculations
• useGetBaseIndexScale: Retrieves the base index scale
• useGetBaseAccrualScale: Gets the base accrual scale
• useGetBaseAssetMarketInfo: Retrieves market information for the base asset
• useUserBasic: Gets basic information about a user’s account
• useAccrueAccount: Allows accruing interest for a specific account

useTotalSupply

The useTotalSupply hook retrieves the total supply of the base asset in the protocol.

Usage

import { useTotalSupply } from 'compound-react';

function TotalSupplyDisplay() {
  const { totalSupply, loading, error } = useTotalSupply();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Total Supply</h2>
      <p>Total Supply: {totalSupply?.toString()}</p>
    </div>
  );
}

Return Value

{
  totalSupply: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useTotalBorrow

The useTotalBorrow hook retrieves the total amount borrowed from the protocol.

Usage

import { useTotalBorrow } from 'compound-react';

function TotalBorrowDisplay() {
  const { totalBorrow, loading, error } = useTotalBorrow();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Total Borrow</h2>
      <p>Total: {ethers.utils.formatUnits(totalBorrow || 0, 6)} USDC</p>
    </div>
  );
}

Return Value

{
  totalBorrow: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useTotalCollateral

The useTotalCollateral hook retrieves the total collateral for a specific asset in the protocol.

Usage

import { useTotalCollateral } from 'compound-react';

function TotalCollateralDisplay({ assetAddress }) {
  const { totalCollateral, loading, error } = useTotalCollateral(null, assetAddress);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Total Collateral</h2>
      <p>Total: {ethers.utils.formatUnits(totalCollateral || 0, 18)} WETH</p>
    </div>
  );
}

Return Value

{
  totalCollateral: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useSuppliedBaseBalance

The useSuppliedBaseBalance hook retrieves the supplied base token balance for an account.

Usage

import { useSuppliedBaseBalance } from 'compound-react';

function SuppliedBalanceDisplay({ accountAddress }) {
  const { balance, loading, error } = useSuppliedBaseBalance(null, accountAddress);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Supplied Balance</h2>
      <p>Balance: {ethers.utils.formatUnits(balance || 0, 6)} USDC</p>
    </div>
  );
}

Return Value

{
  balance: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useBorrowBalance

The useBorrowBalance hook retrieves the borrow balance for an account.

Usage

import { useBorrowBalance } from 'compound-react';

function BorrowBalanceDisplay({ accountAddress }) {
  const { balance, loading, error } = useBorrowBalance(null, accountAddress);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Borrow Balance</h2>
      <p>Balance: {ethers.utils.formatUnits(balance || 0, 6)} USDC</p>
    </div>
  );
}

Return Value

{
  balance: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useGetAssetInfo

The useGetAssetInfo hook retrieves information about a specific asset by its symbol.

Usage

import { useGetAssetInfo } from 'compound-react';

function AssetInfoDisplay() {
  const { assetInfo, loading, error } = useGetAssetInfo('WETH');
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Asset Information</h2>
      <p>Symbol: {assetInfo?.symbol}</p>
      <p>Address: {assetInfo?.address}</p>
      <p>Price: ${assetInfo?.price}</p>
      <p>Decimals: {assetInfo?.decimals}</p>
    </div>
  );
}

Return Value

{
  assetInfo: {
    symbol: string;
    address: string;
    price: number;
    decimals: number;
    isCollateral: boolean;
    borrowCollateralFactor: number;
    liquidateCollateralFactor: number;
    supplyCapacity: BigNumber;
  } | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<AssetInfo | null>;
}

useGetAssetInfoByAddress

The useGetAssetInfoByAddress hook retrieves information about an asset by its address.

Usage

import { useGetAssetInfoByAddress } from 'compound-react';

function AssetInfoByAddressDisplay({ assetAddress }) {
  const { assetInfo, loading, error } = useGetAssetInfoByAddress(assetAddress);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Asset Information</h2>
      <p>Symbol: {assetInfo?.symbol}</p>
      <p>Address: {assetInfo?.address}</p>
      <p>Price: ${assetInfo?.price}</p>
      <p>Decimals: {assetInfo?.decimals}</p>
    </div>
  );
}

Return Value

{
  assetInfo: {
    symbol: string;
    address: string;
    price: number;
    decimals: number;
    isCollateral: boolean;
    borrowCollateralFactor: number;
    liquidateCollateralFactor: number;
    supplyCapacity: BigNumber;
  } | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<AssetInfo | null>;
}

useGetPrice

The useGetPrice hook retrieves the current price of an asset.

Usage

import { useGetPrice } from 'compound-react';

function AssetPriceDisplay({ assetAddress }) {
  const { price, loading, error } = useGetPrice(null, assetAddress);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Asset Price</h2>
      <p>Price: ${price?.toString()}</p>
    </div>
  );
}

Return Value

{
  price: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useGetMaxAssets

The useGetMaxAssets hook retrieves the maximum number of assets that can be supported by the protocol.

Usage

import { useGetMaxAssets } from 'compound-react';

function MaxAssetsDisplay() {
  const { maxAssets, loading, error } = useGetMaxAssets();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Maximum Supported Assets</h2>
      <p>Max Assets: {maxAssets}</p>
    </div>
  );
}

Return Value

{
  maxAssets: number | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<number | null>;
}

useGetFactorScale

The useGetFactorScale hook retrieves the factor scale used for calculations in the protocol.

Usage

import { useGetFactorScale } from 'compound-react';

function FactorScaleDisplay() {
  const { factorScale, loading, error } = useGetFactorScale();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Factor Scale</h2>
      <p>Scale: {factorScale?.toString()}</p>
    </div>
  );
}

Return Value

{
  factorScale: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useGetPriceScale

The useGetPriceScale hook retrieves the price scale used for calculations in the protocol.

Usage

import { useGetPriceScale } from 'compound-react';

function PriceScaleDisplay() {
  const { priceScale, loading, error } = useGetPriceScale();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Price Scale</h2>
      <p>Scale: {priceScale?.toString()}</p>
    </div>
  );
}

Return Value

{
  priceScale: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useGetBaseIndexScale

The useGetBaseIndexScale hook retrieves the base index scale used for calculations in the protocol.

Usage

import { useGetBaseIndexScale } from 'compound-react';

function BaseIndexScaleDisplay() {
  const { baseIndexScale, loading, error } = useGetBaseIndexScale();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Base Index Scale</h2>
      <p>Scale: {baseIndexScale?.toString()}</p>
    </div>
  );
}

Return Value

{
  baseIndexScale: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useGetBaseAccrualScale

The useGetBaseAccrualScale hook retrieves the base accrual scale used for calculations in the protocol.

Usage

import { useGetBaseAccrualScale } from 'compound-react';

function BaseAccrualScaleDisplay() {
  const { baseAccrualScale, loading, error } = useGetBaseAccrualScale();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Base Accrual Scale</h2>
      <p>Scale: {baseAccrualScale?.toString()}</p>
    </div>
  );
}

Return Value

{
  baseAccrualScale: BigNumber | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BigNumber | null>;
}

useGetBaseAssetMarketInfo

The useGetBaseAssetMarketInfo hook retrieves market information for the base asset.

Usage

import { useGetBaseAssetMarketInfo } from 'compound-react';

function BaseAssetMarketInfoDisplay() {
  const { marketInfo, loading, error } = useGetBaseAssetMarketInfo();
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Base Asset Market Info</h2>
      <p>Symbol: {marketInfo?.symbol}</p>
      <p>Address: {marketInfo?.address}</p>
      <p>Decimals: {marketInfo?.decimals}</p>
      <p>Supply Cap: {marketInfo?.supplyCap?.toString()}</p>
    </div>
  );
}

Return Value

{
  marketInfo: {
    symbol: string;
    address: string;
    decimals: number;
    supplyCap: BigNumber;
    storeFrontPriceFactor: BigNumber;
    trackingIndexScale: BigNumber;
    baseTrackingSupplySpeed: BigNumber;
    baseTrackingBorrowSpeed: BigNumber;
    baseMinForRewards: BigNumber;
    baseBorrowMin: BigNumber;
  } | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<BaseAssetMarketInfo | null>;
}

useUserBasic

The useUserBasic hook retrieves basic information about a user’s account.

Usage

import { useUserBasic } from 'compound-react';

function UserBasicInfoDisplay({ accountAddress }) {
  const { userBasic, loading, error } = useUserBasic(null, accountAddress);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>User Basic Info</h2>
      <p>Principal: {ethers.utils.formatUnits(userBasic?.principal || 0, 6)}</p>
      <p>Base Tracking Accrued: {userBasic?.baseTrackingAccrued.toString()}</p>
    </div>
  );
}

Return Value

{
  userBasic: {
    principal: BigNumber;
    baseTrackingIndex: BigNumber;
    baseTrackingAccrued: BigNumber;
    assetsIn: BigNumber;
  } | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<UserBasic | null>;
}

useAccrueAccount

The useAccrueAccount hook allows accruing interest for a specific account.

Usage

import { useAccrueAccount } from 'compound-react';

function AccrueAccountComponent() {
  const { accrueAccount, loading, error } = useAccrueAccount();
  
  const handleAccrue = async () => {
    try {
      const accountAddress = '0x1234...';
      const success = await accrueAccount(accountAddress);
      if (success) {
        alert('Successfully accrued account!');
      }
    } catch (err) {
      console.error('Error accruing account:', err);
    }
  };
  
  return (
    <div>
      <h2>Accrue Account</h2>
      <button onClick={handleAccrue} disabled={loading}>
        {loading ? 'Accruing...' : 'Accrue Account'}
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

Return Value

{
  accrueAccount: (accountAddress: string) => Promise<boolean>;
  loading: boolean;
  error: Error | null;
}