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 tg, 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 tg, 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"
    }
})

Send signature and transaction#

First create an OKXBtcProvider object, the constructor passes in okxUniversalConnectUI

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

Get the account#

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": "048936b367d47b3796b430a31694320918afdc458d81dea9bb7dd35c0aad8bc6944e52a5317613cc39d67a9ea036db4de87328f77d3e3f7fdcac9b294d",
}

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.