Unlock wallet screen is added to unlock with spending password

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 UnlockWallet from './containers/UnlockWallet';
 
 export default () => (
   <App>
@@ -19,6 +20,7 @@ export default () => (
       <Route path={routes.STAKING} component={Delegate} />
       <Route path={routes.SETTINGS} component={Settings} />
       <Route path={routes.INPUT_KEYS} component={InputKeys} />
+      <Route path={routes.UNLOCK_WALLET} component={UnlockWallet} />
       <Route
         path={routes.CHOOSE_RESTORE_OR_IMPORT}
         component={ChooseRestoreOrImport}

examples/wallet/app/actions/account.js

@@ -6,7 +6,8 @@ import type {
   AppState,
   Thunk,
   AccountKeys,
-  AccountState
+  AccountState,
+  SpendingPassword
 } from '../reducers/types';
 import type {
   Amount,
@@ -30,12 +31,20 @@ import {
   getTransactions
 } from '../utils/nodeConnection';
 import { isValidMnemonic, createSeedFromMnemonic } from '../utils/mnemonic';
-import { saveAccountInfoInDEN, saveSpendingPassword } from '../utils/storage';
+import {
+  saveAccountInfoInDEN,
+  saveSpendingPassword,
+  readAccountKeysFromDEN
+} from '../utils/storage';
 
 import routes from '../constants/routes.json';
 
 export type SetKeysAction = { type: 'SET_KEYS' } & AccountKeys;
+export type SetKeysWithSpendingPasswordAction = {
+  type: 'SET_SPENDING_PASSWORD'
+} & SpendingPassword;
 export const SET_KEYS = 'SET_KEYS';
+export const SET_SPENDING_PASSWORD = 'SET_SPENDING_PASSWORD';
 
 export function setAccount(
   privateKey: string,
@@ -48,6 +57,29 @@ export function setAccount(
   };
 }
 
+export function setKeysWithSpendingPassword(
+  spendingPassword: ?string = ''
+): Thunk<SetKeysAction> {
+  return function setKeysWithSpendingPasswordThunk(dispatch) {
+    const accountKeys = readAccountKeysFromDEN(spendingPassword);
+    if (accountKeys) {
+      const spendingPasswordKeys = {
+        walletId: 'wallet01',
+        spendingPassword
+      };
+      dispatch({
+        type: SET_SPENDING_PASSWORD,
+        ...spendingPasswordKeys
+      });
+
+      return getAccountFromPrivateKey(accountKeys.privateKey).then(keys =>
+        curry(initializeKeysAndRedirect)(dispatch, keys, spendingPassword)
+      );
+    }
+    throw new Error('Invalid password');
+  };
+}
+
 export function setAccountFromPrivateKey(
   privateKey: string
 ): Thunk<SetKeysAction> {

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 { readAccountKeysFromDEN } from '../utils/storage';
+import {
+  isSpedingPasswordCreated,
+  readAccountKeysFromDEN
+} 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.UNLOCK_WALLET));
+
     const accountKeys = readAccountKeysFromDEN('manteca');
     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",
+  "UNLOCK_WALLET": "/unlock"
 }

examples/wallet/app/containers/UnlockWallet.js

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

examples/wallet/app/pages/UnlockWallet.js

@@ -0,0 +1,58 @@
+// @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 { isValidSpendingPassword } from '../utils/storage';
+import typeof { setKeysWithSpendingPassword as SetKeysWithSpendingPassword } from '../actions/account';
+
+type Props = {
+  setKeysWithSpendingPassword: SetKeysWithSpendingPassword
+};
+
+export default ({ setKeysWithSpendingPassword }: Props) => {
+  const handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    if (isValidSpendingPassword(spendingPassword)) {
+      setIsWrongSpendingPassword(false);
+      setHiddenSpendingPassword(true);
+      return Promise.all([setKeysWithSpendingPassword(spendingPassword)]);
+    }
+    setIsWrongSpendingPassword(true);
+    setHiddenSpendingPassword(false);
+  };
+
+  const [spendingPassword, setSpendingPassword] = useState('');
+  const [isWrongSpendingPassword, setIsWrongSpendingPassword] = useState(false);
+  const [hiddenSpendingPassword, setHiddenSpendingPassword] = useState(true);
+
+  return (
+    <Container>
+      <Form onSubmit={handleSubmit} className="mt-5">
+        <Form.Group>
+          <Form.Label>
+            Wellcome! Please insert you password to unlock wallet
+          </Form.Label>
+          <Form.Control
+            type="password"
+            id="spendingPassword"
+            name="spendingPassword"
+            placeholder="Password"
+            value={spendingPassword}
+            isInvalid={isWrongSpendingPassword}
+            onChange={event => setSpendingPassword(event.target.value)}
+          />
+          <Form.Label className="text-danger" hidden={hiddenSpendingPassword}>
+            <code>Incorrect password</code>
+          </Form.Label>
+        </Form.Group>
+        <Row className="justify-content-center">
+          <Button variant="primary" type="submit">
+            Unlock wallet
+          </Button>
+        </Row>
+      </Form>
+    </Container>
+  );
+};

examples/wallet/app/reducers/account.js

@@ -1,6 +1,7 @@
 // @flow
 import sortBy from 'lodash/sortBy';
 import {
+  SET_SPENDING_PASSWORD,
   SET_KEYS,
   SET_ACCOUNT_STATE,
   SEND_TRANSACTION,
@@ -12,6 +13,7 @@ import type {
   SendTransactionAction,
   SetAccountStateAction,
   SetTransactionsAction,
+  SetKeysWithSpendingPasswordAction,
   SendStakeDelegation
 } from '../actions/account';
 import type { Account } from './types';
@@ -21,6 +23,7 @@ export default function account(
   state: Account,
   // eslint-disable-next-line flowtype/space-after-type-colon
   action:
+    | SetKeysWithSpendingPasswordAction
     | SetKeysAction
     | SetAccountStateAction
     | SendTransactionAction
@@ -31,6 +34,11 @@ export default function account(
     return { transactions: [] };
   }
   switch (action.type) {
+    case SET_SPENDING_PASSWORD:
+      return Object.assign({}, state, {
+        walletId: action.walletId,
+        spendingPassword: action.spendingPassword
+      });
     case SET_KEYS:
       return Object.assign({}, state, {
         address: action.address,

examples/wallet/app/reducers/types.js

@@ -37,6 +37,11 @@ export type AccountKeys = {
   identifier: Identifier
 };
 
+export type SpendingPassword = {
+  walletId: ?string,
+  spendingPassword: ?string
+};
+
 export type AccountState = {
   balance: Balance,
   counter: Counter,

examples/wallet/app/utils/storage.js

@@ -43,10 +43,14 @@ export function readAccountKeysFromDEN(
   spendingPassword: ?string
 ): ?AccountKeys {
   const encryptedHex = localStorage.getItem(WALLET_ENCRYPTED_KEYS);
-  if (encryptedHex && encryptedHex.length > 0) {
-    const plainText = aesDecrypt(spendingPassword, encryptedHex);
-    const accountKeys = JSON.parse(plainText);
-    return accountKeys;
+  try {
+    if (encryptedHex && encryptedHex.length > 0) {
+      const plainText = aesDecrypt(spendingPassword, encryptedHex);
+      const accountKeys = JSON.parse(plainText);
+      return accountKeys;
+    }
+  } catch (e) {
+    console.error('There was an error unlocking wallet', e.toString());
   }
   return undefined;
 }