@suiware/kit

Opinionated React components and hooks for building Sui dApps.

Demo

Installation

pnpm add @suiware/kit @mysten/dapp-kit @mysten/sui @mysten/suins @mysten/wallet-standard @tanstack/react-query

Usage

1. Import styles once in a higher order component

import '@mysten/dapp-kit/dist/index.css'
import '@suiware/kit/main.css'

Like so:

import '@mysten/dapp-kit/dist/index.css'
import '@suiware/kit/main.css'

function App() {
  return (
    <div className="main">
      Hey there!
    </div>
  )
}

2. Wrap your main component into SuiProvider

import '@mysten/dapp-kit/dist/index.css'
import '@suiware/kit/main.css'
import { SuiProvider } from '@suiware/kit'

function App() {
  return (
    <SuiProvider>
      <div className="main">
        Hey there!
      </div>
    </SuiProvider>
  )
}

3. Use @suiware/kit components and hooks

import '@mysten/dapp-kit/dist/index.css'
import '@suiware/kit/main.css'
import { SuiProvider, Balance } from '@suiware/kit'

function App() {
  return (
    <SuiProvider>
      <div className="main">
        Hey there! Your SUI balance is <Balance />
      </div>
    </SuiProvider>
  )
}

API reference

Providers

• SuiProvider

Components

• AddressInput
• AmountInput
• Balance
• Faucet
• NetworkType

Hooks

• useTransact
• useBalance
• useFaucet
• useNetworkType