UI#

Installation and Initialization#

Make sure to update the OKX App to version 6.96.0 or later to start integrating OKX Connect into your DApp can be done using npm:

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

Before connecting to a 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 Demo"
    },
    actionsConfiguration: {
        returnStrategy: 'tg://resolve',
        modals:"all",
        tmaReturnUrl:'back'
    },
    language: "en_US",
    uiPreferences: {
        theme: THEME.LIGHT
    },
});

Connecting to a wallet#

Connect to the wallet to get the wallet address as an identifier and the necessary parameters for signing transactions.

okxUniversalConnectUI.connect(connectParams: ConnectParams)

Request Parameters

• connectParams - ConnectParams
  • namespaces - [namespace: string]: ConnectNamespace ; Optional information about the requested connection, the key of TRON is ‘tron’, if any of the requested chains is not supported by the chain wallet, the wallet will reject the connection;
    • chains: string[]; chain id information, defaultChain?
    • defaultChain?: string; default chain
  • optionalNamespaces - [namespace: string]: ConnectNamespace; optional information about the requested connection, TRON key is ‘tron’, if the corresponding chain 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 you can set it to Telegram's deeplink: ‘tg://resolve’

Return value

• Promise <SessionTypes.Struct | undefined>
  • topic: string; 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
    • redirect?: string, the redirect parameter after successful connection;

Example

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

Prepare the transaction#

First create an OKXTronProvider object, with the constructor passing in okxUniversalConnectUI

import { OKXTronProvider } from "@okxconnect/universal-provider";
let okxTronProvider = new OKXTronProvider(okxUniversalConnectUI)

Getting account information#

okxTronProvider.getAccount(chainId?)

Request parameters

• chainId: the requested chain, e.g. tron:mainnet

Return value

• Object
  • address: string wallet address

Example

let result = okxTronProvider.getAccount(‘tron:mainnet’)
//return structure
{
    "address": "THyDJCGXYnwCSYNQeGYW98pptEVSHwaYx7"
}

Sign the message#

okxTronProvider.signMessage(message, chainId?)

Request Parameters

• message - string, the message to be signed.
• chainId? - string, the chain of the requested execution method, e.g. tron:mainnet

Return Value

• Promise - string The result of the signature.

Example

let chainId = "tron:mainnet"
let signStr = "data need to sign ..."

let result = okxTronProvider.signMessage(signStr, chainId)
//Return: 0xfc9003b1c8e68fdc93409aad911af274de1987130a36516f1c7c9353716463bf42bb400e0d6bffd4adface92dd3a01079ba32f8aebe3db1d5914f084b9f802711c

Signed message V2#

okxTronProvider.signMessageV2(message, chainId?)

Request Parameters

• message - string, the message to be signed.
• chainId - string, the chain of the requested execution method, e.g. tron:mainnet

Return Value

• Promise - string The result of the signature.

Example

let chainId = "tron:mainnet"
let signStr = "data need to sign ..."

let result = okxTronProvider.signMessageV2(signStr, chainId)
//Return: 0xfc9003b1c8e68fdc93409aad911af274de1987130a36516f1c7c9353716463bf42bb400e0d6bffd4adface92dd3a01079ba32f8aebe3db1d5914f084b9f802711c

SignTransaction#

okxTronProvider.signTransaction(transaction: any, chainId?: string)

Request parameters

• transaction - object, transaction information Signed in a fixed format, can be generated by TronWeb.transactionBuilder
• chainId? - string, the chain in which the request signature is executed, e.g. tron:mainnet

Return Value

• Promise - Object The signed transaction

Example

let tronWeb = new TronWeb({
"fullHost": 'https://api.trongrid.io',
"headers": {},
"privateKey": ''
})
let address = okxTronProvider.getAccount("tron:mainnet").address
const transaction = await tronWeb.transactionBuilder.sendTrx("TGBcVLMnVtvJzjPWZpPiYBgwwb7th1w3BF", 1000, address);
let res = await okxTronProvider.signTransaction(transaction,"tron:mainnet")

/**Return results
 {
 "visible": true,
 "txID": "cf93bbfb0152d832fcdb1c65cb12a979eab5a631de1b3d7d6437757e1b16ed40",
 "raw_data": {
 "contract": [{
 "parameter": {
 "type_url": "type.googleapis.com/protocol.TransferContract",
 "value": {
 "amount": 1000,
 "contract_address": "",
 "owner_address": "THyDJCGXYnwCSYNQeGYW98pptEVSHwaYx7",
 "to_address": "TGBcVLMnVtvJzjPWZpPiYBgwwb7th1w3BF"
 }
 },
 "type": "TransferContract"
 }],
 "expiration": 1732073850000,
 "ref_block_bytes": "7ecf",
 "ref_block_hash": "7b3a6bc87d9edb9e",
 "timestamp": 1732073790000
 },
 "raw_data_hex": "0a027ecf22087b3a6bc87d9edb9e40908996bdb4325a66080112620a2d747970652e676f6f676c65617069732e636f6d2f70726f746f636f6c2e5472616e73666572436f6e747261637412310a154157c140be01fa2bbabf7f055ab879d0c05725293c12154144295a45f811a9d595562562a2e27685291a715818e80770b0b492bdb432",
 "signature": ["239b402a7605199c6969f6f4da37a355452bd942c222adfc625721d18a1fff3223f92c1d8eaf5856c0e41ce80761fd2adb80d026276d6710ad183a713af7a78d00"]
 }
 */

SignAndSendTransaction#

okxTronProvider.signAndSendTransaction(transaction, chainId?)

Request parameters

• transaction - object, transaction information Signed in a fixed format, can be generated by TronWeb.transactionBuilder
• chainId - string, the chain in which the request signature is executed, e.g. tron:mainnet

Return Value

• Promise - string Transaction hash

Example

let tronWeb = new TronWeb({
    "fullHost": 'https://api.trongrid.io',
    "headers": {},
    "privateKey": ''
})
let address = okxTronProvider.getAccount("tron:mainnet").address
const transaction = await tronWeb.transactionBuilder.sendTrx("TGBcVLMnVtvJzjPWZpPiYBgwwb7th1w3BF", 1000, address); //转账TRX
let res = await okxTronProvider.signAndSendTransaction(transaction, "tron:mainnet")
//return value：50a47e450024c079510a39433e28de0bcac8406d731aadab7d772998dfce2aab

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()