feat: add OKX Wallet connector

example/components/Card.tsx

@@ -5,6 +5,7 @@ import type { MetaMask } from '@web3-react/metamask'
 import type { Network } from '@web3-react/network'
 import type { WalletConnect } from '@web3-react/walletconnect'
 import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+import type { OKXWallet } from '../../packages/okx/dist/index'
 
 import { getName } from '../utils'
 import { Accounts } from './Accounts'
@@ -13,7 +14,7 @@ import { ConnectWithSelect } from './ConnectWithSelect'
 import { Status } from './Status'
 
 interface Props {
-  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
+  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe | OKXWallet
   activeChainId: ReturnType<Web3ReactHooks['useChainId']>
   chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
   isActivating: ReturnType<Web3ReactHooks['useIsActivating']>

example/components/ConnectWithSelect.tsx

@@ -6,6 +6,7 @@ import { Network } from '@web3-react/network'
 import { WalletConnect } from '@web3-react/walletconnect'
 import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 import { useCallback, useEffect, useState } from 'react'
+import { OKXWallet } from '../../packages/okx/dist/index'
 
 import { CHAINS, getAddChainParameters } from '../chains'
 
@@ -48,7 +49,7 @@ export function ConnectWithSelect({
   error,
   setError,
 }: {
-  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe
+  connector: MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | GnosisSafe | OKXWallet
   activeChainId: ReturnType<Web3ReactHooks['useChainId']>
   chainIds?: ReturnType<Web3ReactHooks['useChainId']>[]
   isActivating: ReturnType<Web3ReactHooks['useIsActivating']>

example/components/ProviderExample.tsx

@@ -4,20 +4,26 @@ import type { MetaMask } from '@web3-react/metamask'
 import type { Network } from '@web3-react/network'
 import type { WalletConnect } from '@web3-react/walletconnect'
 import type { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+import { OKXWallet } from '../../packages/okx/dist/index'
 
 import { coinbaseWallet, hooks as coinbaseWalletHooks } from '../connectors/coinbaseWallet'
 import { hooks as metaMaskHooks, metaMask } from '../connectors/metaMask'
 import { hooks as networkHooks, network } from '../connectors/network'
 import { hooks as walletConnectHooks, walletConnect } from '../connectors/walletConnect'
 import { hooks as walletConnectV2Hooks, walletConnectV2 } from '../connectors/walletConnectV2'
+import { hooks as okxHooks, okxWallet } from '../connectors/okxWallet'
 import { getName } from '../utils'
 
-const connectors: [MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network, Web3ReactHooks][] = [
+const connectors: [
+  MetaMask | WalletConnect | WalletConnectV2 | CoinbaseWallet | Network | OKXWallet,
+  Web3ReactHooks
+][] = [
   [metaMask, metaMaskHooks],
   [walletConnect, walletConnectHooks],
   [walletConnectV2, walletConnectV2Hooks],
   [coinbaseWallet, coinbaseWalletHooks],
   [network, networkHooks],
+  [okxWallet, okxHooks],
 ]
 
 function Child() {

example/components/connectorCards/OKXWalletCard.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { hooks, okxWallet } from '../../connectors/okxWallet'
+import { Card } from '../Card'
+
+const { useChainId, useAccounts, useIsActivating, useIsActive, useProvider, useENSNames } = hooks
+
+export default function OKXWalletCard() {
+  const chainId = useChainId()
+  const accounts = useAccounts()
+  const isActivating = useIsActivating()
+
+  const isActive = useIsActive()
+
+  const provider = useProvider()
+  const ENSNames = useENSNames(provider)
+
+  const [error, setError] = useState(undefined)
+
+  useEffect(() => {
+    okxWallet.connectEagerly().catch((error) => {
+      console.debug('Failed to connect eagerly to OKX Wallet', error)
+    })
+  }, [])
+
+  return (
+    <Card
+      connector={okxWallet}
+      activeChainId={chainId}
+      isActivating={isActivating}
+      isActive={isActive}
+      error={error}
+      setError={setError}
+      accounts={accounts}
+      provider={provider}
+      ENSNames={ENSNames}
+    />
+  )
+}

example/connectors/okxWallet.ts

@@ -0,0 +1,5 @@
+import { initializeConnector } from '@web3-react/core'
+
+import { OKXWallet } from '../../packages/okx/dist/index'
+
+export const [okxWallet, hooks] = initializeConnector<OKXWallet>((actions) => new OKXWallet({ actions }))

example/pages/index.tsx

@@ -4,6 +4,7 @@ import MetaMaskCard from '../components/connectorCards/MetaMaskCard'
 import NetworkCard from '../components/connectorCards/NetworkCard'
 import WalletConnectV2Card from '../components/connectorCards/WalletConnectV2Card'
 import ProviderExample from '../components/ProviderExample'
+import OKXWalletCard from '../components/connectorCards/OKXWalletCard'
 
 export default function Home() {
   return (
@@ -15,6 +16,7 @@ export default function Home() {
         <CoinbaseWalletCard />
         <NetworkCard />
         <GnosisSafeCard />
+        <OKXWalletCard />
       </div>
     </>
   )

example/utils.ts

@@ -5,6 +5,7 @@ import { Network } from '@web3-react/network'
 import type { Connector } from '@web3-react/types'
 import { WalletConnect as WalletConnect } from '@web3-react/walletconnect'
 import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
+import { OKXWallet } from '../packages/okx/dist/index'
 
 export function getName(connector: Connector) {
   if (connector instanceof MetaMask) return 'MetaMask'
@@ -13,5 +14,6 @@ export function getName(connector: Connector) {
   if (connector instanceof CoinbaseWallet) return 'Coinbase Wallet'
   if (connector instanceof Network) return 'Network'
   if (connector instanceof GnosisSafe) return 'Gnosis Safe'
+  if (connector instanceof OKXWallet) return 'OKX Wallet'
   return 'Unknown'
 }

packages/okx/README.md

@@ -0,0 +1 @@
+# @web3-react/okx

packages/okx/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@web3-react/okx",
+  "keywords": [
+    "web3-react",
+    "coinbase-wallet"
+  ],
+  "author": "",
+  "license": "GPL-3.0-or-later",
+  "repository": "github:Uniswap/web3-react",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "8.2.2",
+  "files": [
+    "dist/*"
+  ],
+  "type": "commonjs",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "exports": "./dist/index.js",
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "build": "tsc",
+    "start": "tsc --watch"
+  },
+  "dependencies": {
+    "@okxweb3/coin-base": "^1.0.8",
+    "@okxweb3/coin-ethereum": "^1.0.3",
+    "@web3-react/types": "^8.2.2"
+  },
+  "peerDependencies": {
+    "@coinbase/wallet-sdk": "^3.0.4"
+  },
+  "devDependencies": {
+    "@web3-react/store": "^8.2.2"
+  }
+}

packages/okx/src/index.spec.ts

@@ -0,0 +1,66 @@
+import { createWeb3ReactStoreAndActions } from '@web3-react/store'
+import type { Actions, Web3ReactStore } from '@web3-react/types'
+import { OKXWallet } from '.'
+import { MockEIP1193Provider } from '@web3-react/core'
+
+const chainId = '0x1'
+const accounts: string[] = ['0x0000000000000000000000000000000000000000']
+
+describe('OKXWallet', () => {
+  let mockProvider: MockEIP1193Provider
+
+  beforeEach(() => {
+    mockProvider = new MockEIP1193Provider()
+  })
+
+  beforeEach(() => {
+    ;(window as any).ethereum = mockProvider
+  })
+
+  let store: Web3ReactStore
+  let connector: OKXWallet
+
+  beforeEach(() => {
+    let actions: Actions
+    ;[store, actions] = createWeb3ReactStoreAndActions()
+    connector = new OKXWallet({ actions })
+  })
+
+  test('#connectEagerly', async () => {
+    mockProvider.chainId = chainId
+    mockProvider.accounts = accounts
+
+    await connector.connectEagerly()
+
+    expect(mockProvider.eth_requestAccounts).not.toHaveBeenCalled()
+    expect(mockProvider.eth_accounts).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+      .toBeGreaterThan(mockProvider.eth_accounts.mock.invocationCallOrder[0])
+
+    expect(store.getState()).toEqual({
+      chainId: Number.parseInt(chainId, 16),
+      accounts,
+      activating: false,
+    })
+  })
+
+  test('#activate', async () => {
+    mockProvider.chainId = chainId
+    mockProvider.accounts = accounts
+
+    await connector.activate()
+
+    expect(mockProvider.eth_requestAccounts).toHaveBeenCalled()
+    expect(mockProvider.eth_accounts).not.toHaveBeenCalled()
+    expect(mockProvider.eth_chainId).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+      .toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
+
+    expect(store.getState()).toEqual({
+      chainId: Number.parseInt(chainId, 16),
+      accounts,
+      activating: false,
+    })
+  })
+})