UI#

Installation and Initialization#

Make sure to update the OKX App to version 6.98.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

Examples

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 for the requested connection, the key for the starknet family is ‘starknet’, currently only starknet:mainnet is supported, if any of the requested chains is not supported by the chain wallet, the wallet will If any of the requested chains is not supported by any of the chain wallets, 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 the starknet system is ‘starknet’, currently only starknet:mainnet is supported, if the requested chain is not supported by the current wallet, it can still be connected. If the requested chain is not supported by the current wallet, it can still be connected;
    • chains: string[]; chain id information, defaultChain?
      • defaultChain?: string; default chain
  • sessionConfig: object
    • redirect: string Jump parameter after successful connection, if it is a Mini App in Telegram, here can be set to Telegram's deeplink: ‘tg://resolve’

Return value

• Promise<SessionTypes.Struct | undefined>
  • topic: string; Session Logo;
  • namespaces: Record<string, Namespace>; The namespace information for a successful connection;
    • chains: string[]; Information about the connected chains
    • accounts: string[]; information about the connected accounts
    • 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

Examples

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

Prepare the transaction#

First create an OKXStarknetProvider object and pass OKXUniversalProvider into the constructor.

import { OKXStarknetProvider } from "@okxconnect/universal-provider";
let okxStarknetProvider = new OKXStarknetProvider(okxUniversalProvider)

Get account information#

okxStarknetProvider.getAccount(chainId)

Request parameters

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

Return value

• Object
  • address: string wallet address,
  • pubKey: string public key

Example

let result = okxStarknetProvider.getAccount("starknet:mainnet")
// Return structure
{
    address: "0x0667ae9b1c3d3ab1dacffd8b23269e9fedf2f8de5c57a35fe0a55f209db59179",
    pubKey: "07c26f0fd90a6847d3de5ce7002dcd9454b45a78d5592ee369c4d7561fa5e5ee"
}

Sign the message#

okxStarknetProvider.signMessage(signerAddress, typedData, chain)

Request parameters

• signerAddress - string, wallet address
• typedData - object The message to be signed, in a fixed format.
• chain? - string, chain of requested execution methods

Return value

• Promise - [string, string] Signature result r, v

Example

let chain = "starknet:mainnet"
let address = okxStarknetProvider.getAccount("starknet:mainnet").address
const signData = {
    "domain": {
        "chainId": "0x534e5f4d41494e",
        "name": "STRKFarm",
        "version": "1"
    },
    "message": {
        "document": "app.strkfarm.xyz/tnc/v1",
        "message": "Read and Agree T&C"
    },
    "primaryType": "Tnc",
    "types": {
        "StarkNetDomain": [
            {
                "name": "name",
                "type": "felt"
            },
            {
                "name": "version",
                "type": "felt"
            },
            {
                "name": "chainId",
                "type": "felt"
            }
        ],
        "Tnc": [
            {
                "name": "message",
                "type": "felt"
            },
            {
                "name": "document",
                "type": "felt"
            }
        ]
    }
}

let result = okxStarknetProvider.signMessage(address, signData,chain)
//返回:0x07fcd65fded07c7daaa79a818a39c5236562914a5d48fa7fad268fac609faa9a,0x0324c3bafc4d0e7e04a3a0b805bf8438f5111e308c4d596daa46fc213b37ebf1

SendTransaction#

okxStarknetProvider.sendTransaction(signerAddress, transaction, chainId?)

Request Parameters

• signerAddress - string,wallet address
• transaction - object, the transaction information to be signed in a fixed format
• chainId? - string, the chain for which the signature is requested.

Return Value

• Promise - string, transaction hash

Example

let val = uint256.bnToUint256(120000000000000000)
const transferCalldata = CallData.compile({
    to: "0x00b909cefa36ab6bc26f5887a867e46ef162238f0a171b1c2974b665afd4237f",
    value: val
})

const DAITokenAddress = "0x00da114221cb83fa859dbdb4c44beeaa0bb37c7537ad5ae66fe5e0efd20e6eb3"

const invokeParams = {
    calls: [
        {
            contract_address: DAITokenAddress,
            entry_point: "transfer",
            calldata: transferCalldata
        }
    ],
}

let okxStarknetProvider = new OKXStarknetProvider(window.provider)
let address = okxStarknetProvider.getAccount("starknet:mainnet").address
let res = await provider.sendTransaction( this.address, invokeParams, "starknet:mainnet")
//Return Value：0x515d9de049c43477cee7eaea987ab04995d8dc2a7b3d7a184dca4bcd7224ec2

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.

okxUniversalProvider.disconnect()

Event#

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