SmartKit

Docs

Installation

Quick Start

Create a sui dapp using smartkit with create command.

npm init @heapup/smartkit
# or
pnpm create @heapup/smartkit
# or
yarn create @heapup/smartkit
# or
bun create @heapup/smartkit

Manual Installation

To manually add smartkit to your project, install the required packages.

pnpm i @heapup/smartkit @heapup/smartkit-hooks @mysten/sui.js

Configure Providers

if you are using Next.js. you will need to include the "use client" directive at the beginning of this file.

import '@heapup/smartkit/styles.css'
import { SmartKitProvider } from '@heapup/smartkit'
import { SmartKitClientProvider, createConfig } from '@heapup/smartkit-hooks'
import { getFullnodeUrl, SuiClient } from '@mysten/sui.js/client'
 
const client = new SuiClient({
  url: getFullnodeUrl('mainnet')
})
 
const config = createConfig({
  suiClient: client
})
 
export default function Providers({ children }: React.PropsWithChildren<{}>) {
  return (
    <SmartKitClientProvider config={config}>
      <SmartKitProvider theme="default">{children}</SmartKitProvider>
    </SmartKitClientProvider>
  )
}

SmartKitClientProvider has built-in with TanStack Query, but if you want to use your own TanStack Query, you can do it like this:

pnpm i @tanstack/react-query

then, wrap QueryClientProvider outside SmartKitClientProvider

export default function Providers({ children }: React.PropsWithChildren<{}>) {
  return (
    <QueryClientProvider client={new QueryClient()}>
      <SmartKitClientProvider config={config}>
        <SmartKitProvider theme="default">{children}</SmartKitProvider>
      </SmartKitClientProvider>
    </QueryClientProvider>
  )
}