UI#
在 SDK 的基础上,我们也提供了 UI 界面。如果选择通过UI接入,若DApp运营在 Telegram内,则用户可以选择停留在Telegram并唤起移动端App钱包或者唤起OKX Wallet 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.on("accountChanged", (session) => {
    if (session){
        console.log(`accountChanged `, JSON.stringify(session));
    }
});
连接钱包#
连接钱包获取钱包地址,作为标识符和用于签名交易的必要参数
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; 默认链
 
 
- namespaces - [namespace: string]: ConnectNamespace ; 请求连接的必要信息,Solana系的key为"solana"
,如果请求的链中,有任何一个链钱包不支持的话,钱包会拒绝连接
返回值
- 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
 
 
- dappInfo: object DApp 信息
 
示例
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_signResponse"的event中回调
await universalUi.openModalAndSign(connectParams: ConnectParams,signRequest: RequestParams[]);请求参数
- 
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; 默认链
 
 
- namespaces - [namespace: string]: ConnectNamespace ; 请求连接的必要信息,Solana系的key为"solana"
,如果请求的链中,有任何一个链钱包不支持的话,钱包会拒绝连接
- 
signRequest - RequestParams[]; 请求连接并签名的方法, 同时最多只能支持一个方法; - method: string; 请求的方法名称, Solana支持的方法有:"solana_signMessage"
- chainId: string; 执行方法所在的链的ID, 该chainId必须包含在上面的namespaces中
- params: unknown[] | Record<string, unknown>| object | undefined; 请求的方法对应的参数 返回值
 
- 
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 示例
 
 
- dappInfo: object DApp 信息
 
// 先添加签名结果监听
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"
        }
    }
])
判断钱包是否已连接#
获取当前是否有连接钱包
返回值
- 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, 请求签名执行的链,建议传递此参数,连接多条链时为必传参数,连接单条链时则默认为当前链
返回值
- Promise - object
- publicKey:string 钱包地址
- signature:Uint8Array 签名结果
 
签单笔交易
okxSolanaProvider.signTransaction(transaction, chain)请求参数
- transaction - Transaction | VersionedTransaction 交易数据对象
- chain: string, 请求签名执行的链,建议传递此参数,连接多条链时为必传参数,连接单条链时则默认为当前链
返回值
- Promise - Transaction | VersionedTransaction 签名后的交易对象
签多笔交易#
okxSolanaProvider.signAllTransactions(transactions, chain)请求参数
- transactions - [Transaction | VersionedTransaction] 交易数据对象数组
- chain: string, 请求签名执行的链,建议传递此参数,连接多条链时为必传参数,连接单条链时则默认为当前链
返回值
- Promise - [Transaction | VersionedTransaction] 签名后的交易对象数组
签一笔交易并广播上链#
okxSolanaProvider.signAndSendTransaction(transaction, chain)请求参数
- transactions - Transaction | VersionedTransaction 交易数据对象
- chain: string, 请求签名执行的链,建议传递此参数,连接多条链时为必传参数,连接单条链时则默认为当前链
返回值
- 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()
