GitHub - Kronos-Guild/framework-kit: Framework for Solana dApps: orchestrates wallets, transactions, and reactive freshness-aware data flows out of the box. (original) (raw)

@solana/client:

@solana/react-hooks:

React hooks for Solana. Connect wallets, fetch balances, and send transactions with minimal setup.

Why Framework-kit?

Building Solana dApps usually means wiring together RPC connections, wallet adapters, and state management yourself. Framework-kit handles this for you:

• One provider, many hooks — Wrap your app once with SolanaProvider, then use hooks anywhere
• Wallet connection built-in — useWalletConnection handles discovery, connection, and disconnection
• Automatic data refresh — Balances and account data stay in sync without manual refetching
• Common operations simplified — useSolTransfer, useSplToken, and useTransactionPool for transfers and custom transactions
• TypeScript-first — Full type inference out of the box

Packages

• @solana/client – Core library for wallet connection, transactions, and RPC. Works with any framework or standalone.
• @solana/react-hooks – React hooks and provider. Wrap your app once, then use hooks like useBalance and useSolTransfer.

Examples

• @solana/example-vite-react – Vite + Tailwind demo
• @solana/example-nextjs – Next.js (App Router) demo

Install

npm install @solana/client @solana/react-hooks

React quick start

Add this to your main App file (e.g., App.tsx). You'll need a Solana wallet extension like Phantom installed in your browser.

import { autoDiscover, createClient } from "@solana/client"; import { SolanaProvider, useWalletConnection } from "@solana/react-hooks";

// Create a client pointing to Solana devnet const client = createClient({ endpoint: "https://api.devnet.solana.com", walletConnectors: autoDiscover(), // Finds installed wallet extensions });

function WalletButtons() { // This hook gives you everything you need for wallet connection const { connectors, connect, connecting } = useWalletConnection(); return ( <> {connectors.map((connector) => ( <button key={connector.id} disabled={connecting} onClick={() => connect(connector.id)} > {connector.name} ))} </> ); }

export function App() { return ( ); }

Run your app and you should see buttons for each detected wallet. Click one to connect.

Next.js note: Components using these hooks must be marked with 'use client' at the top of the file.

Learn more

• Documentation — full guides and API reference
• Full hooks documentation — all available hooks and options
• Client API — use the client without React