Skip to content

Commit 13653b9

Browse files
k-xok-xo
authored
fix: add passport wallet (#2195)
* fix: add passport wallet * fix: export network * fix: review tweaks
1 parent 2b5c856 commit 13653b9

File tree

12 files changed

+777
-2
lines changed

12 files changed

+777
-2
lines changed

‎.circleci/config.yml

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,12 @@ jobs:
448448
working_directory: ~/web3-onboard-monorepo/packages/particle-network
449449
steps:
450450
- node-build-steps
451+
build-passport:
452+
docker:
453+
- image: cimg/node:18.0.0
454+
working_directory: ~/web3-onboard-monorepo/packages/passport
455+
steps:
456+
- node-build-steps
451457

452458
# Build staging/Alpha releases
453459
build-staging-core:
@@ -732,6 +738,12 @@ jobs:
732738
working_directory: ~/web3-onboard-monorepo/packages/particle-network
733739
steps:
734740
- node-staging-build-steps
741+
build-staging-passport:
742+
docker:
743+
- image: cimg/node:18.0.0
744+
working_directory: ~/web3-onboard-monorepo/packages/passport
745+
steps:
746+
- node-staging-build-steps
735747

736748
workflows:
737749
version: 2
@@ -1017,4 +1029,10 @@ workflows:
10171029
- build-particle:
10181030
<<: *deploy_production_filters
10191031
- build-staging-particle:
1020-
<<: *deploy_staging_filters
1032+
<<: *deploy_staging_filters
1033+
passport:
1034+
jobs:
1035+
- build-passport:
1036+
<<: *deploy_production_filters
1037+
- build-staging-passport:
1038+
<<: *deploy_staging_filters

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: Passport Protocol
3+
---
4+
5+
# {$frontmatter.title}
6+
7+
Wallet module for connecting Passport Protocol to Web3 Onboard.
8+
9+
See [Passport Protocol Docs](https://docs.0xpass.io/) for details.
10+
11+
## Install
12+
13+
<Tabs values={['yarn', 'npm']}>
14+
<TabPanel value="yarn">
15+
16+
```sh copy
17+
yarn add @web3-onboard/core @web3-onboard/passport @0xpass/webauthn-signer
18+
```
19+
20+
</TabPanel>
21+
<TabPanel value="npm">
22+
23+
```sh copy
24+
npm install @web3-onboard/core @web3-onboard/passport @0xpass/webauthn-signer
25+
```
26+
27+
</TabPanel>
28+
</Tabs>
29+
30+
## Usage
31+
32+
```typescript
33+
import Onboard from '@web3-onboard/core'
34+
import passportModule, { Network } from '@web3-onboard/passport'
35+
import { WebauthnSigner } from '@0xpass/webauthn-signer'
36+
37+
// Firstly you set up your passkey / webauthn signer
38+
// 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
39+
// rpId: the domain of where the passkey is generated
40+
// rpName: human readable name for the domain
41+
// You can read more on this here https://docs.0xpass.io/authentication/configuring-your-scope#scope-configuration
42+
const webauthnSigner = new WebauthnSigner({
43+
rpId: 'localhost',
44+
rpName: '0xPass'
45+
})
46+
47+
const passport = passportModule({
48+
network: Network.TESTNET,
49+
scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2', // replace this with your scope id
50+
signer: webauthnSigner,
51+
fallbackProvider: 'https://eth-mainnet.g.alchemy.com/v2/xxx' // insert your alchemy / infura url here
52+
// encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
53+
})
54+
55+
const onboard = Onboard({
56+
// ... other Onboard options
57+
wallets: [
58+
passport
59+
//... other wallets
60+
]
61+
})
62+
63+
const connectedWallets = await onboard.connectWallet()
64+
console.log(connectedWallets)
65+
```
66+
67+
## Build Environments
68+
69+
For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)

‎packages/demo/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@
6464
"@web3-onboard/xdefi": "^2.0.5",
6565
"@web3-onboard/zeal": "^2.0.3",
6666
"@web3-onboard/particle-network": "^2.0.1",
67+
"@web3-onboard/passport": "^2.0.0-alpha.1",
68+
"@0xpass/webauthn-signer": "2.0.0",
6769
"vconsole": "^3.15.1"
6870
},
6971
"license": "MIT",

‎packages/demo/src/App.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@
5151
import VConsole from 'vconsole'
5252
import blocknativeIcon from './blocknative-icon.js'
5353
import DappAuth from '@blocto/dappauth'
54+
import passportModule, { Network } from '@web3-onboard/passport'
55+
import { WebauthnSigner } from '@0xpass/webauthn-signer'
5456
5557
if (window.innerWidth < 700) {
5658
new VConsole()
@@ -176,6 +178,19 @@
176178
const blocto = bloctoModule()
177179
const tallyho = tallyHoModule()
178180
181+
const webauthnSigner = new WebauthnSigner({
182+
rpId: 'localhost',
183+
rpName: '0xPass'
184+
})
185+
186+
const passport = passportModule({
187+
network: Network.TESTNET,
188+
scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2',
189+
signer: webauthnSigner,
190+
fallbackProvider: '' // insert your alchemy / infura url here
191+
// encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
192+
})
193+
179194
const trezorOptions = {
180195
email: 'test@test.com',
181196
appUrl: 'https://www.blocknative.com',
@@ -269,6 +284,7 @@
269284
blocto,
270285
venly,
271286
particle,
287+
passport
272288
],
273289
// transactionPreview,
274290
gas,

‎packages/passport/README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# @web3-onboard/passport
2+
3+
## Wallet module for connecting Passport Wallets to web3-onboard
4+
5+
[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.
6+
7+
To learn more, check out the [Passpor Developer Docs](https://docs.0xpass.io/)
8+
9+
### Install
10+
11+
```bash
12+
pnpm install @web3-onboard/passport @0xpass/webauthn-signer
13+
# OR
14+
yarn add @web3-onboard/passport @0xpass/webauthn-signer
15+
# OR
16+
npm install @web3-onboard/passport @0xpass/webauthn-signer
17+
```
18+
19+
## Setup
20+
21+
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:
22+
23+
- Refer to the [Passport documentation](https://docs.0xpass.io/) for instructions on setting up your application with Passport.
24+
- For a primer on setting up your scope you can check [here](https://docs.0xpass.io/authentication/configuring-your-scope).
25+
26+
```typescript
27+
/**
28+
* Options for initializing the Passport environment.
29+
*
30+
* @property {string} iconPath - Path to the icon image.
31+
* @property {string} scopeId - Identifier for the scope.
32+
* @property {SignerWithOptionalCreator} signer - This will be the WebauthnSigner you pass
33+
* @property {string} [fallbackProvider] - fallback provider URL e.g an alchemy or infura endpoint.
34+
* @property {Chain} [chain] - Optional blockchain chain configuration, defaults to mainnet.
35+
* @property {Network} [network] - Optional passport network configuration, defaults to Passport testnet.
36+
* @property {string} [encryptionSecret] - Optional encryption secret for securing data.
37+
*/
38+
type PassportOptions = {
39+
iconPath: string
40+
scopeId: string
41+
signer: SignerWithOptionalCreator
42+
fallbackProvider: string
43+
chain?: Chain
44+
network?: Network
45+
encryptionSecret?: string
46+
}
47+
```
48+
49+
## Usage
50+
51+
```typescript
52+
import Onboard from '@web3-onboard/core'
53+
import passportModule, { Network } from '@web3-onboard/passport'
54+
import { WebauthnSigner } from '@0xpass/webauthn-signer'
55+
56+
// Firstly you set up your passkey / webauthn signer
57+
// 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
58+
// rpId: the domain of where the passkey is generated
59+
// rpName: human readable name for the domain
60+
// You can read more on this here https://docs.0xpass.io/authentication/configuring-your-scope#scope-configuration
61+
const webauthnSigner = new WebauthnSigner({
62+
rpId: 'localhost',
63+
rpName: '0xPass'
64+
})
65+
66+
const passport = passportModule({
67+
network: Network.TESTNET,
68+
scopeId: 'd8ae4424-c1f6-42b0-ab5e-2688bdaa0ff2', // replace this with your scope id
69+
signer: webauthnSigner,
70+
fallbackProvider: 'https://eth-mainnet.g.alchemy.com/v2/xxx' // insert your alchemy / infura url here
71+
// encryptionSecret: '' // encryption secret is optional, but advised to securely store values in browser storage
72+
})
73+
74+
const onboard = Onboard({
75+
// ... other Onboard options
76+
wallets: [
77+
passport
78+
//... other wallets
79+
]
80+
})
81+
82+
const connectedWallets = await onboard.connectWallet()
83+
console.log(connectedWallets)
84+
```

‎packages/passport/package.json

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"name": "@web3-onboard/passport",
3+
"version": "2.0.0-alpha.1",
4+
"description": "passport",
5+
"module": "dist/index.js",
6+
"browser": "dist/index.js",
7+
"main": "dist/index.js",
8+
"type": "module",
9+
"typings": "dist/index.d.ts",
10+
"files": [
11+
"dist"
12+
],
13+
"homepage": "https://onboard.blocknative.com",
14+
"bugs": "https://github.com/blocknative/web3-onboard/issues",
15+
"repository": {
16+
"type": "git",
17+
"url": "https://github.com/blocknative/web3-onboard.git",
18+
"directory": "packages/passport"
19+
},
20+
"scripts": {
21+
"build": "tsc",
22+
"dev": "tsc -w",
23+
"type-check": "tsc --noEmit"
24+
},
25+
"license": "MIT",
26+
"keywords": [
27+
"Ethereum",
28+
"Web3",
29+
"EVM",
30+
"dapp",
31+
"Multichain",
32+
"Wallet",
33+
"Transaction",
34+
"Provider",
35+
"Hardware Wallet",
36+
"Notifications",
37+
"React",
38+
"Svelte",
39+
"Vue",
40+
"Next",
41+
"Nuxt",
42+
"MetaMask",
43+
"Coinbase",
44+
"WalletConnect",
45+
"Ledger",
46+
"Trezor",
47+
"Connect Wallet",
48+
"Ethereum Hooks",
49+
"Blocknative",
50+
"Mempool",
51+
"pending",
52+
"confirmed",
53+
"Injected Wallet",
54+
"Crypto",
55+
"Crypto Wallet",
56+
"Passport Protocol",
57+
"0xPass"
58+
],
59+
"dependencies": {
60+
"@0xpass/passport": "2.1.1",
61+
"@0xpass/passport-viem": "2.0.1",
62+
"@web3-onboard/common": "^2.3.3",
63+
"crypto-js": "^4.2.0",
64+
"react-dom": "^18.2.0",
65+
"viem": "^2.9.4"
66+
},
67+
"peerDependencies": {
68+
"react": ">=18.2"
69+
},
70+
"devDependencies": {
71+
"@types/react": "^18.0.2",
72+
"@types/crypto-js": "^4.2.2",
73+
"react": "^18.2.0",
74+
"typescript": "^5.2.2"
75+
}
76+
}

‎packages/passport/src/icon.ts

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

0 commit comments

Comments
 (0)