连接App或Mini钱包

UI#

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

安装及初始化#

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

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

npm install @okxconnect/ui
npm install @okxconnect/sui-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 钱包,指定当用户签署/拒绝请求时深层链接的返回策略,如果是在tg中,可以配置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 okxUniversalConnectUI = await OKXUniversalConnectUI.init({
  dappMetaData: {
    icon: "https://static.okx.com/cdn/assets/imgs/247/58E63FEA47A2B7D7.png",
    name: "OKX WalletConnect UI Demo"
  },
  actionsConfiguration: {
    returnStrategy: 'tg://resolve',
    modals:"all",
    tmaReturnUrl:'back'
  },
  language: "en_US",
  uiPreferences: {
    theme: THEME.LIGHT
  },
});

连接钱包#

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

okxUniversalConnectUI.openModal(connectParams: ConnectParams);

请求参数

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

返回值

  • Promise<SessionTypes.Struct | undefined>
    • topic: string; 会话标识;
    • namespaces: Record<string, Namespace>; 成功连接的namespace 信息;
      • chains: string[]; 连接的链信息;
      • accounts: string[]; 连接的账户信息;
      • methods: string[]; 当前namespace下,钱包支持的方法;
      • rpcMap?: [chainId: string]: string; rpc 信息;
      • 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
      ],
    }
  }
})

断开连接#

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

示例

okxUniversalConnectUI.disconnect();

发送签名和交易#

向钱包发送消息的方法,支持签名,交易,rpc请求;当需要钱包确认的方法时候,会弹出提示页面;

首先创建一个OKXSuiProvider对象,构造函数传入okxUniversalConnectUI

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

签名Message

suiProvider.signMessage(input: SuiSignMessageInput);

请求参数

  • SuiSignMessageInput - object
    • message: Uint8Array

返回值

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

签名PersonalMessage

suiProvider.signPersonalMessage(input: SuiSignMessageInput);

请求参数

  • SuiSignMessageInput - object
    • message: Uint8Array

返回值

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

示例

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)

签交易

suiProvider.signTransaction(input);

请求参数

// txBytes与txSerialize为transactionBlock的序列化
// 和transactionBlock传入一种即可无需同时传入
interface SuiSignTransactionBlockInput {
  transactionBlock: TransactionBlock;
  chain: IdentifierString;
  txBytes: string?;
  txSerialize: string?
}

返回值

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

签一笔交易并广播上链

suiProvider.signAndExecuteTransaction(input);

请求参数

// txBytes与txSerialize为transactionBlock的序列化
// 和transactionBlock传入一种即可无需同时传入
interface SuiSignTransactionBlockInput {
  transactionBlock: TransactionBlock;
  chain: IdentifierString;
  txBytes: string?;
  txSerialize: string?;
}

返回值

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

示例

// 定义要转移的金额和目标地址
const amount = 109; // 需要转移的金额
const recipientAddress = '0x'; // 目标地址

/// 构造一个转账的交易
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)