kinetic-sdk-react

v2.1.0

Published

4 months ago

React hooks and providers for Kinetic SDK

0High
0Medium
0Low

kineticxyz

solana react hooks kinetic defi

kinetic-sdk-react

React hooks and providers for the Kinetic SDK with best-in-class developer experience.

✨ Features

No Wallet Required for Reads - Browse pools without connecting
Single Provider Setup - One provider, no nesting required
Automatic Wallet Conversion - Direct wallet adapter support
TanStack Query Integration - Caching, deduplication, real-time updates (optional)
SSR/Next.js Support - Server-side rendering ready
Built-in DevTools - React Query DevTools in development
Error Boundaries - Graceful error handling
TypeScript First - Full type safety and inference

Installation

npm install @kinetic/react @kinetic/sdk

# Optional: Install TanStack Query for enhanced features
npm install @tanstack/react-query

Quick Start

Simplest Setup

import { KineticProvider } from '@kinetic/react';
import { useWallet } from '@solana/wallet-adapter-react';

function App() {
  const wallet = useWallet(); // Direct wallet adapter support!

  return (
    <KineticProvider 
      network="devnet"
      wallet={wallet}
      enableDevtools
    >
      <YourApp />
    </KineticProvider>
  );
}

That's it! No wallet conversion, no nested providers, just works.

Config Object Pattern

const config = {
  network: 'mainnet-beta',
  wallet: useWallet(),
  endpoint: process.env.RPC_ENDPOINT,
  enableDevtools: true,
  enableErrorBoundary: true,
  ssr: true, // Next.js support
};

<KineticProvider {...config}>
  <App />
</KineticProvider>

Pre-configured Provider

// Create once in your app
const AppProvider = createKineticProvider({
  network: 'mainnet-beta',
  endpoint: 'https://api.mainnet-beta.solana.com',
  enableDevtools: process.env.NODE_ENV === 'development',
});

// Use throughout your app
function App() {
  const wallet = useWallet();
  return (
    <AppProvider wallet={wallet}>
      <YourApp />
    </AppProvider>
  );
}

Usage

Read Operations (No Wallet Required!)

function PoolList() {
  // Works immediately without wallet!
  const { pools, isLoading } = usePools({
    sortBy: 'tvl',
    sortOrder: 'desc',
  });

  const { pool } = usePool('pool-address');

  return (
    <div>
      {pools.map(pool => (
        <PoolCard key={pool.publicKey} pool={pool} />
      ))}
    </div>
  );
}

Write Operations (Wallet Required)

function SwapButton() {
  const { connected } = useWallet();
  const { swap, isLoading } = useSwap({
    onSuccess: (tx) => toast.success(`Swap complete: ${tx}`),
  });

  return (
    <button 
      onClick={() => swap({ ...params })}
      disabled={!connected || isLoading}
    >
      {connected ? 'Swap' : 'Connect Wallet'}
    </button>
  );
}

Next.js Integration

App Router (Next.js 13+)

// app/providers.tsx
'use client';

import { KineticProvider } from '@kinetic/react';
import { useWallet } from '@solana/wallet-adapter-react';

export function Providers({ children }: { children: React.ReactNode }) {
  const wallet = useWallet();

  return (
    <KineticProvider
      network="mainnet-beta"
      wallet={wallet}
      ssr // Enable SSR support
      enableDevtools={false} // Disable in production
    >
      {children}
    </KineticProvider>
  );
}

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <WalletProvider>
          <Providers>{children}</Providers>
        </WalletProvider>
      </body>
    </html>
  );
}

Pages Router (Next.js 12)

// pages/_app.tsx
import { KineticProvider } from '@kinetic/react';
import { useWallet } from '@solana/wallet-adapter-react';

function MyApp({ Component, pageProps }) {
  const wallet = useWallet();

  return (
    <KineticProvider 
      network="mainnet-beta"
      wallet={wallet}
      ssr
    >
      <Component {...pageProps} />
    </KineticProvider>
  );
}

Advanced Features

Custom Error Handling

<KineticProvider
  wallet={wallet}
  enableErrorBoundary
>
  <ErrorBoundary
    fallback={(error, reset) => (
      <CustomErrorPage error={error} onReset={reset} />
    )}
  >
    <App />
  </ErrorBoundary>
</KineticProvider>

Custom Query Client

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10_000,
      gcTime: 30 * 60 * 1000,
    },
  },
});

<KineticProvider
  wallet={wallet}
  queryClient={queryClient}
>
  <App />
</KineticProvider>

Testing

// Mock setup for tests
const mockProvider = createKineticProvider({
  network: 'localnet',
  enableDevtools: false,
  enableErrorBoundary: false,
});

render(
  <mockProvider>
    <ComponentToTest />
  </mockProvider>
);

TanStack Query Support

The package automatically detects if TanStack Query is installed:

With TanStack Query (Recommended)

✅ Request deduplication
✅ Intelligent caching
✅ Background refetching
✅ Optimistic updates
✅ React Query DevTools
✅ Infinite queries
✅ Prefetching

Without TanStack Query (Lite Mode)

✅ All basic functionality works
✅ Smaller bundle size
❌ No automatic caching
❌ No request deduplication
❌ Manual state management needed

API Reference

Provider Props

interface KineticConfig {
  // Network
  network?: 'mainnet-beta' | 'devnet' | 'testnet' | 'localnet';
  endpoint?: string;
  connection?: Connection;

  // Wallet (optional)
  wallet?: WalletAdapter | AnchorWallet;

  // Advanced
  queryClient?: QueryClient;
  programId?: PublicKey;

  // Features
  enableDevtools?: boolean;
  enableErrorBoundary?: boolean;
  ssr?: boolean;
}

Available Hooks

Queries (No Wallet Required)

usePool(address) - Single pool with real-time updates
usePools(filter?) - All pools with filtering
useInfinitePools(size) - Paginated pools
usePrefetchPool() - Prefetch on hover

Mutations (Wallet Required)

useSwap() - Token swaps
useAddLiquidity() - Add liquidity
useRemoveLiquidity() - Remove liquidity
useCreatePool() - Create new pool

Utilities

useKinetic() - Access context
useWallet() - Wallet info
useWalletRequired() - Throws if not connected
useQueryClient() - Access TanStack Query client

Performance

Automatic Optimizations

Request deduplication
Smart caching (5s stale, 10min cache)
Background refetching
Optimistic updates
Real-time subscriptions

Manual Optimizations

// Prefetch on hover
<Link onMouseEnter={() => prefetch(poolId)}>
  View Pool
</Link>

// Infinite scroll
const { pools, fetchNextPage } = useInfinitePools(20);

// Custom cache times
const { pool } = usePool(address, {
  staleTime: 10_000,
  gcTime: 60_000,
});

Why This Architecture?

Based on feedback from production users:

Single Provider - No more provider nesting confusion
Direct Wallet Support - No manual conversion needed
SSR Ready - Works with Next.js out of the box
Progressive Enhancement - Works without wallet, better with it
Developer Experience - Clean API, great defaults, helpful errors

License

Apache-2.0

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

kinetic-sdk-react

✨ Features

Installation

Quick Start

Simplest Setup

Config Object Pattern

Pre-configured Provider

Usage

Read Operations (No Wallet Required!)

Write Operations (Wallet Required)

Next.js Integration

App Router (Next.js 13+)

Pages Router (Next.js 12)

Advanced Features

Custom Error Handling

Custom Query Client

Testing

TanStack Query Support

With TanStack Query (Recommended)

Without TanStack Query (Lite Mode)

API Reference

Provider Props

Available Hooks

Queries (No Wallet Required)

Mutations (Wallet Required)

Utilities

Performance

Automatic Optimizations

Manual Optimizations

Why This Architecture?

License