Liquidity Hubs

Learn how to discover and access liquidity hubs in Aave v4.

Hub Structure

Hub data provide an aggregate view of a liquidity hub, including:

  • Identification: id, name, chain, address

  • Aggregated details: totalSupplied, totalBorrowed

  • System caps: totalSupplyCap, totalBorrowCap

The following TypeScript interfaces illustrate the core Hub type:

interface Hub {  __typename: "Hub";  id: HubId;  address: EvmAddress;  chain: Chain;  name: string;  summary: HubSummary;}

Listing Available Hubs

Discover all available Aave Liquidity Hubs across supported networks.

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.

Custom Currency
import { chainId, Currency } from "@aave/react";
const { data, error, loading } = useHubs({  query: {    // your query criteria  },  currency: Currency.Eur,});

Fetching a Single Hub

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), // HubId - typically from URL params  },};

Finally, you can specify a different time window or currency for the data.

import { TimeWindow } from "@aave/react";
const { data, loading, error } = useHub({  query: {    // your query criteria  },  timeWindow: TimeWindow.LastWeek,});

Hub Summary History

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.

Custom Currency
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

Hub assets are the ERC-20 tokens held by a given hub.

Hub Asset Structure

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)

interface HubAsset {  __typename: "HubAsset";  id: HubAssetId;  onchainAssetId: OnChainHubAssetId;  hub: Hub;  underlying: Erc20Token;  summary: HubAssetSummary;  settings: HubAssetSettings;  userState: HubAssetUserState | null;}

Listing Hub Assets

Discover all available assets on an hub, including their liquidity metrics, APY rates, and user-specific data.

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, // hub.id: HubId from component props or previous query  },};

And you can add a user address to return HubAssetUserState for each asset.

Hub Asset User State
import { evmAddress } from "@aave/react";
const equest: HubAssetsRequest = {  query: {    // your query criteria  },  user: evmAddress("0x456…"),};

Finally, you can specify a different currency for the data.

Custom Currency
import { Currency } from "@aave/react";
// …
const { data, loading, error } = useHubAssets({  query: {    // your query criteria  },  currency: Currency.Eur,});

Interest Rate Model

The interest rate model describes how supply and borrow rates change across the utilization range for a specific hub asset. Each data point includes the utilization rate, the corresponding borrow and supply rates, and the liquidity distance from the current state.

HubAssetInterestRateModelPoint
interface HubAssetInterestRateModelPoint {  __typename: "HubAssetInterestRateModelPoint";  utilizationRate: PercentNumber;  borrowRate: PercentNumber;  supplyRate: PercentNumber;  liquidityDistance: Erc20Amount;}

Fetch the full interest rate curve for a specific hub asset.

Use the useHubAssetInterestRateModel hook to fetch the interest rate curve for a hub asset.

import { useHubAssetInterestRateModel } from "@aave/react";
function InterestRateModel({ hubAssetId }: { hubAssetId: HubAssetId }) {  const { data, loading, error } = useHubAssetInterestRateModel({    query: { hubAssetId },  });
  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (    <div>      {data?.map((point, i) => (        <div key={i}>          <span>Utilization: {point.utilizationRate.value}</span>          <span>Borrow Rate: {point.borrowRate.value}</span>          <span>Supply Rate: {point.supplyRate.value}</span>        </div>      ))}    </div>  );}
Previous
Liquidity Model
Next
Spokes