@hashgraph/hedera-wallet-connect 1.3.4 → 1.3.6-canary.1df28dc.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (2) hide show
  1. package/README.md +12 -238
  2. package/package.json +6 -3
package/README.md CHANGED
@@ -52,245 +52,19 @@ _The relay and this library have different intentions and serve different purpos
52
52
  native Hedera integration vs. Ethereum compatability layers to ease developer onboarding for
53
53
  those more familiar with the Ethereum ecosystem._
54
54
 
55
- ## Set up
55
+ # Documentation
56
56
 
57
- To start using WalletConnect, sign up for an account at <https://cloud.walletconnect.com>. You
58
- will use your project id when initializing client libraries.
57
+ WalletConnect <> Hedera docs are fully hosted on [https://hwc-docs.hgraph.app/](https://hwc-docs.hgraph.app/)
59
58
 
60
- It is important to understand core WalletConnect concepts when integrating this library. Please
61
- reference the [WalletConnect documentation](https://docs.walletconnect.com/2.0/).
59
+ - [Installation](/docs/docs/installation.md)
60
+ - [dApp Guide](/docs/docs/dapp-guide.md)
61
+ - [Wallet Guide](/docs/docs/wallet-guide.md)
62
+ - [Signing Messages](/docs/docs/sign-messages.md)
63
+ - [Demos](/docs/docs/demos.md)
62
64
 
63
- ## Usage
65
+ # Accessing the docs locally
64
66
 
65
- Upon successfully configuring your dApp and/or wallet to manage WalletConnect sessions, you can
66
- use this library’s functions to easily create and handle requests for the Hedera network.
67
-
68
- ### Installation
69
-
70
- `npm i --save @hashgraph/hedera-wallet-connect`
71
-
72
- ### Example code
73
-
74
- - [Typescript dApp example code](demos/typescript/dapp/main.ts)
75
- - [Typescript Wallet example code](demos/typescript/wallet/main.ts)
76
- - [React dApp example code](demos/react-dapp)
77
-
78
-
79
- ### DApps
80
-
81
- #### Signer
82
-
83
- This library provides a `DAppSigner` class that implements the `@hashgraph/sdk`'s `Signer`
84
- interface. You may use the `DAppSigner` class to sign and execute transactions on the Hedera
85
- network.
86
-
87
- ##### Get Signer
88
-
89
- After you have paired your wallet with your dApp, you can get the signer from the
90
- `DAppConnector` instance:
91
-
92
- ```javascript
93
- const signer = dAppConnector.signers[0] // DAppSigner
94
- ```
95
-
96
- Or, if multiple signers are available, you can find the signer by account ID:
97
-
98
- ```javascript
99
- const signer = dAppConnector.signers.find(
100
- (signer_) => signer_.getAccountId().toString() === '0.0.100',
101
- ) // DAppSigner
102
- ```
103
-
104
- ##### Sign Transactions
105
-
106
- ```javascript
107
- const transaction = new TransferTransaction()
108
- .addHbarTransfer('0.0.100', new Hbar(-1))
109
- .addHbarTransfer('0.0.101', new Hbar(1))
110
-
111
- await transaction.freezeWithSigner(signer)
112
- const signedTransaction = await signer.signTransaction(transaction)
113
- ```
114
-
115
- ##### Sign and Execute Transactions
116
-
117
- ```javascript
118
- const transaction = new TransferTransaction()
119
- .addHbarTransfer('0.0.100', new Hbar(-1))
120
- .addHbarTransfer('0.0.101', new Hbar(1))
121
-
122
- await transaction.freezeWithSigner(signer)
123
- const transactionResponse = await transaction.executeWithSigner(signer)
124
- ```
125
-
126
- ##### Sign and verify messages
127
-
128
- ```javascript
129
- const text = 'Example message to sign'
130
- const base64String = btoa(text)
131
-
132
- const sigMaps = await signer.sign([base64StringToUint8Array(base64String)]) // import { base64StringToUint8Array } from '@hashgraph/hedera-wallet-connect'
133
-
134
- // sigMaps[0].publicKey also contains the public key of the signer, but you should obtain a PublicKey you can trust from a mirror node.
135
- const verifiedResult = verifySignerSignature(base64String, sigMaps[0], publicKey) // import { verifySignerSignature } from '@hashgraph/hedera-wallet-connect'
136
- ```
137
-
138
- ### Wallet
139
-
140
- This library provides a Wallet class that extends the
141
- [ Web3Wallet ](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/web3wallet)
142
- class provided by WalletConnect class
143
-
144
- #### Event Listeners
145
-
146
- WalletConnect emits various events during a session. Listen to these events to synchronize the
147
- state of your application:
148
-
149
- ```javascript
150
- // Handle pairing proposals
151
- signClient.on('session_proposal', (event) => {
152
- // Display session proposal to the user and decide to approve or reject
153
- })
154
-
155
- // Handle session requests, like signing transactions or messages
156
- signClient.on('session_request', (event) => {
157
- // Process the session request
158
- })
159
-
160
- // Handle session deletions
161
- signClient.on('session_delete', (event) => {
162
- // React to session termination
163
- })
164
- ```
165
-
166
- #### Pairing with dApps
167
-
168
- Pairing establishes a connection between the wallet and a dApp. Once paired, the dApp can send
169
- session requests to the wallet.
170
-
171
- ##### a. Pairing via URI
172
-
173
- If a dApp shares a URI for pairing:
174
-
175
- ```javascript
176
- await signClient.core.pairing.pair({ uri: 'RECEIVED_URI' })
177
- ```
178
-
179
- Upon successful pairing, the `session_proposal` event will be triggered.
180
-
181
- ##### b. Pairing via QR Codes
182
-
183
- For a better user experience, dApps often share QR codes that wallets can scan to establish a
184
- pairing. Use a QR code scanning library to scan and obtain the URI, then proceed with pairing:
185
-
186
- ```javascript
187
- const scannedUri = '...' // URI obtained from scanning the QR code
188
- await signClient.core.pairing.pair({ uri: scannedUri })
189
- ```
190
-
191
- #### Handling Session Proposals
192
-
193
- Upon receiving a `session_proposal` event, display the proposal details to the user. Allow them
194
- to approve or reject the session:
195
-
196
- ##### Handling Session Requests
197
-
198
- Upon receiving a `session_request` event, process the request. For instance, if the dApp
199
- requests a transaction to be signed:
200
-
201
- #### Extension popup
202
-
203
- By default, it is not possible to directly pop up an extension with Wallet Connect. However, to
204
- allow this possibility, the dAppConnector look for extensions. If you create the AppConnector,
205
- it will automatically send a message to the extension to detect if it is installed. In case the
206
- extension is installed, it will be added to the available extensions and its data can be found
207
- at the extensions property of dAppConnector.
208
-
209
- To connect an available extension, use the method `connectExtension(<extensionId>)`. This will
210
- link the extension to the signer and session. Whenever you use the signer created for this
211
- session, the extension will automatically open. You can find out if the extension is available
212
- by checking the `extensions` property.
213
-
214
- ```javascript
215
- const dAppConnector = new DAppConnector(
216
- dAppMetadata,
217
- LedgerId.TESTNET,
218
- projectId,
219
- Object.values(HederaJsonRpcMethod),
220
- [HederaSessionEvent.ChainChanged, HederaSessionEvent.AccountsChanged],
221
- [HederaChainId.Testnet]
222
- )
223
-
224
- [...]
225
-
226
- dAppConnector?.extensions?.forEach((extension) => {
227
- console.log(extension)
228
- })
229
-
230
- const extension = dAppConnector?.extensions?.find((extension) => extension.name === '<Extension name>')
231
- if (extension.available) {
232
- await dAppConnector!.connectExtension(extension.id);
233
- const signer = dAppConnector.getSigner(AccountId.fromString('0.0.12345'))
234
-
235
- // This request will open the extension
236
- const response = await signer.signAndExecuteTransaction(transaction)
237
- }
238
- ```
239
-
240
- Wallets that are compatible should be able to receive and respond to the following messages:
241
-
242
- - `"hedera-extension-query"`: The extension is required to respond with
243
- `"hedera-extension-response"` and provide the next set of data in the metadata property.
244
- ```javascript
245
- let metadata = {
246
- id: '<extesnionId>',
247
- name: '<Wallet name>',
248
- url: '<Wallet url>',
249
- icon: '<Wallet con>',
250
- description: '<Wallet url>',
251
- }
252
- ```
253
- - `"hedera-extension-open-<extensionId>"`: The extension needs to listen to this message and
254
- automatically open.
255
- - `"hedera-extension-connect-<extensionId>"`: The extension must listen to this message and
256
- utilize the `pairingString` property in order to establish a connection.
257
-
258
- This communication protocol between the wallet and web dApps requires an intermediate script to
259
- use the Chrome API. Refer to the
260
- [Chrome Extensions documentation](https://developer.chrome.com/docs/extensions/develop/concepts/messaging)
261
-
262
- To enable communication between the extension and a web dApp embedded in an iframe, the wallet
263
- must support the following messages:
264
-
265
- - `"hedera-iframe-query"`:The extension is required to respond with `"hedera-iframe-response"`
266
- and provide the next set of data in the metadata property.
267
- ```javascript
268
- let metadata = {
269
- id: '<Wallet extension id>',
270
- name: '<Wallet name>',
271
- url: '<Wallet url>',
272
- icon: '<Wallet icon>',
273
- description: '<Wallet description>',
274
- }
275
- ```
276
- - `"hedera-iframe-connect"`: The extension must listen to this message and utilize the
277
- `pairingString` property in order to establish a connection.
278
-
279
- The dAppConnector is designed to automatically initiate pairing without any need for user
280
- action, in case no sessions are noticed and an iframe extension is detected. To capture this
281
- event and the newly established session, you can utilize the `onSessionIframeCreated` function.
282
-
283
- ## Demo & docs
284
-
285
- This repository includes a vanilla html/css/javascript implementation with a dApp and wallet
286
- example useful for testing and development while integrating WalletConnect and Hedera.
287
-
288
- The docs site utilizes [Typedoc](https://typedoc.org) to generate a library documentation site
289
- at <https://wc.hgraph.app/docs/>
290
-
291
- The demo source code lives in `./demos/typescript` and is available at
292
- <https://wc.hgraph.app>
293
-
294
- ## Passing tests
295
-
296
- - `git commit -Ss "the commit message"`
67
+ - `cd docs`
68
+ - `npm install`
69
+ - `npm run docs`
70
+ - Navigating to `localhost:3000`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashgraph/hedera-wallet-connect",
3
- "version": "1.3.4",
3
+ "version": "1.3.6-canary.1df28dc.0",
4
4
  "description": "A library to facilitate integrating Hedera with WalletConnect",
5
5
  "repository": {
6
6
  "type": "git",
@@ -16,7 +16,9 @@
16
16
  ],
17
17
  "license": "Apache-2.0",
18
18
  "devDependencies": {
19
- "@hashgraph/hedera-wallet-connect": "^1.3.1",
19
+ "@hashgraph/hedera-wallet-connect": "^1.3.4",
20
+ "@swc/core": "^1.7.40",
21
+ "@swc/jest": "^0.2.36",
20
22
  "@types/jest": "^29.5.3",
21
23
  "@types/node": "^22.5.0",
22
24
  "@types/react-dom": "^18.2.21",
@@ -36,7 +38,6 @@
36
38
  "react": "^18.2.0",
37
39
  "react-dom": "^18.2.0",
38
40
  "rimraf": "^5.0.5",
39
- "ts-jest": "^29.1.2",
40
41
  "ts-node": "^10.9.2",
41
42
  "typedoc": "^0.26.3",
42
43
  "typedoc-theme-hierarchy": "^4.1.2",
@@ -49,6 +50,7 @@
49
50
  "build:docs": "typedoc --options typedoc.json",
50
51
  "watch": "nodemon --watch src/lib/ --ext ts --exec \"npm run build\"",
51
52
  "dev": "npm run dev:ts-demo",
53
+ "dev:docs": "cd docs && npm run start",
52
54
  "dev:ts-demo": "rimraf dist && npm run build && concurrently --raw \"npm run watch\" \"node scripts/demos/typescript/dev.mjs\"",
53
55
  "dev:react-demo": "rimraf dist && npm run build && concurrently --raw \"npm run watch\" \"node scripts/demos/react/dev.mjs\"",
54
56
  "test": "jest",
@@ -58,6 +60,7 @@
58
60
  "prepare": "husky install",
59
61
  "prettier:check": "prettier --check ./src/",
60
62
  "prettier:fix": "prettier --write ./src/",
63
+ "prod:docs-docker": "sh docker-run.sh",
61
64
  "test:sigMap": "jest --testMatch '**/SignatureMapHelpers.test.ts' --verbose"
62
65
  },
63
66
  "peerDependencies": {