UI Integration Guide for Aptos: Connecting Web3 Wallets and DEX API Documentation

Introduction to Aptos UI Integration

Our SDK provides a streamlined UI interface for seamless wallet integration. When implementing within Telegram-hosted DApps, users can choose between:

Launching their mobile app wallet
Using the OKX Telegram Mini Wallet directly within Telegram

Installation and Initialization

Prerequisites

Ensure your OKX App is updated to version 6.92.0 or later before integration.

Implementation Steps

Integrate OKX Connect into your DApp using npm:

npm install @okx/connect

Configuration Parameters

Create a UI interface object for wallet operations with these parameters:

Parameter	Type	Description
`dappMetaData`	object	Contains app metadata:
	`name`	string	Application name (non-unique identifier)
	`icon`	string	URL to 180x180px PNG/ICO (SVG not supported)
`actionsConfiguration`	object	Transaction flow settings:
	`modals`	array/string	Alert display modes ('before', 'success', 'error' or 'all')
	`returnStrategy`	string	Deep link return policy for app wallets ('none' or custom URL)
	`tmaReturnUrl`	string	Telegram Mini Wallet return policy ('back', 'none', or custom URL)
`uiPreferences`	object	Interface customization:
	`theme`	string	Display theme (DARK, LIGHT, or SYSTEM)
`language`	string	Localization option (default: en_US)

👉 Explore advanced wallet integration techniques

Wallet Connection Process

Core Connection Parameters

Establish wallet connections with these essential parameters:

{
  namespaces: {
    aptos: {
      chains: ['aptos:1'], // Chain IDs
      defaultChain: 'aptos:1'
    }
  },
  optionalNamespaces: {
    aptos: {
      chains: ['aptos:2'],
      defaultChain: 'aptos:2'
    }
  },
  sessionConfig: {
    redirect: 'tg://resolve' // Telegram deep link
  }
}

Response Structure

Successful connections return:

topic: Session identifier
namespaces: Connected protocol data
accounts: Wallet addresses
methods: Supported operations
dappInfo: Your application metadata

Wallet Authentication and Message Signing

Combined Connection & Signing

Execute both connection and signature requests in one call:

{
  connectParams: { /* standard connection params */ },
  signRequest: {
    method: 'aptos_signMessage',
    chainId: 'aptos:1',
    params: {
      message: 'Authentication request',
      nonce: 'unique-identifier'
    }
  }
}

Signature Verification

Responses include cryptographic proof in the connect_signResponse event containing:

Full message content
Generated signature
Wallet address verification

👉 Learn about secure signature implementation

Transaction Workflow

Preparation Phase

Create transaction provider instance:

const provider = new OKXAptosProvider(universalProvider);

Address Retrieval

Get wallet credentials:

const { address, publicKey } = await provider.getAccountInfo('aptos:1');

Transaction Signing

Process single or batch transactions:

Method	Parameters	Returns
`signTransaction`	Transaction object	Signature buffer
`signAndSubmitBatch`	Transaction array	Blockchain tx hash

Connection Management

Status Checking

Verify active sessions:

const isConnected = provider.isConnected();

Disconnection Protocol

Terminate wallet sessions properly:

await provider.disconnect();

Error Handling Reference

Error Code	Description	Resolution
1001	Existing active connection	Disconnect first
1002	No active session	Initiate connection
1003	User rejection	Improve UX flow
1004	Unsupported method	Check documentation
1005	Chain not supported	Verify network compatibility

Frequently Asked Questions

How do I handle multiple chain connections?

Our namespace system allows simultaneous connections to multiple chains. Specify all required chains in the namespaces parameter during connection initialization.

What's the difference between required and optional namespaces?

Required namespaces will block connection if unsupported, while optional namespaces allow partial functionality when some chains aren't available.

How can I optimize for Telegram Mini Wallet?

Configure the tmaReturnUrl parameter as 'back' for seamless Telegram integration and set appropriate deep links in your redirect parameters.

What signature formats are supported?

We support standard Aptos message signing with full message formatting including chain ID, application domain, and nonce verification.

How do I test transaction flows?

Use our testnet chain IDs and implement comprehensive error handling for all possible rejection scenarios during development.

👉 Get started with Aptos wallet integration today