UI#

In addition to SDK, we also provide a UI interface. If using the UI connection, and the DApp is operating in Telegram, users can choose to open the mobile App Wallet or stay in Telegram and launch the OKX Mini Wallet.

Installation and Initialization#

Make sure to update the OKX App to version 6.92.0 or later to begin access:

To integrate OKX Connect into your DApp, you can use npm:

npm install @okxconnect/ui
npm install @okxconnect/universal-provider

Before connecting to the wallet, you need to create an object that can provide a UI interface for subsequent operations such as connecting to the wallet and sending transactions.

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

Request parameters

• dappMetaData - object
  • name - string: The name of the application, will not be used as a unique representation.
  • icon - string: URL of the application icon, must be in PNG, ICO, etc. SVG icons are not supported. SVG icons are not supported. It is best to pass a url pointing to a 180x180px PNG icon.
• actionsConfiguration - object
  • modals - ('before' | 'success' | 'error')[] | 'all' The modes of displaying alerts during transaction, defaults to 'before'.
  • returnStrategy -string 'none' | ${string}://${string}; for app wallet, specify the return strategy for the deep link when the user signs/rejects the request, if it is in telegram, you can configure tg://resolve
  • tmaReturnUrl -string 'back' | 'none' | ${string}://${string}; For Telegram Mini Wallet, specify the return policy of deep link when user signs/rejects the request, if it's in telegram, you can configure tg://resolve none means no processing after signing; default is back;
• uiPreferences -object
  • theme - Theme can be: THEME.DARK, THEME.LIGHT, 'SYSTEM'.
• language - 'en_US' | 'ru_RU' | 'zh_CN' | 'ar_AE' | 'cs_CZ' | 'de_DE' | 'es_ES' | 'es_LAT' | 'fr_FR' | 'id_ID' | 'it_IT' | 'nl_NL' | 'pl_PL' | 'pt_BR' | 'pt_PT' | 'ro_RO' | 'tr_TR' | 'uk_UA' | 'vi_VN'. , defaults to en_US

Return value

• OKXUniversalConnectUI

Example

import { OKXUniversalConnectUI } from "@okxconnect/ui";

const okxUniversalConnectUI = await OKXUniversalConnectUI.init({
    dappMetaData: {
        icon: "https://static.okx.com/cdn/assets/imgs/247/58E63FEA47A2B7D7.png",
        name: "OKX Connect UI Demo"
    },
    actionsConfiguration: {
        returnStrategy: 'tg://resolve',
        modals:"all"
    },
    language: "en_US",
    uiPreferences: {
        theme: THEME.LIGHT
    },
});

Connecting to OKX wallet#

Connecting to a wallet goes to get the wallet address as an identifier and the necessary parameters used to sign the transaction;

okxUniversalConnectUI.connect(connectParams: ConnectParams);

Request parameters

• connectParams - ConnectParams
  • namespaces - [namespace: string]: ConnectNamespace ; Optional information for requesting a connection, the key is 'eip155' for EVM, or 'btc' for BTC, if any of the requested chain is not supported by the wallet, the wallet will reject the connection;
    • chains: string[]; Chain id information, the
    • defaultChain?: string; default chain
  • optionalNamespaces - [namespace: string]: ConnectNamespace; optional information for connection request, the key is 'eip155' for EVM system and 'btc' for BTC system, if the corresponding chain information is not supported by the wallet, you can still connect;
    • chains: string[]; Chain id information, chain information of the wallet, chain information of the wallet.
      • defaultChain?: string; default chain
  • sessionConfig: object
    • redirect: string Jump parameter after successful connection, if it is Mini App in Telegram, here can be set to Telegram's deeplink: 'tg://resolve'

Return value

• Promise <SessionTypes.Struct | undefined>
  • topic: string; the session identifier;
  • namespaces: Record<string, Namespace>; namespace information for a successful connection;
    • chains: string[]; Chain information for the connection;
    • accounts: string[]; accounts information for the connection;
    • methods: string[]; methods supported by the wallet under the current namespace;
    • defaultChain?: string; The default chain for the current session.
  • sessionConfig?: SessionConfig
    • dappInfo: object DApp information;
      • name:string
      • icon:string
    • redirect?: string, the redirect parameter after successful connection;

Example

var session = await okxUniversalConnectUI.connect({
    namespaces: {
        btc: {
            chains: [
                "btc:mainnet",
                  // "fractal:mainnet"
            ],
        }
    },
    sessionConfig: {
        redirect: "tg://resolve"
    }
})

Connect to wallet and sign#

Connect to the wallet to get the wallet address and sign the data; the result will be called back in the event ‘connect_signResponse’;

await okxUniversalConnectUI.openModalAndSign(connectParams: ConnectParams, signRequest: RequestParams[]);

Request Parameters

• connectParams - ConnectParams
  • namespaces - [namespace: string]: ConnectNamespace ; Optional information for requesting a connection, the key for the BTC system is ‘btc’, if any of the requested chains is not supported by the wallet, the wallet will reject the connection;
    • chains: string[]; chain id information, defaultChain?
    • defaultChain?: string; default chain
  • optionalNamespaces - [namespace: string]: ConnectNamespace; optional information of the requested connection, the key of BTC is ‘btc’, if the corresponding chain information is not supported by the wallet, it can still be connected;
    • chains: string[]; chain id information, defaultChain?
    • defaultChain?: string; default chain
  • sessionConfig: object
    • redirect: string The jump parameter after successful connection, if it is Mini App in Telegram, here can be set to Telegram's deeplink: ‘tg://resolve’
• signRequest - RequestParams[]; the method to request the connection and sign the request, at most one method can be supported at the same time;
  • method: string; the name of the requested method, the BTC system supports methods such as ‘btc_signMessage’;
  • chainId: string; the ID of the chain in which the method is executed, the chainId must be included in the namespaces above;
  • params: unknown[] | Record<string, unknown> | object | undefined; Parameters corresponding to the requested method;

Return Value

• Promise <SessionTypes.Struct | undefined>
  • topic: string; the session identifier;
  • namespaces: Record<string, Namespace>; namespace information for a successful connection;
    • chains: string[]; Chain information for the connection;
    • accounts: string[]; accounts information for the connection;
    • methods: string[]; Methods supported by the wallet in the current namespace;
    • defaultChain?: string; The default chain for the current session.
  • sessionConfig?: SessionConfig
    • dappInfo: object DApp information;
      • name: string
      • icon:string

Example

// Add the signature result listener first
okxUniversalConnectUI.on("connect_signResponse", (signResponse) => {
  console.log(signResponse);
});
var session = await okxUniversalConnectUI.openModalAndSign({
        namespaces: {
            btc: {
                chains: [
                    "btc:mainnet",
                    // "fractal:mainnet"
                ],
            }
        },
        sessionConfig: {
            redirect: "tg://resolve"
        }
    },
    [
        {
            method: "btc_signMessage",
            chainId: "btc:mainnet",
            params: {
                message: "Welcome to BTC"
            }
        }
])

Determine if the wallet is connected#

Gets whether the wallet is currently connected.

Return Value

• boolean

Example

universalUi.connected();

Prepare to trade#

First create an OKXBtcProvider object, the constructor passes in okxUniversalConnectUI

import { OKXBtcProvider } from '@okxconnect/universal-provider';
let okxBtcProvider = new OKXBtcProvider(okxUniversalConnectUI)

Get wallet account information#

okxBtcProvider.getAccount(chainId);

Request parameters

• chainId: the requested chain, e.g. btc:mainnet, fractal:mainnet

Return Value

• Object
  • address: string wallet address
  • publicKey: string public key

Example

let result = okxBtcProvider.getAccount('btc:mainnet')
// return structure
{
    "address": "038936b367d47b3796b430a31694320918afdc458d81dea9bb7dd35c0aad8bc694",
    "publicKey": "03cbaedc26f03fd3ba02fc936f338e980c9e2172c5e23128877ed46827e935296f"
}

signMessage#

okxBtcProvider.signMessage(chain, message, type?);

Request parameters

• chain - string, the chain of the requested execution method
• signStr - string the message to be signed
• type - (optional) 'ecdsa' | 'bip322-simple', default is 'ecdsa'.

Return Value

• Promise - string: Signature result

Example

let chain = "btc:mainnet"
let signStr = "data need to sign ..."

let result = okxBtcProvider.signMessage(chain, signStr)
//Return structure: "H83jZpulbMDDGUiTA4M8QNChmWwaKxwPCm8U5EBvftKlSMMzuvtVxBHlygtof5NBbdSVPiAtCvOUwZmz2vViHHU="

Send Bitcoin#

okxBtcProvider.sendBitcoin(chainId, toAddress, satoshis, options);

Request parameters

• chainId - string, the chain for which the signature is requested to be executed, mandatory parameter, e.g. btc:mainnet
• toAddress - string, string, accepted address
• satoshis - number, the number of satoshis to be sent
• options - Object (optional)
  • feeRate - number (optional) customised fee rate

Return Value

• Promise - string The transaction hash

Example

let chain = "btc:mainnet"
let toAddress = '1NKnZ3uAuQLnmE...4u1efwCgTiAxBn'
let satoshis = 17000
let options = {
    feeRate: 16
}
let result = okxBtcProvider.sendBitcoin(chain, toAddress, satoshis, options)

/**
    Return structure:
    "ff18d01ef6abed3b7fd23247a1fc457ca...f49b6bb4529a19a5fb637f18ce2e"
 */

signPsbt#

okxBtcProvider.signPsbt(chainId, psbtHex, options);

Request parameters

• chain - string, the chain for which the signature is requested, must be passed, e.g. btc:mainnet
• psbtHex - string, the hexadecimal string of the psbt to be signed.
• options.
  • autoFinalized - boolean: if or not the psbt is finalised after signing, default is true
  • toSignInputs - array:
    • index - number: the input to sign
    • address - string: the address of the corresponding private key to be used for signing
    • publicKey - string: the public key of the corresponding private key to be used for signature
    • sighashTypes - number[]: (optional) sighashTypes
    • disableTweakSigner - boolean: (optional) When signing and unlocking Taproot addresses, tweakSigner is used to generate signatures by default, enable this option to allow signing with the original private key.

Return Values

• Promise - string hex string of the signed psbt.

Example

let chain = "btc:mainnet"
let psbtHex = ""
let options = { autoFinalized: false }
let result = okxBtcProvider.signPsbt(chain, psbtHex, options)

/**
    Return structure:
    "cHNidP8BAP0GAQIAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAA/////yjWH1Uvx225V01diYYZ2i5jVAORF4nLWUWCg5bBaLQwAAAAAAD/////AwEAAAAAAAAAIlEgwSVNrUCq6hIeU+DOwJmGNi9s1CInltGUjJR5GzUoHLUBAAAAAAAAACJRIMElTa1AquoSHlPgzsCZhjYvbNQiJ5bRlIyUeRs1KBy1AIb9jA0AAAAiUSDwUTBk/h5bXDG+3/Q7lD8vEhHRSrKJFockGxONIUiI4wAAAAAAAQErAQAAAAAAAAAiUSDBJU2tQKrqEh5T4M7AmYY2L2zUIieW0ZSMlHkbNSgctQETQD9magM5RHYbdRd4KZ70FfVEAW5hw3rLjrocWIyn2Gi2P2c6Gri0E/S/wREhgjM8u5zQ3GrpcSaC8KhCRxBq5/oBFyANVBOudKlTUiKevmZzGqdVcp6Y8XbMOTfPV03fEyLOFgABASsBAAAAAAAAACJRIMElTa1AquoSHlPgzsCZhjYvbNQiJ5bRlIyUeRs1KBy1ARNA83DNEJj5u/mgUoOhCWL07enXpb6RX/WfEBh97tyrXLlA/e0CowU1fpgrKn+PQ+9Z/5/EXGwcr1UkYaqBJ0ZpKQEXIA1UE650qVNSIp6+ZnMap1Vynpjxdsw5N89XTd8TIs4WAAEBK+gDAAAAAAAAIlEg8FEwZP4eW1wxvt/0O5Q/LxIR0UqyiRaHJBsTjSFIiOMBAwSDAAAAARNBZcHpcb6YDNWF+eIcFckjF1c8C83uRmEhS/8jJQOBFkIQol8hBCTYXOFAaeu6/4o2MsS20iITiM/rAOAOBZkXC4MBFyANVBOudKlTUiKevmZzGqdVcp6Y8XbMOTfPV03fEyLOFgABBSBhbicyOEDuDCrkNNmYJn+BFwmIupR3943NAPwkeifbQAABBSBhbicyOEDuDCrkNNmYJn+BFwmIupR3943NAPwkeifbQAABBSCJNrNn1Hs3lrQwoxaUMgkYr9xFjYHeqbt901wKrYvGlAA="
 */

Sign multiple Psbts#

okxBtcProvider.signPsbts(chainId, psbtHexs, options);

Request Parameters

• chainId - string, the chain for which the signature execution is requested, mandatory parameter, e.g. btc:mainnet
• psbtHex - string[], hexadecimal string of the psbt to be signed.
• options - object[], a hexadecimal string of the psbt to be signed.
  • autoFinalized - boolean: if or not the psbt is finalised after signing, default is true
  • toSignInputs - array:
    • index - number: the input to sign
    • address - string: the address of the corresponding private key to be used for signing
    • publicKey - string: the public key of the corresponding private key to be used for signing
    • sighashTypes - number[]: (optional) sighashTypes
    • disableTweakSigner - boolean: (optional) When signing and unlocking Taproot addresses, tweakSigner is used to generate signatures by default, enable this option to allow signing with the original private key.

Return Value

• Promise - string[] hex string of signed psbt

Example

let chain = "btc:mainnet"
let psbtHexs = [""]
let options = [{ autoFinalized: false }]
let result = okxBtcProvider.signPsbts(chain, psbtHexs, options)

/**
    Return structure:
    ["cHNidP8BAP0GAQIAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAA/////yjWH1Uvx225V01diYYZ2i5jVAORF4nLWUWCg5bBaLQwAAAAAAD/////AwEAAAAAAAAAIlEgwSVNrUCq6hIeU+DOwJmGNi9s1CInltGUjJR5GzUoHLUBAAAAAAAAACJRIMElTa1AquoSHlPgzsCZhjYvbNQiJ5bRlIyUeRs1KBy1AIb9jA0AAAAiUSDwUTBk/h5bXDG+3/Q7lD8vEhHRSrKJFockGxONIUiI4wAAAAAAAQErAQAAAAAAAAAiUSDBJU2tQKrqEh5T4M7AmYY2L2zUIieW0ZSMlHkbNSgctQETQD9magM5RHYbdRd4KZ70FfVEAW5hw3rLjrocWIyn2Gi2P2c6Gri0E/S/wREhgjM8u5zQ3GrpcSaC8KhCRxBq5/oBFyANVBOudKlTUiKevmZzGqdVcp6Y8XbMOTfPV03fEyLOFgABASsBAAAAAAAAACJRIMElTa1AquoSHlPgzsCZhjYvbNQiJ5bRlIyUeRs1KBy1ARNA83DNEJj5u/mgUoOhCWL07enXpb6RX/WfEBh97tyrXLlA/e0CowU1fpgrKn+PQ+9Z/5/EXGwcr1UkYaqBJ0ZpKQEXIA1UE650qVNSIp6+ZnMap1Vynpjxdsw5N89XTd8TIs4WAAEBK+gDAAAAAAAAIlEg8FEwZP4eW1wxvt/0O5Q/LxIR0UqyiRaHJBsTjSFIiOMBAwSDAAAAARNBZcHpcb6YDNWF+eIcFckjF1c8C83uRmEhS/8jJQOBFkIQol8hBCTYXOFAaeu6/4o2MsS20iITiM/rAOAOBZkXC4MBFyANVBOudKlTUiKevmZzGqdVcp6Y8XbMOTfPV03fEyLOFgABBSBhbicyOEDuDCrkNNmYJn+BFwmIupR3943NAPwkeifbQAABBSBhbicyOEDuDCrkNNmYJn+BFwmIupR3943NAPwkeifbQAABBSCJNrNn1Hs3lrQwoxaUMgkYr9xFjYHeqbt901wKrYvGlAA="]
 */

Sign and Broadcast signAndPushPsbt#

required App: >= 6.93.0

okxBtcProvider.signAndPushPsbt(chainId, psbtHex, options);

Request parameters

• chain - string, the chain for which the signature is requested, must be passed, e.g. btc:mainnet
• psbtHex - string, hexadecimal string of the psbt to be signed.
• options: - object
  • autoFinalized - boolean: if or not the psbt is finalised after signing, default is true
  • toSignInputs - array:
    • index - number: the input to sign
    • address - string: the address of the corresponding private key to be used for signing
    • publicKey - string: the public key of the corresponding private key to be used for signing
    • sighashTypes - number[]: (optional) sighashTypes
    • disableTweakSigner - boolean: (optional) When signing and unlocking Taproot addresses, tweakSigner is used to generate signatures by default, enable this option to allow signing with the original private key.

Return Value

• Promise - object
  • txhash Transaction hash
  • signature hex string of signed psbt

Example

let chain = "btc:mainnet"
let psbtHex = ""
let options = { autoFinalized: false }
let result = okxBtcProvider.signAndPushPsbt(chain, psbtHex, options)

/**
    Return structure:
    {
        txhash: "",
        signature: ""
    }
 */

Disconnect wallet#

Disconnect the connected wallet and delete the current session. If you want to switch the connected wallet, please disconnect the current wallet first.

okxUniversalConnectUI.disconnect();

Event#

// Generate universalLink
okxUniversalConnectUI.on("display_uri", (uri) => {
    console.log(uri);
}).
// Session information changes will trigger this event;
okxUniversalConnectUI.on("session_update", (session) => {
  console.log(JSON.stringify(session));
});
// Disconnecting triggers this event;
okxUniversalConnectUI.on("session_delete", ({topic}) => {
    console.log(topic);
});
// This event is triggered when a connection is made and the signature is signed.
okxUniversalConnectUI.on("connect_signResponse", (signResponse) => {
  console.log(signResponse);
});

Error codes#

Exceptions that may be thrown during connection, transaction, and disconnection.

Exception

export enum OKX_CONNECT_ERROR_CODES {
    UNKNOWN_ERROR = 0,
    ALREADY_CONNECTED_ERROR = 11,
    NOT_CONNECTED_ERROR = 12,
    USER_REJECTS_ERROR = 300,
    METHOD_NOT_SUPPORTED = 400,
    CHAIN_NOT_SUPPORTED = 500,
    WALLET_NOT_SUPPORTED = 600,
    CONNECTION_ERROR = 700
}