React#Copy

AaveKit React is a collection of React hooks for building decentralized applications on top of the Aave Protocol. It provides a simple and type-safe way to interact with Aave markets, manage user positions, and execute transactions.

To get started, follow the steps below.

npm install @aave/react@latest

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 { useAaveChains } from "@aave/react";
export function SupportedChains() {  const { data: chains } = useAaveChains();
  return (    <div>      <h2>Supported Chains</h2>      {chains?.map((chain) => (        <div key={chain.id}>          <h3>{chain.name}</h3>          <p>Chain ID: {chain.id}</p>        </div>      ))}    </div>  );}

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

npm install viem@2

To send transactions through the connected wallet, use the useSendTransaction action hook.

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

This hook abstracts the wallet interaction and provides a simple interface for submitting transactions.

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

Then, use it as describe in the specific page.

Aave makes use of EIP-2612 to allow users to avoid ERC-20 approval before sending transactions.

Use the 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.

All read hooks (market data, user positions, etc.) support two ways of operating: loading state and React Suspense.

Handle loading state manually in your component:

function ChainsList() {  const { data, loading, error } = useAaveChains();
  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>  );}

Let React handle loading states automatically through a Suspense boundary.

// Component - no loading states neededfunction ChainsList() {  const { data: chains } = useAaveChains({    suspense: true, // Enable suspense mode  });
  return (    <div>      {chains.map((chain) => (        <div key={chain.id}>{chain.name}</div>      ))}    </div>  );}
// Parent - wrap with Suspense boundaryfunction ChainsPage() {  return (    <Suspense fallback={<div>Loading …</div>}>      <ChainsList />    </Suspense>  );}

You can handle errors in the parent component by wrapping the component with a Error boundary component.

import { ErrorBoundary } from "react-error-boundary";
// …
function ChainsPage() {  return (    <ErrorBoundary fallback={<p>⚠️Something went wrong</p>}>      <Suspense fallback={<div>Loading …</div>}>        <ChainsList />      </Suspense>    </ErrorBoundary>  );}

AaveKit React provides action hooks that are designed to be triggered manually when you need to perform an operation. Action hooks return an execute function and a state object.

const [execute, state] = useActionHook();

The execute function returns a ResultAsync<T, E>, a thenable object that represents one of two states:

Awaiting a ResultAsync<T, E> resolves to a Result<T, E>.

With a Result<T, E>, you can use the convenient isOk() and isErr() methods to check the outcome and narrow the type.
If you have a ResultAsync<T, E>, you must first await it to access those methods.

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

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

The state object returned by action hooks provides information about the current operation status:

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

Where:

Transaction hooks are a specific type of action hook that handle protocol interactions like supply, borrow, withdraw, repay, and more.

There are two types of transaction hooks:

To handle a simple transaction hook, follow the steps below.

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

const result = await prepare(/* args */).andThen(sendTransaction);

const loading = preparing.loading && sending.loading;const error = preparing.error || sending.error;

if (result.isErr()) {  switch (result.error.name) {    case "SigningError":      // Most likely the user rejected the transaction      console.error(`Failed to sign the transaction: ${error.message}`);      break;
    case "TimeoutError":      console.error(`Transaction timed out: ${error.message}`);      break;
    case "TransactionError":      console.error(`Transaction failed: ${error.message}`);      break;
    case "UnexpectedError":      console.error(error.message);      break;  }} else {  console.log("Transaction sent with hash:", result.value);}

To handle a complex transaction hook, follow the steps below.

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

const loading = preparing.loading && sending.loading;const error = preparing.error || sending.error;

import { errAsync } from "@aave/react";
const result = await prepare(/* args */).andThen((plan) => {  switch (plan.__typename) {    case "TransactionRequest":      return sendTransaction(plan);
    case "ApprovalRequired":      return sendTransaction(plan.approval).andThen(() =>        sendTransaction(plan.originalTransaction)      );
    case "InsufficientBalanceError":      return errAsync(        new Error(`Insufficient balance: ${plan.required.value} required.`)      );  }});
// …

if (result.isErr()) {  switch (result.error.name) {    case "SigningError":      // Most likely the user rejected the transaction      console.error(`Failed to sign the transaction: ${error.message}`);      break;
    case "TimeoutError":      console.error(`Transaction timed out: ${error.message}`);      break;
    case "TransactionError":      console.error(`Transaction failed: ${error.message}`);      break;
    case "UnexpectedError":      console.error(error.message);      break;  }} else {  console.log("Transaction sent with hash:", result.value);}