Integrate Sui Wallet with UI: Connect Web3 Apps & Mini Wallets Seamlessly

In today’s fast-evolving Web3 ecosystem, seamless wallet integration is no longer optional—it's essential. For developers building decentralized applications (DApps) on the Sui blockchain, offering a smooth, user-friendly connection experience can dramatically improve engagement and retention. With OKX Connect UI, you can effortlessly integrate Sui-compatible wallets into your DApp, supporting both mobile app connections and Telegram Mini Wallets for in-app interactions.

Whether your DApp runs natively or within Telegram, OKX’s universal interface enables users to connect via the OKX App or stay directly inside Telegram using the OKX Telegram Mini Wallet—all without friction.

👉 Discover how to enable one-click wallet access for your Sui-based DApp

Installation and Initialization

Before integrating the UI, ensure that users have OKX App version 6.90.1 or higher installed. This guarantees compatibility with the latest features and security updates.

To begin, install the SDK via npm:

npm install @okxweb3/connect-ui

After installation, initialize the OKXUniversalConnectUI object. This instance will manage all UI-driven interactions, including wallet connection, transaction signing, and session handling.

Initialize the UI Instance

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

Parameters

• dappMetaData (object)

  • name: DApp name (non-unique identifier)
  • icon: URL of your DApp’s icon (PNG or ICO format recommended; 180x180px ideal)

• actionsConfiguration (object)

  • modals: Controls when modals appear during transactions. Options: 'before', 'success', 'error', or 'all'. Default: 'before'
  • returnStrategy: Deep link strategy for app wallets after user action ('none' or custom scheme like tg://resolve)
  • tmaReturnUrl: Behavior after signing in Telegram Mini Apps. Use 'back' to return to DApp, 'none' to stay in wallet. Default: 'back'

• uiPreferences (object)

  • theme: Set UI theme: THEME.DARK, THEME.LIGHT, or "SYSTEM" for auto-detection
• language (string)
  Supported locales: "en_US", "zh_CN", "ru_RU", "es_ES", "fr_FR", and more. Defaults to "en_US"

Returns

An initialized OKXUniversalConnectUI instance for further operations.

Connect Wallet

Connecting a wallet allows your DApp to retrieve the user’s address—essential for identification and signing transactions.

Use the following method to open the connection modal:

okxUniversalConnectUI.openModal(connectParams);

Parameters

• connectParams (ConnectParams)

  • namespaces: Required namespace(s). For Sui: { sui: { chains: ['sui:testnet'] } }

    If any requested chain isn't supported, connection fails.

  • optionalNamespaces: Optional chains (e.g., { sui: { chains: ['sui:mainnet'] } }). Connection proceeds even if these aren't supported.

  • sessionConfig:

    • redirect: Post-connection redirect URL. In Telegram Mini Apps, use deep links like tg://resolve.

Returns (Promise)

Upon successful connection:

• topic: Session identifier
• namespaces: Active namespaces
• chains: Connected chain IDs
• accounts: User wallet addresses
• methods: Supported methods (e.g., sui_signMessage)
• defaultChain: Default chain for session
• dappInfo: Registered DApp metadata

This structured response ensures your app can dynamically adapt based on user capabilities.

Connect and Sign in One Step

For enhanced UX, combine wallet connection with an immediate signing request—ideal for login flows or authentication.

okxUniversalConnectUI.openModal(connectParams, signRequest);

Additional Parameter

• signRequest (RequestParams[])
  Only one method allowed per request:

  • method: Must be "sui_signMessage" or "sui_signPersonalMessage"
  • chainId: Chain where operation occurs (must exist in namespaces)
  • params: Method-specific input (e.g., message bytes)

The signature result is delivered via the connect_signResponse event.

Use Case Example

Authenticate users by requesting a signature on a unique challenge string. Once verified, grant access—no password needed.

👉 Learn how to implement secure, non-custodial login with Sui

Check Connection Status

Verify whether a wallet is currently connected:

okxUniversalConnectUI.isConnected();

Returns

• boolean: true if connected, false otherwise

Use this before sensitive operations to ensure session validity.

Disconnect Wallet

Allow users to end their session securely:

okxUniversalConnectUI.disconnect();

This removes all session data and clears the connection. Always call this before attempting to switch accounts or reconnect.

Prepare and Send Transactions

After connection, create a provider instance to interact with the Sui network:

const suiProvider = new OKXSuiProvider(okxUniversalConnectUI);

This provider enables account queries and transaction handling.

Get Account Information

Retrieve the connected user’s details:

const account = await suiProvider.getAccount();

Returns

• address: User’s Sui wallet address
• publicKey: Public key (requires OKX App v6.92.0+)

This data powers personalized experiences—from balance displays to NFT galleries.

Sign Messages

Support secure messaging and authentication with two signing methods.

1. Sign Message

const result = await suiProvider.signMessage({ message: new TextEncoder().encode("Hello Sui") });

Returns

• messageBytes: Hex-encoded message
• signature: Signed payload

2. Sign Personal Message

Ideal for login systems requiring human-readable content:

const result = await suiProvider.signPersonalMessage({ message: new TextEncoder().encode("Login to MyApp") });

Returns

• bytes: Encoded message
• signature: Cryptographic proof of ownership

Sign Transaction

Prepare a transaction without broadcasting:

const { signature, transactionBlockBytes } = await suiProvider.signTransaction(preparedTx);

Useful for multi-party approvals or offline signing scenarios.

Sign and Broadcast Transaction

For immediate execution:

const result = await suiProvider.signAndExecuteTransaction(tx);

Returns

• confirmedLocalExecution: Whether local simulation passed
• digest: Transaction ID on-chain
• txBytes: Serialized transaction

Perfect for swaps, mints, and real-time interactions.

Event Handling

Monitor key lifecycle events such as:

• session_established
• transaction_signed
• disconnected

These events help synchronize UI states and trigger post-action workflows.

👉 See full list of supported events and error codes

🔔 Note: Event documentation mirrors EVM-compatible chains. Refer to OKX’s unified SDK guide for comprehensive details.

Core Keywords for SEO

• Sui wallet integration
• Web3 wallet connection
• DApp wallet UI
• OKX Connect SDK
• Telegram Mini Wallet
• Sui blockchain development
• Connect Sui wallet
• Decentralized app authentication

These terms reflect high-intent search queries from developers exploring Web3 integrations.

Frequently Asked Questions (FAQ)

Q: Can I use this UI in Telegram Mini Apps?

Yes. The OKX Connect UI fully supports Telegram Mini Apps. Users can connect via the embedded OKX Telegram Mini Wallet, staying within the chat interface without switching apps.

Q: What chains does this support?

Currently optimized for Sui Testnet and Mainnet. You can define required and optional chains using the namespaces parameter during initialization.

Q: Is user data secure during connection?

Absolutely. No private keys leave the user’s device. All operations are cryptographically signed locally, ensuring full non-custodial security.

Q: Do I need to handle different languages manually?

No. The UI automatically adapts based on the language setting you provide. Over 15 languages are supported out of the box.

Q: Can I customize the appearance of the connection modal?

Yes. You can set the theme (DARK, LIGHT, or SYSTEM) and pass your DApp’s icon and name for brand consistency.

Q: What happens if a user rejects a transaction?

The promise rejects gracefully. Listen for 'error' events or catch exceptions to display friendly feedback in your interface.

By integrating OKX Universal Connect UI, developers gain a powerful, secure, and localized way to onboard users across platforms—especially within messaging ecosystems like Telegram. With native Sui support, robust eventing, and clean separation between connection and execution layers, it's the ideal toolkit for modern Web3 builders.

Start streamlining your DApp’s onboarding flow today—your users will thank you.