Learn how to discover and access liquidity hubs in Aave v4.
Hub data provide an aggregate view of a liquidity hub, including:
Identification: id, name, chain, address
Aggregated details: totalSupplied, totalBorrowed
System caps: totalSupplyCap, totalBorrowCap
- TypeScript
- GraphQL
- Solidity
The following TypeScript interfaces illustrate the core Hub type:
interface Hub { __typename: "Hub"; id: HubId; address: EvmAddress; chain: Chain; name: string; summary: HubSummary;}
Discover all available Aave Liquidity Hubs across supported networks.
- React
- TypeScript
- GraphQL
- Solidity
Use the useHubs hook to fetch a list of liquidity hubs.
import { type HubsRequest, useHubs } from "@aave/react";
function HubsList({ request }: { request: HubsRequest }) { const { data, loading, error } = useHubs(request);
if (loading) return <div>Loading…</div>;
if (error) return <div>Error: {error.message}</div>;
return ( <div> {data.map((hub) => ( <div key={hub.id}> <h3>{hub.name}</h3> <p>Chain: {hub.chain.name}</p> </div> ))} </div> );}
The useHubsAction hook does not watch for updates. Use it when you need
on-demand, fresh data (e.g., in an event handler).
See below for examples of HubsRequest objects.
import { chainId } from "@aave/react";
const request: HubsRequest = { query: { chainIds: [chainId(1)], },};
And you can specify a different currency for the data.
import { chainId, Currency } from "@aave/react";
const { data, error, loading } = useHubs({ query: { }, currency: Currency.Eur,});
Get detailed information about a specific liquidity hub.
Use the useHub hook to fetch a specific hub.
import { type HubRequest, useHub } from "@aave/react";
function HubDetails({ request }: { request: HubRequest }) { const { data, loading, error } = useHub(request);
if (loading) return <div>Loading…</div>;
if (error) return <div>Error: {error.message}</div>;
if (!data) return <div>Hub not found</div>;
return ( <div> <h2>{data.name}</h2> <p>Address: {data.address}</p> <p>Chain: {data.chain.name}</p> </div> );}
See below for examples of HubRequest objects.
import { hubId } from "@aave/react";
const request: HubRequest = { query: { hubId: hubId(params.id), },};
Finally, you can specify a different time window or currency for the data.
import { TimeWindow } from "@aave/react";
const { data, loading, error } = useHub({ query: { }, timeWindow: TimeWindow.LastWeek,});
Fetch historical summary data for a specific hub over a specified time window.
Use the useHubSummaryHistory hook to fetch historical summary data for a hub.
import { type HubSummaryHistoryRequest, useHubSummaryHistory,} from "@aave/react";
function HubHistory({ request }: { request: HubSummaryHistoryRequest }) { const { data, loading, error } = useHubSummaryHistory(request);
if (loading) return <div>Loading…</div>;
if (error) return <div>Error: {error.message}</div>;
return ( <div> <h2>Hub History</h2> {data.map((item) => ( <div key={item.date.toString()}> <p>Date: {item.date.toLocaleDateString()}</p> <p> Deposits: {item.deposits.symbol} {item.deposits.value.toDisplayString(2)} </p> <p> Borrows: {item.borrows.symbol} {item.borrows.value.toDisplayString(2)} </p> <p>Utilization: {item.utilizationRate.normalized.toFixed(2)}%</p> </div> ))} </div> );}
See below for examples of HubSummaryHistoryRequest objects.
import { hubId, TimeWindow } from "@aave/react";
const request: HubSummaryHistoryRequest = { query: { hubId: hubId(params.id) }, window: TimeWindow.LastWeek,};
Specify the time window for the historical data.
import { hubId, TimeWindow } from "@aave/react";
const request: HubSummaryHistoryRequest = { query: { hubId: hubId(params.id) }, window: TimeWindow.LastDay,};
And you can specify a different currency for the data.
import { Currency, hubId, TimeWindow } from "@aave/react";
const { data, error, loading } = useHubSummaryHistory({ query: { hubId: hubId(params.id) }, window: TimeWindow.LastWeek, currency: Currency.Eur,});
Hub assets are the ERC-20 tokens held by a given hub.
Hub Asset data provides detailed information about each asset available on a liquidity hub, including:
Identification: id, onchainAssetId, underlying token details
Hub reference: the hub where this asset is available
Summary metrics: supplied/borrowed amounts, APY rates, utilization
Settings: fee receiver, liquidity fees, strategies
User state: user's balance (when user is specified in request)
- TypeScript
- GraphQL
- Solidity
interface HubAsset { __typename: "HubAsset"; id: HubAssetId; onchainAssetId: OnChainHubAssetId; hub: Hub; underlying: Erc20Token; summary: HubAssetSummary; settings: HubAssetSettings; userState: HubAssetUserState | null;}
Discover all available assets on an hub, including their liquidity metrics, APY rates, and user-specific data.
- React
- TypeScript
- GraphQL
- Solidity
Use the useHubAssets hook to fetch assets for a specific hub.
import { type HubAssetsRequest, useHubAssets } from "@aave/react";
function HubAssetsList({ request }: { request: HubAssetsRequest }) { const { data, loading, error } = useHubAssets(request);
if (loading) return <div>Loading…</div>;
if (error) return <div>Error: {error.message}</div>;
return ( <div> {data.map((asset) => ( <div key={asset.id}> <h3>{asset.underlying.info.name}</h3> <p>Hub: {asset.hub.name}</p> </div> ))} </div> );}
See below for examples of HubAssetsRequest objects.
const request: HubAssetsRequest = { query: { hubId: hub.id, },};
And you can add a user address to return HubAssetUserState for each asset.
import { evmAddress } from "@aave/react";
const equest: HubAssetsRequest = { query: { }, user: evmAddress("0x456…"),};
Finally, you can specify a different currency for the data.
import { Currency } from "@aave/react";
const { data, loading, error } = useHubAssets({ query: { }, currency: Currency.Eur,});