Add signature provider example based on our extensions

6958c713 · Mateusz Tyszczak · Bartek Wrona · 27d63828 · 6958c713 · 6958c713
Commit 6958c713 authored 1 month ago by Mateusz Tyszczak Committed by Bartek Wrona 1 month ago
--- a/examples/ts/signature-extension/.npmrc
+++ b/examples/ts/signature-extension/.npmrc
+# https://gitlab.syncad.com/hive group specification, offering aggregated package view: https://gitlab.syncad.com/groups/hive/-/packages
+@hiveio:registry=https://gitlab.syncad.com/api/v4/groups/136/-/packages/npm/
--- a/examples/ts/signature-extension/.parcelrc
+++ b/examples/ts/signature-extension/.parcelrc
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+  }
+}
\ No newline at end of file
--- a/examples/ts/signature-extension/README.md
+++ b/examples/ts/signature-extension/README.md
+# signature-extension
+> [!WARNING]
+> This example will not be ran automatically on the CI as it requires direct user action, e.g. OAuth 3rd party app Hive blockchain user authorization
+This example presents different ways of implementing 3rd party apps authorization using wax
+To test this example:
+1. Install keychain extension
+2. Import `guest4test` posting key to your wallet
+3. Install dependencies: `pnpm install`
+4. Run parcel: `pnpm test`
+5. Goto [http://localhost:1234](http://localhost:1234), sign the transaction and check logs
--- a/examples/ts/signature-extension/common-data.ts
+++ b/examples/ts/signature-extension/common-data.ts
+export const accountName = "guest4test";
+export const publicKey = "STM8XQJiRBND7q6Cu1kxyRgLVLU3y1B5iGFU5VAqSpaAK38YFGZP8";
+export const privateKey = process.env.PRIVATE_KEY as string;
+export const voteData = {
+  voter: accountName,
+  author: "c0ff33a",
+  permlink: "ewxhnjbj",
+  weight: 2200
+};
--- a/examples/ts/signature-extension/package.json
+++ b/examples/ts/signature-extension/package.json
+{
+  "name": "signature-extension",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "parcel test/index.html"
+  },
+  "dependencies": {
+    "@hiveio/wax": "file:../../../ts",
+    "@hiveio/wax-signers-keychain": "file:../../../ts/packages/signers-keychain",
+    "@hiveio/wax-signers-peakvault": "file:../../../ts/packages/signers-peakvault"
+  },
+  "devDependencies": {
+    "@parcel/config-default": "^2.13.3",
+    "@parcel/transformer-typescript-tsc": "^2.13.3",
+    "buffer": "^5.5.0||^6.0.0",
+    "parcel": "^2.13.3",
+    "process": "^0.11.10"
+  }
+}
--- a/examples/ts/signature-extension/test/index.html
+++ b/examples/ts/signature-extension/test/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <h1>Signing example</h1>
+  <h3>Remember to unlock Peak Vault before using it</h3>
+  <button onclick="useKeychain()">Use Keychain</button>
+  <button onclick="usePeakVault()">Use Peak Vault</button>
+  <pre><code id="tx-result"></code></pre>
+  <script type="module">
+    import { createHiveChain } from "@hiveio/wax";
+    import { accountName, publicKey, voteData } from "../common-data";
+    import KeychainProvider from "@hiveio/wax-signers-keychain";
+    import PeakVaultProvider from "@hiveio/wax-signers-peakvault";
+    const txResult = document.getElementById('tx-result');
+    (async()=> {
+      const keychainProvider = KeychainProvider.for(accountName, "posting");
+      const peakVaultProvider = PeakVaultProvider.for(accountName, "posting");
+      const chain = await createHiveChain();
+      const createTransaction = async () => {
+        txResult.textContent = 'Signing...';
+        const tx = await chain.createTransaction();
+        tx.pushOperation({
+          vote: voteData
+        });
+        console.log(tx.transaction);
+        console.log(`Sig digest: ${tx.sigDigest}`);
+        return tx;
+      };
+      const sign = async (provider) => {
+        try {
+          const tx = await createTransaction();
+          await tx.sign(provider);
+          const apiJson = tx.toApiJson();
+          console.log('Transaction:', apiJson);
+          console.log(`Keys match: ${tx.signatureKeys[0] === publicKey}`);
+          txResult.textContent = JSON.stringify(apiJson, null, 2);
+        } catch (error) {
+          console.error(error);
+          txResult.textContent = `Error: ${error.message}`;
+        }
+      };
+      window.useKeychain = () => void sign(keychainProvider);
+      window.usePeakVault = () => void sign(peakVaultProvider);
+    })();
+  </script>
+</body>
+</html>
--- a/examples/ts/signature-extension/tsconfig.json
+++ b/examples/ts/signature-extension/tsconfig.json
+{
+  "extends": "../../../ts/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "outDir": "dist"
+  },
+  "include": [
+    "."
+  ]
+}
\ No newline at end of file