In addition to SDK, we also provide a UI interface. If using the UI connection, and the DApp is operating in Telegram, users can choose to open the mobile App Wallet or stay in Telegram and launch the OKX Mini Wallet.
npm install @okxconnect/ui
Before connecting to the wallet, you need to create an object for subsequent operations such as connecting to the wallet and sending transactions.
OKXUniversalConnectUI.init(dappMetaData, actionsConfiguration, uiPreferences, language, restoreConnection)
Request parameters
${string}://${string}
; For app wallet, specify the return strategy for the deep link when the user signs/rejects the request, or configure tg://resolve if it's in tg;${string}://${string}
; for Telegram Mini Wallet, specify the return policy for the deep link when the user signs/rejects the request, generally configure back, which means that after signing and closing the wallet, it will automatically display the dapp; none means no processing after signing; the default is back;Return Value.
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
},
});
Connecting to a wallet goes to get the wallet address as an identifier and the necessary parameters used to sign the transaction, the
await universalUi.openModal(connectParams: ConnectParams);
Request Parameters
Return value
<SessionTypes.Struct | undefined>
Record<string, Namespace>
; namespace information for a successful connection;
Example
var session = await universalUi.openModal({
namespaces: {
eip155: {
chains: ["eip155:1", "eip155:xxx"], // 可以设置多条链,替换xxx为其它所需的链id
defaultChain: "1"
}
},
optionalNamespaces: {
eip155: {
chains: ["eip155:43114"]
}
}
})
Gets whether the wallet is currently connected.
Return Value
Example
universalUi.connected();
Methods for sending messages to the wallet, supporting signatures, transactions.
universalUi.request(requestArguments, chain, actionConfigurationRequest);
requestArguments
<string, unknown>
| object | undefined; The parameters corresponding to the requested method;${string}://${string}
; The return strategy for the deep link in the App wallet when the user signs or rejects the request, if it is a Mini App in Telegram, it can be configured with tg://resolve, and if it's not configured here, the will take the returnStrategy passed by the init method, default is'none’${string}://${string}
; Telegram Mini Wallet wallet, when the user signs/rejects the request, the deep link return strategy, generally configure back, that is to say, after signing and closing the wallet, it will show the dapp; none means that after signing and closing the wallet, it will show the dapp automatically. dapp; none means no processing after signing; default is back;** return value **
return parameter details same as EVM-compatible chain for sending signatures and transactions
Examples
Example same EVM-compatible chain for sending signatures and transactions
let chain ='eip155:1'
var data = {}
data = {
"method": "personal_sign",
"params": [
"0x506c65617365207369676e2074686973206d65737361676520746f20636f6e6669726d20796f7572206964656e746974792e",
"0x4B0897b0513FdBeEc7C469D9aF4fA6C0752aBea7"
]
}
var personalSignResult = await universalUi.request(data, chain,'all')
//personalSignResult: 0xe8d34297c33a61"
Example
universalUi.closeModal();
Get information about whether there is a currently connected wallet, and the connected wallets;
Example
universalUi.session.
Support to change the theme, text language setting, also can add these configurations during initialisation;
example
universalUi.uiOptions = {
language:'zh_CN',
uiPreferences: {
theme: THEME.DARK
}
};
In the case of multiple networks, if the developer does not specify the network where the current operation is taking place, the interaction will take place through the default network.
'setDefaultChain(chain)'
Example
universalUi.setDefaultChain('eip155:1')
Example
universalUi.disconnect();
// Generate universalLink
okxUniversalProvider.on('display_uri', (uri) => {
console.log(uri);
}).
// Session information changes (e.g. adding a custom chain) will trigger this event;
okxUniversalProvider.on('session_update', (session) => {
console.log(JSON.stringify(session));
});
// Disconnecting triggers this event;
okxUniversalProvider.on('session_delete', ({topic}) => {
console.log(topic);
});