Merge pull request #49 from claudiucelfilip/key-generation

Generate Wavelet compatible keys

package.json

@@ -19,6 +19,7 @@
         "babel-plugin-styled-components": "^1.10.0",
         "babel-preset-react-app": "^3.1.1",
         "bignumber.js": "^9.0.0",
+        "blakejs": "^1.1.0",
         "case-sensitive-paths-webpack-plugin": "2.1.1",
         "chalk": "1.1.3",
         "codemirror": "^5.44.0",
@@ -96,7 +97,8 @@
         "webpack": "3.8.1",
         "webpack-dev-server": "3.0.0",
         "webpack-manifest-plugin": "1.3.2",
-        "whatwg-fetch": "2.0.3"
+        "whatwg-fetch": "2.0.3",
+        "worker-loader": "^2.0.0"
     },
     "scripts": {
         "start": "node scripts/start.js",

src/Perlin.tsx

@@ -1,6 +1,7 @@
 import { action, computed, observable } from "mobx";
 import * as storage from "./storage";
 import * as nacl from "tweetnacl";
+import { blake2b, blake2bHex } from "blakejs";
 import * as _ from "lodash";
 import { ITransaction, Tag } from "./types/Transaction";
 import { FAUCET_URL } from "./constants";
@@ -10,6 +11,7 @@ import { IAccount } from "./types/Account";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import { Wavelet, Contract, TAG_TRANSFER } from "wavelet-client";
 import JSBI from "jsbi";
+import { consoleTestResultHandler } from "tslint/lib/test";
 // @ts-ignore
 window.useNativeBigIntsIfAvailable = true;
 
@@ -173,14 +175,6 @@ class Perlin {
         window.location.reload();
     }
 
-    public generateNewKeys(): any {
-        const generatedKeys = nacl.sign.keyPair();
-        return {
-            publicKey: Buffer.from(generatedKeys.publicKey).toString("hex"),
-            secretKey: Buffer.from(generatedKeys.secretKey).toString("hex")
-        };
-    }
-
     public prepareTransaction(tag: Tag, payload: Buffer): any {
         const buffer = new SmartBuffer();
         buffer.writeBuffer(new Buffer(8));

src/components/login/LoginContainer.tsx

@@ -6,7 +6,7 @@ import { observer } from "mobx-react-lite";
 import { Perlin, NotificationTypes } from "../../Perlin";
 import { withRouter, RouteComponentProps, Redirect } from "react-router";
 import "../config/config.scss";
-import { Config } from "../config/Config";
+import LoadingSpinner, { Spinner } from "../common/loadingSpinner";
 import usePrivateKey from "./usePrivateKey";
 import {
     LargeInput,
@@ -44,6 +44,25 @@ const Wrapper = styled(Flex)`
         padding: 15px;
         margin: 10px 0;
     }
+
+    ${CardBody} ${Box} {
+        position: relative;
+    }
+
+    ${Spinner} {
+        position: absolute;
+        margin: 0;
+        top: -10px;
+        left: -10px;
+        width: calc(100% + 20px);
+        height: calc(100% + 20px);
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 6px;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 `;
 
 const Row = styled(Flex)`
@@ -71,11 +90,18 @@ const LoginContainer: React.FunctionComponent<RouteComponentProps> = ({
     } = usePrivateKey(errorNotification);
 
     const [alert, setAlert] = useState<string>();
+    const [loading, setLoading] = useState(false);
 
     const currentHost = getCurrentHost();
 
     useEffect(() => {
-        generateNewKeys();
+        onGenerateNewKeys();
+    }, []);
+
+    const onGenerateNewKeys = useCallback(async () => {
+        setLoading(true);
+        await generateNewKeys();
+        setLoading(false);
     }, []);
 
     const login = async () => {
@@ -147,7 +173,7 @@ const LoginContainer: React.FunctionComponent<RouteComponentProps> = ({
                                     <ButtonOutlined
                                         tabIndex={-1}
                                         type="button"
-                                        onClick={generateNewKeys}
+                                        onClick={onGenerateNewKeys}
                                     >
                                         Generate New Key
                                     </ButtonOutlined>
@@ -169,6 +195,7 @@ const LoginContainer: React.FunctionComponent<RouteComponentProps> = ({
                                         Download Key
                                     </ButtonOutlined>
                                 </Row>
+                                {loading && <LoadingSpinner />}
                             </Box>
 
                             <Box mb={4}>

src/components/login/generate-keys-worker.ts

@@ -0,0 +1,45 @@
+// Worker.ts
+import * as nacl from "tweetnacl";
+import { blake2b } from "blakejs";
+
+const ctx: Worker = self as any;
+
+onmessage = evt => {
+    const { type, ...data } = evt.data;
+    switch (type) {
+        case "generateKeys":
+            generateNewKeys(data.c1);
+            break;
+    }
+};
+
+const generateNewKeys = (c1 = 1) => {
+    let generatedKeys;
+    let checksum;
+
+    const prefixLen = (buf: Uint8Array) => {
+        for (let i = 0; i < buf.length; i++) {
+            const b = buf[i];
+            if (b !== 0) {
+                // b.toString(2) removes leading 0s; so we just see how many were removed
+                const leadingZeros = 8 - b.toString(2).length;
+
+                return i * 8 + leadingZeros;
+            }
+        }
+
+        return buf.length * 8 - 1;
+    };
+
+    do {
+        generatedKeys = nacl.sign.keyPair();
+
+        const id = blake2b(generatedKeys.publicKey, undefined, 32);
+        checksum = blake2b(id, undefined, 32);
+    } while (prefixLen(checksum) < c1);
+
+    ctx.postMessage({
+        type: "newKeys",
+        data: generatedKeys
+    });
+};

src/components/login/usePrivateKey.tsx

@@ -1,7 +1,24 @@
 import React, { useState, useCallback } from "react";
 import { Perlin, NotificationTypes } from "../../Perlin";
+import Worker from "worker-loader!./generate-keys-worker";
 
-const perlin = Perlin.getInstance();
+const worker = new Worker();
+
+const workerGenerateKey = (c1: number) => {
+    return new Promise(resolve => {
+        worker.onmessage = evt => {
+            const { type, data } = evt.data;
+
+            if (type === "newKeys") {
+                resolve(data as any);
+            }
+        };
+        worker.postMessage({
+            type: "generateKeys",
+            c1
+        });
+    });
+};
 
 const usePrivateKey = (errorNotification: any, defaultKey: string = "") => {
     const [privateKey, setPrivateKey] = useState<string>(defaultKey);
@@ -32,8 +49,10 @@ const usePrivateKey = (errorNotification: any, defaultKey: string = "") => {
         }
     }, []);
 
-    const generateNewKeys = () => {
-        setPrivateKey(perlin.generateNewKeys().secretKey);
+    const generateNewKeys = async () => {
+        const generatedKeys: any = await workerGenerateKey(1);
+        const secretKey = Buffer.from(generatedKeys.secretKey).toString("hex");
+        setPrivateKey(secretKey);
     };
 
     const handleChange = useCallback((e: any) => {

src/components/settings/SettingsContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react";
 import { Box, Flex } from "@rebass/grid";
 import styled from "styled-components";
-import {} from "../common/core";
+import LoadingSpinner, { Spinner } from "../common/loadingSpinner";
 import { Config } from "../config/Config";
 import {
     getCurrentHost,
@@ -31,6 +31,26 @@ const Title = styled.p`
     font-weight: 400;
 `;
 
+const Wrapper = styled.div`
+    ${CardBody} {
+        position: relative;
+    }
+
+    ${Spinner} {
+        position: absolute;
+        margin: 0;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+`;
+
 const errorNotification = (message: string) => {
     perlin.notify({
         type: NotificationTypes.Danger,
@@ -41,6 +61,7 @@ const errorNotification = (message: string) => {
 const SettingsContainer = () => {
     const currentHost = getCurrentHost();
     const storedKey = getSecretKey();
+    const [loading, setLoading] = useState(false);
     const {
         generateNewKeys,
         privateKey,
@@ -55,8 +76,14 @@ const SettingsContainer = () => {
         },
         [privateKey]
     );
+    const onGenerateNewKeys = useCallback(async () => {
+        setLoading(true);
+        await generateNewKeys();
+        setLoading(false);
+    }, []);
+
     return (
-        <>
+        <Wrapper>
             <Title>Settings</Title>
 
             <Box width={2 / 3} mb={4}>
@@ -72,7 +99,7 @@ const SettingsContainer = () => {
                             confirmationMessage="Are you sure you want to change your Private Key?"
                         >
                             <Flex mt={3}>
-                                <ButtonOutlined onClick={generateNewKeys}>
+                                <ButtonOutlined onClick={onGenerateNewKeys}>
                                     Generate New Key
                                 </ButtonOutlined>
                                 <FileInputWrapper>
@@ -86,6 +113,7 @@ const SettingsContainer = () => {
                                     Download Key
                                 </ButtonOutlined>
                             </Flex>
+                            {loading && <LoadingSpinner />}
                         </Config>
                     </CardBody>
                 </Card>
@@ -105,7 +133,7 @@ const SettingsContainer = () => {
                     </CardBody>
                 </Card>
             </Box>
-        </>
+        </Wrapper>
     );
 };
 

src/types/blakejs.d.ts

@@ -0,0 +1 @@
+declare module "blakejs";

src/types/worker.d.ts

@@ -0,0 +1,7 @@
+declare module "worker-loader!*" {
+    class WebpackWorker extends Worker {
+        constructor();
+    }
+
+    export default WebpackWorker;
+}

yarn.lock

@@ -2022,6 +2022,11 @@ bit-twiddle@^1.0.2:
   resolved "https://registry.yarnpkg.com/bit-twiddle/-/bit-twiddle-1.0.2.tgz#0c6c1fabe2b23d17173d9a61b7b7093eb9e1769e"
   integrity sha1-DGwfq+KyPRcXPZpht7cJPrnhdp4=
 
+blakejs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/blakejs/-/blakejs-1.1.0.tgz#69df92ef953aa88ca51a32df6ab1c54a155fc7a5"
+  integrity sha1-ad+S75U6qIylGjLfarHFShVfx6U=
+
 block-stream@*:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -6774,7 +6779,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -9584,7 +9589,7 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.5:
+schema-utils@^0.4.0, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
   integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
@@ -11514,6 +11519,14 @@ worker-farm@^1.5.2:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"