UI Integration for Bitcoin-Compatible DEX Wallet Connections

Introduction to OKX Connect UI

In addition to SDK options, OKX provides a user-friendly UI interface for seamless wallet integration. When using the UI connection within a DApp operating in Telegram, users can choose between:

Opening the OKX Mobile App Wallet
Staying in Telegram and launching the OKX Mini Wallet

👉 Explore OKX Wallet integrations

Installation and Initialization

Prerequisites

Update the OKX App to version 6.92.0 or later.

Integration Steps

Install via npm:
```
npm install @okx/web3-connect
```

Initialize the UI connector:

const okxUniversalConnectUI = new OKXUniversalConnectUI({
  dappMetaData: {
    name: "Your DApp Name",
    icon: "https://your-icon-url.png" // 180x180px PNG recommended
  },
  actionsConfiguration: {
    modals: ['before', 'success', 'error'],
    returnStrategy: 'tg://resolve' // For Telegram Mini Wallet
  },
  uiPreferences: {
    theme: 'SYSTEM' // Options: DARK, LIGHT, SYSTEM
  },
  language: 'en_US' // Supported locales
});

Connecting to the OKX Wallet

Key Parameters

Namespaces: Specify chains (e.g., eip155 for EVM, btc for Bitcoin).
Chains: Chain IDs (e.g., btc:mainnet).
Session Config: Redirect URL post-connection (e.g., tg://resolve for Telegram).

Example Request:

const connectParams = {
  namespaces: {
    btc: {
      chains: ['btc:mainnet'],
      methods: ['btc_signMessage']
    }
  },
  sessionConfig: {
    redirect: 'tg://resolve'
  }
};
const session = await okxUniversalConnectUI.connect(connectParams);

Wallet Operations

Signing Messages

Parameters:

chain: Chain ID (e.g., btc:mainnet).
signStr: Message to sign.
type: Signature type (ecdsa or bip322-simple).

Example:

const signature = await provider.signMessage({
  chain: 'btc:mainnet',
  signStr: 'Hello, OKX!'
});

Sending Bitcoin

Parameters:

toAddress: Recipient address.
satoshis: Amount in satoshis.
feeRate: Optional custom fee rate.

Example:

const txHash = await provider.sendBitcoin({
  chainId: 'btc:mainnet',
  toAddress: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
  satoshis: 1000
});

👉 Learn more about BTC transactions

Advanced Features

PSBT Signing

Sign Partially Signed Bitcoin Transactions (PSBTs) with options for auto-finalization and custom sighash types.

Example:

const signedPsbt = await provider.signPsbt({
  chain: 'btc:mainnet',
  psbtHex: '70736274...',
  options: {
    toSignInputs: [{
      index: 0,
      address: 'bc1q...',
      publicKey: '03...'
    }]
  }
});

Error Handling

| Error Code | Description |
|------------|-------------|
| UNKNOWN_ERROR | Unspecified issue. |
| USER_REJECTS_ERROR | User declined the request. |
| CHAIN_NOT_SUPPORTED | Unsupported blockchain. |

FAQ

How do I switch wallets?

Disconnect the current session via provider.disconnect(), then reinitialize the connection.

Can I use SVG icons for my DApp?

No—only PNG or ICO formats are supported for security reasons.

What’s the minimum OKX App version required?

Version 6.92.0 or later for full functionality.

How do I handle PSBT signing for Taproot addresses?

Enable disableTweakSigner to sign with the original private key.

Conclusion

OKX’s UI integration simplifies Bitcoin and EVM wallet connections, offering flexible options for DApps. From signing messages to PSBT transactions, developers can leverage robust tools while ensuring user-friendly experiences.

Ready to integrate? 👉 Start with OKX Connect