Sui Wallet Integration

Sui Wallet Integration

Provides expert guidance for integrating wallet functionality into Sui decentralized applications using the dApp Kit. This skill covers wallet connection, transaction signing, React hooks, and frontend wallet patterns.

Overview

The Sui dApp Kit (@mysten/dapp-kit) is the official library for building wallet-enabled frontend applications on Sui. It provides React components, hooks, and utilities for seamless wallet integration.

Key features:

• Wallet connection - Connect to multiple wallet providers
• React hooks - Access wallet state and blockchain data
• Transaction signing - Sign and execute transactions from frontend
• Auto-reconnection - Persist wallet sessions across page reloads
• Multi-wallet support - Compatible with all standard Sui wallets

Official documentation: https://sdk.mystenlabs.com/dapp-kit

Installation

Install Required Packages

# Using npm
npm install @mysten/dapp-kit @mysten/sui @tanstack/react-query

# Using yarn
yarn add @mysten/dapp-kit @mysten/sui @tanstack/react-query

# Using pnpm
pnpm add @mysten/dapp-kit @mysten/sui @tanstack/react-query

Dependencies:

• @mysten/dapp-kit - Main dApp Kit library
• @mysten/sui - Sui TypeScript SDK
• @tanstack/react-query - Required peer dependency for data fetching

Supported Wallets

The dApp Kit automatically supports all Sui standard wallets:

• Sui Wallet (official)
• Suiet Wallet
• Ethos Wallet
• Martian Wallet
• Morphis Wallet
• Surf Wallet
• Glass Wallet
• OneKey Wallet

No additional configuration needed - wallets are detected automatically.

Setup

Provider Configuration

Wrap application with required providers:

import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { SuiJsonRpcClient } from '@mysten/sui/jsonRpc';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

// Network configuration with BOTH required parameters
const networks = {
  testnet: new SuiJsonRpcClient({
    network: 'testnet', // REQUIRED: Network identifier
    url: 'https://fullnode.testnet.sui.io:443', // REQUIRED: RPC endpoint
  }),
  mainnet: new SuiJsonRpcClient({
    network: 'mainnet',
    url: 'https://fullnode.mainnet.sui.io:443',
  }),
  devnet: new SuiJsonRpcClient({
    network: 'devnet',
    url: 'https://fullnode.devnet.sui.io:443',
  }),
};

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SuiClientProvider networks={networks} defaultNetwork="testnet">
        <WalletProvider autoConnect>
          <YourApp />
        </WalletProvider>
      </SuiClientProvider>
    </QueryClientProvider>
  );
}