Connect to App or Mini Wallet

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 Initialisation#

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
      • rpcMap?: [chainId: string]: string; RPC URL, an optional parameter. When configured, it allows requesting RPC information from the blockchain;
      • 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.
        • rpcMap?: [chainId: string]: string; RPC URL, an optional parameter. When configured, it allows requesting RPC information from the blockchain;
        • 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;
      • rpcMap?: [chainId: string]: string; rpc information;
      • 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)
//返回结构: "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();