npm package: @okxconnect/connect-kit
Description: [Chinese](./README-CN.md) / English
Latest version: 1.6.0

# `@okxconnect/connect-kit`

[Chinese](./README-CN.md) / English

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 @okxconnect/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**
```javascript
import { init } from '@okxconnect/connect-kit';
await init();
```

**Integration for New DApps**
```javascript
// Step 1: Initialize
import { init } from '@okxconnect/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 '@okxconnect/connect-kit';
connectOKXMiniWallet();

// Option 3: Connect to OKX App Wallet
import { connectOKXAppWallet } from '@okxconnect/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](https://docs.web3js.org/libdocs/AccountAbstraction#setprovider) method can be used for manual provider switching.

**Quick Integration for Existing DApps (Supporting 6963 or Wallet Standard)**
```javascript
// Initialize
import { init } from '@okxconnect/connect-kit';
await init();
```

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

> Supports provider switching:
```javascript
// Step 1: Initialize
import { init } from '@okxconnect/connect-kit';
await init();

// Step 2: Get provider
import { getProvider, SupportedNetworks } from '@okxconnect/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**
```javascript
// Step 1: Initialize
import { init } from '@okxconnect/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**
```javascript
// step1 init 
import { init, getProvider, SupportedNetworks } from '@okxconnect/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 '@okxconnect/connect-kit';
connectOKXMiniWallet();

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

### 3. Scan QR Code to Connect
```javascript
import { getConnectKit, getUri } from '@okxconnect/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**
```javascript
import { useState } from 'react';
import { getConnectKit, getUri } from '@okxconnect/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

```javascript
import { xxx } from '@okxconnect/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.                    |
| `async connectOKXAppWallet()`  | `void`              | Connects directly to the App Wallet for mobile web or Telegram.            |
| `async 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       |
| TON      | `ton`      | TON network        | Done       |
| SUI      | `sui`      | SUI network        | Done       |
| BITCOIN  | `bitcoin`  | Bitcoin compatible | Done       |
| Tron     | `tron`     | Tron network       | Done       |
| COSMOS   | `cosmos`   | Cosmos compatible  | Developing |



### Error Codes

Conforms to [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) and [EIP-1474](https://eips.ethereum.org/EIPS/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.                       |