Skip to main content

Quick Start: Sui

Let's integrate WaaP with Sui in less than 5 minutes.

WaaP implements the Sui Wallet Standard, so it works seamlessly with @mysten/sui, @mysten/dapp-kit and other Sui wallet adapters that supports the Sui Wallet Standard.

Looking for EVM?

See Quick Start: EVM for integrating WaaP with Ethereum, Polygon, Optimism, and other EVM chains.

What you'll need​

  • Node.js version 18.0 or above
  • Install the required packages:
npm install @human.tech/waap-sdk @mysten/dapp-kit @mysten/sui @tanstack/react-query

Basic Integration​

1. Initialize WaaP with initWaaPSui​

Call initWaaPSui to create the WaaP Sui wallet, then register it with the Sui Wallet Standard so dapp-kit and other adapters can discover it:

import { initWaaPSui } from '@human.tech/waap-sdk'
import { registerWallet } from '@mysten/wallet-standard'

const wallet = initWaaPSui({
  config: {
    authenticationMethods: ['email', 'phone', 'social'],
    allowedSocials: ['google', 'twitter', 'discord'],
    styles: { darkMode: true },
  },
  useStaging: false,
})

// Register with Wallet Standard so dapp-kit and other adapters can discover it
registerWallet(wallet as any)

Now WaaP is embedded in your dApp and ready for use.

2. Set up providers​

Wrap your app with the required context providers (SuiClientProvider, WalletProvider, QueryClientProvider). A typical setup:

import { ReactNode, useEffect, useState } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import {
  SuiClientProvider,
  WalletProvider,
  createNetworkConfig,
} from '@mysten/dapp-kit'
import { getFullnodeUrl } from '@mysten/sui/client'
import { registerWallet } from '@mysten/wallet-standard'
import { initWaaPSui } from '@human.tech/waap-sdk'

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

const { networkConfig } = createNetworkConfig({
  mainnet: { url: getFullnodeUrl('mainnet') },
  testnet: { url: getFullnodeUrl('testnet') },
  devnet: { url: getFullnodeUrl('devnet') },
})

const queryClient = new QueryClient()

let walletInstance: ReturnType<typeof initWaaPSui> | null = null

export function getWaaPSuiWallet() {
  return walletInstance
}

export function Providers({ children }: { children: ReactNode }) {
  const [isReady, setIsReady] = useState(false)

  useEffect(() => {
    const wallet = initWaaPSui({
      config: {
        authenticationMethods: ['email', 'phone', 'social'],
        allowedSocials: ['google', 'twitter', 'discord'],
        styles: { darkMode: true },
      },
      useStaging: false,
    })

    walletInstance = wallet
    registerWallet(wallet as any)
    setIsReady(true)
  }, [])

  if (!isReady) return <div>Loading...</div>

  return (
    <QueryClientProvider client={queryClient}>
      <SuiClientProvider networks={networkConfig} defaultNetwork="mainnet">
        <WalletProvider autoConnect={true}>
          {children}
        </WalletProvider>
      </SuiClientProvider>
    </QueryClientProvider>
  )
}

3. Use providers in your app​

Wrap your application with the Providers component:

import { Providers } from './Providers'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}

4. Connect wallet​

Use the ConnectButton from @mysten/dapp-kit to let users connect:

import { ConnectButton, useCurrentAccount } from '@mysten/dapp-kit'

export function ConnectWallet() {
  const account = useCurrentAccount()

  return (
    <div>
      <ConnectButton />
      {account && <div>Connected: {account.address}</div>}
    </div>
  )
}

WaaP will appear in the list of available wallets when the ConnectButton is clicked.

Customize WaaP with Playground​

Playground: customize your WaaP

On Playground, visually customize WaaP and get ready-to-use code initWaaP / initWaaPSui config.

Sign a Message​

import { useSignPersonalMessage } from '@mysten/dapp-kit'

export function SignMessage() {
  const { mutate: signPersonalMessage } = useSignPersonalMessage()

  const handleSign = () => {
    signPersonalMessage(
      {
        message: new TextEncoder().encode('Hello, WaaP!'),
      },
      {
        onSuccess: (result) => {
          console.log('Signature:', result.signature)
        },
        onError: (error) => {
          console.error('Sign failed', error)
        },
      },
    )
  }

  return <button onClick={handleSign}>Sign Message</button>
}

For more details, see the Sign Messages guide.

Send a Transaction​

import { useSignAndExecuteTransaction } from '@mysten/dapp-kit'
import { Transaction } from '@mysten/sui/transactions'

export function SendTransaction() {
  const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction()

  const sendSui = () => {
    const tx = new Transaction()
    const [coin] = tx.splitCoins(tx.gas, [1000])
    tx.transferObjects([coin], '0xRecipientAddress...')

    signAndExecuteTransaction(
      { transaction: tx },
      {
        onSuccess: (result) => {
          console.log('Transaction executed:', result.digest)
        },
        onError: (error) => {
          console.error('Transaction failed:', error)
        },
      },
    )
  }

  return <button onClick={sendSui}>Send 1000 MIST</button>
}

For more details, see the Transactions guide.

Next Steps​

  • Methods — Complete reference for Wallet Standard and WaaP-specific methods
  • Sign Messages — Signing personal messages with standard and dapp-kit approaches
  • Transactions — Signing and executing transactions, including legacy methods
  • Networks — Supported networks and switching between them

Get Support​

Questions or Trouble Integrating?

Please join our developer Telegram group and get in touch with us.