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

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;}

Listing Available Hubs

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 some examples of how to use the useHubs hook.

import { chainId } from "@aave/react";
const { data, error, loading } = useHubs({  query: {    chainIds: [chainId(1)],  },});

Fetching a Single Hub

Get detailed information about a specific liquidity hub.

React
TypeScript
GraphQL

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 some examples of how to use the useHub hook.

const { data, loading, error } = useHub({  query: {    hubId, // 'SGVsbG8h' as HubId  },});

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)

TypeScript
GraphQL
Solidity

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.

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 how to use the useHubAssets hook.

const { data, loading, error } = useHubAssets({  query: {    hubId: hub.id, // hub.id: HubId from component props or previous query  },});

Add a user address to return HubAssetUserState for each asset.

Hub Asset User Stateimport { evmAddress } from "@aave/react";
// …
const { data, loading, error } = useHubAssets({  query: {    // your query criteria  },  user: evmAddress("0x456…"),});