@okxweb3/connect-kit

v1.1.0

Published

4 hours ago

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 **wal

Downloads

0High
0Medium
0Low

`@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';

Supported Networks

Error Codes

Conforms to EIP-1193 and EIP-1474 standards.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme