decrypt utils are added to save encrypted spending password and data

Author: dmernies-iohk

examples/wallet/app/Routes.js

@@ -10,6 +10,7 @@ import ChooseRestoreOrImport from './containers/ChooseRestoreOrImport';
 import Delegate from './pages/Delegate';
 import Index from './containers/Index';
 import InputKeys from './containers/InputKeys';
+import CreateSpendingPassword from './containers/CreateSpendingPassword';
 
 export default () => (
   <App>
@@ -23,6 +24,10 @@ export default () => (
         path={routes.CHOOSE_RESTORE_OR_IMPORT}
         component={ChooseRestoreOrImport}
       />
+      <Route
+        path={routes.CREATE_SPENDING_PASSWORD}
+        component={CreateSpendingPassword}
+      />
       <Route path={routes.INDEX} component={Index} />
     </Switch>
   </App>

examples/wallet/app/actions/router.js

@@ -5,11 +5,16 @@ import type { Address } from '../models';
 import routes from '../constants/routes';
 import { setAccountFromPrivateKey } from './account';
 
-import { readAccountKeysFromLocalStorage } from '../utils/storage';
+import {
+  readAccountKeysFromLocalStorage,
+  isSpedingPasswordCreated
+} from '../utils/storage';
 
 // eslint-disable-next-line import/prefer-default-export
 export const redirectToFirstAppPage = () => {
   return (dispatch: Dispatch, getState: GetState) => {
+    if (!isSpedingPasswordCreated())
+      return dispatch(push(routes.CREATE_SPENDING_PASSWORD));
     const accountKeys = readAccountKeysFromLocalStorage();
     if (accountKeys !== undefined) {
       return dispatch(setAccountFromPrivateKey(accountKeys.privateKey));

examples/wallet/app/constants/routes.json

@@ -5,5 +5,6 @@
   "INPUT_KEYS": "/input_keys",
   "SEND": "/send",
   "STAKING": "/staking",
-  "SETTINGS": "/settings"
+  "SETTINGS": "/settings",
+  "CREATE_SPENDING_PASSWORD": "/create_spending_password"
 }

examples/wallet/app/containers/CreateSpendingPassword.js

@@ -0,0 +1,14 @@
+// @flow
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import CreateSpendingPassword from '../pages/CreateSpendingPassword';
+import { setAccount, setAccountFromMnemonic } from '../actions/account';
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ setAccount, setAccountFromMnemonic }, dispatch);
+}
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(CreateSpendingPassword);

examples/wallet/app/pages/CreateSpendingPassword.js

@@ -0,0 +1,70 @@
+// @flow
+import React, { useState } from 'react';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import typeof { setAccountFromMnemonic as SetAccountFromMnemonic } from '../actions/account';
+import { isValidMnemonic } from '../utils/mnemonic';
+
+type Props = {
+  setAccountFromMnemonic: SetAccountFromMnemonic
+};
+
+// FIXME: this has no error handling, neither while parsing the address
+// nor when fetching the balance.
+export default ({ setAccountFromMnemonic }: Props) => {
+  const handleSubmitCreateSpending = function handleSubmitCreateSpending(
+    event
+  ) {
+    event.preventDefault();
+    if (isValidMnemonic(newMnemonicPhrase)) {
+      return Promise.all([
+        setAccountFromMnemonic(newMnemonicPhrase, newMnemonicPassword)
+      ]);
+    }
+    setIsMnemonicValid(false);
+  };
+
+  const [isMnemonicValid, setIsMnemonicValid] = useState(true);
+
+  const [newMnemonicPhrase, setNewMnemonicPhrase] = useState('');
+
+  const [newMnemonicPassword, setNewMnemonicPassword] = useState('');
+
+  return (
+    <Container>
+      <Form onSubmit={handleSubmitCreateSpending} className="mt-5">
+        <Form.Group>
+          <Form.Label>Create your new wallet password:</Form.Label>
+          <Form.Control
+            required
+            type="password"
+            id="mnemonicPhrase"
+            name="mnemonicPhrase"
+            placeholder="New password (min 8 chars)"
+            value={newMnemonicPhrase}
+            isInvalid={!isMnemonicValid}
+            onChange={event => setNewMnemonicPhrase(event.target.value)}
+          />
+          <Form.Label className="text-danger" hidden={isMnemonicValid}>
+            <code>You should not share your password with others.</code>
+          </Form.Label>
+          <Form.Control
+            type="password"
+            name="mnemonicPassword"
+            placeholder="Confirm password"
+            value={newMnemonicPassword}
+            onChange={event => setNewMnemonicPassword(event.target.value)}
+            className="mt-3"
+          />
+        </Form.Group>
+        <Row className="justify-content-center">
+          <Button variant="primary" type="submit">
+            Create
+          </Button>
+        </Row>
+      </Form>
+    </Container>
+  );
+};

examples/wallet/app/utils/decrypt.js

@@ -0,0 +1,43 @@
+import aesjs from 'aes-js';
+import blakejs from 'blakejs';
+
+const blake2b = data => blakejs.blake2b(data, null, 32);
+const blake2bHex = data => blakejs.blake2bHex(data, null, 32);
+const SECRET = 'wallet_demo#';
+const AES_SECRET = ':aes_secret#';
+
+export function computeBlake2bHexWithSecret(spendingPassword: string): string {
+  const fullSpendingPassword = spendingPassword.concat(SECRET);
+  return blake2bHex(fullSpendingPassword);
+}
+
+export function isBlake2HashHexWithSecretOk(
+  spendingPassword: string,
+  blake2bHashHex: string
+): boolean {
+  const fullSpendingPassword = spendingPassword.concat(SECRET);
+  return blake2bHex(fullSpendingPassword) === blake2bHashHex;
+}
+
+export function aesEncrypt(spendingPassword: string, text: string): string {
+  const aesPasswordText = spendingPassword.concat(SECRET).concat(AES_SECRET);
+  const aesKey = blake2b(aesPasswordText);
+  // eslint-disable-next-line new-cap
+  const aesCtr = new aesjs.ModeOfOperation.ctr(aesKey, new aesjs.Counter(5));
+  const encryptedBytes = aesCtr.encrypt(aesjs.utils.utf8.toBytes(text));
+  const encryptedHex = aesjs.utils.hex.fromBytes(encryptedBytes);
+  return encryptedHex;
+}
+
+export function aesDecrypt(
+  spendingPassword: string,
+  encryptedHex: string
+): string {
+  const aesPasswordText = spendingPassword.concat(SECRET).concat(AES_SECRET);
+  const aesKey = blake2b(aesPasswordText);
+  // eslint-disable-next-line new-cap
+  const aesCtr = new aesjs.ModeOfOperation.ctr(aesKey, new aesjs.Counter(5));
+  const decryptedBytes = aesCtr.decrypt(aesjs.utils.hex.toBytes(encryptedHex));
+  const decryptedText = aesjs.utils.utf8.fromBytes(decryptedBytes);
+  return decryptedText;
+}

examples/wallet/app/utils/storage.js

@@ -1,6 +1,30 @@
 // @flow
 import type { AccountKeys } from '../reducers/types';
 import type { Address, Identifier, PrivateKey } from '../models';
+import {
+  computeBlake2bHexWithSecret,
+  isBlake2HashHexWithSecretOk
+} from './decrypt';
+
+const WALLET_SPEDING_PASSWORD_KEY = 'wallet.spending.pwd';
+
+export function saveSpendingPassword(spendingPassword: string): void {
+  const spendingHash = computeBlake2bHexWithSecret(spendingPassword);
+  localStorage.setItem(WALLET_SPEDING_PASSWORD_KEY, spendingHash);
+}
+
+export function isValidSpendingPassword(spendingPassword: string): boolean {
+  const savedSpendingHash = localStorage.getItem(WALLET_SPEDING_PASSWORD_KEY);
+  if (!savedSpendingHash)
+    throw new Error('There is not a spending password created');
+  return isBlake2HashHexWithSecretOk(spendingPassword, savedSpendingHash);
+}
+
+export function isSpedingPasswordCreated(): boolean {
+  const savedSpendingHash = localStorage.getItem(WALLET_SPEDING_PASSWORD_KEY);
+  if (savedSpendingHash) return true;
+  return false;
+}
 
 export function saveAccountInfoInLocalStorage(keys: AccountKeys): void {
   Object.keys(keys).forEach(key => localStorage.setItem(key, keys[key]));

examples/wallet/package.json

@@ -265,6 +265,7 @@
     "aes-js": "3.1.2",
     "axios": "0.19.0",
     "bip39": "3.0.2",
+    "blakejs": "^1.1.0",
     "bootstrap": "4.3.1",
     "classnames": "2.2.6",
     "clickable-box": "1.0.0",

examples/wallet/yarn.lock

@@ -1637,7 +1637,7 @@ address@^1.0.1:
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
   integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
 
-aes-js@^3.1.2:
+[email protected]:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
   integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==
@@ -3065,6 +3065,11 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
+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"