UI Integration Guide for Bitcoin-Compatible Chain Wallet Connections

Introduction to UI Wallet Integration

Beyond our SDK offerings, we provide a streamlined UI interface for seamless wallet connections. When integrating the UI within Telegram-based DApps, users can choose between launching the mobile OKX Wallet app or using the in-platform OKX Mini Wallet.

Installation and Initialization

Ensure your OKX App is updated to version 6.92.0 or later for full compatibility. Integration steps:

Package Installation
Use npm to install OKX Connect:
```
npm install @okx/okx-connect
```

UI Object Creation
Initialize an interface object for wallet operations:

const connectUI = new OKXUniversalConnectUI({
  dappMetaData: {
    name: "Your DApp Name",
    icon: "https://example.com/icon.png" // 180x180px PNG recommended
  },
  actionsConfiguration: {
    modals: ['before', 'success'],
    returnStrategy: 'tg://resolve' // Telegram deep link
  },
  uiPreferences: {
    theme: 'SYSTEM' // THEME.DARK, THEME.LIGHT, or 'SYSTEM'
  },
  language: 'en_US' // Supported locales
});

Core Wallet Connection Features

Connecting to OKX Wallet

Establish wallet connections to retrieve addresses and transaction-signing parameters:

Parameters:

chains: Supported chain IDs (e.g., btc:mainnet)
namespaces: Protocol-specific settings (EVM/BTC)
sessionConfig.redirect: Post-connection deep link (e.g., tg://resolve for Telegram)

Example:

const connection = await connectUI.connectWallet({
  chains: ['btc:mainnet'],
  namespaces: { 
    btc: { 
      chains: ['btc:mainnet'],
      methods: ['btc_signMessage'] 
    }
  }
});

Transaction Signing Workflow

Signing Process:

Request connection with connectParams

Submit signing request via signRequest:

const signature = await connectUI.signMessage({
  chain: 'btc:mainnet',
  signStr: 'Message to sign',
  type: 'ecdsa'
});

Wallet Status Management

Check Connection Status:

const isConnected = connectUI.isWalletConnected();

Bitcoin-Specific Operations

Sending Bitcoin Transactions

Parameters:

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

Example:

const txHash = await connectUI.sendBtc({
  chainId: 'btc:mainnet',
  toAddress: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
  satoshis: 50000
});

PSBT (Partially Signed Bitcoin Transaction) Handling

Signing PSBTs:

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

Advanced Features

Multi-PSBT Batch Signing

const batchResults = await connectUI.signMultiplePsbts({
  chainId: 'btc:mainnet',
  psbtHexs: ['psbt1...', 'psbt2...'],
  options: [/* per-PSBT configs */]
});

Signed Transaction Broadcast

const broadcastResult = await connectUI.signAndPushPsbt({
  chain: 'btc:mainnet',
  psbtHex: '70736274...',
  options: { autoFinalized: true }
});

Wallet Management

Disconnecting Wallets

connectUI.disconnectWallet();

Error Handling Reference

Error Code	Description	Resolution
`UNKNOWN_ERROR`	Unexpected failure	Retry or contact support
`USER_REJECTS_ERROR`	User declined action	Verify permissions
`CHAIN_NOT_SUPPORTED`	Unsupported blockchain	Check chain compatibility

👉 Explore more wallet integration options

Frequently Asked Questions

Q: Can I use SVG icons for my DApp?
A: No, we currently support only PNG/ICO formats (180x180px recommended).

Q: What's the minimum OKX App version required?
A: Version 6.92.0 or newer is mandatory for all features.

Q: How do Telegram Mini Wallet sessions differ?
A: Mini Wallet sessions persist within Telegram's environment without requiring app switching.

Q: Can I customize the signing interface theme?
A: Yes, choose from DARK, LIGHT, or SYSTEM (device-preference) modes.

Q: What PSBT signing options are available?
A: Supports single/multi-input signing with Taproot address compatibility.

👉 Get started with Bitcoin wallet integration today