Suiet Wallet Kit

Suiet wallet kit is a React toolkit designed for DApps to interact with Sui wallets easily. It provides React Providers, Hooks, and UI components to facilitate connections between DApps and wallet extensions.

Key features include:

• Sui Wallet Standard Support: Automatically detects all installed wallets in a user's browser that implement the Sui Wallet Standard, eliminating the need to manually import specific wallet adapters.
• Integration & Customization: Offers both ready-to-use integration solutions and hooks for custom implementations.

Due to rebranding in the Sui ecosystem, the Suiet Wallet Kit has updated its terminology and presets.

• Sui Wallet extension is now Slush Wallet.
• Stashed Web Wallet is now Slush Web Wallet.

To accommodate these changes, the wallet kit now includes Slush Wallet in its presets and provides a new hook for registering the web wallet.

The JsonRpcProvider interface (accessed via useSuiProvider) is a thin wrapper around the low-level Sui JSON-RPC API.

• Sui JSON-RPC: A low-level API where you must manually specify the RPC endpoint and the exact request/response structure for each method (e.g., using cURL).
• JsonRpcProvider: Provides a high-level developer experience with useful methods and strong TypeScript typings, abstracting away the raw RPC details.

Errors in the Sui SDK follow a BaseError structure, which includes a message, a code (of type ErrorCode), and optional details.

There are two main error categories:

1. KitError: Errors originating from the internal logic of the @suiet/wallet-kit.
2. WalletError: Errors originating from third-party wallet providers.

The Suiet Wallet Kit uses the BEM (Block Element Modifier) naming convention for its CSS classes. This ensures consistent and predictable styling. The structure follows the pattern: .wkit-[block]__[element]--[modifier].

To target a specific block, use the wkit- prefix followed by the block name. For example, to style a button, use the class wkit-button.

<div className="wkit-button">...</div>

To ensure your wallet is auto-detected and recognized as a standard wallet by the Suiet Kit, your wallet adapter must support @mysten/wallet-standard v0.5.0 or higher.

Specifically, your adapter must implement the following features:

• standard:connect
• standard:events
• sui:signAndExecuteTransactionBlock

// a valid wallet adapter should have the following features
{
  // ...
  features: {
    "standard:connect": () => {},
    "standard:events": () => {},
    "sui:signAndExecuteTransactionBlock": () => {},
  }
}

You can customize the theme of @suiet/wallet-kit components to support dark mode by overriding color-related CSS variables.

To support users who have dark mode enabled at the system level, wrap your variable overrides in the @media (prefers-color-scheme: dark) media query. Alternatively, you can use the [data-theme='dark']:root selector if your application manages theme state via a data attribute.

Important: Your dark mode CSS rules must be imported or declared AFTER the default @suiet/wallet-kit CSS file to ensure your overrides take precedence.

@media (prefers-color-scheme: dark) {
  :root {
    --wkit-accent-hs: 166, 91%;
    --wkit-on-accent-rgb: 255, 255, 255;
    --wkit-bg-rgb: 40, 40, 40;
    --wkit-on-bg-rgb: 241, 241, 241;
  }
}

When displaying wallet information in your UI, you can use the following patterns:

1. Connection Status: Access wallet.status to show if the user is connected.
2. Account Address: Use wallet.account.address to get the full hex string. To avoid UI clutter, use the addressEllipsis utility function to show a shortened version (e.g., 0x123...abcd).
3. Chain/Network: Access wallet.chain.name to identify which Sui network (e.g., mainnet, testnet, devnet) the wallet is currently using.

import {
  useWallet,
  addressEllipsis,
} from "@suiet/wallet-kit";

export default function App() {
  const wallet = useWallet();

  return (
    <div>
      <p>Status: {wallet.status}</p>
      {wallet?.account && (
        <p>Address: {addressEllipsis(wallet.account.address)}</p>
      )}
      <p>Network: {wallet.chain.name}</p>
    </div>
  );
}

The Mysten wallet standard has been updated to version 0.5.0. Wallet developers must ensure their wallet adapter supports this version, otherwise the Suiet Kit will not detect the wallet as a valid connection option.

Note: This requirement applies to v0.2.x.