diff --git a/.circleci/config.yml b/.circleci/config.yml index 720824cc6..92aa60a05 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -333,6 +333,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/transaction-preview steps: - node-build-steps + build-phantom: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/phantom + steps: + - node-build-steps # Build staging/Alpha releases build-staging-core: @@ -503,6 +509,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/transaction-preview steps: - node-staging-build-steps + build-staging-phantom: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/phantom + steps: + - node-staging-build-steps workflows: version: 2 @@ -675,3 +687,9 @@ workflows: <<: *deploy_production_filters - build-staging-transaction-preview: <<: *deploy_staging_filters + phantom: + jobs: + - build-phantom: + <<: *deploy_production_filters + - build-staging-phantom: + <<: *deploy_staging_filters diff --git a/packages/demo/package.json b/packages/demo/package.json index 2dbc86b51..943ef5ce9 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -30,11 +30,12 @@ "@web3-onboard/fortmatic": "^2.0.14", "@web3-onboard/gas": "^2.1.3", "@web3-onboard/gnosis": "^2.1.5", - "@web3-onboard/injected-wallets": "^2.4.0", + "@web3-onboard/injected-wallets": "^2.5.0-alpha.1", "@web3-onboard/keepkey": "^2.3.2", "@web3-onboard/keystone": "^2.3.2", "@web3-onboard/ledger": "^2.3.2", "@web3-onboard/magic": "^2.1.3", + "@web3-onboard/phantom": "^2.0.0-alpha.1", "@web3-onboard/portis": "^2.1.3", "@web3-onboard/sequence": "^2.0.4", "@web3-onboard/torus": "^2.2.0", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 197a457df..4725da3e3 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -21,6 +21,7 @@ import enkryptModule from '@web3-onboard/enkrypt' import mewWalletModule from '@web3-onboard/mew-wallet' import uauthModule from '@web3-onboard/uauth' + import phantomModule from '@web3-onboard/phantom' import { recoverAddress, arrayify, @@ -96,6 +97,7 @@ const keystone = keystoneModule() const gnosis = gnosisModule() const tallyho = tallyHoModule() + const phantom = phantomModule() const trezorOptions = { email: 'test@test.com', @@ -144,7 +146,8 @@ dcent, sequence, tallyho, - uauth + uauth, + phantom ], transactionPreview, gas, diff --git a/packages/injected/package.json b/packages/injected/package.json index dd81d4630..322363106 100644 --- a/packages/injected/package.json +++ b/packages/injected/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/injected-wallets", - "version": "2.4.0", + "version": "2.5.0-alpha.1", "description": "Injected wallet module for connecting browser extension and mobile wallets to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised 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", @@ -30,7 +30,8 @@ "pending", "confirmed", "Injected Wallet", - "GameStop" + "GameStop", + "Phantom" ], "repository": { "type": "git", diff --git a/packages/injected/src/icons/phantom.ts b/packages/injected/src/icons/phantom.ts new file mode 100644 index 000000000..48a6946bb --- /dev/null +++ b/packages/injected/src/icons/phantom.ts @@ -0,0 +1,32 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/injected/src/types.ts b/packages/injected/src/types.ts index f12098925..ba96849fc 100644 --- a/packages/injected/src/types.ts +++ b/packages/injected/src/types.ts @@ -49,7 +49,8 @@ export enum ProviderIdentityFlag { Core = 'isAvalanche', Opera = 'isOpera', Bitski = 'isBitski', - Enkrypt = 'isEnkrypt' + Enkrypt = 'isEnkrypt', + Phantom = 'isPhantom' } export enum ProviderLabel { @@ -89,7 +90,8 @@ export enum ProviderLabel { BitKeep = 'BitKeep', Sequence = 'Sequence', Core = 'Core', - Enkrypt = 'Enkrypt' + Enkrypt = 'Enkrypt', + Phantom = 'Phantom' } export interface MeetOneProvider extends ExternalProvider { @@ -113,7 +115,8 @@ export enum InjectedNameSpace { BitKeep = 'bitkeep', Avalanche = 'avalanche', Bitski = 'Bitski', - Enkrypt = 'enkrypt' + Enkrypt = 'enkrypt', + Phantom = 'phantom' } export interface CustomWindow extends Window { @@ -138,6 +141,9 @@ export interface CustomWindow extends Window { ethereum: InjectedProvider } } + phantom: { + ethereum: InjectedProvider + } } export type InjectedProvider = ExternalProvider & diff --git a/packages/injected/src/wallets.ts b/packages/injected/src/wallets.ts index d470a77dc..397e1f42f 100644 --- a/packages/injected/src/wallets.ts +++ b/packages/injected/src/wallets.ts @@ -618,6 +618,20 @@ const enkrypt: InjectedWalletModule = { platforms: ['all'] } +const phantom: InjectedWalletModule = { + label: ProviderLabel.Phantom, + injectedNamespace: InjectedNameSpace.Phantom, + checkProviderIdentity: ({ provider }) => + !!provider && + !!provider['ethereum'] && + !!provider['ethereum'][ProviderIdentityFlag.Phantom], + getIcon: async () => (await import('./icons/phantom.js')).default, + getInterface: async () => ({ + provider: createEIP1193Provider(window.phantom.ethereum) + }), + platforms: ['all'] +} + const wallets = [ exodus, metamask, @@ -653,7 +667,8 @@ const wallets = [ sequence, core, bitski, - enkrypt + enkrypt, + phantom ] export default wallets diff --git a/packages/phantom/README.md b/packages/phantom/README.md new file mode 100644 index 000000000..64d376ee7 --- /dev/null +++ b/packages/phantom/README.md @@ -0,0 +1,30 @@ +# @web3-onboard/phantom + +## Wallet module for connecting Phantom to Web3-Onboard + +[Web3-Onboard](https://onboard.blocknative.com/) is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate [Phantom Wallet](https://phantom.app/) support into Web3-Onboard's "Connect Wallet" modal. With this module the Phantom option will be shown even if the extension is not installed on the users browser or used within the Phantom app. If selected the user will be taken to a download screen and prompted to create a Phantom wallet. For more information on Phantom, please refer to the [Phantom developer docs](https://docs.phantom.app/). + +### Install + +`npm i @web3-onboard/core @web3-onboard/phantom` + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import phantomModule from '@web3-onboard/phantom' + +// initialize the module +const phantom = phantomModule() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + phantom + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` diff --git a/packages/phantom/package.json b/packages/phantom/package.json new file mode 100644 index 000000000..a49ce7e67 --- /dev/null +++ b/packages/phantom/package.json @@ -0,0 +1,64 @@ +{ + "name": "@web3-onboard/phantom", + "version": "2.0.0-alpha.1", + "description": "Phantom 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", + "Phantom" + ], + "repository": { + "type": "git", + "url": "https://github.com/blocknative/web3-onboard.git", + "directory": "packages/core" + }, + "homepage": "https://onboard.blocknative.com", + "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": { + "typescript": "^4.5.5" + }, + "dependencies": { + "@web3-onboard/common": "^2.2.3" + } +} diff --git a/packages/phantom/src/icon.ts b/packages/phantom/src/icon.ts new file mode 100644 index 000000000..48a6946bb --- /dev/null +++ b/packages/phantom/src/icon.ts @@ -0,0 +1,32 @@ +export default ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +` diff --git a/packages/phantom/src/index.ts b/packages/phantom/src/index.ts new file mode 100644 index 000000000..542b0d2f7 --- /dev/null +++ b/packages/phantom/src/index.ts @@ -0,0 +1,31 @@ +import { WalletInit, createEIP1193Provider } from '@web3-onboard/common' + +function phantom(): WalletInit { + if (typeof window === 'undefined') return () => null + return () => { + return { + label: 'Phantom', + getIcon: async () => (await import('./icon.js')).default, + getInterface: async () => { + if ('phantom' in window) { + const anyWindow: any = window + + if ( + 'phantom' in anyWindow && + 'ethereum' in anyWindow.phantom && + anyWindow.phantom.ethereum.isPhantom + ) { + return { + provider: createEIP1193Provider(anyWindow.phantom.ethereum) + } + } + } + window.open('https://phantom.app/download', '_blank') + throw new Error('Please install Phantom before proceeding') + }, + platforms: ['all'] + } + } +} + +export default phantom diff --git a/packages/phantom/tsconfig.json b/packages/phantom/tsconfig.json new file mode 100644 index 000000000..53a27ffad --- /dev/null +++ b/packages/phantom/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"], + + "compilerOptions": { + "outDir": "dist", + "rootDir": "src", + "declaration": true, + "declarationDir": "dist", + "allowSyntheticDefaultImports": true, + "paths": { + "*": ["./src/*", "./node_modules/*"] + }, + "typeRoots": ["node_modules/@types"] + } + } \ No newline at end of file