genera-sdk-react

React SDK for Genera Protocol with hooks and components for lending/borrowing operations.

Installation

npm install genera-sdk-react

Usage

Styles

The SDK includes built-in styles that need to be imported:

// Import the styles in your app
import 'genera-sdk-react/dist/styles.css';

Provider Setup

import { GeneraProvider } from 'genera-sdk-react';
import { createConfig, http } from 'wagmi';
import { QueryClient } from '@tanstack/react-query';
import { mainnet } from 'viem/chains';

const queryClient = new QueryClient();
const wagmiConfig = createConfig({
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
});

function App() {
  return (
    <GeneraProvider wagmiConfig={wagmiConfig} queryClient={queryClient}>
      {/* Your app */}
    </GeneraProvider>
  );
}

Hooks

import { useSupply, useBorrow, useWithdraw, useRepay } from 'genera-sdk-react';

function Market() {
  const { supply, isSupplying } = useSupply({
    cToken: '0x...',
    underlying: '0x...',
    decimals: 18,
  });

  const handleSupply = () => {
    supply('100'); // Supply 100 tokens
  };

  return (
    <button onClick={handleSupply} disabled={isSupplying}>
      {isSupplying ? 'Supplying...' : 'Supply'}
    </button>
  );
}

Components

GeneraWidget

High-level market list with built-in Supply and Borrow flows.

import { GeneraWidget } from 'genera-sdk-react';

function Markets() {
  return (
    <div style={{ maxWidth: 960 }}>
      <GeneraWidget
        searchQuery="USDC" // optional: filter visible markets
        onActionComplete={() => {
          // optional: called after a successful deposit/borrow action
          console.log('Action completed');
        }}
      />
    </div>
  );
}

Props:

• searchQuery?: string
• onActionComplete?: () => void

Requires the GeneraProvider to be set up as shown above.