@hashgraph/hedera-wallet-connect 1.3.3 → 1.3.6-canary.67ec2cf.0

package/README.md

@@ -52,245 +52,19 @@ _The relay and this library have different intentions and serve different purpos
 native Hedera integration vs. Ethereum compatability layers to ease developer onboarding for
 those more familiar with the Ethereum ecosystem._
 
-## Set up
+# Documentation
 
-To start using WalletConnect, sign up for an account at <https://cloud.walletconnect.com>. You
-will use your project id when initializing client libraries.
+WalletConnect <> Hedera docs are fully hosted on [https://hwc-docs.hgraph.app/](https://hwc-docs.hgraph.app/)
 
-It is important to understand core WalletConnect concepts when integrating this library. Please
-reference the [WalletConnect documentation](https://docs.walletconnect.com/2.0/).
+- [Installation](/docs/docs/installation.md)
+- [dApp Guide](/docs/docs/dapp-guide.md)
+- [Wallet Guide](/docs/docs/wallet-guide.md)
+- [Signing Messages](/docs/docs/sign-messages.md)
+- [Demos](/docs/docs/demos.md)
 
-## Usage
+# Accessing the docs locally
 
-Upon successfully configuring your dApp and/or wallet to manage WalletConnect sessions, you can
-use this library’s functions to easily create and handle requests for the Hedera network.
-
-### Installation
-
-`npm i --save @hashgraph/hedera-wallet-connect`
-
-### Example code
-
-- [Typescript dApp example code](demos/typescript/dapp/main.ts)
-- [Typescript Wallet example code](demos/typescript/wallet/main.ts)
-- [React dApp example code](demos/react-dapp)
-
-
-### DApps
-
-#### Signer
-
-This library provides a `DAppSigner` class that implements the `@hashgraph/sdk`'s `Signer`
-interface. You may use the `DAppSigner` class to sign and execute transactions on the Hedera
-network.
-
-##### Get Signer
-
-After you have paired your wallet with your dApp, you can get the signer from the
-`DAppConnector` instance:
-
-```javascript
-const signer = dAppConnector.signers[0] // DAppSigner
-```
-
-Or, if multiple signers are available, you can find the signer by account ID:
-
-```javascript
-const signer = dAppConnector.signers.find(
-  (signer_) => signer_.getAccountId().toString() === '0.0.100',
-) // DAppSigner
-```
-
-##### Sign Transactions
-
-```javascript
-const transaction = new TransferTransaction()
-  .addHbarTransfer('0.0.100', new Hbar(-1))
-  .addHbarTransfer('0.0.101', new Hbar(1))
-
-await transaction.freezeWithSigner(signer)
-const signedTransaction = await signer.signTransaction(transaction)
-```
-
-##### Sign and Execute Transactions
-
-```javascript
-const transaction = new TransferTransaction()
-  .addHbarTransfer('0.0.100', new Hbar(-1))
-  .addHbarTransfer('0.0.101', new Hbar(1))
-
-await transaction.freezeWithSigner(signer)
-const transactionResponse = await transaction.executeWithSigner(signer)
-```
-
-##### Sign and verify messages
-
-```javascript
-const text = 'Example message to sign'
-const base64String = btoa(text)
-
-const sigMaps = await signer.sign([base64StringToUint8Array(base64String)]) // import { base64StringToUint8Array } from '@hashgraph/hedera-wallet-connect'
-
-// sigMaps[0].publicKey also contains the public key of the signer, but you should obtain a PublicKey you can trust from a mirror node.
-const verifiedResult = verifySignerSignature(base64String, sigMaps[0], publicKey) // import { verifySignerSignature } from '@hashgraph/hedera-wallet-connect'
-```
-
-### Wallet
-
-This library provides a Wallet class that extends the
-[ Web3Wallet ](https://github.com/WalletConnect/walletconnect-monorepo/tree/v2.0/packages/web3wallet)
-class provided by WalletConnect class
-
-#### Event Listeners
-
-WalletConnect emits various events during a session. Listen to these events to synchronize the
-state of your application:
-
-```javascript
-// Handle pairing proposals
-signClient.on('session_proposal', (event) => {
-  // Display session proposal to the user and decide to approve or reject
-})
-
-// Handle session requests, like signing transactions or messages
-signClient.on('session_request', (event) => {
-  // Process the session request
-})
-
-// Handle session deletions
-signClient.on('session_delete', (event) => {
-  // React to session termination
-})
-```
-
-#### Pairing with dApps
-
-Pairing establishes a connection between the wallet and a dApp. Once paired, the dApp can send
-session requests to the wallet.
-
-##### a. Pairing via URI
-
-If a dApp shares a URI for pairing:
-
-```javascript
-await signClient.core.pairing.pair({ uri: 'RECEIVED_URI' })
-```
-
-Upon successful pairing, the `session_proposal` event will be triggered.
-
-##### b. Pairing via QR Codes
-
-For a better user experience, dApps often share QR codes that wallets can scan to establish a
-pairing. Use a QR code scanning library to scan and obtain the URI, then proceed with pairing:
-
-```javascript
-const scannedUri = '...' // URI obtained from scanning the QR code
-await signClient.core.pairing.pair({ uri: scannedUri })
-```
-
-#### Handling Session Proposals
-
-Upon receiving a `session_proposal` event, display the proposal details to the user. Allow them
-to approve or reject the session:
-
-##### Handling Session Requests
-
-Upon receiving a `session_request` event, process the request. For instance, if the dApp
-requests a transaction to be signed:
-
-#### Extension popup
-
-By default, it is not possible to directly pop up an extension with Wallet Connect. However, to
-allow this possibility, the dAppConnector look for extensions. If you create the AppConnector,
-it will automatically send a message to the extension to detect if it is installed. In case the
-extension is installed, it will be added to the available extensions and its data can be found
-at the extensions property of dAppConnector.
-
-To connect an available extension, use the method `connectExtension(<extensionId>)`. This will
-link the extension to the signer and session. Whenever you use the signer created for this
-session, the extension will automatically open. You can find out if the extension is available
-by checking the `extensions` property.
-
-```javascript
-const dAppConnector = new DAppConnector(
-  dAppMetadata,
-  LedgerId.TESTNET,
-  projectId,
-  Object.values(HederaJsonRpcMethod),
-  [HederaSessionEvent.ChainChanged, HederaSessionEvent.AccountsChanged],
-  [HederaChainId.Testnet]
-)
-
-[...]
-
-dAppConnector?.extensions?.forEach((extension) => {
-  console.log(extension)
-})
-
-const extension = dAppConnector?.extensions?.find((extension) => extension.name === '<Extension name>')
-if (extension.available) {
-  await dAppConnector!.connectExtension(extension.id);
-  const signer = dAppConnector.getSigner(AccountId.fromString('0.0.12345'))
-
-  // This request will open the extension
-  const response = await signer.signAndExecuteTransaction(transaction)
-}
-```
-
-Wallets that are compatible should be able to receive and respond to the following messages:
-
-- `"hedera-extension-query"`: The extension is required to respond with
-  `"hedera-extension-response"` and provide the next set of data in the metadata property.
-  ```javascript
-  let metadata = {
-    id: '<extesnionId>',
-    name: '<Wallet name>',
-    url: '<Wallet url>',
-    icon: '<Wallet con>',
-    description: '<Wallet url>',
-  }
-  ```
-- `"hedera-extension-open-<extensionId>"`: The extension needs to listen to this message and
-  automatically open.
-- `"hedera-extension-connect-<extensionId>"`: The extension must listen to this message and
-  utilize the `pairingString` property in order to establish a connection.
-
-This communication protocol between the wallet and web dApps requires an intermediate script to
-use the Chrome API. Refer to the
-[Chrome Extensions documentation](https://developer.chrome.com/docs/extensions/develop/concepts/messaging)
-
-To enable communication between the extension and a web dApp embedded in an iframe, the wallet
-must support the following messages:
-
-- `"hedera-iframe-query"`:The extension is required to respond with `"hedera-iframe-response"`
-  and provide the next set of data in the metadata property.
-  ```javascript
-  let metadata = {
-    id: '<Wallet extension id>',
-    name: '<Wallet name>',
-    url: '<Wallet url>',
-    icon: '<Wallet icon>',
-    description: '<Wallet description>',
-  }
-  ```
-- `"hedera-iframe-connect"`: The extension must listen to this message and utilize the
-  `pairingString` property in order to establish a connection.
-
-The dAppConnector is designed to automatically initiate pairing without any need for user
-action, in case no sessions are noticed and an iframe extension is detected. To capture this
-event and the newly established session, you can utilize the `onSessionIframeCreated` function.
-
-## Demo & docs
-
-This repository includes a vanilla html/css/javascript implementation with a dApp and wallet
-example useful for testing and development while integrating WalletConnect and Hedera.
-
-The docs site utilizes [Typedoc](https://typedoc.org) to generate a library documentation site
-at <https://wc.hgraph.app/docs/>
-
-The demo source code lives in `./demos/typescript` and is available at
-<https://wc.hgraph.app>
-
-## Passing tests
-
-- `git commit -Ss "the commit message"`
+- `cd docs`
+- `npm install`
+- `npm run docs`
+- Navigating to `localhost:3000`

package/dist/src/lib/dapp/index.js

@@ -114,15 +114,24 @@ export class DAppConnector {
             this.walletConnectClient.on('session_delete', (pairing) => {
                 console.log(pairing);
                 this.signers = this.signers.filter((signer) => signer.topic !== pairing.topic);
-                this.disconnect(pairing.topic);
                 // Session was deleted -> reset the dapp state, clean up from user session, etc.
+                try {
+                    this.disconnect(pairing.topic);
+                }
+                catch (e) {
+                    console.error(e);
+                }
                 console.log('Dapp: Session deleted by wallet!');
             });
             this.walletConnectClient.core.pairing.events.on('pairing_delete', (pairing) => {
-                // Session was deleted
                 console.log(pairing);
                 this.signers = this.signers.filter((signer) => signer.topic !== pairing.topic);
-                this.disconnect(pairing.topic);
+                try {
+                    this.disconnect(pairing.topic);
+                }
+                catch (e) {
+                    console.error(e);
+                }
                 console.log(`Dapp: Pairing deleted by wallet!`);
                 // clean up after the pairing for `topic` was deleted.
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashgraph/hedera-wallet-connect",
-  "version": "1.3.3",
+  "version": "1.3.6-canary.67ec2cf.0",
   "description": "A library to facilitate integrating Hedera with WalletConnect",
   "repository": {
     "type": "git",
@@ -16,7 +16,9 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@hashgraph/hedera-wallet-connect": "^1.3.1",
+    "@hashgraph/hedera-wallet-connect": "^1.3.4",
+    "@swc/core": "^1.7.40",
+    "@swc/jest": "^0.2.36",
     "@types/jest": "^29.5.3",
     "@types/node": "^22.5.0",
     "@types/react-dom": "^18.2.21",
@@ -36,7 +38,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "typedoc": "^0.26.3",
     "typedoc-theme-hierarchy": "^4.1.2",
@@ -49,6 +50,7 @@
     "build:docs": "typedoc --options typedoc.json",
     "watch": "nodemon --watch src/lib/ --ext ts --exec \"npm run build\"",
     "dev": "npm run dev:ts-demo",
+    "dev:docs": "cd docs && npm run start",
     "dev:ts-demo": "rimraf dist && npm run build && concurrently --raw \"npm run watch\" \"node scripts/demos/typescript/dev.mjs\"",
     "dev:react-demo": "rimraf dist && npm run build && concurrently --raw \"npm run watch\" \"node scripts/demos/react/dev.mjs\"",
     "test": "jest",
@@ -58,6 +60,7 @@
     "prepare": "husky install",
     "prettier:check": "prettier --check ./src/",
     "prettier:fix": "prettier --write ./src/",
+    "prod:docs-docker": "sh docker-run.sh",
     "test:sigMap": "jest --testMatch '**/SignatureMapHelpers.test.ts' --verbose"
   },
   "peerDependencies": {