UI Integration Guide for Sui Wallet: Connecting to Apps and Mini Wallets

Introduction

Beyond our SDK, we offer a seamless UI interface for wallet integration. This guide covers how DApps operating within Telegram can leverage both mobile App wallets and the Ouyi Telegram Mini wallet through our UI components.

Installation & Initialization

Ensure your OKX App is updated to version 6.90.1 or later. Integrate OKX Connect using npm:

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

Parameters

Parameter	Description
`dappMetaData`	- `name`: Application name (non-unique identifier)
	- `icon`: URL for 180x180px PNG/ICO icon (SVG not supported)
`actionsConfiguration`	- `modals`: Alert modes ('before', 'success', 'error')
	- `returnStrategy`: Deep link strategy for app wallets (e.g., `tg://resolve`)
`uiPreferences`	- `theme`: Options: `THEME.DARK`, `THEME.LIGHT`, or `'SYSTEM'`
`language`	Default: `'en_US'` (supports 20+ languages)

Example:

OKXUniversalConnectUI.init({
  name: "MyDApp",
  icon: "https://example.com/icon.png"
}, {
  modals: ['before'],
  returnStrategy: 'tg://resolve'
}, {
  theme: 'SYSTEM'
}, 'en_US');

Wallet Connection Flow

Connect to Wallet

Retrieve wallet addresses and transaction-signing parameters:

okxUniversalConnectUI.openModal(connectParams);

Parameters:

namespaces: Required chain info (key: 'sui' for Sui).
optionalNamespaces: Additional chains (e.g., 'eip155' for EVM).
sessionConfig: Post-connection redirect (e.g., 'tg://resolve' for Telegram Mini Apps).

Returns:

topic: Session ID
accounts: Connected wallet addresses

Transaction Handling

Sign Messages

Supported methods: sui_signMessage and sui_signPersonalMessage.

Example:

const signature = await suiProvider.signMessage({
  message: new Uint8Array([...])
});

Broadcast Transactions

Sign and submit transactions to the chain:

Returns:

digest: Transaction hash
txBytes: Raw transaction data

FAQs

How do I check wallet connection status?

Call okxUniversalConnectUI.isConnected()—returns boolean.

Can I switch wallets after connection?

Yes. Disconnect first using okxUniversalConnectUI.disconnect().

What’s the minimum OKX App version required?

Version 6.90.1 or higher.

👉 Explore advanced wallet integrations

Error Handling

Refer to our EVM-compatibility chain documentation for error codes and troubleshooting.

Key Notes:

SVG icons are not supported.
Always handle user rejections gracefully.
Use redirect strategically for Telegram Mini Apps.

For further assistance, consult our developer community.