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.

HTML

JavaScript

<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.

HTML

JavaScript

<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.

HTML

JavaScript

<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.

HTML

JavaScript

<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);
  }
});

Connect to Extension Wallet

Cosmos/Sei

Connect to Extension Wallet

SUI

Table of contents

What is injected provider API?

Connecting to OKX Wallet

Signing transactions

Signing messages

Events