React

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.id}>          <h3>{chain.name}</h3>          <p>Chain ID: {chain.chainId}</p>        </div>      ))}    </div>  );}

Hooks in the SDK follow clear usage patterns you can apply in your app.

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

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.id}>{chain.name}</div>      ))}    </div>  );}

Aave React read hooks support pausing—a powerful pattern that lets you temporarily suspend 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 clearly signals when a hook is inactive and lets TypeScript precisely narrow types between paused and active states.

const { data, loading, error, paused } = useChains({ pause: !connected });
// …
// data: AaveChain[] | 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: AaveChain[] (guaranteed to be defined)

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 and thirdweb.

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((request) =>  sendTransaction(request));

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

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

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

Some Aave operations support permit functionality using EIP-2612 signatures to authorize ERC-20 token transfers within the same transaction. The permit approach has a few benefits:

As with useSendTransaction, use the provider-specific useERC20Permit hook to sign ERC-20 permits.

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

Then, use the signPermit 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}