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 theCompoundProvider
component:
Connecting to a Specific Network
You can specify which network to connect to by passing thenetwork
prop to the CompoundProvider
:
Connecting to a Specific Market
You can also specify which market to connect to by passing themarket
prop:
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 theuseGetAssetInfo
hook:
Getting User Account Information
To get information about the user’s account, you can use theuseGetAccountInfo
hook:
Supplying Collateral
To supply collateral to the protocol, you can use theuseSupplyCollateral
hook:
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 theAssetInfoCard
and InterestRateDisplay
components:
Using the Dashboard Component
For a more comprehensive UI, you can use theCompoundDashboard
component which combines multiple components into a tabbed interface:
- Overview (position summary, interest rates, market stats)
- Supply & Borrow
- Assets
- Transaction History
Customizing Components
All UI components accept aclassName
prop that allows you to customize their appearance using Tailwind CSS classes: