Integrating Sui Wallet with DApps: A Comprehensive Guide

Introduction

This guide provides step-by-step instructions for DApp developers to integrate Sui wallet functionality using OKX's UI components. The solution supports both mobile app wallets and Telegram Mini Wallet connectivity.

Installation and Initialization

To begin integration, ensure OKX App version 6.90.1 or later is installed. Integrate OKX Connect into your DApp using npm:

OKXUniversalConnectUI.init(dappMetaData, actionsConfiguration, uiPreferences, language)

Parameters

• dappMetaData (object):

  • name: Your application name (non-unique identifier)
  • icon: URL to your app icon (180x180px PNG recommended)

• actionsConfiguration (object):

  • modals: Transaction alert display modes ('before'|'success'|'error'[] or 'all')
  • returnStrategy: Deep link return policy for app wallets
  • tmaReturnUrl: Return policy for Telegram Mini Wallet ('back'|'none'|deeplink)

• uiPreferences (object):

  • theme: UI theme (DARK/LIGHT/SYSTEM)
• language: Supported language codes (default: en_US)

Wallet Connection

Establish wallet connection to obtain addresses for transaction signing:

okxUniversalConnectUI.openModal(connectParams: ConnectParams);

Connection Parameters

• namespaces: Required connection info (Sui chain key: "sui")
• chains: Array of chain IDs
• optionalNamespaces: Additional connection info
• sessionConfig: Post-connection redirect configuration

👉 Learn advanced wallet connection techniques

Wallet Connection with Signature

Connect wallet and sign data in one operation:

// Example signature request
{
  method: "sui_signMessage",
  chainId: "sui:mainnet",
  params: [messageData]
}

Wallet Status Management

Check Connection Status

const isConnected = okxUniversalConnectUI.isConnected();

Disconnect Wallet

okxUniversalConnectUI.disconnect();

Transaction Operations

Account Information

const accountInfo = suiProvider.getAccount();
// Returns { address, publicKey }

Message Signing

Supported methods:

• sui_signMessage
• sui_signPersonalMessage

const signedMessage = await suiProvider.signMessage({
  message: messageData
});

Transaction Signing and Broadcasting

const txResult = await suiProvider.signAndSendTransaction(txData);
// Returns { digest, txBytes }

Event Handling

Refer to EVM-compatible chain documentation for event handling details.

Error Codes

Standard error codes align with EVM-compatible chain implementations.

FAQ Section

Q: Can I use both mobile app and Telegram Mini Wallet simultaneously?

A: Yes, the system automatically detects the environment and provides appropriate wallet options.

Q: What's the maximum transaction size supported?

A: The system handles standard Sui transaction sizes with additional optimizations for large payloads.

Q: How do I handle user rejection of transactions?

A: The SDK provides clear error codes (e.g., "USER_REJECTED") for proper flow control.

👉 Explore more Sui integration examples

Q: Is there rate limiting for API calls?

A: Standard API limits apply, with recommended 5-second intervals between sensitive operations.

Q: Can I customize the wallet connection UI?

A: Limited theming options are available through the uiPreferences parameter.

Q: How do I test in development environment?

A: Use Sui testnet chain IDs and development builds of the OKX wallet.