Getting Started

Installation

Install wankmi and its peer dependencies:

npm install @wankmi/wankmi @solana/web3.js @tanstack/react-query

Quick Start

Wrap your app with `WankmiProvider`

WankmiProvider sets up the Solana connection and makes it available to all hooks in the tree. It also creates a QueryClient internally — you don't need to add one yourself unless you want to share it with other TanStack Query usage.

app.tsx

import { WankmiProvider } from '@wankmi/wankmi'
 
export default function App({ children }) {
  return (
    <WankmiProvider endpoint="https://api.devnet.solana.com">
      {children}
    </WankmiProvider>
  )
}

For mainnet, swap the endpoint:

<WankmiProvider endpoint="https://api.mainnet-beta.solana.com">

Or use a custom RPC (recommended for production):

<WankmiProvider endpoint="https://your-rpc.helius.xyz/?api-key=...">

Connect a wallet

Use the useWallet hook to connect and access the user's public key:

ConnectButton.tsx

import { useWallet } from '@wankmi/wankmi'
 
export function ConnectButton() {
  const { connect, disconnect, connected, publicKey } = useWallet()
 
  if (connected) {
    return (
      <div>
        <p>{publicKey?.toBase58()}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    )
  }
 
  return <button onClick={connect}>Connect Wallet</button>
}

Read on-chain data

Balance.tsx

import { useWallet, useSolBalance } from '@wankmi/wankmi'
 
export function Balance() {
  const { publicKey } = useWallet()
  const { data: balance, isLoading } = useSolBalance({ address: publicKey })
 
  if (isLoading) return <p>Loading...</p>
 
  return <p>{balance} SOL</p>
}

TypeScript

wankmi is written in TypeScript and ships its own types. No @types/ package needed.

Requires TypeScript 5.0 or higher and "moduleResolution": "bundler" or "node16" in your tsconfig.json.

Next.js

wankmi works with Next.js App Router and Pages Router. If you're using App Router, mark the provider component as a client component:

providers.tsx

'use client'
 
import { WankmiProvider } from '@wankmi/wankmi'
 
export function Providers({ children }) {
  return (
    <WankmiProvider endpoint="https://api.devnet.solana.com">
      {children}
    </WankmiProvider>
  )
}

app/layout.tsx

import { Providers } from './providers'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Introduction Overview