@okxweb3/connect-kit

The OKX Web3 Connect Kit is a lightweight SDK designed to help developers quickly integrate OKX Connect across multiple ecosystems, including Web, Mobile, and Telegram. It supports mainstream blockchain standards such as EIP-6963 and wallet-standard for wallet provider injection and detection, enabling seamless DApp integration with minimal effort and significantly reducing development and integration costs. Existing DApps can be adapted with minimal code changes, often requiring just two lines of code to complete the integration.

npm i @okxweb3/connect-kit

DApp Use Cases

Identify the specific scenario for your DApp. Existing DApps can quickly integrate functionality, while new DApps can refer to the comprehensive integration examples and API documentation below.

1. In Telegram | Mobile Browser

In mobile browsers and Telegram, the Connect Kit automatically injects providers for chains like Ethereum and Solana, broadcasting EIP-6963 and wallet-standard events. No additional code changes are required for DApps to function.

Quick Integration for Existing DApps

import { init } from '@okxweb3/connect-kit';
await init();

Integration for New DApps

// Step 1: Initialize
import { init } from '@okxweb3/connect-kit';
await init();

// Step 2: Add events
window.ethereum.on('connect', (result) => {
  console.log('chainId: ', result.chainId);
});
window.ethereum.on('accountsChanged', (result) => {
  console.log('address: ', result[0]);
});

// Step 3: Connect
// Option 1: Use window.ethereum to connect
const result = await window.ethereum.request({ method: 'eth_requestAccounts' });
console.log('address: ', result[0]);

// Option 2: Connect to OKX Mini Wallet
import { connectOKXMiniWallet } from '@okxweb3/connect-kit';
connectOKXMiniWallet();

// Option 3: Connect to OKX App Wallet
import { connectOKXAppWallet } from '@okxweb3/connect-kit';
connectOKXAppWallet();

2. In PC Browser

In PC environments, Connect Kit supports both automatic and manual provider switching:

• For DApps supporting EIP-6963 or wallet-standard, initialization is sufficient.
• For DApps not supporting these standards or integrating multiple wallets, the setProvider method can be used for manual provider switching.

Quick Integration for Existing DApps (Supporting 6963 or Wallet Standard)

// Initialize
import { init } from '@okxweb3/connect-kit';
await init();

Quick Integration for Existing DApps (Not Supporting 6963 or Wallet Standard)

Supports provider switching:

// Step 1: Initialize
import { init } from '@okxweb3/connect-kit';
await init();

// Step 2: Get provider
import { getProvider, SupportedNetworks } from '@okxweb3/connect-kit';
const provider = getProvider(SupportedNetworks.ETHEREUM);

// Refer to [web3.js](https://docs.web3js.org/libdocs/AccountAbstraction#setprovider) for setProvider implementation
setProvider(provider);

Full Example for New DApps Supporting 6963

// Step 1: Initialize
import { init } from '@okxweb3/connect-kit';
await init();

// Step 2: Get provider
window.addEventListener('eip6963:announceProvider', (event) => {
  setProvider(event.detail.provider);
  console.log('provider:', event.detail.provider);
});

// Step 3: Use provider to connect
const result = await provider.request({ method: 'eth_requestAccounts' });
console.log('address: ', result[0]);

Full Example for New DApps not Supporting 6963

// step1 init 
import { init, getProvider, SupportedNetworks } from '@okxweb3/connect-kit';
await init();

// step2 get provider
const provider = getProvider(SupportedNetworks.ETHEREUM);
setProvider(provider);

// step3 add ethereum events
provider.on('connect', function(result){
  console.log('chainId: ', result.chainId)
});
provider.on('accountsChanged', function(result){
  console.log('address: ', result[0]);
})

// step4 connect
// option 1. use window.ethereum to connect 
const result  = await window.ethereum.request({method: 'eth_requestAccounts'});
console.log('address: ', result[0]);

// option 2. connect to OKX mini wallet
import { connectOKXMiniWallet } from '@okxweb3/connect-kit';
connectOKXMiniWallet();

// option 3. connect to OKX App Wallet
import { connectOKXAppWallet } from '@okxweb3/connect-kit';
connectOKXAppWallet();

3. Scan QR Code to Connect

import { getConnectKit, getUri } from '@okxweb3/connect-kit';

// Subscribe to QR Code events
const connectKit = getConnectKit();

connectKit.once('session_connecting', () => {
  console.log('session_connecting, QR Code');
});
connectKit.once('connect', () => {
  console.log('Connected');
});
connectKit.once('connect_error', () => {
  console.log('Connection error');
});

const uri = await getUri();
console.log('Display URI for QR Code scan: ', uri);

React Example

import { useState } from 'react';
import { getConnectKit, getUri } from '@okxweb3/connect-kit';

const [connecting, setConnecting] = useState(false);
const [uri, setUri] = useState('');
const getUriForQrCode = async () => {
  const connectKit = getConnectKit();

  connectKit.once('session_connecting', () => {
    setConnecting(true);
    console.log('session_connecting, QR Code');
  });
  connectKit.once('connect', () => {
    setConnecting(false);
    console.log('Connected');
  });
  connectKit.once('connect_error', () => {
    setConnecting(false);
    console.log('Connection error');
  });

  const newUri = await getUri();
  setUri(newUri);
  console.log('Display URI for QR Code scan: ', uri);
};

<button onClick={getUriForQrCode}>Get QR Code</button>;

API

import { xxx } from '@okxweb3/connect-kit';

Method	Return Type	Description
async init(config)	ConnectKit object	Initializes the provider and establishes connection to OKX Connect server.
async getConnectKit()	ConnectKit object	Gets the ConnectKit
async getUri()	uri	Gets the URI for the App Wallet or Mini Wallet QR Code.
connectOKXAppWallet()	void	Connects directly to the App Wallet for mobile web or Telegram.
connectOKXMiniWallet()	void	Connects directly to the Mini Wallet for PC and mobile environments.
getProvider(network)	provider	Returns the wallet provider for the specified network.
disconnect()	void	Disconnects the wallet.

Supported Networks

Enum	Value	Description	Status
ETHEREUM	ethereum	EVM compatible	Done
SOLANA	solana	Solana compatible	Done
APTOS	aptos	Aptos network	Done
BITCOIN	bitcoin	Bitcoin compatible	Developing
TON	ton	TON network	Developing
SUI	sui	SUI network	Developing
COSMOS	cosmos	Cosmos compatible	Developing

Error Codes

Conforms to EIP-1193 and EIP-1474 standards.

Enum	Value	Description
USER_REJECTS_ERROR	4001	The user rejected the request.
UNAUTHORIZED_ERROR	4100	The method/account is not authorized.
UNSUPPORTED_METHOD_ERROR	4200	The provider does not support the method.
DISCONNECTED_ERROR	4900	Provider disconnected from all chains.
CHAIN_DISCONNECTED_ERROR	4901	Provider not connected to the requested chain.
INTERNAL_ERROR	-32603	Internal JSON-RPC error.