Web Worker Decrypt

common/actions/wallet/actionCreators.ts

@@ -43,12 +43,25 @@ export function setWallet(value: IWallet): types.SetWalletAction {
   };
 }
 
+export function setWalletPending(loadingStatus: boolean): types.SetWalletPendingAction {
+  return {
+    type: TypeKeys.WALLET_SET_PENDING,
+    payload: loadingStatus
+  };
+}
+
 export function setBalancePending(): types.SetBalancePendingAction {
   return {
     type: TypeKeys.WALLET_SET_BALANCE_PENDING
   };
 }
 
+export function setPasswordPrompt(): types.SetPasswordPendingAction {
+  return {
+    type: TypeKeys.WALLET_SET_PASSWORD_PENDING
+  };
+}
+
 export type TSetBalance = typeof setBalanceFullfilled;
 export function setBalanceFullfilled(value: Wei): types.SetBalanceFullfilledAction {
   return {

common/actions/wallet/actionTypes.ts

@@ -32,6 +32,11 @@ export interface ResetWalletAction {
   type: TypeKeys.WALLET_RESET;
 }
 
+export interface SetWalletPendingAction {
+  type: TypeKeys.WALLET_SET_PENDING;
+  payload: boolean;
+}
+
 /*** Set Balance ***/
 export interface SetBalancePendingAction {
   type: TypeKeys.WALLET_SET_BALANCE_PENDING;
@@ -116,10 +121,15 @@ export interface SetWalletConfigAction {
   payload: WalletConfig;
 }
 
+export interface SetPasswordPendingAction {
+  type: TypeKeys.WALLET_SET_PASSWORD_PENDING;
+}
+
 /*** Union Type ***/
 export type WalletAction =
   | UnlockPrivateKeyAction
   | SetWalletAction
+  | SetWalletPendingAction
   | ResetWalletAction
   | SetBalancePendingAction
   | SetBalanceFullfilledAction
@@ -132,4 +142,5 @@ export type WalletAction =
   | SetTokenBalanceRejectedAction
   | ScanWalletForTokensAction
   | SetWalletTokensAction
-  | SetWalletConfigAction;
+  | SetWalletConfigAction
+  | SetPasswordPendingAction;

common/actions/wallet/constants.ts

@@ -10,11 +10,14 @@ 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_PENDING = 'WALLET_SET_PENDING',
+  WALLET_SET_NOT_PENDING = 'WALLET_SET_NOT_PENDING',
   WALLET_SET_TOKEN_BALANCE_PENDING = 'WALLET_SET_TOKEN_BALANCE_PENDING',
   WALLET_SET_TOKEN_BALANCE_FULFILLED = 'WALLET_SET_TOKEN_BALANCE_FULFILLED',
   WALLET_SET_TOKEN_BALANCE_REJECTED = 'WALLET_SET_TOKEN_BALANCE_REJECTED',
   WALLET_SCAN_WALLET_FOR_TOKENS = 'WALLET_SCAN_WALLET_FOR_TOKENS',
   WALLET_SET_WALLET_TOKENS = 'WALLET_SET_WALLET_TOKENS',
   WALLET_SET_CONFIG = 'WALLET_SET_CONFIG',
-  WALLET_RESET = 'WALLET_RESET'
+  WALLET_RESET = 'WALLET_RESET',
+  WALLET_SET_PASSWORD_PENDING = 'WALLET_SET_PASSWORD_PENDING'
 }

common/components/WalletDecrypt/WalletDecrypt.tsx

@@ -33,6 +33,7 @@ import {
 import { AppState } from 'reducers';
 import { knowledgeBaseURL, isWeb3NodeAvailable } from 'config/data';
 import { IWallet } from 'libs/wallet';
+import { showNotification, TShowNotification } from 'actions/notifications';
 import DigitalBitboxIcon from 'assets/images/wallets/digital-bitbox.svg';
 import LedgerIcon from 'assets/images/wallets/ledger.svg';
 import MetamaskIcon from 'assets/images/wallets/metamask.svg';
@@ -49,10 +50,13 @@ interface Props {
   setWallet: TSetWallet;
   unlockWeb3: TUnlockWeb3;
   resetWallet: TResetWallet;
+  showNotification: TShowNotification;
   wallet: IWallet;
   hidden?: boolean;
   offline: boolean;
   disabledWallets?: string[];
+  isWalletPending: AppState['wallet']['isWalletPending'];
+  isPasswordPending: AppState['wallet']['isPasswordPending'];
 }
 
 interface State {
@@ -210,6 +214,15 @@ export class WalletDecrypt extends Component<Props, State> {
         value={this.state.value}
         onChange={this.onChange}
         onUnlock={this.onUnlock}
+        showNotification={this.props.showNotification}
+        isWalletPending={
+          this.state.selectedWalletKey === 'keystore-file' ? this.props.isWalletPending : undefined
+        }
+        isPasswordPending={
+          this.state.selectedWalletKey === 'keystore-file'
+            ? this.props.isPasswordPending
+            : undefined
+        }
       />
     );
   }
@@ -376,7 +389,9 @@ export class WalletDecrypt extends Component<Props, State> {
 function mapStateToProps(state: AppState) {
   return {
     offline: state.config.offline,
-    wallet: state.wallet.inst
+    wallet: state.wallet.inst,
+    isWalletPending: state.wallet.isWalletPending,
+    isPasswordPending: state.wallet.isPasswordPending
   };
 }
 
@@ -387,5 +402,6 @@ export default connect(mapStateToProps, {
   unlockWeb3,
   setWallet,
   resetWallet,
-  resetTransactionState: reset
+  resetTransactionState: reset,
+  showNotification
 })(WalletDecrypt);

common/components/WalletDecrypt/components/Keystore.tsx

@@ -1,6 +1,8 @@
 import { isKeystorePassRequired } from 'libs/wallet';
 import React, { Component } from 'react';
 import translate, { translateRaw } from 'translations';
+import Spinner from 'components/ui/Spinner';
+import { TShowNotification } from 'actions/notifications';
 
 export interface KeystoreValue {
   file: string;
@@ -18,15 +20,23 @@ function isPassRequired(file: string): boolean {
   return passReq;
 }
 
+function isValidFile(rawFile: File): boolean {
+  const fileType = rawFile.type;
+  return fileType === '' || fileType === 'application/json';
+}
+
 export class KeystoreDecrypt extends Component {
   public props: {
     value: KeystoreValue;
+    isWalletPending: boolean;
+    isPasswordPending: boolean;
     onChange(value: KeystoreValue): void;
     onUnlock(): void;
+    showNotification(level: string, message: string): TShowNotification;
   };
 
   public render() {
-    const { file, password } = this.props.value;
+    const { isWalletPending, isPasswordPending, value: { file, password } } = this.props;
     const passReq = isPassRequired(file);
     const unlockDisabled = !file || (passReq && !password);
 
@@ -44,7 +54,8 @@ export class KeystoreDecrypt extends Component {
               {translate('ADD_Radio_2_short')}
             </a>
           </label>
-          <div className={file.length && passReq ? '' : 'hidden'}>
+          {isWalletPending ? <Spinner /> : ''}
+          <div className={file.length && isPasswordPending ? '' : 'hidden'}>
             <p>{translate('ADD_Label_3')}</p>
             <input
               className={`form-control ${password.length > 0 ? 'is-valid' : 'is-invalid'}`}
@@ -97,10 +108,15 @@ export class KeystoreDecrypt extends Component {
       this.props.onChange({
         ...this.props.value,
         file: keystore,
-        valid: keystore.length && !passReq
+        valid: keystore.length && !passReq,
+        password: ''
       });
+      this.props.onUnlock();
     };
-
-    fileReader.readAsText(inputFile, 'utf-8');
+    if (isValidFile(inputFile)) {
+      fileReader.readAsText(inputFile, 'utf-8');
+    } else {
+      this.props.showNotification('danger', translateRaw('ERROR_3'));
+    }
   };
 }

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,23 @@
+import { IFullWallet, fromPrivateKey } from 'ethereumjs-wallet';
+import { toBuffer } from 'ethereumjs-util';
+import Worker from '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 => {
+      const data: string = event.data;
+      try {
+        const wallet = fromPrivateKey(toBuffer(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';
+
+const scryptWorker: Worker = self as any;
+interface DecryptionParameters {
+  keystore: string;
+  password: string;
+  nonStrict: boolean;
+}
+
+scryptWorker.onmessage = (event: MessageEvent) => {
+  const info: DecryptionParameters = event.data;
+  try {
+    const rawKeystore: IFullWallet = fromV3(info.keystore, info.password, info.nonStrict);
+    scryptWorker.postMessage(rawKeystore.getPrivateKeyString());
+  } catch (e) {
+    scryptWorker.postMessage(e.message);
+  }
+};

common/reducers/wallet.ts

@@ -4,6 +4,7 @@ import {
   SetWalletAction,
   WalletAction,
   SetWalletConfigAction,
+  SetWalletPendingAction,
   TypeKeys,
   SetTokenBalanceFulfilledAction
 } from 'actions/wallet';
@@ -21,7 +22,9 @@ export interface State {
       error: string | null;
     };
   };
+  isWalletPending: boolean;
   isTokensLoading: boolean;
+  isPasswordPending: boolean;
   tokensError: string | null;
   hasSavedWalletTokens: boolean;
 }
@@ -31,6 +34,8 @@ export const INITIAL_STATE: State = {
   config: null,
   balance: { isPending: false, wei: null },
   tokens: {},
+  isWalletPending: false,
+  isPasswordPending: false,
   isTokensLoading: false,
   tokensError: null,
   hasSavedWalletTokens: true
@@ -61,6 +66,14 @@ function setBalanceRejected(state: State): State {
   return { ...state, balance: { ...state.balance, isPending: false } };
 }
 
+function setWalletPending(state: State, action: SetWalletPendingAction): State {
+  return { ...state, isWalletPending: action.payload };
+}
+
+function setPasswordPending(state: State): State {
+  return { ...state, isPasswordPending: true };
+}
+
 function setTokenBalancesPending(state: State): State {
   return {
     ...state,
@@ -143,6 +156,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_PENDING:
+      return setWalletPending(state, action);
     case TypeKeys.WALLET_SET_TOKEN_BALANCES_PENDING:
       return setTokenBalancesPending(state);
     case TypeKeys.WALLET_SET_TOKEN_BALANCES_FULFILLED:
@@ -161,6 +176,8 @@ export function wallet(state: State = INITIAL_STATE, action: WalletAction): Stat
       return setWalletTokens(state);
     case TypeKeys.WALLET_SET_CONFIG:
       return setWalletConfig(state, action);
+    case TypeKeys.WALLET_SET_PASSWORD_PENDING:
+      return setPasswordPending(state);
     default:
       return state;
   }