thirdweb-dev · Adamj1232 · Dec 20, 2022 · Nov 15, 2022 · Nov 17, 2022 · Nov 17, 2022
diff --git 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
@@ -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
@@ -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: '[email protected]',
@@ -144,7 +146,8 @@
       dcent,
       sequence,
       tallyho,
-      uauth
+      uauth,
+      phantom
     ],
     transactionPreview,
     gas,

diff --git 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
@@ -0,0 +1,32 @@
+export default `
+<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8241_140154)">
+<circle cx="64" cy="64" r="64" fill="url(#paint0_linear_8241_140154)"/>
+<g filter="url(#filter0_d_8241_140154)">
+<path d="M110.584 64.9142H99.1423C99.1423 41.7651 80.1733 23 56.7726 23C33.6615 23 14.8719 41.3057 14.412 64.0583C13.9363 87.577 36.2412 108 60.0189 108H63.0097C83.9725 108 112.069 91.7667 116.459 71.9874C117.27 68.3413 114.359 64.9142 110.584 64.9142ZM39.7691 65.9454C39.7691 69.0411 37.2098 71.5729 34.0804 71.5729C30.9511 71.5729 28.3918 69.0399 28.3918 65.9454V56.8414C28.3918 53.7457 30.9511 51.2139 34.0804 51.2139C37.2098 51.2139 39.7691 53.7457 39.7691 56.8414V65.9454ZM59.5227 65.9454C59.5227 69.0411 56.9634 71.5729 53.834 71.5729C50.7047 71.5729 48.1454 69.0399 48.1454 65.9454V56.8414C48.1454 53.7457 50.7058 51.2139 53.834 51.2139C56.9634 51.2139 59.5227 53.7457 59.5227 56.8414V65.9454Z" fill="url(#paint1_linear_8241_140154)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_8241_140154" x="6.76409" y="15.3596" width="117.472" height="100.281" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3.82022"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8241_140154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8241_140154" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8241_140154" x1="64" y1="0" x2="64" y2="128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#534BB1"/>
+<stop offset="1" stop-color="#551BF9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8241_140154" x1="65.5001" y1="23" x2="65.5001" y2="108" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.82"/>
+</linearGradient>
+<clipPath id="clip0_8241_140154">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,32 @@
+export default `
+<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8241_140154)">
+<circle cx="64" cy="64" r="64" fill="url(#paint0_linear_8241_140154)"/>
+<g filter="url(#filter0_d_8241_140154)">
+<path d="M110.584 64.9142H99.1423C99.1423 41.7651 80.1733 23 56.7726 23C33.6615 23 14.8719 41.3057 14.412 64.0583C13.9363 87.577 36.2412 108 60.0189 108H63.0097C83.9725 108 112.069 91.7667 116.459 71.9874C117.27 68.3413 114.359 64.9142 110.584 64.9142ZM39.7691 65.9454C39.7691 69.0411 37.2098 71.5729 34.0804 71.5729C30.9511 71.5729 28.3918 69.0399 28.3918 65.9454V56.8414C28.3918 53.7457 30.9511 51.2139 34.0804 51.2139C37.2098 51.2139 39.7691 53.7457 39.7691 56.8414V65.9454ZM59.5227 65.9454C59.5227 69.0411 56.9634 71.5729 53.834 71.5729C50.7047 71.5729 48.1454 69.0399 48.1454 65.9454V56.8414C48.1454 53.7457 50.7058 51.2139 53.834 51.2139C56.9634 51.2139 59.5227 53.7457 59.5227 56.8414V65.9454Z" fill="url(#paint1_linear_8241_140154)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_8241_140154" x="6.76409" y="15.3596" width="117.472" height="100.281" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3.82022"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8241_140154"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8241_140154" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8241_140154" x1="64" y1="0" x2="64" y2="128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#534BB1"/>
+<stop offset="1" stop-color="#551BF9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8241_140154" x1="65.5001" y1="23" x2="65.5001" y2="108" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.82"/>
+</linearGradient>
+<clipPath id="clip0_8241_140154">
+<rect width="128" height="128" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
diff --git a/packages/phantom/src/index.ts 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
@@ -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"]
+    }
+  }