Provider API#
What is injected provider API?#
The OKX injected provider API is a JavaScript API that OKX injects into websites visited by our users. Your DApp can use this API to request users' accounts, read data from blockchains users are connected to, and help users sign messages and transactions.
Note: Cosmos is only supported on the OKX browser extension.
Connecting to OKX Wallet#
window.okxwallet.keplr.enable(chainIds)
Description
If OKX Wallet is locked, you can unlock the wallet by using window.keplr.enable(chainIds). You'll be required to grant the webpage permission to access Keplr if such permission wasn't previously granted.
The enable method can receive one or more chain IDs as an array. When passing the chain ID array, you can simultaneously request the permissions of all chains that haven't been authorized. If you cancel the unlocking or are denied permission, an error will show.
enable(chainIds: string | string[]): Promise<void>
Example
Open in codeopen.
<button class="connectCosmosButton">Connect Cosmos</button>
const connectCosmosButton = document.querySelector('.connectCosmosButton');
connectCosmosButton.addEventListener('click', async() => {
try {
const chainId = "cosmoshub-4";
// Enabling before using the Keplr is recommended.
// This method will ask the user whether to allow access if they haven't visited this website.
// Also, it will request that the user unlock the wallet if the wallet is locked.
await window.okxwallet.keplr.enable(chainId);
console.log(res);
} catch (error) {
console.log(error);
}
});
Signing transactions#
window.okxwallet.keplr.signAmino(chainId, signer, signDoc)
Description
This request signs in a fixed format, similar to the signAmino method of OfflineSigner of cosmjs.
Parameters are objects, and signDoc is a fixed format.
window.okxwallet.keplr.signAmino(chainId: string, signer: string, signDoc: StdSignDoc, signOptions: any): Promise<AminoSignResponse>
Example
Open in codeopen.
<button class="connectCosmosButton btn">Connect Cosmos</button>
<button class="signTransactionButton btn">Sign Transaction</button>
const connectCosmosButton = document.querySelector('.connectCosmosButton');
const signTransactionButton = document.querySelector('.signTransactionButton');
signTransactionButton.addEventListener('click', async() => {
try {
const res = const res = await window.okxwallet.keplr.signAmino(
"osmosis-1",
"osmo1sxqwesgp7253fdv985csvz95fwc0q53ulldggl",
{
account_number: "707744",
chain_id: "osmosis-1",
fee: {
gas: "500000",
amount: [
{
denom: "uosmo",
amount: "12500"
}
]
},
memo: "",
msgs: [
{
type: "osmosis/gamm/swap-exact-amount-in",
value: {
routes: [
{
pool_id: "795",
token_out_denom: "uosmo"
},
{
pool_id: "1",
token_out_denom:
"ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2"
}
],
sender: "osmo1sxqwesgp7253fdv985csvz95fwc0q53ulldggl",
token_in: {
amount: "10000",
denom:
"ibc/2DA9C149E9AD2BD27FEFA635458FB37093C256C1A940392634A16BEA45262604"
},
token_out_min_amount: "553"
}
}
],
sequence: "54"
}
);
console.log(res);
} catch (error) {
console.log(error)
}
});
connectCosmosButton.addEventListener('click', async() => {
try {
const chainId = "cosmoshub-4";
// Enabling before using the Keplr is recommended.
// This method will ask the user whether to allow access if they haven't visited this website.
// Also, it will request that the user unlock the wallet if the wallet is locked.
const res = await window.keplr.enable(chainId);
console.log(res);
} catch (error) {
console.log(error);
}
});
Signing messages#
window.okxwallet.keplr.signArbitrary(chainId, signer, data)
Description
This request will sign any information, which is equivalent to the signMessage (any) of the previous chains.
signArbitrary(
chainId: string,
signer: string,
data: string | Uint8Array
): Promise<StdSignature>;
verifyArbitrary(
chainId: string,
signer: string,
data: string | Uint8Array,
signature: StdSignature
): Promise<boolean>;
Example
Open in codeopen.
<button class="connectCosmosButton btn">Connect Cosmos</button>
<button class="signMessageButton btn">Sign Message</button>
const connectCosmosButton = document.querySelector('.connectCosmosButton');
const signMessageButton = document.querySelector('.signMessageButton');
signMessageButton.addEventListener('click', async() => {
try {
const res = await window.okxwallet.keplr.signArbitrary({
"osmosis-1",
"osmo1sxqwesgp7253fdv985csvz95fwc0q53ulldggl",
'test cosmos'
}
);
console.log(res);
} catch (error) {
console.log(error)
}
});
connectCosmosButton.addEventListener('click', async() => {
try {
const chainId = "cosmoshub-4";
// Enabling before using the Keplr is recommended.
// This method will ask the user whether to allow access if they haven't visited this website.
// Also, it will request that the user unlock the wallet if the wallet is locked.
const res = await window.keplr.enable(chainId);
console.log(res);
} catch (error) {
console.log(error);
}
});
Events#
Connecting to OKX Wallet
You can connect to OKX Wallet by calling window.okxwallet.keplr.enable(chainId). When the user approves the connection request, the connection event will be triggered.
Usage
window.okxwallet.keplr.on("connect", () => console.log("connected!"));
Example
Open in codeopen.
<button class="connectCosmosButton">Connect Cosmos</button>
const connectCosmosButton = document.querySelector('.connectCosmosButton');
window.okxwallet.keplr.on("connect", () => console.log("connected!"));
connectCosmosButton.addEventListener('click', () => {
try {
const chainId = "cosmoshub-4";
// Enabling before using the Keplr is recommended.
// This method will ask the user whether to allow access if they haven't visited this website.
// Also, it will request that the user unlock the wallet if the wallet is locked.
const res = await window.okxwallet.keplr.enable(chainId);
console.log(res);
} catch (error) {
console.log(error);
}
});