fix: add passport wallet

.circleci/config.yml

@@ -448,6 +448,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/particle-network
     steps:
       - node-build-steps
+  build-passport:
+    docker:
+      - image: cimg/node:18.0.0
+    working_directory: ~/web3-onboard-monorepo/packages/passport
+    steps:
+      - node-build-steps
 
   # Build staging/Alpha releases
   build-staging-core:
@@ -732,6 +738,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/particle-network
     steps:
       - node-staging-build-steps
+  build-staging-passport:
+    docker:
+      - image: cimg/node:18.0.0
+    working_directory: ~/web3-onboard-monorepo/packages/passport
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -1017,4 +1029,10 @@ workflows:
       - build-particle:
           <<: *deploy_production_filters
       - build-staging-particle:
-          <<: *deploy_staging_filters
+          <<: *deploy_staging_filters
+  passport:
+    jobs:
+      - build-passport:
+          <<: *deploy_production_filters
+      - build-staging-passport:
+          <<: *deploy_staging_filters

docs/src/routes/docs/[...4]wallets/[...36]passport/+page.md

@@ -0,0 +1,69 @@
+---
+title: Passport Protocol
+---
+
+# {$frontmatter.title}
+
+Wallet module for connecting Passport Protocol to Web3 Onboard.
+
+See [Passport Protocol Docs](https://docs.0xpass.io/) for details.
+
+## Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/core @web3-onboard/passport @0xpass/webauthn-signer
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/core @web3-onboard/passport @0xpass/webauthn-signer
+```
+
+  </TabPanel>
+</Tabs>
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import passportModule, { Network } from '@web3-onboard/passport'
+import { WebauthnSigner } from '@0xpass/webauthn-signer'
+
+// Firstly you set up your passkey / webauthn signer
+// The rpId and rpName are the same as the ones you set up in your passport application scope. They follow the webauthn standard, of the following values
+// rpId: the domain of where the passkey is generated
+// rpName: human readable name for the domain
+// You can read more on this here https://docs.0xpass.io/authentication/configuring-your-scope#scope-configuration
+const webauthnSigner = new WebauthnSigner({
+  rpId: 'localhost',
+  rpName: '0xPass'
+})
+
+const passport = passportModule({
+  network: Network.TESTNET,
+  scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2', // replace this with your scope id
+  signer: webauthnSigner,
+  fallbackProvider: 'https://eth-mainnet.g.alchemy.com/v2/xxx' // insert your alchemy / infura url here
+  // encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
+})
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    passport
+    //... 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)

packages/demo/package.json

@@ -64,6 +64,8 @@
     "@web3-onboard/xdefi": "^2.0.5",
     "@web3-onboard/zeal": "^2.0.3",
     "@web3-onboard/particle-network": "^2.0.1",
+    "@web3-onboard/passport": "^2.0.0-alpha.1",
+    "@0xpass/webauthn-signer": "2.0.0",
     "vconsole": "^3.15.1"
   },
   "license": "MIT",

packages/demo/src/App.svelte

@@ -51,6 +51,8 @@
   import VConsole from 'vconsole'
   import blocknativeIcon from './blocknative-icon.js'
   import DappAuth from '@blocto/dappauth'
+  import passportModule, { Network } from '@web3-onboard/passport'
+  import { WebauthnSigner } from '@0xpass/webauthn-signer'
 
   if (window.innerWidth < 700) {
     new VConsole()
@@ -176,6 +178,19 @@
   const blocto = bloctoModule()
   const tallyho = tallyHoModule()
 
+  const webauthnSigner = new WebauthnSigner({
+    rpId: 'localhost',
+    rpName: '0xPass'
+  })
+
+  const passport = passportModule({
+    network: Network.TESTNET,
+    scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2',
+    signer: webauthnSigner,
+    fallbackProvider: '' // insert your alchemy / infura url here
+    // encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
+  })
+
   const trezorOptions = {
     email: '[email protected]',
     appUrl: 'https://www.blocknative.com',
@@ -269,6 +284,7 @@
       blocto,
       venly,
       particle,
+      passport
     ],
     // transactionPreview,
     gas,

packages/passport/README.md

@@ -0,0 +1,84 @@
+# @web3-onboard/passport
+
+## Wallet module for connecting Passport Wallets to web3-onboard
+
+[Passport](https://0xpass.io/) is an MPC-based programmable, distributed, and non-custodial key management system, that allows users to generate wallets, scoped to their application, either via user Passkeys, our signer allows you to sign messages and transactions with a Passport Network account.
+
+To learn more, check out the [Passpor Developer Docs](https://docs.0xpass.io/)
+
+### Install
+
+```bash
+pnpm install @web3-onboard/passport @0xpass/webauthn-signer
+# OR
+yarn add @web3-onboard/passport @0xpass/webauthn-signer
+# OR
+npm install @web3-onboard/passport @0xpass/webauthn-signer
+```
+
+## Setup
+
+To use Passport with web3-onboard, you'll first need to make sure you have configured a scope for your application. For this you can follow the guides below:
+
+- Refer to the [Passport documentation](https://docs.0xpass.io/) for instructions on setting up your application with Passport.
+- For a primer on setting up your scope you can check [here](https://docs.0xpass.io/authentication/configuring-your-scope).
+
+```typescript
+/**
+ * Options for initializing the Passport environment.
+ *
+ * @property {string} iconPath - Path to the icon image.
+ * @property {string} scopeId - Identifier for the scope.
+ * @property {SignerWithOptionalCreator} signer - This will be the WebauthnSigner you pass
+ * @property {string} [fallbackProvider] -  fallback provider URL e.g an alchemy or infura endpoint.
+ * @property {Chain} [chain] - Optional blockchain chain configuration, defaults to mainnet.
+ * @property {Network} [network] - Optional passport network configuration, defaults to Passport testnet.
+ * @property {string} [encryptionSecret] - Optional encryption secret for securing data.
+ */
+type PassportOptions = {
+  iconPath: string
+  scopeId: string
+  signer: SignerWithOptionalCreator
+  fallbackProvider: string
+  chain?: Chain
+  network?: Network
+  encryptionSecret?: string
+}
+```
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import passportModule, { Network } from '@web3-onboard/passport'
+import { WebauthnSigner } from '@0xpass/webauthn-signer'
+
+// Firstly you set up your passkey / webauthn signer
+// The rpId and rpName are the same as the ones you set up in your passport application scope. They follow the webauthn standard, of the following values
+// rpId: the domain of where the passkey is generated
+// rpName: human readable name for the domain
+// You can read more on this here https://docs.0xpass.io/authentication/configuring-your-scope#scope-configuration
+const webauthnSigner = new WebauthnSigner({
+  rpId: 'localhost',
+  rpName: '0xPass'
+})
+
+const passport = passportModule({
+  network: Network.TESTNET,
+  scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2', // replace this with your scope id
+  signer: webauthnSigner,
+  fallbackProvider: 'https://eth-mainnet.g.alchemy.com/v2/xxx' // insert your alchemy / infura url here
+  // encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
+})
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    passport
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```

packages/passport/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@web3-onboard/passport",
+  "version": "2.0.0-alpha.1",
+  "description": "passport",
+  "module": "dist/index.js",
+  "browser": "dist/index.js",
+  "main": "dist/index.js",
+  "type": "module",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://onboard.blocknative.com",
+  "bugs": "https://github.com/blocknative/web3-onboard/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blocknative/web3-onboard.git",
+    "directory": "packages/passport"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w",
+    "type-check": "tsc --noEmit"
+  },
+  "license": "MIT",
+  "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",
+    "Passport Protocol",
+    "0xPass"
+  ],
+  "dependencies": {
+    "@0xpass/passport": "2.1.1",
+    "@0xpass/passport-viem": "2.0.1",
+    "@web3-onboard/common": "^2.3.3",
+    "crypto-js": "^4.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.9.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.2",
+    "@types/crypto-js": "^4.2.2",
+    "react": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}

packages/passport/src/icon.ts

@@ -0,0 +1,48 @@
+export default `
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
+-2560z m2689 1534 c12 -15 21 -36 21 -47 0 -28 28 -57 55 -57 12 0 34 -9 49
+-21 l26 -20 0 -160 c0 -146 2 -161 20 -179 11 -11 31 -20 45 -20 50 0 65 -30
+65 -130 0 -83 2 -93 25 -115 45 -46 95 -23 114 49 10 42 15 46 54 57 48 14 77
+41 77 74 0 28 25 50 74 67 41 14 51 26 60 70 11 50 29 58 132 58 104 0 134
+-15 134 -65 0 -31 33 -65 63 -65 35 0 56 -20 70 -69 13 -45 24 -56 67 -65 58
+-12 65 -26 65 -129 0 -105 -15 -137 -62 -137 -31 0 -73 -42 -73 -73 0 -30 -27
+-55 -69 -63 -34 -7 -61 -37 -61 -68 0 -27 39 -66 65 -66 31 0 65 -28 65 -54 0
+-13 9 -35 21 -50 19 -25 25 -26 110 -26 82 0 92 -2 114 -25 14 -13 25 -35 25
+-48 0 -29 24 -52 65 -61 58 -14 65 -29 65 -134 0 -105 -12 -132 -58 -132 -32
+0 -72 -36 -72 -66 0 -12 -9 -32 -19 -45 -17 -22 -28 -24 -118 -27 -54 -2 -103
+-8 -109 -13 -7 -5 -17 -30 -23 -55 -12 -46 -24 -56 -84 -69 -33 -7 -52 -43
+-43 -80 6 -25 19 -33 81 -51 24 -8 33 -18 46 -58 16 -51 26 -61 69 -70 58 -12
+65 -26 65 -129 0 -105 -15 -137 -62 -137 -31 0 -73 -42 -73 -73 0 -30 -27 -55
+-69 -63 -35 -7 -61 -37 -61 -70 0 -13 -12 -32 -26 -43 -22 -18 -41 -21 -111
+-21 -76 0 -86 2 -108 25 -14 13 -25 35 -25 48 0 29 -24 52 -65 61 -42 10 -65
+34 -65 67 0 32 -40 69 -75 69 -27 0 -50 25 -59 65 -16 67 -77 88 -115 39 -18
+-22 -21 -41 -21 -114 0 -97 -9 -114 -69 -126 -55 -11 -61 -31 -61 -199 0 -168
+-6 -188 -61 -199 -42 -8 -69 -33 -69 -63 0 -13 -11 -35 -25 -48 -22 -23 -32
+-25 -108 -25 -70 0 -89 3 -111 21 -14 11 -26 30 -26 43 0 33 -26 64 -63 71
+-64 14 -67 22 -67 186 0 81 -4 159 -10 173 -6 17 -21 28 -47 35 -72 20 -77 28
+-83 141 -4 85 -8 104 -24 116 -43 31 -106 1 -106 -51 0 -32 -33 -65 -65 -65
+-27 0 -65 -32 -65 -55 0 -44 -43 -85 -90 -85 -23 0 -50 -36 -50 -67 0 -47 -32
+-63 -126 -63 -47 0 -94 5 -105 10 -11 6 -24 30 -30 56 -9 34 -18 48 -38 56
+-86 34 -88 35 -100 82 -11 46 -32 66 -70 66 -12 0 -30 9 -41 20 -17 17 -20 33
+-20 108 0 100 12 127 63 137 42 9 67 32 67 62 0 31 42 73 74 73 32 0 69 45 60
+74 -10 33 -35 56 -61 56 -31 0 -73 42 -73 73 0 42 -27 55 -126 59 -101 3 -134
+19 -134 65 0 31 -42 73 -74 73 -46 0 -66 42 -66 136 0 96 11 116 78 133 39 11
+62 40 62 81 0 36 38 50 132 50 75 0 91 3 108 20 11 11 20 28 20 39 0 27 38 71
+61 71 77 0 104 109 32 126 -60 14 -80 32 -92 78 -11 46 -33 66 -70 66 -12 0
+-30 9 -41 20 -17 17 -20 33 -20 108 0 100 12 127 63 137 42 9 67 32 67 62 0
+31 42 73 74 73 28 0 66 42 66 73 0 45 26 57 124 57 101 0 136 -14 136 -54 0
+-34 37 -76 66 -76 32 0 74 -42 74 -73 0 -30 25 -53 67 -62 37 -7 63 -38 63
+-71 0 -25 43 -64 71 -64 11 0 28 9 39 20 17 17 20 33 20 110 0 83 2 93 25 115
+13 14 35 25 49 25 15 0 33 11 45 26 19 24 21 40 21 180 0 141 2 156 20 174 11
+11 31 20 45 20 32 0 65 33 65 65 0 50 30 65 134 65 90 0 96 -1 115 -26z"/>
+</g>
+</svg>
+`