In addition to the SDK, we also provide a UI interface. If you choose to integrate through the UI, and if the DApp is running inside Telegram, users can choose to stay within Telegram and invoke the mobile App wallet or the OKX Mini Wallet.
Make sure to update the OKX App to version 6.90.1 or later to begin access:
To integrate OKX Connect into your DApp, you can use npm:
npm install @okxconnect/ui
npm install @okxconnect/solana-provider
Before connecting to a 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
${string}://${string}
; for app wallet, specify the return strategy for the deep link when the user signs/rejects the request, if it is in telegram, you can configure tg://resolve${string}://${string}
; For Telegram Mini Wallet, specify the return policy of deep link when user signs/rejects the request, if it's in telegram, you can configure tg://resolve none means no processing after signing; default is back;Return value
Example
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.
universalUi.openModal(connectParams: ConnectParams);
Request Parameters
Return Value
<SessionTypes.Struct | undefined>
Record<string, Namespace>
; namespace information for successful connections;
Example
var session = await universalUi.openModal({
namespaces: {
solana: {
chains: ["solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp", // solana mainnet
// "solana:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z",// solana testnet
// "sonic:4uhcVJyU9pJkvQyS88uRDiswHXSCkY3z",// sonic testnet ;
],
}
}
})
Gets whether the wallet is currently connected.
Return Value
Example
universalUi.connected();
Methods to send messages to the wallet, support signature, transaction.
First create an OKXSolanaProvider object, pass OKXUniversalProviderUI into the constructor, when calling OKXSolanaProvider related methods, the actionsConfiguration.mode configuration will be handled according to the values passed during init;
import { OKXSolanaProvider } from "@okxconnect/solana-provider";
let okxSolanaProvider = new OKXSolanaProvider(universalUi)
okxSolanaProvider.signMessage(message, chain);
Request parameters
Return value
okxSolanaProvider.signTransaction(transaction, chain)
request parameters
Return Value
okxSolanaProvider.signAllTransactions(transactions, chain);
request parameters
Return value
okxSolanaProvider.signAndSendTransaction(transaction, chain);
Request parameters
Return Value
okxSolanaProvider.getAccount(chain);
Request parameters
Return Value
Example
//Signing 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 the connected wallet and delete the current session. If you want to switch the connected wallet, please disconnect the current wallet first.
universalUi.disconnect();