Web Worker Decrypt #680

aitrean · 2017-12-28T22:56:51Z

Closes MyEtherWallet/MyEtherWallet#423, MyEtherWallet/MyEtherWallet#219

This PR includes three solutions.

Attempt an empty password every time a keystore is uploaded.
Delegate scrypt decryption (ie ethereumjs-wallet.fromV3) to its own web worker and interface with it through an async typescript function that gets handled in the wallet saga. This keeps the UI unblocked when scrypt takes a long time to decrypt.
Add logic to show a spinner x number of milliseconds after file upload so the user will understand when a wallet is being decrypted.

…tion. Unblock UI and display spinner during scrypt decryption.

…ty-pass

dternyak · 2017-12-30T16:28:02Z

common/components/WalletDecrypt/Keystore.tsx

    onChange(value: KeystoreValue): void;
    onUnlock(): void;
  };

  public render() {
    const { file, password } = this.props.value;
+    const isWalletLoading = this.props.isWalletLoading;


Why not de-structure?

dternyak · 2017-12-30T16:42:14Z

Impressive work! Going to leave it open a bit more and solicit feedback from @HenryNguyen5 and @wbobeirne who participated in design.

dternyak · 2017-12-30T16:47:00Z

Here's an encrypted Keystore with no password for testing purposes:
UTC--2017-12-30T16-45-58.340Z--80965bfdbb6c44c8ed652add058bf372e2b9dc86.zip

dternyak · 2017-12-30T16:47:38Z

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

+  nonStrict: boolean;
+}
+
+onmessage = event => {


event could use typing

wbobeirne

Left some minor code feedback, but the experience is a little weird for me. It pops up with a password prompt, but then continues to unlock the wallet:

wbobeirne · 2018-01-01T19:25:41Z

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"


Lock down version # (We try to avoid ^ versions to keep builds consistent.)

wbobeirne · 2018-01-01T19:28:32Z

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');


We should setup typing for this, as outlined here: https://github.com/webpack-contrib/worker-loader#integrating-with-typescript. Right now it's an implicit any.

Still typed as any, but

import Worker from 'worker-loader!./workers/scrypt-worker.worker.ts';

seems to fix it!

wbobeirne · 2018-01-01T19:29:52Z

common/actions/wallet/actionCreators.ts

@@ -43,6 +43,13 @@ export function setWallet(value: IWallet): types.SetWalletAction {
  };
 }

+export function setWalletLoading(loadingStatus: boolean): types.SetWalletLoadingAction {


Existing nomenclature would be setWalletPending

wbobeirne · 2018-01-01T19:31:24Z

common/components/WalletDecrypt/Keystore.tsx

@@ -57,6 +60,7 @@ export default class KeystoreDecrypt extends Component {
                type="password"
              />
            </div>
+            {isWalletLoading ? <Spinner /> : ''}


Minor, but you can simplify these boolean checks to {isWalletLoading && <Spinner />}

wbobeirne · 2018-01-01T19:35:10Z

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

@@ -0,0 +1,18 @@
+import { fromV3, IFullWallet } from 'ethereumjs-wallet';
+
+declare var postMessage: any;


From https://github.com/webpack-contrib/worker-loader#integrating-with-typescript:

const ctx: Worker = self as any; ctx.postMessage({ foo: "foo" });

for typing

wbobeirne · 2018-01-01T19:37:54Z

common/sagas/wallet/wallet.ts

@@ -141,18 +146,43 @@ export function* unlockPrivateKey(action: UnlockPrivateKeyAction): SagaIterator
  yield put(setWallet(wallet));
 }

+export function* startLoadingSpinner(): SagaIterator {
+  yield call(delay, 1000);


I'd probably shorten this to 300-500, a full second before having the site respond is a little long.

…g syntax to Wallet_Pending.

into attempt-empty-pass

…r.ts.

wbobeirne

User experience feeling much better. I just had one note about typing, if you can get that change in this all looks good to me!

into attempt-empty-pass

aitrean added 2 commits December 28, 2017 02:49

Attempt empty pass on keystore. Delegate web worker for scrypt decryp…

1079f46

…tion. Unblock UI and display spinner during scrypt decryption.

Merge https://github.com/MyEtherWallet/MyEtherWallet into attempt-emp…

d07428c

…ty-pass

dternyak reviewed Dec 30, 2017

View reviewed changes

wbobeirne suggested changes Jan 1, 2018

View reviewed changes

aitrean added 7 commits January 5, 2018 23:40

Merge develop with attempt-empty-pass branch.

c669ee3

Merge #646 and #680 with walletDecrypt redesign. Change Wallet_Loadin…

f6877ea

…g syntax to Wallet_Pending.

Merge branch 'develop' of https://github.com/MyEtherWallet/MyEtherWallet

5c7f2b5

into attempt-empty-pass

Change password box logic to an event, add typing to worker.

269d79a

Fix tests for workers.

47f7732

Merge branch 'develop' of https://github.com/MyEtherWallet/MyEtherWallet

5e43fa1

into attempt-empty-pass

Modify ordering of loaders in webpack config, fixes parsing of freeze…

1479e58

…r.ts.

wbobeirne previously approved these changes Jan 10, 2018

View reviewed changes

aitrean added 2 commits January 10, 2018 11:42

Merge branch 'develop' of https://github.com/MyEtherWallet/MyEtherWallet

596bfe3

into attempt-empty-pass

Change worker require to import to access proper typing..

69e9799

aitrean dismissed wbobeirne’s stale review via 69e9799 January 10, 2018 16:43

wbobeirne approved these changes Jan 11, 2018

View reviewed changes

Merge branch 'develop' into attempt-empty-pass

21cf809

dternyak changed the title ~~Attempt empty pass, implement decryption web workers~~ Decrypt via Web Workers Jan 11, 2018

dternyak changed the title ~~Decrypt via Web Workers~~ Web Worker Decrypt Jan 11, 2018

dternyak merged commit af2e0b6 into MyCryptoHQ:develop Jan 11, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web Worker Decrypt #680

Web Worker Decrypt #680

aitrean commented Dec 28, 2017 •

edited

Loading

dternyak Dec 30, 2017

dternyak commented Dec 30, 2017

dternyak commented Dec 30, 2017

dternyak Dec 30, 2017

wbobeirne left a comment •

edited

Loading

wbobeirne Jan 1, 2018

wbobeirne Jan 1, 2018

wbobeirne Jan 10, 2018

wbobeirne Jan 1, 2018

wbobeirne Jan 1, 2018

wbobeirne Jan 1, 2018

wbobeirne Jan 1, 2018

wbobeirne left a comment

		@@ -0,0 +1,18 @@
		import { fromV3, IFullWallet } from 'ethereumjs-wallet';

		declare var postMessage: any;

Web Worker Decrypt #680

Web Worker Decrypt #680

Conversation

aitrean commented Dec 28, 2017 • edited Loading

Choose a reason for hiding this comment

dternyak commented Dec 30, 2017

dternyak commented Dec 30, 2017

Choose a reason for hiding this comment

wbobeirne left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wbobeirne left a comment

Choose a reason for hiding this comment

aitrean commented Dec 28, 2017 •

edited

Loading

wbobeirne left a comment •

edited

Loading