Skip to content

Get any Ethereum address's Aave portfolio data

The walletAavePortfolio data slice provides a re-usable Alpine.js data slice for fetching both Aave market data and a given wallet address’s portfolio on Aave.

Data Slice Structure

fetchStatus

  • Type: String
  • Description: Represents the status of the bundled read request. Can be 'idle', 'pending', or 'success'. Defaults to 'idle'.

summary

  • Type: ExtendedUserSummary | Undefined
  • Description: Wallet address portfolio summary + Aave market data summary. Defaults to undefined and is updated by the getSummary() method.

address

  • Type: String | Undefined
  • Description: Ethereum address to get the summary of. Defaults to undefined. Set or update it in the markup with x-bind, x-init, or x-data.

Methods

The walletAavePortfolio data slice provides the following method:

getSummary(): Promise<void>

This method fetches market data + Aave portfolio for a given Ethereum address.

Usage:

Put x-data='walletAavePortfolio' to give the DOM node + its descendants access to this data slice.

Parameters:

  • None

Example

The snippet below showcases a simple implementation of a widget that displays the Aave portfolio of a given Ethereum address.

<div
x-data="walletAavePortfolio"
x-init="address = '0xE665CEf14cB016b37014D0BDEAB4A693c3F46Cc0'"
x-effect="getSummary()"
>
<template x-if="fetchStatus === 'pending' ">
<span x-text="'Loading ' + address + ' summary...'"></span>
</template>
<template x-if="fetchStatus === 'success' ">
<article x-data="{ profile: address }">
<span x-text="'Summary for ' + profile"></span>
<section>
<h1>Net worth (in USD)</h1>
<p x-text="$formatNumber(summary.netWorthUSD, { style: 'currency', currency: 'USD', })"></p>
</section>
<section>
<h1>Total collateral value (in USD)</h1>
<p x-text="$formatNumber(summary.totalCollateralUSD, { style: 'currency', currency: 'USD'})"></p>
</section>
<section>
<h1>Total amount available to borrow (in USD)</h1>
<p x-text="$formatNumber(summary.availableBorrowsUSD, { style: 'currency', currency: 'USD'})"></p>
</section>
<section>
<h1>Current health factor</h1>
<p x-text="$formatNumber(summary.healthFactor)"></p>
</section>
<section>
<h1>Collateral usage</h1>
<p x-text="$formatNumber(summary.collateralUsage, { style: 'percent' })"></p>
</section>
<section>
<h1>Supplying</h1>
<ul x-data="{ positions: summary.userReservesData.filter(data => parseFloat(data.underlyingBalanceUSD) > 0) }">
<template x-for="position in positions">
<li>
<span x-text="$formatERC20Balance(position.underlyingBalance, position.reserve.symbol)"></span>
</li>
<span
x-text="'(' + $formatNumber(position.underlyingBalanceUSD, { style: 'currency', currency: 'USD' }) +')'"
></span>
</template>
</ul>
</section>
</article>
</template>
</div>