Web Worker Decrypt

common/actions/wallet/actionCreators.ts

@@ -43,6 +43,13 @@ export function setWallet(value: IWallet): types.SetWalletAction {
   };
 }
 
+export function setWalletLoading(loadingStatus: boolean): types.SetWalletLoadingAction {
+  return {
+    type: TypeKeys.WALLET_SET_LOADING,
+    payload: loadingStatus
+  };
+}
+
 export function setBalancePending(): types.SetBalancePendingAction {
   return {
     type: TypeKeys.WALLET_SET_BALANCE_PENDING

common/actions/wallet/actionTypes.ts

@@ -32,6 +32,11 @@ export interface ResetWalletAction {
   type: TypeKeys.WALLET_RESET;
 }
 
+export interface SetWalletLoadingAction {
+  type: TypeKeys.WALLET_SET_LOADING;
+  payload: boolean;
+}
+
 /*** Set Balance ***/
 export interface SetBalancePendingAction {
   type: TypeKeys.WALLET_SET_BALANCE_PENDING;
@@ -101,6 +106,7 @@ export interface SetWalletConfigAction {
 export type WalletAction =
   | UnlockPrivateKeyAction
   | SetWalletAction
+  | SetWalletLoadingAction
   | ResetWalletAction
   | SetBalancePendingAction
   | SetBalanceFullfilledAction

common/actions/wallet/constants.ts

@@ -10,6 +10,8 @@ export enum TypeKeys {
   WALLET_SET_TOKEN_BALANCES_PENDING = 'WALLET_SET_TOKEN_BALANCES_PENDING',
   WALLET_SET_TOKEN_BALANCES_FULFILLED = 'WALLET_SET_TOKEN_BALANCES_FULFILLED',
   WALLET_SET_TOKEN_BALANCES_REJECTED = 'WALLET_SET_TOKEN_BALANCES_REJECTED',
+  WALLET_SET_LOADING = 'WALLET_SET_LOADING',
+  WALLET_SET_NOT_LOADING = 'WALLET_SET_NOT_LOADING',
   WALLET_SCAN_WALLET_FOR_TOKENS = 'WALLET_SCAN_WALLET_FOR_TOKENS',
   WALLET_SET_WALLET_TOKENS = 'WALLET_SET_WALLET_TOKENS',
   WALLET_SET_CONFIG = 'WALLET_SET_CONFIG',

common/components/WalletDecrypt/Keystore.tsx

@@ -1,6 +1,7 @@
 import { isKeystorePassRequired } from 'libs/wallet';
 import React, { Component } from 'react';
 import translate, { translateRaw } from 'translations';
+import Spinner from 'components/ui/Spinner';
 
 export interface KeystoreValue {
   file: string;
@@ -21,12 +22,14 @@ function isPassRequired(file: string): boolean {
 export default class KeystoreDecrypt extends Component {
   public props: {
     value: KeystoreValue;
+    isWalletLoading: boolean;
     onChange(value: KeystoreValue): void;
     onUnlock(): void;
   };
 
   public render() {
     const { file, password } = this.props.value;
+    const isWalletLoading = this.props.isWalletLoading;
     const passReq = isPassRequired(file);
 
     return (
@@ -46,7 +49,7 @@ export default class KeystoreDecrypt extends Component {
                 {translate('ADD_Radio_2_short')}
               </a>
             </label>
-            <div className={file.length && passReq ? '' : 'hidden'}>
+            <div className={file.length && passReq && !isWalletLoading ? '' : 'hidden'}>
               <p>{translate('ADD_Label_3')}</p>
               <input
                 className={`form-control ${password.length > 0 ? 'is-valid' : 'is-invalid'}`}
@@ -57,6 +60,7 @@ export default class KeystoreDecrypt extends Component {
                 type="password"
               />
             </div>
+            {isWalletLoading ? <Spinner /> : ''}
           </div>
         </div>
       </section>
@@ -92,8 +96,12 @@ export default class KeystoreDecrypt extends Component {
       this.props.onChange({
         ...this.props.value,
         file: keystore,
-        valid: keystore.length && !passReq
+        valid: keystore.length && !passReq,
+        password: ''
       });
+      if (isPassRequired(keystore)) {
+        this.props.onUnlock();
+      }
     };
 
     fileReader.readAsText(inputFile, 'utf-8');

common/components/WalletDecrypt/index.tsx

@@ -46,6 +46,7 @@ interface Props {
   offline: boolean;
   allowReadOnly?: boolean;
   disabledWallets?: string[];
+  isWalletLoading: AppState['wallet']['isWalletLoading'];
 }
 
 interface State {
@@ -125,7 +126,14 @@ export class WalletDecrypt extends Component<Props, State> {
       return null;
     }
     return (
-      <selectedWallet.component value={value} onChange={this.onChange} onUnlock={this.onUnlock} />
+      <selectedWallet.component
+        value={value}
+        onChange={this.onChange}
+        onUnlock={this.onUnlock}
+        isWalletLoading={
+          selectedWalletKey === 'keystore-file' ? this.props.isWalletLoading : undefined
+        }
+      />
     );
   }
 
@@ -235,7 +243,8 @@ export class WalletDecrypt extends Component<Props, State> {
 function mapStateToProps(state: AppState) {
   return {
     offline: state.config.offline,
-    wallet: state.wallet.inst
+    wallet: state.wallet.inst,
+    isWalletLoading: state.wallet.isWalletLoading
   };
 }
 

common/libs/wallet/non-deterministic/helpers.ts

@@ -58,6 +58,10 @@ const isKeystorePassRequired = (file: string): boolean => {
   );
 };
 
+const getUtcWallet = (file: string, password: string): Promise<IFullWallet> => {
+  return UtcWallet(file, password);
+};
+
 const getPrivKeyWallet = (key: string, password: string) =>
   key.length === 64
     ? PrivKeyWallet(Buffer.from(key, 'hex'))
@@ -79,12 +83,16 @@ const getKeystoreWallet = (file: string, password: string) => {
     case KeystoreTypes.v2Unencrypted:
       return PrivKeyWallet(Buffer.from(parsed.privKey, 'hex'));
 
-    case KeystoreTypes.utc:
-      return UtcWallet(file, password);
-
     default:
       throw Error('Unknown wallet');
   }
 };
 
-export { isKeystorePassRequired, getPrivKeyWallet, getKeystoreWallet };
+export {
+  isKeystorePassRequired,
+  determineKeystoreType,
+  getPrivKeyWallet,
+  getKeystoreWallet,
+  getUtcWallet,
+  KeystoreTypes
+};

common/libs/wallet/non-deterministic/wallets.ts

@@ -1,7 +1,8 @@
-import { fromPrivateKey, fromEthSale, fromV3 } from 'ethereumjs-wallet';
+import { fromPrivateKey, fromEthSale } from 'ethereumjs-wallet';
 import { fromEtherWallet } from 'ethereumjs-wallet/thirdparty';
 import { signWrapper } from './helpers';
 import { decryptPrivKey } from 'libs/decrypt';
+import { fromV3 } from 'libs/web-workers/scrypt-wrapper';
 import Web3Wallet from './web3';
 import AddressOnlyWallet from './address';
 
@@ -16,8 +17,7 @@ const MewV1Wallet = (keystore: string, password: string) =>
 
 const PrivKeyWallet = (privkey: Buffer) => signWrapper(fromPrivateKey(privkey));
 
-const UtcWallet = (keystore: string, password: string) =>
-  signWrapper(fromV3(keystore, password, true));
+const UtcWallet = (keystore: string, password: string) => fromV3(keystore, password, true);
 
 export {
   EncryptedPrivateKeyWallet,

common/libs/web-workers/scrypt-wrapper.ts

@@ -0,0 +1,22 @@
+import { IFullWallet, fromPrivateKey } from 'ethereumjs-wallet';
+import { toBuffer } from 'ethereumjs-util';
+const Worker = require('worker-loader!./workers/scrypt-worker.worker.ts');
+
+export const fromV3 = (
+  keystore: string,
+  password: string,
+  nonStrict: boolean
+): Promise<IFullWallet> => {
+  return new Promise((resolve, reject) => {
+    const scryptWorker = new Worker();
+    scryptWorker.postMessage({ keystore, password, nonStrict });
+    scryptWorker.onmessage = event => {
+      try {
+        const wallet = fromPrivateKey(toBuffer(event.data));
+        resolve(wallet);
+      } catch (e) {
+        reject(e);
+      }
+    };
+  });
+};

common/libs/web-workers/workers/scrypt-worker.worker.ts

@@ -0,0 +1,18 @@
+import { fromV3, IFullWallet } from 'ethereumjs-wallet';
+
+declare var postMessage: any;
+interface DecryptionParameters {
+  keystore: string;
+  password: string;
+  nonStrict: boolean;
+}
+
+onmessage = event => {
+  const info: DecryptionParameters = event.data;
+  try {
+    const rawKeystore: IFullWallet = fromV3(info.keystore, info.password, info.nonStrict);
+    postMessage(rawKeystore.getPrivateKeyString());
+  } catch (e) {
+    postMessage(e.message);
+  }
+};

common/reducers/wallet.ts

@@ -4,6 +4,7 @@ import {
   SetWalletAction,
   WalletAction,
   SetWalletConfigAction,
+  SetWalletLoadingAction,
   TypeKeys
 } from 'actions/wallet';
 import { TokenValue } from 'libs/units';
@@ -20,6 +21,7 @@ export interface State {
       error: string | null;
     };
   };
+  isWalletLoading: boolean;
   isTokensLoading: boolean;
   tokensError: string | null;
   hasSavedWalletTokens: boolean;
@@ -30,6 +32,7 @@ export const INITIAL_STATE: State = {
   config: null,
   balance: { isPending: false, wei: null },
   tokens: {},
+  isWalletLoading: false,
   isTokensLoading: false,
   tokensError: null,
   hasSavedWalletTokens: true
@@ -60,6 +63,10 @@ function setBalanceRejected(state: State): State {
   return { ...state, balance: { ...state.balance, isPending: false } };
 }
 
+function setWalletLoading(state: State, action: SetWalletLoadingAction): State {
+  return { ...state, isWalletLoading: action.payload };
+}
+
 function setTokenBalancesPending(state: State): State {
   return {
     ...state,
@@ -118,6 +125,8 @@ export function wallet(state: State = INITIAL_STATE, action: WalletAction): Stat
       return setBalanceFullfilled(state, action);
     case TypeKeys.WALLET_SET_BALANCE_REJECTED:
       return setBalanceRejected(state);
+    case TypeKeys.WALLET_SET_LOADING:
+      return setWalletLoading(state, action);
     case TypeKeys.WALLET_SET_TOKEN_BALANCES_PENDING:
       return setTokenBalancesPending(state);
     case TypeKeys.WALLET_SET_TOKEN_BALANCES_FULFILLED:

common/sagas/wallet/wallet.ts

@@ -7,6 +7,7 @@ import {
   setTokenBalancesFulfilled,
   setTokenBalancesRejected,
   setWallet,
+  setWalletLoading,
   setWalletConfig,
   UnlockKeystoreAction,
   UnlockMnemonicAction,
@@ -24,12 +25,16 @@ import {
   MnemonicWallet,
   getPrivKeyWallet,
   getKeystoreWallet,
+  determineKeystoreType,
+  KeystoreTypes,
+  getUtcWallet,
+  signWrapper,
   Web3Wallet,
   WalletConfig
 } from 'libs/wallet';
 import { NODES, initWeb3Node } from 'config/data';
-import { SagaIterator } from 'redux-saga';
-import { apply, call, fork, put, select, takeEvery, take } from 'redux-saga/effects';
+import { SagaIterator, delay, Task } from 'redux-saga';
+import { apply, call, fork, put, select, takeEvery, take, cancel } from 'redux-saga/effects';
 import { getNodeLib } from 'selectors/config';
 import {
   getTokens,
@@ -141,18 +146,43 @@ export function* unlockPrivateKey(action: UnlockPrivateKeyAction): SagaIterator
   yield put(setWallet(wallet));
 }
 
+export function* startLoadingSpinner(): SagaIterator {
+  yield call(delay, 1000);
+  yield put(setWalletLoading(true));
+}
+
+export function* stopLoadingSpinner(loadingFork: Task | null): SagaIterator {
+  if (loadingFork !== null) {
+    yield cancel(loadingFork);
+  }
+  yield put(setWalletLoading(false));
+}
+
 export function* unlockKeystore(action: UnlockKeystoreAction): SagaIterator {
   const { file, password } = action.payload;
   let wallet: null | IWallet = null;
-
+  let spinnerTask: null | Task = null;
   try {
-    wallet = getKeystoreWallet(file, password);
+    if (determineKeystoreType(file) === KeystoreTypes.utc) {
+      spinnerTask = yield fork(startLoadingSpinner);
+      wallet = signWrapper(yield call(getUtcWallet, file, password));
+    } else {
+      yield call(stopLoadingSpinner, spinnerTask);
+      wallet = getKeystoreWallet(file, password);
+    }
   } catch (e) {
-    yield put(showNotification('danger', translate('ERROR_6')));
+    yield call(stopLoadingSpinner, spinnerTask);
+    if (
+      password !== '' ||
+      e.message !== 'Private key does not satisfy the curve requirements (ie. it is invalid)'
+    ) {
+      yield put(showNotification('danger', translate('ERROR_6')));
+    }
     return;
   }
 
   // TODO: provide a more descriptive error than the two 'ERROR_6' (invalid pass) messages above
+  yield put(setWalletLoading(false));
   yield put(setWallet(wallet));
 }
 

package.json

@@ -110,7 +110,8 @@
     "webpack": "3.10.0",
     "webpack-dev-middleware": "2.0.3",
     "webpack-hot-middleware": "2.21.0",
-    "webpack-sources": "1.0.1"
+    "webpack-sources": "1.0.1",
+    "worker-loader": "^1.1.0"
   },
   "scripts": {
     "freezer": "webpack --config=./webpack_config/webpack.freezer.js && node ./dist/freezer.js",

webpack_config/webpack.base.js

@@ -29,6 +29,10 @@ module.exports = {
   },
   module: {
     loaders: [
+      {
+        test: /\.worker\.js$/,
+        loader: 'worker-loader'
+      },
       {
         test: /\.(ts|tsx)$/,
         loaders: [