Compound React

A complete React kit for interacting with Compound III protocol across all supported networks and markets.

Installation

npm install compound-react-kit

or

yarn add compound-react-kit

Features

• Complete React integration for Compound III protocol
• Ready-to-use UI components built with shadcn/ui
• Powerful React hooks for all protocol functionality
• TypeScript support
• Multi-network and multi-market support
• Simple provider-based configuration

Quick Start

import { CompoundProvider, useGetAssetInfo, AssetInfoCard } from 'compound-react-kit';
import { providers } from 'ethers';

function App() {
  const provider = new providers.Web3Provider(window.ethereum);
  
  return (
    <CompoundProvider 
      provider={provider}
      chainId={1} // Ethereum Mainnet
      initialMarket="USDC" // Optional
    >
      <YourComponent />
    </CompoundProvider>
  );
}

function YourComponent() {
  // Using hooks approach
  const { data, isLoading, error } = useGetAssetInfo(0);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      {/* Using UI components approach */}
      <AssetInfoCard assetIndex={0} />
      
      {/* Or custom UI with hooks data */}
      <div className="custom-card">
        <h2>Asset Info</h2>
        <p>Asset Address: {data?.asset}</p>
        <p>Collateral Factor: {data?.borrowCollateralFactor.toString()}</p>
      </div>
    </div>
  );
}

Supported Networks

• Ethereum Mainnet
• Arbitrum
• Base
• Polygon
• Optimism
• Scroll
• Mantle
• Various testnets (Sepolia, Mumbai, Base Sepolia)

These examples demonstrate how to integrate Compound React with best practices.

Documentation

For complete documentation, visit our documentation

Package Contents

• UI Components: Ready-to-use interface elements for Compound III
• React Hooks: Data fetching and state management for protocol interactions
• Account Management: Managing user accounts and permissions
• Collateral and Borrowing: Supplying collateral and borrowing assets
• Interest Rates: Getting interest rate information
• Liquidation: Liquidation-related functionality
• Protocol Rewards: Managing protocol rewards

License

MIT