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;