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 stay in Telegram and evoke the mobile App Wallet or evoke the Ouyi 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/solana-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: 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 close the wallet after signing, and it will automatically show the dapp; 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 universalUi = 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
    },
});

// Switching the plugin to connect to the wallet fires this event;
universalUi.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 used to sign the transaction.

universalUi.openModal(connectParams: ConnectParams);

Request parameters

• connectParams - ConnectParams
  • namespaces - [namespace: string]: ConnectNamespace ; Necessary information for the requested connection, the Solana line has a key of ‘solana’ If any of the requested chains are not supported by the 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, Solana key is ‘solana’. If the corresponding chain information is not supported by the wallet, the connection can still be made;
    • chains: string[]; chain id information, defaultChain?
    • defaultChain?: string; default chain

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 universalUi.openModal({
    namespaces: {
        solana: {
            chains: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', // solana mainnet
            //  "sonic:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",// sonic mainnet
            // ‘solana:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z’, // solana testnet
            // ‘sonic:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z’,// sonic testnet ;
            ],
        }
    }
})

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 Solana key is ‘solana’. If any of the requested chains are not supported by the 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, Solana key is ‘solana’. If the corresponding chain information is not supported by the wallet, the connection can still be made;
    • chains: string[]; chain id information, defaultChain?
    • defaultChain?: string; default chain

• signRequest - RequestParams[]; the method for requesting a connection and signing the request, at most one method can be supported at a time;

  • method: string; The name of the requested method, Solana supports methods such as: ‘solana_signMessage’;
  • chainId: string; the ID of the chain in which 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>

  • 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

Examples

// Start by adding a signature result listener
universalUi.on('connect_signResponse', (signResponse) => {
  console.log(signResponse);
});
var session = await universalUi.openModalAndSign({
    namespaces: {
        solana: {
            chains: ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', // solana mainnet
                //  "sonic:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp",// sonic mainnet
                // ‘solana:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z’, // solana testnet
                // ‘sonic:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z’,// sonic testnet ;
            ],
        }
    },
    sessionConfig: {
        redirect: 'tg://resolve'
    }
},[
    {
        chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
        method: 'solana_signMessage',
        params: {
            message: 'Hello Solana',
        }
    }
])

Determine if the wallet is connected

Gets whether the wallet is currently connected;.

** return value **

• boolean

example typescript universalUi.connected();

Prepare a transaction

Methods to send a message to a wallet, support signature, transaction.

First create an OKXSolanaProvider object, the constructor passes in OKXUniversalProviderUI, and when the OKXSolanaProvider related methods are called, the actionsConfiguration.mode configuration will be handled according to the values passed at init time;

import { OKXSolanaProvider } from '@okxconnect/solana-provider';
let okxSolanaProvider = new OKXSolanaProvider(universalUi)

Signature

okxSolanaProvider.signMessage(message, chain);

Request Parameters

• message - string, the message to be signed
• chain: string, the chain to be executed by the request signature, it is recommended to pass this parameter; it is mandatory to pass this parameter when connecting multiple chains; connecting a chain without passing it will be handled according to solana:mainnet or sonic:mainnet;

Return value

• Promise - object
  • publicKey:string wallet address
  • signature:Uint8Array The signature result.

Sign a single transaction

okxSolanaProvider.signTransaction(transaction, chain);

Request parameters

• transaction - Transaction | VersionedTransaction transaction data object
• chain: string, the chain for which the signature execution is requested, it is recommended to pass this parameter; it is mandatory to pass this parameter when connecting multiple chains; connecting a chain without passing it will be handled according to solana:mainnet or sonic:mainnet;

Return Value

• Promise - Transaction | VersionedTransaction signed transaction object;

Sign multiple transactions

okxSolanaProvider.signAllTransactions(transactions, chain);

Request parameters

• transactions - [Transaction | VersionedTransaction] array of transaction data objects
• chain: string, the chain for which the signature execution is requested, it is recommended to pass this parameter; it is mandatory to pass this parameter when connecting multiple chains; connecting a chain without passing it will be handled according to solana:mainnet or sonic:mainnet;

Return value

• Promise - [Transaction | VersionedTransaction] An array of signed transaction objects;

Sign a transaction and broadcast it up the chain

okxSolanaProvider.signAndSendTransaction(transaction, chain);

Request parameters

• transactions - Transaction | VersionedTransaction transaction data object
• chain: string, the chain for which the signature execution is requested, it is recommended to pass this parameter; it is mandatory to pass this parameter when connecting multiple chains; connecting a chain without passing it will be handled according to solana:mainnet or sonic:mainnet;

Return Value

• Promise - string transactionhash;

Get wallet account information

okxSolanaProvider.getAccount(chain);

Request Parameters

• chain: string, get the chain id of the wallet address, if not passed then the first connected svm address will be taken by default.

Return Value

• Object
  • address: string The address of the wallet.
  • publicKey: PublicKey

Example

// Sign a transfer transaction on solana mainnet.
let provider = new OKXSolanaProvider(universalUi)
const transaction = new Transaction({
    feePayer: new PublicKey(provider.getAccount().address),
    recentBlockhash: 'xNWbUfdEPktMsZQHY6Zk5RJqamWFcTKasekjr7c3wFX',
}).add(SystemProgram.transfer(
    {
        fromPubkey: new PublicKey(provider.getAccount().address),
        toPubkey: new PublicKey(provider.getAccount().address),
        lamports: 1000,
    }
))

let result = await provider.signTransaction(transaction, 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp')

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.

universalUi.disconnect();

Event

Same as EVM compatibility chain

Error code

Same as EVM compatibility chain