UI Integration Guide for Bitcoin-Compatible Chains: Connecting Web3 Wallets and DEX API

Installation and Initialization

To begin integration, ensure your OKX App is updated to version 6.92.0 or later. Integrate OKX Connect into your DApp using npm:

npm install okx-connect

Key Parameters

• dappMetaData: Define your application's identity:

  {
    "name": "YourAppName",
    "icon": "https://your-app-icon.png"
  }

• actionsConfiguration: Customize transaction flows:

  {
    "modals": ["before", "success", "error"],
    "returnStrategy": "tg://resolve",
    "tmaReturnUrl": "back"
  }

• uiPreferences: Set interface themes (DARK, LIGHT, or SYSTEM).
• language: Supports 20+ languages including en_US, zh_CN, and es_ES.

👉 Get started with Web3 integration

Wallet Connection Process

Core Connection Flow

1. Request Parameters:

   const connectParams = {
     namespaces: {
       "btc": {
         chains: ["btc:mainnet"],
         defaultChain: "btc:mainnet"
       }
     },
     sessionConfig: {
       redirect: "tg://resolve"
     }
   };

2. Return Values:

   • topic: Unique session identifier
   • accounts: Array of connected addresses
   • methods: Supported wallet methods

Signature Integration

For combined connection and signing:

const signRequest = {
  method: "btc_signMessage",
  chainId: "btc:mainnet",
  params: ["Your message to sign"]
};

Wallet Status Management

Connection Check

const isConnected = provider.checkConnection();

Disconnection

provider.disconnect();

Bitcoin Transaction Operations

Transaction Preparation

const provider = new OKXBtcProvider(okxUniversalConnectUI);

Account Information

const account = await provider.getAccount("btc:mainnet");
// Returns { address: "1A1zP1...", publicKey: "03a1b2..." }

Transaction Broadcasting

const txHash = await provider.sendBitcoin({
  chainId: "btc:mainnet",
  toAddress: "recipient_address",
  satoshis: 50000
});

👉 Advanced PSBT signing guide

Error Handling Reference

FAQ Section

Q: What's the minimum OKX App version required?

A: Version 6.92.0 or higher.

Q: Can I customize the transaction modal flow?

A: Yes, configure actionsConfiguration.modals with your preferred stages.

Q: How do I handle different Bitcoin address formats?

A: The provider automatically detects and converts between legacy/SegWit/Taproot formats.

Q: What's the fee estimation method?

A: Fees are calculated based on current mempool conditions unless custom feeRate is specified.

Q: Is BIP322 signing supported?

A: Yes, pass type: "bip322-simple" in signature requests.

PSBT Operations

Single PSBT Signing

const signedPsbt = await provider.signPsbt({
  psbtHex: "70736274ff0100...",
  options: {
    toSignInputs: [{ index: 0, address: "1A1zP1..." }]
  }
});

Batch PSBT Signing

const signedPsbts = await provider.signPsbts({
  psbtHexs: ["psbt1", "psbt2"],
  options: [/* per-PSBT options */]
});

Signed Broadcast

const result = await provider.signAndPushPsbt({
  psbtHex: "70736274ff0100...",
  options: { autoFinalized: true }
});
// Returns { txhash: "...", signature: "..." }

Best Practices

1. Always verify chain support before connection attempts
2. Implement graceful error handling for user rejections
3. Use our testnet (btc:testnet) for development
4. Cache wallet connections to improve UX