React

The Helix React SDK is a streamlined toolkit composed of React hooks designed for developers building decentralized applications on top of the Helix Protocol. It offers an intuitive, type-safe interface for connecting directly to Helix markets, allowing developers to easily read market data, manage user portfolios, and perform on-chain actions such as supplying, borrowing, or repaying assets.

By abstracting complex smart contract interactions, the Helix React SDK simplifies dApp development while maintaining full composability and security. It empowers developers to deliver seamless, responsive user experiences that integrate Helix’s liquidity and lending functionalities directly into any Web3 application.

Getting Started

To get started, follow the steps below.

1

Install SDK

First, install the Helix React SDK packages using your package manager of choice.

• npm

• yarn

• pnpm

npm install @helix-markets/react@latest

2

Set up client

Then, create an HelixClient instance that will be used to interact with the protocol.

client.ts

import { AaveClient } from "@helix-markets/react";
export const client = HelixClient.create();

You don't need to install the @helix-markets/client package as it's already included and re-exported by the @helix-markets/react package.

3

Set up provider

Next, wrap your app with the <HelixProvider> component and pass the client instance.

App.tsx

import { HelixProvider } from "@helix-markets/react";

import { client } from "./client";

export function App() {
  return (
    <HelicProvider client={client}>
      {/* Your application components */}
    </HelixProvider>
  );
}

4

Start building

That's it—you can now start using the Helix React SDK.

import { useAaveChains } from "@helix-markets/react";

export function SupportedChains() {
  const { data: chains } = useHelixChains();

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

Integrations

The Helix React SDK includes first-class support for viem, ethers v6, Privy, and thirdweb.

viem

npm install viem@2

Ethers

Privy

thirdweb

Send Helix Transactions

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.