Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add OKX Wallet connector #941

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion example/components/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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']>
Expand Down
3 changes: 2 additions & 1 deletion example/components/ConnectWithSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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']>
Expand Down
8 changes: 7 additions & 1 deletion example/components/ProviderExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
38 changes: 38 additions & 0 deletions example/components/connectorCards/OKXWalletCard.tsx
Original file line number Diff line number Diff line change
@@ -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}
/>
)
}
5 changes: 5 additions & 0 deletions example/connectors/okxWallet.ts
Original file line number Diff line number Diff line change
@@ -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 }))
2 changes: 2 additions & 0 deletions example/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -15,6 +16,7 @@ export default function Home() {
<CoinbaseWalletCard />
<NetworkCard />
<GnosisSafeCard />
<OKXWalletCard />
</div>
</>
)
Expand Down
2 changes: 2 additions & 0 deletions example/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
}
1 change: 1 addition & 0 deletions packages/okx/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# @web3-react/okx
37 changes: 37 additions & 0 deletions packages/okx/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
66 changes: 66 additions & 0 deletions packages/okx/src/index.spec.ts
Original file line number Diff line number Diff line change
@@ -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,
})
})
})
Loading