Quickstart

Get up and running with Compound React in minutes

This guide will help you quickly get started with Compound React by walking through a simple example of setting up the provider and using some basic hooks.

Basic Setup

First, make sure you have installed Compound React as described in the Installation guide.

Setting Up the Provider

To use the hooks provided by Compound React, you need to wrap your application with the CompoundProvider component:

import React from 'react';
import { CompoundProvider } from 'compound-react';
import { providers } from 'ethers';

function App() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <CompoundProvider provider={provider}>
      <YourApp />
    </CompoundProvider>
  );
}

Connecting to a Specific Network

You can specify which network to connect to by passing the network prop to the CompoundProvider:

<CompoundProvider 
  provider={provider}
  network="base" // Connect to Base network
>
  <YourApp />
</CompoundProvider>

Connecting to a Specific Market

You can also specify which market to connect to by passing the market prop:

<CompoundProvider 
  provider={provider}
  network="base"
  market="usdc" // Connect to the USDC market on Base
>
  <YourApp />
</CompoundProvider>

Using Hooks

Once you have set up the provider, you can start using the hooks in your components.

Getting Asset Information

To get information about an asset, you can use the useGetAssetInfo hook:

import { useGetAssetInfo } from 'compound-react';

function AssetInfo() {
  const { data: usdcInfo, isLoading, error } = useGetAssetInfo('USDC');
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>USDC Information</h2>
      <p>Symbol: {usdcInfo.symbol}</p>
      <p>Price: ${usdcInfo.price.toFixed(2)}</p>
      <p>Supply APY: {usdcInfo.supplyApy.toFixed(2)}%</p>
      <p>Borrow APY: {usdcInfo.borrowApy.toFixed(2)}%</p>
    </div>
  );
}

Getting User Account Information

To get information about the user’s account, you can use the useGetAccountInfo hook:

import { useGetAccountInfo } from 'compound-react';

function AccountInfo() {
  const { data: accountInfo, isLoading, error } = useGetAccountInfo();
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h2>Account Information</h2>
      <p>Address: {accountInfo.address}</p>
      <p>Collateral Value: ${accountInfo.collateralValue.toFixed(2)}</p>
      <p>Borrow Balance: ${accountInfo.borrowBalance.toFixed(2)}</p>
      <p>Health Factor: {accountInfo.healthFactor.toFixed(2)}</p>
    </div>
  );
}

Supplying Collateral

To supply collateral to the protocol, you can use the useSupplyCollateral hook:

import { useSupplyCollateral } from 'compound-react';

function SupplyCollateral() {
  const { supply, isLoading, error } = useSupplyCollateral();
  
  const handleSupply = async () => {
    try {
      // Supply 100 USDC as collateral
      await supply('USDC', '100');
      alert('Successfully supplied collateral!');
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  };
  
  return (
    <div>
      <h2>Supply Collateral</h2>
      <button onClick={handleSupply} disabled={isLoading}>
        {isLoading ? 'Supplying...' : 'Supply 100 USDC'}
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

Using UI Components

Compound React also provides a set of ready-to-use UI components that work seamlessly with the hooks. These components handle loading states, error handling, and data formatting for you.

Basic UI Component Example

Here’s a simple example of using the AssetInfoCard and InterestRateDisplay components:

import React from 'react';
import { 
  CompoundProvider, 
  AssetInfoCard, 
  InterestRateDisplay 
} from 'compound-react';
import { providers } from 'ethers';

function App() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <CompoundProvider provider={provider} chainId={1}>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
        <AssetInfoCard assetIndex={0} />
        <InterestRateDisplay />
      </div>
    </CompoundProvider>
  );
}

Using the Dashboard Component

For a more comprehensive UI, you can use the CompoundDashboard component which combines multiple components into a tabbed interface:

import React from 'react';
import { 
  CompoundProvider, 
  CompoundDashboard 
} from 'compound-react';
import { providers } from 'ethers';

function App() {
  // Create an Ethereum provider
  const provider = new providers.Web3Provider(window.ethereum);
  const userAddress = "0x..."; // The user's Ethereum address
  
  return (
    <CompoundProvider provider={provider} chainId={1}>
      <CompoundDashboard 
        userAddress={userAddress}
        baseAssetSymbol="USDC"
        baseAssetDecimals={6}
      />
    </CompoundProvider>
  );
}

The dashboard includes tabs for:

• Overview (position summary, interest rates, market stats)
• Supply & Borrow
• Assets
• Transaction History

Customizing Components

All UI components accept a className prop that allows you to customize their appearance using Tailwind CSS classes:

<AssetInfoCard 
  assetIndex={0} 
  className="bg-blue-50 border-blue-200 dark:bg-blue-900 dark:border-blue-800"
/>

For more information on customizing the components, see the UI Components section.

Complete Example

Here’s a complete example that combines all of the above:

import React from 'react';
import { CompoundProvider, useGetAssetInfo, useGetAccountInfo, useSupplyCollateral } from 'compound-react';
import { providers } from 'ethers';

function App() {
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <CompoundProvider provider={provider}>
      <Dashboard />
    </CompoundProvider>
  );
}

function Dashboard() {
  const { data: usdcInfo, isLoading: isLoadingAsset } = useGetAssetInfo('USDC');
  const { data: accountInfo, isLoading: isLoadingAccount } = useGetAccountInfo();
  const { supply, isLoading: isSupplying } = useSupplyCollateral();
  
  const handleSupply = async () => {
    try {
      await supply('USDC', '100');
      alert('Successfully supplied collateral!');
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  };
  
  if (isLoadingAsset || isLoadingAccount) return <div>Loading...</div>;
  
  return (
    <div>
      <h1>Compound III Dashboard</h1>
      
      <div>
        <h2>USDC Information</h2>
        {usdcInfo && (
          <>
            <p>Symbol: {usdcInfo.symbol}</p>
            <p>Price: ${usdcInfo.price.toFixed(2)}</p>
            <p>Supply APY: {usdcInfo.supplyApy.toFixed(2)}%</p>
            <p>Borrow APY: {usdcInfo.borrowApy.toFixed(2)}%</p>
          </>
        )}
      </div>
      
      <div>
        <h2>Account Information</h2>
        {accountInfo && (
          <>
            <p>Address: {accountInfo.address}</p>
            <p>Collateral Value: ${accountInfo.collateralValue.toFixed(2)}</p>
            <p>Borrow Balance: ${accountInfo.borrowBalance.toFixed(2)}</p>
            <p>Health Factor: {accountInfo.healthFactor.toFixed(2)}</p>
          </>
        )}
      </div>
      
      <div>
        <h2>Supply Collateral</h2>
        <button onClick={handleSupply} disabled={isSupplying}>
          {isSupplying ? 'Supplying...' : 'Supply 100 USDC'}
        </button>
      </div>
    </div>
  );
}

export default App;

Next Steps

Now that you have a basic understanding of how to use Compound React, you can explore the Hooks section to learn about all the available hooks and how to use them in your application.