React#Copy

Get started with AaveKit React

AaveKit React for Aave v4 is a collection of React hooks for building decentralized applications on top of the Aave Protocol v4.

To get started, follow the steps below.

npm install @aave/react@next

import { AaveClient } from "@aave/react";
export const client = AaveClient.create();

import { AaveProvider } from "@aave/react";
import { client } from "./client";
export function App() {  return (    <AaveProvider client={client}>      {/* Your application components */}    </AaveProvider>  );}

import { useChains } from "@aave/react";
export function SupportedChains() {  const { data: chains } = useChains();
  return (    <div>      <h2>Supported Chains</h2>      {chains?.map((chain) => (        <div key={chain.chainId}>          <h3>{chain.name}</h3>          <p>Chain ID: {chain.chainId}</p>        </div>      ))}    </div>  );}

AaveKit React declarative hooks execute on render with the given inputs, refresh when inputs change, and update after successful write operations; declarative hooks support two modes: loading state and React Suspense.

import { useChains } from "@aave/react";
function ChainsList() {  const { data, loading, error } = useChains();
  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;
  return (    <div>      {data.map((chain) => (        <div key={chain.chainId}>{chain.name}</div>      ))}    </div>  );}

AaveKit React read hooks support pausing—a powerful pattern that lets you defer data fetching until certain conditions are met. This is particularly useful when:

Type safety is maintained by allowing nullish request parameters and returning a paused state, which explicitly signals when a hook is inactive and lets TypeScript precisely narrow types between paused and active states.

import { useChains } from "@aave/react";
const { data, loading, error, paused } = useChains({  pause: !connected,});
// …
// data: Chain[] | undefined// loading: boolean// error: UnexpectedError | undefined// paused: boolean
if (paused) {  // data: undefined  // error: undefined  // loading: boolean  return null;}
if (loading) {  // data: undefined  // error: undefined  // loading: true  return null;}
if (error) {  // data: undefined  // error: UnexpectedError  // loading: false  return null;}
// data: Chain[] (guaranteed to be defined)

Declarative hooks also expose a reloading state that indicates when data is being refreshed after the initial load. This is different from loading, which is only true during the first fetch.

The reloading state becomes true when:

This lets you show a subtle refresh indicator while keeping the previous data visible, rather than replacing content with a loading spinner.

import { useUserPositions } from "@aave/react";
const { data, loading, error, reloading } = useUserPositions({  user: userAddress,});
if (loading) {  return <Spinner />;}
if (error) {  return <ErrorMessage error={error} />;}
// Show refresh indicator while keeping data visiblereturn (  <div>    {reloading && <RefreshIndicator />}    <PositionsList positions={data} />  </div>);

AaveKit React imperative hooks return an execute function and a state object. These are tailored for when you need explicit control—like event handlers or multi‑step flows.

const [execute, state] = useImperativeHook();

The execute function takes the hook arguments and, when awaited, yields a Result<T, E>.

Use isOk() and isErr() to check the outcome and narrow the type:

const result = await execute();
if (result.isOk()) {  console.log("Result:", result.value);} else {  console.error("Error:", result.error);}

See the Result Objects section for more information about the Result object.

The state object provides information about the operation status:

const { called, data, error, loading } = state;

Where:

AaveKit React includes first-class support for viem, ethers v6, Privy, Dynamic, thirdweb and Turnkey.

npm install viem@2

AaveKit React provides transaction hooks that handle protocol interactions like supply, borrow, withdraw, repay, and more.

There are two types of transaction hooks:

To send transactions, follow the steps below.

const [sendTransaction, { loading, error }] = useSendTransaction(/* args */);

import { useSendTransaction } from "@aave/react/viem";import { useWalletClient } from "wagmi";
function MyComponent() {  const { data: walletClient } = useWalletClient();  const [sendTransaction, sending] = useSendTransaction(walletClient);
  // Use with transaction hooks…}

const [sendTransaction, sending] = useSendTransaction(/* … */);const [prepare, preparing] = useSimpleTransaction((transaction) =>  sendTransaction(transaction),);

const [execute, { loading, error }] = useSimpleTransaction(  (transaction, { cancel }) => {    if (window.confirm("Are you sure you want to continue?") === false) {      return cancel("User cancelled the operation");    }    return sendTransaction(transaction);  },);

const result = await execute(/* args */);
if (result.isErr()) {  switch (result.error.name) {    case "CancelError":      // The user cancelled the operation      return;
    case "SigningError":      console.error(`Failed to sign the transaction: ${result.error.message}`);      break;
    case "TimeoutError":      console.error(`Transaction timed out: ${result.error.message}`);      break;
    case "TransactionError":      console.error(`Transaction failed: ${result.error.message}`);      break;
    case "UnexpectedError":      console.error(result.error.message);      break;  }  return;}
console.log(result.value.txHash); // TxHash

function MyComponent() {  // …
  return (    <div>      <button disabled={loading}>        {loading ? "Sending…" : "Send Transaction"}      </button>
      {error && <p style={{ color: "red" }}>{error.message}</p>}    </div>  );}

Some Aave operations require EIP-712 typed data signatures for the following:

As with useSendTransaction, instantiate the provider-specific useSignTypedData hook to sign typed data.

import { useSignTypedData } from "@aave/react/viem";import { useWalletClient } from "wagmi";
function MyComponent() {  const { data: walletClient } = useWalletClient();  const [signTypedData, sending] = useSignTypedData(walletClient);
  // Use with transaction hooks…}

Then, use the signTypedData function as described in the specific operation guide.

AaveKit uses a functional approach to error handling, it's based on Result<T, E> that represents one of two states:

import { ok, err, Result } from "@aave/react";
function parseNumber(input: string): Result<number, string> {  return isNaN(Number(input))    ? err(new Error("Invalid number"))    : ok(Number(input));}

With a Result<T, E>, you can use the convenient isOk() and isErr() methods to check the outcome and narrow the type.

const result = parseNumber("123");
if (result.isOk()) {  console.log(result.value); // 123} else {  console.error(result.error); // Error}

This approach avoids reliance on try/catch blocks and promotes predictable, type-safe code by ensuring errors are handled explicitly.

ResultAsync<T, E> is the async, thenable variant of Result<T, E>. Awaiting it resolves to a Result<T, E>.

import { ResultAsync } from "@aave/react";
function fetchUser(id: number): ResultAsync<{ name: string }, Error> {  return ResultAsync.fromPromise(    fetch(`/api/users/${id}`).then((r) => r.json()),    () => new Error("Not found"),  );}
const result = await fetchUser(1);
if (result.isOk()) {  console.log(result.value); // { name: "John" }} else {  console.error(result.error); // Error}