UI#

在 SDK 的基础上，我们也提供了 UI 界面。如果选择通过UI接入，若DApp运营在 Telegram内，则用户可以选择停留在Telegram并唤起移动端App钱包或者唤起欧易 Mini 钱包。

安装及初始化#

请确保更新OKX App到 6.90.1版本或以后版本，即可开始接入：

将 OKX Connect 集成到您的 DApp 中，可以使用 npm:

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

连接钱包之前，需要先创建一个可以提供UI界面的对象，用于后续连接钱包、发送交易等操作。

OKXUniversalConnectUI.init(dappMetaData, actionsConfiguration, uiPreferences, language)

请求参数

• dappMetaData - object
  • name - string: 应用名称，不会作为唯一表示
  • icon - string: 应用图标的 URL。必须是 PNG、ICO 等格式，不支持 SVG 图标。最好传递指向 180x180px PNG 图标的 url。
• actionsConfiguration - object
  • modals - ('before' | 'success' | 'error')[] | 'all' 交易过程中的提醒界面展示模式，默认为'before'
  • returnStrategy -string 'none' | ${string}://${string}; 针对app 钱包，指定当用户签署/拒绝请求时深层链接的返回策略，如果是在telegram中，可以配置tg://resolve
  • tmaReturnUrl -string 'back' | 'none' | ${string}://${string}; Telegram Mini Wallet 钱包中，用户签署/拒绝请求时深层链接的返回策略，一般配置back,表示签名后关闭钱包，会自动展示出dapp；none 表示签名后不做处理；默认为back；
• uiPreferences -object
  • theme - Theme 可以是：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"; , 默认为en_US

返回值

• OKXUniversalConnectUI

示例

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
    },
});

连接钱包#

连接钱包去获取钱包地址，作为标识符和用于签名交易的必要参数。

universalUi.openModal(connectParams: ConnectParams)

请求参数

• connectParams - ConnectParams
  • namespaces - [namespace: string]: ConnectNamespace ; 请求连接的必要信息，Solana系的key为"solana" ，如果请求的链中，有任何一个链钱包不支持的话，钱包会拒绝连接
    • chains: string[]; 链id信息,
    • defaultChain?: string; 默认链
  • optionalNamespaces - [namespace: string]: ConnectNamespace; 请求连接的可选信息，Solana系的key为"solana" ，如果对应的链信息钱包不支持，依然可以连接
    • chains: string[]; 链id信息
    • defaultChain?: string; 默认链

返回值

• Promise<SessionTypes.Struct | undefined>
  • topic: string; 会话标识
  • namespaces: Record<string, Namespace>; 成功连接的namespace 信息
    • chains: string[]; 连接的链信息
    • accounts: string[]; 连接的账户信息
    • methods: string[]; 当前namespace下，钱包支持的方法
    • defaultChain?: string; 当前会话的默认链
  • sessionConfig?: SessionConfig
    • dappInfo: object DApp 信息
      • name:string
      • icon:string

示例

var session = await universalUi.openModal({
    namespaces: {
        solana: {
            chains: ["solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp", // solana mainnet
            //  "solana:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z",// solana testnet
            //  "sonic:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z",// sonic testnet
            ],
        }
    }
})

判断钱包是否已连接#

获取当前是否有连接钱包

返回值

• boolean

示例

universalUi.connected()

准备交易#

向钱包发送消息的方法，支持签名，交易

首先创建一个OKXSolanaProvider对象，构造函数传入OKXUniversalProviderUI，当 调用 OKXSolanaProvider 相关的方法时，actionsConfiguration.mode 的配置会按照init 时候传递的值处理

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

签名#

okxSolanaProvider.signMessage(message, chain)

请求参数

• message - string 需要签名的消息
• chain: string, 请求签名执行的链，建议传递此参数；连接多条链时为必传参数；连接一条链如果未传，则按照solana:mainnet或sonic:testnet处理

返回值

• Promise - object
  • publicKey:string 钱包地址
  • signature:Uint8Array 签名结果

签单笔交易

okxSolanaProvider.signTransaction(transaction, chain)

请求参数

• transaction - Transaction | VersionedTransaction 交易数据对象
• chain: string, 请求签名执行的链，建议传递此参数；连接多条链时为必传参数；连接一条链如果未传，则按照solana:mainnet或sonic:testnet处理

返回值

• Promise - Transaction | VersionedTransaction 签名后的交易对象

签多笔交易#

okxSolanaProvider.signAllTransactions(transactions, chain)

请求参数

• transactions - [Transaction | VersionedTransaction] 交易数据对象数组
• chain: string, 请求签名执行的链，建议传递此参数；连接多条链时为必传参数；连接一条链如果未传，则按照solana:mainnet或sonic:testnet处理

返回值

• Promise - [Transaction | VersionedTransaction] 签名后的交易对象数组

签一笔交易并广播上链#

okxSolanaProvider.signAndSendTransaction(transaction, chain)

请求参数

• transactions - Transaction | VersionedTransaction 交易数据对象
• chain: string, 请求签名执行的链，建议传递此参数；连接多条链时为必传参数；连接一条链如果未传，则按照solana:mainnet或sonic:testnet处理

返回值

• Promise - string 交易hash

获取钱包账户信息#

okxSolanaProvider.getAccount(chain)

请求参数

• chain: string, 获取钱包地址的链Id,不传则默认取第一个连接的svm地址

返回值

• Object
  • address: string 钱包地址
  • publicKey: PublicKey

示例

//在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")

断开钱包连接#

断开已连接钱包,并删除当前会话,如果要切换连接钱包,请先断开当前钱包。

universalUi.disconnect()

Event事件#

// 生成 universalLink
universalUi.on("display_uri", (uri) => {
  console.log(uri);
});
// session 信息变更（例如添加自定义链）会触发该事件；
universalUi.on("session_update", (session) => {
  console.log(JSON.stringify(session));
});
// 断开连接会触发该事件；
universalUi.on("session_delete", ({topic}) => {
  console.log(topic);
});
// 连接并签名时,签名结果会触发该事件;
universalUi.on("connect_signResponse", (signResponse) => {
  console.log(signResponse);
});

错误码#

在连接，交易，断开连接的过程中可能抛出的异常

异常

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
}