diff --git a/.circleci/config.yml b/.circleci/config.yml index d63e1854b..d5547ee00 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -255,6 +255,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/trust steps: - node-build-steps + build-okx: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/okx + steps: + - node-build-steps build-frontier: docker: - image: cimg/node:16.13.1 @@ -552,6 +558,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/trust steps: - node-staging-build-steps + build-staging-okx: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/okx + steps: + - node-staging-build-steps build-staging-frontier: docker: - image: cimg/node:16.13.1 @@ -851,6 +863,12 @@ workflows: <<: *deploy_production_filters - build-staging-trust: <<: *deploy_staging_filters + okx: + jobs: + - build-okx: + <<: *deploy_production_filters + - build-staging-okx: + <<: *deploy_staging_filters frontier: jobs: - build-frontier: diff --git a/README.md b/README.md index 8707f0b18..8602ac61a 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,7 @@ For full documentation, check out the README.md for each package or the [docs pa - [Arcana](packages/arcana-auth/README.md) - [Coinbase](packages/coinbase/README.md) - [Trust](packages/trust/README.md) +- [OKX](packages/okx/README.md) - [WalletConnect](packages/walletconnect/README.md) - [Safe](packages/gnosis/README.md) - [Magic](packages/magic/README.md) diff --git a/docs/package.json b/docs/package.json index 6569d824c..f85f0dc21 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,8 +12,8 @@ "format": "prettier --plugin-search-dir . --write .", "prepare": "svelte-kit sync", "test": "playwright test", - "w3o-latest-prod": "yarn add '@web3-onboard/core' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/blocto' '@web3-onboard/capsule' '@web3-onboard/particle-network' '@web3-onboard/metamask' '@web3-onboard/bitget' '@web3-onboard/arcana-auth' '@web3-onboard/venly'", - "w3o-latest-alpha": "yarn add '@web3-onboard/core@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/blocto@next' '@web3-onboard/capsule@next' '@web3-onboard/metamask@next' '@web3-onboard/bitget@next' '@web3-onboard/arcana-auth@next' '@web3-onboard/venly@next' '@web3-onboard/particle-network@next'" + "w3o-latest-prod": "yarn add '@web3-onboard/core' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/okx' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/blocto' '@web3-onboard/capsule' '@web3-onboard/particle-network' '@web3-onboard/metamask' '@web3-onboard/bitget' '@web3-onboard/arcana-auth' '@web3-onboard/venly'", + "w3o-latest-alpha": "yarn add '@web3-onboard/core@next' '@web3-onboard/coinbase@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/dcent@next' '@web3-onboard/frontier@next' '@web3-onboard/fortmatic@next' '@web3-onboard/frame@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/magic@next' '@web3-onboard/phantom@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/okx@next' '@web3-onboard/torus@next' '@web3-onboard/taho@next' '@web3-onboard/web3auth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/enkrypt@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/xdefi@next' '@web3-onboard/uauth@next' '@web3-onboard/zeal@next' '@web3-onboard/cede-store@next' '@web3-onboard/blocto@next' '@web3-onboard/capsule@next' '@web3-onboard/metamask@next' '@web3-onboard/bitget@next' '@web3-onboard/arcana-auth@next' '@web3-onboard/venly@next' '@web3-onboard/particle-network@next'" }, "devDependencies": { "@algolia/client-search": "^4.17.0", @@ -72,6 +72,7 @@ "@web3-onboard/magic": "^2.2.1", "@web3-onboard/metamask": "^2.1.1", "@web3-onboard/mew-wallet": "^2.1.1", + "@web3-onboard/okx": "2.0.0-alpha.1", "@web3-onboard/particle-network": "^2.1.1", "@web3-onboard/phantom": "^2.1.1", "@web3-onboard/portis": "^2.2.1", diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index 03abe64dd..a8c5f3e44 100644 --- a/docs/src/lib/services/onboard.js +++ b/docs/src/lib/services/onboard.js @@ -51,6 +51,7 @@ const intiOnboard = async (theme) => { const { default: torusModule } = await import('@web3-onboard/torus') const { default: uauthModule } = await import('@web3-onboard/uauth') const { default: trustModule } = await import('@web3-onboard/trust') + const { default: okxModule } = await import('@web3-onboard/okx') const { default: xdefiModule } = await import('@web3-onboard/xdefi') const { default: cedeModule } = await import('@web3-onboard/cede-store') const { default: frameModule } = await import('@web3-onboard/frame') @@ -93,6 +94,7 @@ const intiOnboard = async (theme) => { const taho = tahoModule() const torus = torusModule() const trust = trustModule() + const okx = okxModule() const xdefi = xdefiModule() const cede = cedeModule() const bitget = bitgetModule() @@ -152,6 +154,7 @@ const intiOnboard = async (theme) => { ledger, trezor, trust, + okx, gnosis, taho, bitget, diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md index 3048f872c..6aa409090 100644 --- a/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md +++ b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md @@ -193,6 +193,7 @@ We recommend you add the [Core Repo](../../modules/core.md#install) and consider - [Magic](../../wallets/magic.md#login-options) - [MetaMask](../../wallets/metamask.md#install) - [MEW](../../wallets/mewwallet.md#install) +- [OKX](../../wallets/okx.md#install) - [Portis](../../wallets/portis.md#install) - [Web3Auth](../../wallets/web3auth.md#install) - [WalletConnect](../../wallets/walletconnect.md#install) diff --git a/docs/src/routes/docs/[...4]wallets/[...37]okx/+page.md b/docs/src/routes/docs/[...4]wallets/[...37]okx/+page.md new file mode 100644 index 000000000..cdb9377a4 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/[...37]okx/+page.md @@ -0,0 +1,50 @@ +--- +title: OKX Wallet +--- + +# {$frontmatter.title} + +Wallet module for connecting OKX wallet through Web3 Onboard + +### Install + + + + +```sh copy +yarn add @web3-onboard/okx +``` + + + + +```sh copy +npm install @web3-onboard/okx +``` + + + + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import okxWallet from '@web3-onboard/okx' + +const okx = okxWallet() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + okx + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +## Build Environments + +For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments) diff --git a/docs/src/routes/examples/[...1]connect-wallet/+page.md b/docs/src/routes/examples/[...1]connect-wallet/+page.md index f91790199..4db11dad7 100644 --- a/docs/src/routes/examples/[...1]connect-wallet/+page.md +++ b/docs/src/routes/examples/[...1]connect-wallet/+page.md @@ -25,14 +25,14 @@ Remember- if you used create-react-app, please follow the [additional setup inst ```sh copy -yarn add @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier +yarn add @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier @web3-onboard/okx ``` ```sh copy -npm install @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier +npm install @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier @web3-onboard/okx ``` @@ -60,6 +60,7 @@ import dcentModule from '@web3-onboard/dcent' import sequenceModule from '@web3-onboard/sequence' import tahoModule from '@web3-onboard/taho' import trustModule from '@web3-onboard/trust' +import okxModule from '@web3-onboard/okx' import frontierModule from '@web3-onboard/frontier' import ConnectWallet from './ConnectWallet' @@ -86,6 +87,7 @@ const safe = safeModule() const sequence = sequenceModule() const taho = tahoModule() // Previously named Tally Ho wallet const trust = trustModule() +const okx = okxModule() const frontier = frontierModule() const trezorOptions = { @@ -105,6 +107,7 @@ const wallets = [ sequence, injected, trust, + okx, frontier, taho, ledger, @@ -324,6 +327,7 @@ import dcentModule from '@web3-onboard/dcent' import sequenceModule from '@web3-onboard/sequence' import tahoModule from '@web3-onboard/taho' import trustModule from '@web3-onboard/trust' +import okxModule from '@web3-onboard/okx' import frontierModule from '@web3-onboard/frontier' const INFURA_KEY = '' @@ -349,6 +353,7 @@ const safe = safeModule() const sequence = sequenceModule() const taho = tahoModule() // Previously named Tally Ho wallet const trust = trustModule() +const okx = okxModule() const frontier = frontierModule() const trezorOptions = { @@ -375,6 +380,7 @@ const wallets = [ coinbase, dcent, trust, + okx, frontier, trezor, walletConnect, diff --git a/packages/demo/package.json b/packages/demo/package.json index bec689750..449272efa 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -50,6 +50,7 @@ "@web3-onboard/magic": "^2.2.1", "@web3-onboard/metamask": "^2.1.1", "@web3-onboard/mew-wallet": "^2.1.1", + "@web3-onboard/okx": "2.0.0-alpha.1", "@web3-onboard/particle-network": "^2.1.1", "@web3-onboard/phantom": "^2.1.1", "@web3-onboard/portis": "^2.2.1", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 9a9cb4d65..50ff814f6 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -29,6 +29,7 @@ import uauthModule from '@web3-onboard/uauth' import phantomModule from '@web3-onboard/phantom' import trustModule from '@web3-onboard/trust' + import okxModule from '@web3-onboard/okx' import frontierModule from '@web3-onboard/frontier' import bloctoModule from '@web3-onboard/blocto' import cedeStoreModule from '@web3-onboard/cede-store' @@ -100,7 +101,8 @@ displayUnavailable: [ ProviderLabel.MetaMask, ProviderLabel.Trust, - ProviderLabel.Phantom + ProviderLabel.Phantom, + ProviderLabel.OKXWallet ] // but only show Binance and Bitski wallet if they are available // filter: { @@ -182,6 +184,7 @@ const zeal = zealModule() const phantom = phantomModule() const trust = trustModule() + const okx = okxModule() const frontier = frontierModule() const cedeStore = cedeStoreModule() const blocto = bloctoModule() @@ -267,6 +270,7 @@ phantom, safe, trust, + okx, tallyho, bitget, enkrypt, diff --git a/packages/okx/README.md b/packages/okx/README.md new file mode 100644 index 000000000..48bfc9ab3 --- /dev/null +++ b/packages/okx/README.md @@ -0,0 +1,33 @@ +# @web3-onboard/okx + +## Wallet module for connecting OKX Wallet through web3-onboard + +OKX Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications. + +### Install + +**NPM** +`npm i @web3-onboard/core @web3-onboard/okx` + +**Yarn** +`yarn add @web3-onboard/core @web3-onboard/okx` + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import okxModule from '@web3-onboard/okx' + +const okx = okxModule() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + okx + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` diff --git a/packages/okx/package.json b/packages/okx/package.json new file mode 100644 index 000000000..8ae23590d --- /dev/null +++ b/packages/okx/package.json @@ -0,0 +1,66 @@ +{ + "name": "@web3-onboard/okx", + "version": "2.0.0-alpha.1", + "description": "OKX Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.", + "keywords": [ + "Ethereum", + "Web3", + "EVM", + "dapp", + "Multichain", + "Wallet", + "Transaction", + "Provider", + "Hardware Wallet", + "Notifications", + "React", + "Svelte", + "Vue", + "Next", + "Nuxt", + "MetaMask", + "Coinbase", + "WalletConnect", + "Ledger", + "Trezor", + "Connect Wallet", + "Ethereum Hooks", + "Blocknative", + "Mempool", + "pending", + "confirmed", + "Injected Wallet", + "Crypto", + "Crypto Wallet", + "Enkrypt", + "OKX" + ], + "repository": { + "type": "git", + "url": "https://github.com/blocknative/web3-onboard.git", + "directory": "packages/okx" + }, + "homepage": "https://www.blocknative.com/onboard", + "bugs": "https://github.com/blocknative/web3-onboard/issues", + "module": "dist/index.js", + "browser": "dist/index.js", + "main": "dist/index.js", + "type": "module", + "typings": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsc", + "dev": "tsc -w", + "type-check": "tsc --noEmit" + }, + "license": "MIT", + "devDependencies": { + "@types/node": "^17.0.21", + "typescript": "^5.4.5" + }, + "dependencies": { + "@web3-onboard/common": "^2.4.1" + } +} diff --git a/packages/okx/src/icon.ts b/packages/okx/src/icon.ts new file mode 100644 index 000000000..2ab6d017e --- /dev/null +++ b/packages/okx/src/icon.ts @@ -0,0 +1,5 @@ +export default ` + + + +` diff --git a/packages/okx/src/index.ts b/packages/okx/src/index.ts new file mode 100644 index 000000000..10e12e4ce --- /dev/null +++ b/packages/okx/src/index.ts @@ -0,0 +1,46 @@ +import { + type WalletInit, + type EIP1193Provider, + createDownloadMessage +} from '@web3-onboard/common' +import { createEIP1193Provider } from '@web3-onboard/common' + +import { CustomWindow } from './types.js' + +declare const window: CustomWindow + +function okx(): WalletInit { + if (typeof window === 'undefined') return () => null + + return ({ device }) => { + return { + label: 'OKX Wallet', + getIcon: async () => (await import('./icon.js')).default, + getInterface: async () => { + const okxwalletInjectionExists = window.hasOwnProperty('okxwallet') + + let provider: EIP1193Provider + + if (okxwalletInjectionExists) { + provider = createEIP1193Provider(window['okxwallet']) + } else { + const downloadUrl = + device.type === 'mobile' + ? 'https://www.okx.com/download?deeplink=' + + encodeURIComponent( + 'okx://wallet/dapp/url?dappUrl=' + + encodeURIComponent(window.location.href) + ) + : 'https://www.okx.com/download' + throw new Error(createDownloadMessage('OKX Wallet', downloadUrl)) + } + return { + provider + } + }, + platforms: ['all'] + } + } +} + +export default okx diff --git a/packages/okx/src/types.ts b/packages/okx/src/types.ts new file mode 100644 index 000000000..bcbf5c401 --- /dev/null +++ b/packages/okx/src/types.ts @@ -0,0 +1,5 @@ +import type { EIP1193Provider } from '@web3-onboard/common' + +export interface CustomWindow extends Window { + okxwallet?: EIP1193Provider +} diff --git a/packages/okx/tsconfig.json b/packages/okx/tsconfig.json new file mode 100644 index 000000000..09ae989f9 --- /dev/null +++ b/packages/okx/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"], + + "compilerOptions": { + "outDir": "dist", + "rootDir": "src", + "declaration": true, + "declarationDir": "dist", + "paths": { + "*": ["./src/*", "./node_modules/*"] + }, + "typeRoots": ["node_modules/@types"] + } +} \ No newline at end of file