Packages

Stacknet provides a set of npm packages for integrating authentication, key management, and content storage into your Stack’s frontend.

@stacknet/userutils

npm

Authentication, session management, and billing for Stacknet apps. Provides Google, Telegram, X, Discord and Web3 wallet login (Solana, Ethereum), cross-domain SSO via auth bridge, and billing/subscription hooks.

Key exports

Export	Description
`UserUtilsProvider`	React context provider — wrap your app with this
`ConnectWidget`	Drop-in wallet connect UI (Phantom, MetaMask)
`useSession`	Read public session state (userId, address, expiresAt)
`useWeb3Wallet`	Wallet connection state and provider detection
`useStackAuth`	Full auth flow (challenge, sign, verify)
`useAuthBridge`	Cross-domain SSO via postMessage
`usePlans`	List available billing plans
`useSubscription`	Current subscription state
`useUsage`	Token usage summary
`useBillingHistory`	Past billing records
`usePrepaidCheckout`	Credit purchase flow

Quick start


import { UserUtilsProvider, ConnectWidget } from '@stacknet/userutils/components'
import { useSession } from '@stacknet/userutils/hooks'
 
function App() {
  return (
    <UserUtilsProvider config={{
      apiBaseUrl: 'https://stacknet.magma-rpc.com',
      stackId: 'your_stack_id',
      theme: 'dark',
    }}>
      <MyApp />
    </UserUtilsProvider>
  )
}
 
function MyApp() {
  const { session, isAuthenticated } = useSession()
 
  if (!isAuthenticated) return <ConnectWidget config={config} />
  return <p>Connected: {session.address}</p>
}

@stacknet/keyutils

npm

Node Key management — purchase, transfer, and marketplace operations. Handles Solana Pay transactions, device fingerprinting, and peer-to-peer key transfers.

Key exports

Export	Description
`TransferPanel`	UI for peer-to-peer key transfers (gifting)
`useTransferKey`	Hook to initiate key transfers
`SolanaPayButton`	Payment button with dual-transfer pattern

Features

Atomic transfers — peer-to-peer key gifting
Solana Pay — solana based transfers
Device fingerprinting — anti-fraud velocity checks
Marketplace — buy/sell keys on the secondary market

Quick start


import { TransferPanel } from '@stacknet/keyutils'
 
function KeyManager({ keyId }: { keyId: string }) {
  return (
    <TransferPanel
      keyId={keyId}
      onSuccess={(txId) => console.log('Transferred:', txId)}
    />
  )
}

@stacknet/rackutils

npm

React hooks and components for Stacknet Racks — the IPFS-backed version control system for skills, tensors, and AI artifacts.

Key exports

Hooks (13):

Hook	Description
`useRackClient`	Core API client (17 methods)
`useRackSession`	API key auth, login/logout, budget tracking
`useRepos`	List repos
`usePaginatedRepos`	Cursor-based infinite scroll
`useRepoTree`	File tree navigation
`useRepoPush`	Push files to a repo
`useRackRegister`	Register skills and tensors
`useSkillStats`	Skill metadata and usage counts
`useTensorStats`	Tensor metadata and size
`useNetworkStats`	Network-wide statistics
`useTrending`	Trending repos
`useStar`	Star/unstar repos

Components (3):

Component	Description
`RackBrowser`	Full repo browser with file tree, skill upload
`Markdown`	Lightweight markdown renderer
`StarButton`	Star/unstar toggle with count

Quick start


import { useRackSession, useRepos } from '@stacknet/rackutils'
 
function RackExplorer() {
  const { session, login } = useRackSession()
  const { repos, loading } = useRepos()
 
  if (!session) return <button onClick={() => login('gk_your_key')}>Connect</button>
 
  return (
    <ul>
      {repos.map(repo => (
        <li key={repo.id}>{repo.name}</li>
      ))}
    </ul>
  )
}

Cost estimation


import { estimateCost } from '@stacknet/rackutils'
 
// Skills: (100 + ceil(bytes/4)) × 1000 tokens
estimateCost('skill', 4096) // → 1,124,000 tokens
 
// Tensors: (100 + ceil(MB)) × 1000 tokens
estimateCost('tensor', 50_000_000) // → 148,000 tokens