Implement missing DAppSigner methods for Signer interface (#116)

Signed-off-by: Patrick Woo-Sam <pwoosam@Patricks-MacBook-Air.local>
Signed-off-by: pwoosam <pwoosam5@icloud.com>

README.md

@@ -65,6 +65,65 @@ reference the [WalletConnect documentation](https://docs.walletconnect.com/2.0/)
 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.
 
+### 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

package.json

@@ -60,6 +60,7 @@
     "dev": "rimraf dist && npm run build && concurrently --raw \"npm run watch\" \"node scripts/examples/dev.mjs\"",
     "test": "jest",
     "test:connect": "jest --testMatch '**/DAppConnector.test.ts' --verbose",
+    "test:signer": "jest --testMatch '**/DAppSigner.test.ts' --verbose",
     "prepublishOnly": "rm -Rf dist && npm run build",
     "prepare": "husky install",
     "prettier:check": "prettier --check ./src/",

src/examples/typescript/dapp/index.html

@@ -188,6 +188,112 @@ <h2>Hedera &lt;&gt; WalletConnect methods:</h2>
         <pre id="sign-transaction-result"></pre>
       </section>
 
+      <hr />
+      <h2>Hedera &lt;&gt; WalletConnect - Signer methods:</h2>
+
+      <section>
+        <form id="signer_signAndExecuteTransaction" class="toggle">
+          <fieldset>
+            <legend>transaction.executeWithSigner(signer)</legend>
+            <label
+              >Transaction type:
+              <select name="sign-send-transaction-type">
+                <option value="hbar-transfer">Hbar Transfer</option>
+              </select>
+            </label>
+            <label
+              >Send to address:
+              <input name="sign-send-to" required />
+            </label>
+            <label
+              >Send from address:
+              <input name="sign-send-from" required />
+            </label>
+            <label
+              >Amount in Hbar:
+              <input name="sign-send-amount" required />
+            </label>
+          </fieldset>
+          <button type="submit">Submit to wallet</button>
+        </form>
+      </section>
+
+      <section>
+        <form id="signer_signTransaction" class="toggle">
+          <fieldset>
+            <legend>signer.signTransaction(transaction)</legend>
+            <label
+              >Transaction type:
+              <select name="sign-send-transaction-type">
+                <option value="hbar-transfer">Hbar Transfer</option>
+              </select>
+            </label>
+            <label
+              >Send to address:
+              <input name="sign-send-to" required />
+            </label>
+            <label
+              >Send from address:
+              <input name="sign-send-from" required />
+            </label>
+            <label
+              >Amount in Hbar:
+              <input name="sign-send-amount" required />
+            </label>
+          </fieldset>
+          <button type="submit">Submit to wallet</button>
+        </form>
+      </section>
+
+      <section>
+        <form id="signer_sign" class="toggle">
+          <fieldset>
+            <legend>signer.sign(bytesArray)</legend>
+            <p>
+              Uses the signer sign an array of bytes. Although currently, only the first element
+              will be signed and returned.
+            </p>
+            <label
+              >Sign text:
+              <input name="sign-text" required />
+            </label>
+          </fieldset>
+          <button type="submit">Submit to wallet</button>
+        </form>
+      </section>
+
+      <section>
+        <form id="signer_getAccountBalance" class="toggle">
+          <fieldset>
+            <legend>signer.getAccountBalance()</legend>
+            <p>
+              <i>Uses the signer to call AccountBalanceQuery</i>
+            </p>
+          </fieldset>
+          <button type="submit">Submit to wallet</button>
+        </form>
+      </section>
+
+      <section>
+        <form id="signer_getAccountInfo" class="toggle">
+          <fieldset>
+            <legend>signer.getAccountInfo()</legend>
+            <p>Uses the signer to call AccountInfoQuery</p>
+          </fieldset>
+          <button type="submit">Submit to wallet</button>
+        </form>
+      </section>
+
+      <section>
+        <form id="signer_getAccountRecords" class="toggle">
+          <fieldset>
+            <legend>signer.getAccountRecords()</legend>
+            <p>Uses the signer to call AccountRecordsQuery</p>
+          </fieldset>
+          <button type="submit">Submit to wallet</button>
+        </form>
+      </section>
+
       <hr />
       <h2>Error handling:</h2>
       <section class="toggle">

src/examples/typescript/dapp/main.ts

@@ -41,6 +41,7 @@ import {
   transactionToTransactionBody,
   transactionBodyToBase64String,
   base64StringToSignatureMap,
+  base64StringToUint8Array,
   queryToBase64String,
   ExecuteTransactionParams,
   SignMessageParams,
@@ -50,6 +51,7 @@ import {
   DAppConnector,
   HederaChainId,
   verifyMessageSignature,
+  verifySignerSignature,
 } from '@hashgraph/hedera-wallet-connect'
 
 import { saveState, loadState, getState } from '../shared'
@@ -338,3 +340,59 @@ async function simulateTransactionExpiredError(_: Event) {
 
 document.getElementById('error-transaction-expired')!.onsubmit = (e: SubmitEvent) =>
   showErrorOrSuccess(simulateTransactionExpiredError, e)
+
+async function signer_signAndExecuteTransaction(_: Event) {
+  const transaction = new TransferTransaction()
+    .addHbarTransfer(getState('sign-send-from'), new Hbar(-getState('sign-send-amount')))
+    .addHbarTransfer(getState('sign-send-to'), new Hbar(+getState('sign-send-amount')))
+
+  const signer = dAppConnector!.signers[0]
+  await transaction.freezeWithSigner(signer)
+  return await transaction.executeWithSigner(signer)
+}
+document.getElementById('signer_signAndExecuteTransaction')!.onsubmit = (e: SubmitEvent) =>
+  showErrorOrSuccess(signer_signAndExecuteTransaction, e)
+
+async function signer_signTransaction(_: Event) {
+  const transaction = new TransferTransaction()
+    .addHbarTransfer(getState('sign-send-from'), new Hbar(-getState('sign-send-amount')))
+    .addHbarTransfer(getState('sign-send-to'), new Hbar(+getState('sign-send-amount')))
+
+  const signer = dAppConnector!.signers[0]
+  await transaction.freezeWithSigner(signer)
+  return await signer.signTransaction(transaction)
+}
+document.getElementById('signer_signTransaction')!.onsubmit = (e: SubmitEvent) =>
+  showErrorOrSuccess(signer_signTransaction, e)
+
+async function signer_sign(_: Event) {
+  const text = getState('sign-text')
+  const base64String = btoa(text)
+  const signer = dAppConnector!.signers[0]
+  const sigMaps = await signer.sign([base64StringToUint8Array(base64String)])
+  const verifiedResult = verifySignerSignature(base64String, sigMaps[0], sigMaps[0].publicKey)
+  return { verifiedResult, sigMaps }
+}
+document.getElementById('signer_sign')!.onsubmit = (e: SubmitEvent) =>
+  showErrorOrSuccess(signer_sign, e)
+
+async function signer_getAccountBalance(_: Event) {
+  const signer = dAppConnector!.signers[0]
+  return await signer.getAccountBalance()
+}
+document.getElementById('signer_getAccountBalance')!.onsubmit = (e: SubmitEvent) =>
+  showErrorOrSuccess(signer_getAccountBalance, e)
+
+async function signer_getAccountInfo(_: Event) {
+  const signer = dAppConnector!.signers[0]
+  return await signer.getAccountInfo()
+}
+document.getElementById('signer_getAccountInfo')!.onsubmit = (e: SubmitEvent) =>
+  showErrorOrSuccess(signer_getAccountInfo, e)
+
+async function signer_getAccountRecords(_: Event) {
+  const signer = dAppConnector!.signers[0]
+  return await signer.getAccountRecords()
+}
+document.getElementById('signer_getAccountRecords')!.onsubmit = (e: SubmitEvent) =>
+  showErrorOrSuccess(signer_getAccountRecords, e)

src/examples/typescript/index.html

@@ -62,8 +62,8 @@
   <body>
     <main>
       <!-- need to be on different host / port combinations https://github.com/WalletConnect/walletconnect-monorepo/issues/2975 -->
-      <iframe src=""></iframe>
-      <iframe src=""></iframe>
+      <iframe src="" allow="clipboard-write"></iframe>
+      <iframe src="" allow="clipboard-write"></iframe>
       <div class="overlay">
         <div class="active"></div>
         <div></div>