UI#

On top of the SDK, we also provide the UI interface. If you choose to access it through the UI, if the DApp operates within Telegram, the user can choose to evoke the mobile App wallet or stay in Telegram and evoke the Ouyi Telegram Mini wallet.

Installation and Initialisation:#

Make sure to update the OKX App to version 6.90.1 or later to start accessing:

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

npm install @okxconnect/ui
npm install @okxconnect/sui-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 of the deep link when the user signs/rejects the request, in case of telegram, you can configure tg://resolve
  • tmaReturnUrl -string ‘back’ | ‘none’ | ${string}://${string}; For Telegram Mini Wallet, specify the return strategy of deep link when user signs/rejects the request, in general, configure back, which means that the wallet will be closed after signing, and the dapp will be shown automatically; 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’, {
    modals: ‘all’,
    tmaReturnUrl:‘back’
  },
  language: ‘en_US’,
  uiPreferences: {
    theme: THEME.LIGHT
  }, }
}).
// Switching the plugin to connect to the wallet fires this event;
okxUniversalConnectUI.on(‘accountChanged’, (session) => {
    if (session){
        console.log(`accountChanged `, JSON.stringify(session));
    }
});

Connect to the wallet#

Connects to the wallet to get the wallet address as an identifier and the necessary parameters for signing the transaction.

okxUniversalConnectUI.openModal(connectParams: ConnectParams);

Request parameters

• connectParams - ConnectParams
  • namespaces - [namespace: string]: ConnectNamespace ; Necessary information for the requested connection, the key for the Sui line is ‘sui’. If any of the requested chains are not supported by the wallet, the wallet will reject the connection;
    • chains: string[]; information about the chain ids, the name of the chain, the name of the wallet, and the name of the wallet.
  • optionalNamespaces - [namespace: string]: ConnectNamespace; optional information of the requested connection, the key of EVM system is ‘eip155’, the key of Sui system is ‘sui’. If the corresponding chain information is not supported by the wallet, the connection can still be made;
    • chains: string[]; chain id information, if the corresponding chain is not supported by the wallet.
  • sessionConfig: object
    • redirect: string Jump parameter after successful connection, if it is a Mini App in Telegram, here you can set it 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 in the current namespace;
    • defaultChain?: string; The default chain for the current session.
  • sessionConfig?: SessionConfig
    • dappInfo: object DApp information;
      • name: string
      • icon:string

Example

var session = await okxUniversalConnectUI.openModal({
  namespaces: {
        sui: {
            chains: [‘sui:mainnet’]
        }
    }
})

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 universalUi.openModalAndSign(connectParams: ConnectParams,signRequest: RequestParams[]);

Request Parameters

• connectParams - ConnectParams

  • namespaces - [namespace: string]: ConnectNamespace ; information necessary to request a connection, the key for Sui is ‘sui’ If any of the requested chains are not supported by the wallet, the wallet will reject the connection;
    • chains: string[]; information about the chain ids, the name of the chain, the name of the wallet, and the name of the wallet.
  • optionalNamespaces - [namespace: string]: ConnectNamespace; optional information of the requested connection, the key of Sui is ‘sui’ If the corresponding chain information is not supported by the wallet, the connection can still be made;
    • chains: string[]; Chain id information, if the corresponding chain is not supported by the wallet, it can still be connected.
  • sessionConfig: object
    • redirect: string Jump parameter after successful connection, if it is a Mini App in Telegram, here you can set it 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, Sui supports methods such as ‘sui_signMessage’ and ‘sui_signPersonalMessage’;
  • chainId: string; the ID of the chain where 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; ReturnValue

• Promise<SessionTypes.Struct | undefined>; the parameters corresponding to the requested method.

  • 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);
});
let suiData = [
    76, 111, 103, 105, 110, 32, 119, 105, 116, 104, 32, 66, 108, 117, 101.
    109, 111, 118, 101,
];
let uint8Array = new Uint8Array(suiData);
var session = await okxUniversalConnectUI.openModalAndSign({
     namespaces: {
            sui: {
                chains: [‘sui:mainnet’]
            }
    },
    sessionConfig: {
        redirect: ‘tg://resolve’
    }
},
    [
        {
        chainId: ‘sui:mainnet’,
        method: ‘sui_signMessage’,
        params: {
            message: uint8Array,
            }
        }
    ]
)

Determine if the wallet is connected#

Gets whether the wallet is currently connected or not;

** Return Value**

• boolean

example

okxUniversalConnectUI.connected();

Disconnect#

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

Example

okxUniversalConnectUI.disconnect();

Prepare a transaction#

Methods to send messages to the wallet, support signature, transaction; when the wallet confirmation method is needed, it will pop up a prompt page;

First create an OKXSuiProvider object, pass okxUniversalConnectUI into the constructor.

import { OKXSuiProvider } from ‘@okxconnect/sui-provider’
let suiProvider = new OKXSuiProvider(okxUniversalConnectUI)

Get account information#

suiProvider.getAccount();

Returns the value.

• Object
  • address: string wallet address
  • publicKey: string public key (requires App 6.92.0 or later)

Example

let result = suiProvider.getAccount()

// Return structure
{
    "address": “0x7995ca23961fe06d8cea7da58ca751567ce820d7cba77b4a373249034eecca4a”,
    "publicKey": “tUvCYrG22rHKR0c306MxgnhXOSf16Ot6H3GMO7btwDI=”,
}

Signature Message#

suiProvider.signMessage(input: SuiSignMessageInput);

Request parameters

• SuiSignMessageInput - object
  • message: Uint8Array

Return value

• Promise - object
  • messageBytes: string
  • signature: string

Signature PersonalMessage#

suiProvider.signPersonalMessage(input: SuiSignMessageInput);

Request parameters

• SuiSignMessageInput - object
  • message: Uint8Array

Return value

• Promise - object
  • bytes: string
  • signature: string

Example

const data = [76, 111, 103, 105, 110, 32, 119, 105, 116, 104, 32, 66, 108, 117, 101, 109, 111, 118, 101];
const uint8Array = new Uint8Array(data);
let input = {
  message: uint8Array
}
let signResult1 = await suiProvider.signMessage(input)
let signResult2 = await suiProvider.signPersonalMessage(input)

Sign the deal#

suiProvider.signTransaction(input);

*** request parameters ***

// txBytes and txSerialize for serialisation of transactionBlock
// and transactionBlock can be passed in one way without passing in both.
interface SuiSignTransactionBlockInput {
  transactionBlock: TransactionBlock; chain: IdentifierString; }
  chain: IdentifierString;
  txBytes: string?
  txSerialize: string?
}

Return Value

• Promise - object
  • signature: string,
  • transactionBlockBytes: string

Sign the transaction and broadcast it up the chain#

suiProvider.signAndExecuteTransaction(input);

***Request Parameters

// txBytes with txSerialize for transactionBlock serialisation
// and transactionBlock can be passed in one way without passing in both.
interface SuiSignTransactionBlockInput {
  transactionBlock: TransactionBlock;
  chain: IdentifierString;
  txBytes: string?;
  txSerialize: string?;
}

Return Value

• Promise - object
  • confirmedLocalExecution: bool,
  • digest: string,
  • txBytes: string

Example

// Define the amount to be transferred and the destination address.
const amount = 109; // Amount to be transferred
const recipientAddress = ‘0x’; // destination address

/// Construct a transaction to transfer
const tx = new Transaction();
const [coin] = tx.splitCoins(tx.gas, [amount]);
tx.transferObjects([coin], recipientAddress)
const input = {
  transactionBlock: tx,
  chain: ‘sui:mainnet’,
  options: {
    showEffects: true,
  }
}

let signResult1 = await suiProvider.signTransaction(input)
let signResult2 = await suiProvider.signAndExecuteTransaction(input)

Event event#

Same details as EVM compatibility chain

Error code#

Same details as EVM compatibility chain