Typescript SDK support for zk-nyms

Author: mmsinclair

.gitignore

@@ -48,4 +48,6 @@ foxyfox.env
 
 .next
 ppa-private-key.b64
-ppa-private-key.asc
+ppa-private-key.asc
+
+yarn-error.log

Cargo.lock

@@ -125,7 +125,8 @@ members = [
     # "wasm/full-nym-wasm",  # If we uncomment this again, remember to also uncomment the profile settings below
     "wasm/mix-fetch",
     "wasm/node-tester",
-    "wasm/zknym-lib",
+    "wasm/zk-nym-lib",
+    "wasm/zk-nym-faucet-lib",
     "tools/internal/testnet-manager",
     "tools/internal/testnet-manager/dkg-bypass-contract",
 ]

Cargo.toml

@@ -104,7 +104,8 @@ sdk-wasm-build:
 	$(MAKE) -C wasm/client
 	$(MAKE) -C wasm/node-tester
 	$(MAKE) -C wasm/mix-fetch
-	$(MAKE) -C wasm/zknym-lib
+	$(MAKE) -C wasm/zk-nym-lib
+	$(MAKE) -C wasm/zk-nym-faucet-lib
 	#$(MAKE) -C wasm/full-nym-wasm
 
 # run this from npm/yarn to ensure tools are in the path, e.g. yarn build:sdk from root of repo

Makefile

@@ -50,7 +50,7 @@ pub enum NyxdError {
     #[error("{0} is not a valid tx hash")]
     InvalidTxHash(String),
 
-    #[error("Tendermint RPC request failed - {0}")]
+    #[error("Tendermint RPC request failed: {0}")]
     TendermintErrorRpc(#[from] TendermintRpcError),
 
     #[error("tendermint library failure: {0}")]
@@ -62,22 +62,22 @@ pub enum NyxdError {
     #[error("Failed when attempting to deserialize data ({0})")]
     DeserializationError(String),
 
-    #[error("Failed when attempting to encode our protobuf data - {0}")]
+    #[error("Failed when attempting to encode our protobuf data: {0}")]
     ProtobufEncodingError(#[from] prost::EncodeError),
 
-    #[error("Failed to decode our protobuf data - {0}")]
+    #[error("Failed to decode our protobuf data: {0}")]
     ProtobufDecodingError(#[from] prost::DecodeError),
 
-    #[error("Account {0} does not exist on the chain")]
+    #[error("Account '{0}' does not exist on the chain")]
     NonExistentAccountError(AccountId),
 
-    #[error("Failed on json serialization/deserialization - {0}")]
+    #[error("Failed on json serialization/deserialization: {0}")]
     SerdeJsonError(#[from] serde_json::Error),
 
-    #[error("Account {0} is not a valid account address")]
+    #[error("Account '{0}' is not a valid account address")]
     MalformedAccountAddress(String),
 
-    #[error("Account {0} has an invalid associated public key")]
+    #[error("Account '{0}' has an invalid associated public key")]
     InvalidPublicKey(AccountId),
 
     #[error("Queried contract (code_id: {0}) did not have any code information attached")]
@@ -92,7 +92,7 @@ pub enum NyxdError {
     #[error("Block has an invalid height (either negative or larger than i64::MAX")]
     InvalidHeight,
 
-    #[error("Failed to compress provided wasm code - {0}")]
+    #[error("Failed to compress provided wasm code: {0}")]
     WasmCompressionError(io::Error),
 
     #[error("Logs returned from the validator were malformed")]

common/client-libs/validator-client/src/nyxd/error.rs

@@ -109,7 +109,8 @@ trait TendermintRpcErrorMap {
 
 impl TendermintRpcErrorMap for reqwest::Error {
     fn into_rpc_err(self) -> Error {
-        todo!()
+        // that's not the best error converion, but it's better than a panic
+        Error::client_internal(self.to_string())
     }
 }
 

common/client-libs/validator-client/src/rpc/reqwest.rs

@@ -14,10 +14,12 @@ schemars = { workspace = true, features = ["preserve_order"], optional = true }
 serde = { workspace = true, features = ["derive"], optional = true }
 url = { workspace = true, optional = true }
 
-# please be extremely careful when adding new dependencies because this crate is imported by the ecash contract,
-# so if anything new is added, consider feature-locking it and then just adding it to default feature
+# 'wasm-serde-types' feature
+tsify = { workspace = true, features = ["js"], optional = true }
+wasm-bindgen = { workspace = true, optional = true }
 
 [features]
+wasm-serde-types = ["tsify", "wasm-bindgen"]
 default = ["env", "network"]
 env = ["dotenvy", "log"]
 network = ["schemars", "serde", "url"]

common/network-defaults/Cargo.toml

@@ -44,4 +44,4 @@ wasm-storage = { path = "../storage" }
 console_error_panic_hook = { workspace = true, optional = true }
 
 [features]
-default = ["console_error_panic_hook"]
+default = ["wasm-utils/console_error_panic_hook"]

common/wasm/client-core/Cargo.toml

@@ -17,6 +17,10 @@ gloo-utils = { workspace = true }
 gloo-net = { workspace = true, features = ["websocket"], optional = true }
 #gloo-net = { path = "../../../../gloo/crates/net", features = ["websocket"], optional = true }
 
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
 console_error_panic_hook = { workspace = true, optional = true }
 
 # we don't want entire tokio-tungstenite, tungstenite itself is just fine - we just want message and error enums

common/wasm/utils/Cargo.toml

@@ -54,4 +54,4 @@
     "node-gyp": "^9.3.1",
     "tslog": "3.3.3"
   }
-}
+}

package.json

@@ -0,0 +1,28 @@
+# Nym credential generation Usage Example
+
+This is a simple project to show you how to use nym credential generation.
+
+```ts
+import { mixFetch } from '@nymproject/mix-fetch';
+
+// HTTP GET
+const response = await mixFetch('https://nymtech.net');
+const html = await response.text();
+
+// HTTP POST
+const apiResponse = await mixFetch('https://api.example.com', { 
+  method: 'POST', 
+  body: JSON.stringify({ foo: 'bar' }), 
+  headers: { [`Content-Type`]: 'application/json', Authorization: `Bearer ${AUTH_TOKEN}` }
+});
+```
+
+## Running the example
+
+```
+npm install
+npm run start
+```
+
+Open a browser at http://localhost:1234 and as the example loads, a connection will be made to the Nym Mixnet
+and a text file and image will be downloaded and displayed in the browser.

sdk/typescript/examples/zk-nyms/browser/README.md

@@ -0,0 +1,16 @@
+{
+  "name": "@nymproject/nym-sdk-zk-nyms-example-parcel",
+  "version": "1.3.0-rc.0",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "parcel build --no-cache --no-content-hash",
+    "serve": "serve dist",
+    "start": "parcel --no-cache"
+  },
+  "dependencies": {
+    "@nymproject/sdk": "1.3.0-rc.0",
+    "parcel": "^2.9.3"
+  },
+  "private": false,
+  "source": "src/index.html"
+}

sdk/typescript/examples/zk-nyms/browser/package.json

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Internal Credential Tester</title>
+  <script type="module" src="./index.ts"></script>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      padding: 2rem;
+    }
+  </style>
+</head>
+
+<body>
+  <div>
+    <h1>Credential</h1>
+    <input id="mnemonic" placeholder="mnemonic"></input>
+    <input id="coin" placeholder="amount" value="1unym"></input>
+    <button id="button">Get Credential</button>
+    <div id="credential"></div>
+  </div>
+</body>
+
+</html>

sdk/typescript/examples/zk-nyms/browser/src/index.html

@@ -0,0 +1,38 @@
+import { createNymCredentialsClient } from '@nymproject/sdk';
+import { appendOutput } from './utils';
+
+async function main() {
+  const mnemonic = document.getElementById('mnemonic') as HTMLInputElement;
+  if (process.env.MNEMONIC) {
+    mnemonic.defaultValue = process.env.MNEMONIC;
+  }
+  const coin = document.getElementById('coin') as HTMLInputElement;
+  const button = document.getElementById('button') as HTMLButtonElement;
+
+  const client = await createNymCredentialsClient();
+
+  const generateCredential = async () => {
+    const amount = coin.value;
+    const mnemonicString = mnemonic.value;
+    console.log({ amount, mnemonicString });
+    try {
+      appendOutput('About to get a credential... 🥁');
+      const credential = await client.comlink.acquireCredential(amount, mnemonicString, { useSandbox: true }); // options: {useSandbox?: boolean; networkDetails?: {}}
+      appendOutput('Success! 🎉');
+      appendOutput(JSON.stringify(credential, null, 2));
+    } catch (e) {
+      console.error('Failed to get credential', e);
+      appendOutput((e as any).message);
+    }
+  };
+
+  if (button) {
+    button.addEventListener('click', () => generateCredential());
+  }
+}
+
+// wait for the html to load
+window.addEventListener('DOMContentLoaded', () => {
+  // let's do this!
+  main();
+});

sdk/typescript/examples/zk-nyms/browser/src/index.ts

@@ -0,0 +1,6 @@
+export function appendOutput(value: string) {
+  const el = document.getElementById('credential') as HTMLPreElement;
+  const text = document.createTextNode(`${value}\n`);
+  el.appendChild(text);
+}
+

sdk/typescript/examples/zk-nyms/browser/src/utils.ts

@@ -1,2 +1,4 @@
 src/mixnet/wasm/worker.js
+src/zk-nym/worker.js
+src/zk-nym-faucet/worker.js
 docs/

sdk/typescript/packages/sdk/.gitignore

@@ -13,7 +13,8 @@
   "scripts": {
     "build": "scripts/build-prod.sh",
     "build:dev": "scripts/build.sh",
-    "build:dev:esm": "scripts/build-dev-esm.sh",
+    "build:dev:esm": "SDK_DEV_MODE=true scripts/build-dev-esm.sh",
+    "build:dev:esm:no-inline": "scripts/build-dev-esm.sh",
     "build:worker": "rollup -c rollup-worker.config.mjs",
     "clean": "rimraf dist",
     "docs:dev": "run-p docs:watch docs:serve ",
@@ -32,6 +33,8 @@
   },
   "dependencies": {
     "@nymproject/nym-client-wasm": ">=1.2.4-rc.2 || ^1",
+    "@nymproject/zk-nym-faucet-lib": ">=1.3.0-rc.0 || ^1",
+    "@nymproject/zk-nym-lib": ">=1.3.0-rc.0 || ^1",
     "comlink": "^4.3.1"
   },
   "devDependencies": {

sdk/typescript/packages/sdk/package.json

@@ -2,6 +2,6 @@ import { getConfig } from './rollup/esm.mjs';
 
 export default {
   ...getConfig({
-    inline: false,
+    inline: process.env.SDK_DEV_MODE === 'true',
   }),
 };

sdk/typescript/packages/sdk/rollup-esm.config.mjs

@@ -0,0 +1,8 @@
+import { getConfig } from './rollup/worker.mjs';
+
+export default {
+  ...getConfig('src/mixnet/wasm/worker.ts', 'nym_client_wasm_bg.wasm', {
+    inlineWasm: true,
+    format: 'cjs',
+  }),
+};

sdk/typescript/packages/sdk/rollup-worker-full-fat.config.mjs

@@ -1,26 +1,7 @@
-import typescript from '@rollup/plugin-typescript';
-import resolve from '@rollup/plugin-node-resolve';
-import { wasm } from '@rollup/plugin-wasm';
-import replace from '@rollup/plugin-replace';
-
-const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+import { getConfig } from './rollup/worker.mjs';
 
 export default {
-  input: 'src/mixnet/wasm/worker.ts',
-  output: {
-    dir: 'dist',
-    format: 'cjs',
-  },
-  plugins: [
-    resolve({ extensions }),
-    // this is some nasty monkey patching that removes the WASM URL (because it is handled by the `wasm` plugin)
-    replace({
-      values: { "input = new URL('nym_client_wasm_bg.wasm', import.meta.url);": 'input = undefined;' },
-      delimiters: ['', ''],
-      preventAssignment: true,
-    }),
-    // force the wasm plugin to embed the wasm bundle - this means no downstream bundlers have to worry about handling it
-    wasm({ maxFileSize: 10000000, targetEnv: 'browser' }),
-    typescript({ compilerOptions: { declaration: false, target: 'es5' } }),
-  ],
+  ...getConfig('src/mixnet/wasm/worker.ts', 'nym_client_wasm_bg.wasm', {
+    inlineWasm: process.env.SDK_DEV_MODE === 'true',
+  }),
 };

sdk/typescript/packages/sdk/rollup-worker.config.mjs

@@ -0,0 +1,7 @@
+import { getConfig } from './rollup/worker.mjs';
+
+export default {
+  ...getConfig('src/zk-nym-faucet/worker.ts', 'zk_nym_faucet_lib_bg.wasm'),
+  inlineWasm: true,
+  format: 'cjs',
+};

sdk/typescript/packages/sdk/rollup-zk-nym-faucet-worker-full-fat.config.mjs

@@ -0,0 +1,7 @@
+import { getConfig } from './rollup/worker.mjs';
+
+export default {
+  ...getConfig('src/zk-nym-faucet/worker.ts', 'zk_nym_faucet_lib_bg.wasm', {
+    inlineWasm: process.env.SDK_DEV_MODE === 'true',
+  }),
+};

sdk/typescript/packages/sdk/rollup-zk-nym-faucet-worker.config.mjs

@@ -0,0 +1,7 @@
+import { getConfig } from './rollup/worker.mjs';
+
+export default {
+  ...getConfig('src/zk-nym/worker.ts', 'nym_credential_client_wasm_bg.wasm'),
+  inlineWasm: true,
+  format: 'cjs',
+};