Merge pull request #82 from bitcoinjs/fix/ReactApp

Fix React app AND remove NodeJS dependencies

examples/random-in-node/bin.js

@@ -1,8 +1,8 @@
+import { toHex as _toHex } from "uint8array-tools";
 import * as secp256k1 from "../../lib/index.js";
 import { generate } from "./index.js";
 
-const toHex = (v) =>
-  v instanceof Uint8Array ? Buffer.from(v).toString("hex") : v;
+const toHex = (v) => (v instanceof Uint8Array ? _toHex(v) : v);
 
 const JSONstring = (data, spacing) =>
   JSON.stringify(data, (_, val) => toHex(val), spacing);

examples/random-in-node/index.js

@@ -1,6 +1,6 @@
-import { randomBytes } from "crypto";
 import { compare } from "uint8array-tools";
 import * as secp256k1 from "../../lib/index.js";
+import { randomBytes } from "./random.js";
 
 const eq = (name, a, b) => {
   const equal = compare(a, b) === 0;
@@ -130,11 +130,11 @@ function isValidData(data) {
 export function generate() {
   let retryCount = 30;
   for (;;) {
-    const seckey = new Uint8Array(randomBytes(32));
-    const seckey2 = new Uint8Array(randomBytes(32));
-    const hash = new Uint8Array(randomBytes(32));
-    const tweak = new Uint8Array(randomBytes(32));
-    const entropy = new Uint8Array(randomBytes(32));
+    const seckey = randomBytes(32);
+    const seckey2 = randomBytes(32);
+    const hash = randomBytes(32);
+    const tweak = randomBytes(32);
+    const entropy = randomBytes(32);
 
     const x_only_pubkey = secp256k1.xOnlyPointFromScalar(seckey);
     const x_only_pubkey2 = secp256k1.xOnlyPointFromScalar(seckey2);

examples/random-in-node/package.json

@@ -4,7 +4,13 @@
   "private": true,
   "type": "module",
   "main": "./index.js",
+  "browser": {
+    "./random.js": "./random_browser.js"
+  },
   "scripts": {
     "start": "node bin.js"
+  },
+  "dependencies": {
+    "uint8array-tools": "^0.0.7"
   }
 }

examples/random-in-node/random.js

@@ -0,0 +1,5 @@
+import { randomBytes as rand } from "crypto";
+
+export function randomBytes(byteCount) {
+  return Uint8Array.from(rand(byteCount));
+}

examples/random-in-node/random_browser.js

@@ -0,0 +1,5 @@
+export function randomBytes(byteCount) {
+  const res = new Uint8Array(byteCount);
+  window.crypto.getRandomValues(res);
+  return res;
+}

examples/react-app/index.js

@@ -1,4 +1,3 @@
-import { Buffer } from "buffer";
 import ReactDOM from "react-dom";
 import React, { Component } from "react";
 import {
@@ -13,16 +12,17 @@ import {
   withStyles,
 } from "@material-ui/core";
 import { Close as CloseIcon, Check as CheckIcon } from "@material-ui/icons";
+import { fromHex, toHex } from "uint8array-tools";
 
 import * as _secp256k1 from "../../lib/index.js";
 import { generate } from "../random-in-node/index.js";
 
-const EMPTY_BUFFER = Buffer.allocUnsafe(0);
+const EMPTY_BUFFER = new Uint8Array(0);
 function toUint8Array(value) {
   if (typeof value !== "string") return value;
   if (value.match(/^\d{1,20}$/)) return parseInt(value);
-  const data = Buffer.from(value, "hex");
-  return data.toString("hex") === value ? data : EMPTY_BUFFER;
+  const data = fromHex(value);
+  return toHex(data) === value ? data : EMPTY_BUFFER;
 }
 
 const validate = {
@@ -56,7 +56,7 @@ const secp256k1 = {
     try {
       let result = _secp256k1[method](...args.map((v) => toUint8Array(v)));
       if (result instanceof Uint8Array) {
-        result = Buffer.from(result).toString("hex");
+        result = toHex(result);
       }
       return result;
     } catch (_err) {
@@ -160,7 +160,7 @@ const App = withStyles(useStyles)(
       const data = generate();
       for (const key of Object.keys(data)) {
         if (data[key] instanceof Uint8Array) {
-          data[key] = Buffer.from(data[key]).toString("hex");
+          data[key] = toHex(data[key]);
         } else if (typeof data[key] === "number") {
           data[key] = data[key].toString(10);
         }
@@ -924,7 +924,7 @@ const ApiXOnlyPointAddTweak = withStyles(useStyles)(
             ? undefined
             : secp256k1.xOnlyPointAddTweak(x_only_pubkey, x_only_pubkey2);
         this.setState({
-          result: Buffer.from(output.xOnlyPubkey).toString("hex"),
+          result: toHex(output.xOnlyPubkey),
         });
       }
     }
@@ -978,10 +978,10 @@ const ApiXOnlyPointAddTweakCheck = withStyles(useStyles)(
       this.state = {
         x_only_pubkey: "",
         x_only_pubkey_valid: undefined,
-        x_only_add_tweak: "",
-        x_only_add_tweak_valid: undefined,
         x_only_pubkey2: "",
         x_only_pubkey2_valid: undefined,
+        x_only_add_tweak: "",
+        x_only_add_tweak_valid: undefined,
         x_only_add_parity: "",
         x_only_add_parity_valid: undefined,
         result: undefined,
@@ -1019,34 +1019,34 @@ const ApiXOnlyPointAddTweakCheck = withStyles(useStyles)(
           x_only_pubkey === ""
             ? undefined
             : secp256k1.isXOnlyPoint(x_only_pubkey);
-        const x_only_add_tweak_valid =
-          x_only_add_tweak === ""
-            ? undefined
-            : secp256k1.isXOnlyPoint(x_only_add_tweak);
         const x_only_pubkey2_valid =
           x_only_pubkey2 === ""
             ? undefined
             : secp256k1.isXOnlyPoint(x_only_pubkey2);
+        const x_only_add_tweak_valid =
+          x_only_add_tweak === ""
+            ? undefined
+            : secp256k1.isXOnlyPoint(x_only_add_tweak);
         const x_only_add_parity_valid =
           x_only_add_parity === ""
             ? undefined
             : validate.isParity(parseInt(x_only_add_parity));
         const result =
           x_only_pubkey_valid === "" &&
-          x_only_add_tweak_valid === "" &&
           x_only_pubkey2_valid === "" &&
+          x_only_add_tweak_valid === "" &&
           x_only_add_parity_valid === ""
             ? undefined
             : secp256k1.xOnlyPointAddTweakCheck(
                 x_only_pubkey,
-                x_only_add_tweak,
                 x_only_pubkey2,
+                x_only_add_tweak,
                 x_only_add_parity
               );
         this.setState({
           x_only_pubkey_valid,
-          x_only_add_tweak_valid,
           x_only_pubkey2_valid,
+          x_only_add_tweak_valid,
           x_only_add_parity_valid,
           result,
         });
@@ -1057,7 +1057,7 @@ const ApiXOnlyPointAddTweakCheck = withStyles(useStyles)(
       return (
         <>
           <Typography variant="h6">
-            xOnlyPointAddTweakCheck(p1: Uint8Array, p2: Uint8Array, tweak:
+            xOnlyPointAddTweakCheck(p1: Uint8Array, tweak: Uint8Array, p2:
             Uint8Array, parity: 1 | 0) =&gt; boolean
           </Typography>
           <TextField
@@ -1073,26 +1073,26 @@ const ApiXOnlyPointAddTweakCheck = withStyles(useStyles)(
             )}
           />
           <TextField
-            label="Tweaked Key as HEX string"
-            onChange={createInputChange(this, "x_only_add_tweak")}
-            value={this.state.x_only_add_tweak}
+            label="Tweak Key as HEX string"
+            onChange={createInputChange(this, "x_only_pubkey2")}
+            value={this.state.x_only_pubkey2}
             fullWidth
             margin="normal"
             variant="outlined"
             InputProps={getInputProps(
-              this.state.x_only_add_tweak_valid,
+              this.state.x_only_pubkey2_valid,
               this.props.classes
             )}
           />
           <TextField
-            label="Tweak Key as HEX string"
-            onChange={createInputChange(this, "x_only_pubkey2")}
-            value={this.state.x_only_pubkey2}
+            label="Tweaked Key as HEX string"
+            onChange={createInputChange(this, "x_only_add_tweak")}
+            value={this.state.x_only_add_tweak}
             fullWidth
             margin="normal"
             variant="outlined"
             InputProps={getInputProps(
-              this.state.x_only_pubkey2_valid,
+              this.state.x_only_add_tweak_valid,
               this.props.classes
             )}
           />
@@ -1615,7 +1615,7 @@ const ApiSignRecoverable = withStyles(useStyles)(
           hash === "" && seckey === "" && entropy === ""
             ? undefined
             : secp256k1.signRecoverable(hash, seckey, entropy);
-        const result = Buffer.from(sig?.signature).toString("hex");
+        const result = toHex(sig?.signature);
         const resultRecId = sig?.recoveryId;
         this.setState({
           hash_valid,

examples/react-app/package.json

@@ -19,6 +19,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "stream-browserify": "^3.0.0",
+    "uint8array-tools": "^0.0.7",
     "webpack": "^5.24.3",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^4.3.1"

examples/react-app/webpack.config.js

@@ -1,9 +1,6 @@
-import { createRequire } from "module";
 import { URL } from "url";
 import webpack from "webpack";
 
-const require = createRequire(import.meta.url);
-
 export default {
   mode: process.env.NODE_ENV || "development",
   entry: "./index.js",
@@ -36,12 +33,4 @@ export default {
       process: "process/browser.js",
     }),
   ],
-  resolve: {
-    fallback: {
-      buffer: require.resolve("buffer"),
-      crypto: require.resolve("crypto-browserify"),
-      process: require.resolve("process/browser"),
-      stream: require.resolve("stream-browserify"),
-    },
-  },
 };