Minimise transactions progress #4942

ngotchac · 2017-03-17T11:40:09Z

Show transactions progress in the UI on the bottom-right corner, so the user can continue working while the transaction is in progress.

Still need to :

Clean-up every transaction dialog (CreateWallet, DeployContract, ExecuteContract, WalletSettings, WalletActions)
Check Verification dialog
Add infos on completion of the transaction (contract address for deploy, wallet info for wallet...)
Waiting for Don't remove confirmed requests to early. #4933 to be merged

We might want to add this also for dapps. It would be basically a one line change, but not sure we want to add it though...

jacogr · 2017-03-20T20:55:17Z

js/src/modals/CreateWallet/createWalletStore.js

-      .filter((s) => s.waiting)
-      .map((s) => s.idx);
-  }
+  constructor (api, props) {


Would prefer being a bit more explicit here instead of just "props". Maybe the right approach would be to have

constructor (api, { accounts, onClose })

(Small difference, but always visible what is expected)

jacogr · 2017-03-21T10:14:02Z

js/src/api/rpc/parity/parity.js

-      .execute('parity_postTransaction', inOptions(options));
+      .execute('parity_postTransaction', parsedOptions)
+      .then((requestId) => {
+        this._transport.emit('request', {


This would make more sense on the logging layer where events are already fired. As it stands it now does the "same" thing in 2 different places.

jacogr · 2017-03-21T10:19:00Z

js/src/modals/WalletSettings/walletSettingsStore.js

@@ -203,7 +194,9 @@ export default class WalletSettingsStore {
    });
  }

-  constructor (api, wallet) {
+  constructor (api, props) {


constructor (api, { wallet, onClose })

(Just so it is obvious what to expect, as opposed to passing anything in)

jacogr · 2017-03-21T10:23:54Z

js/src/redux/providers/requestsReducer.js

+
+    const nextState = {
+      ...state,
+      [ requestId ]: {


[requestId]: {...} would make more sense, not an array/spaced, rather a key.

jacogr · 2017-03-21T10:27:14Z

js/src/ui/ScrollableText/scrollableText.js

+
+import styles from './scrollableText.css';
+
+export default function ScrollableText (props) {


Would prefer ({ small = false, text }) (especially in this case where the signature is on top and the properties only follow much later - linter still catches non-defined use in these cases)

jacogr · 2017-03-21T10:30:26Z

js/src/util/tx.js

+
+  const contractAddress = receipt.contractAddress;
+
+  return api.eth.getCode(contractAddress)


api.eth .getCode(...) .then(...)

(Just align with what we have elsewhere)

jacogr · 2017-03-22T10:10:49Z

Ok, the overlay of dialogs needs to go, it really is super annoying when I actually try to get work done. (Which is what this improves, i.e. you can do multiples all at once.) Colours much better here, couldn't test the minimize (since I have the transactions overlaying my dialogs and have to keep moving them out of the way), but seems like a step in the right direction.

The txhash still seems way too long where it is displayed. Possibly would make sense to make that (txhash) a click-through to etherscan and have it available somehow in the actual list as well. (Real scenario - just sent ETH and wanted to send the txhash to somebody, couldn't easily find it without going back into my account. Just having it shortened and clickable will allow that)

Having said all that - love it :)

ngotchac · 2017-03-22T13:02:27Z

So to test the animation, you can create a transaction without signing it, close the signer, create a new one, and then close the bottom pending transaction popup.

I will update the z-indexes so that modals are always on top.
I will make the tx hashes shorter, but I don't think there's really a need for a link here. If you need to retrieve it, you can always go to the Signer page :)

@CraigglesO The transactions will auto-hide when they are validated (after being included into 6 blocks). This might be wrong for transactions with conditions though... But you can always hide those by clicking on them. The fact that they are persistent across page reloads is wanted, and it is especially useful when you deploy a contract!

jacogr · 2017-03-22T13:50:44Z

@ngotchac I'm not 100% sure transactions with conditions show up here. (I could be wrong, but I submitted one this morning and it didn't show - then again, was looking at 20 things in this PR at once, so could be wrong - briefly bugged me, I would just double-check the intent and if you are happy with the way it is handled.)

ngotchac · 2017-03-22T15:07:49Z

@jacogr They are indeed displayed even with conditions. This is IMO the expected behavior so it's fine, but if it doesn't work on your side, there is an issue...

jacogr · 2017-03-23T14:38:28Z

As discussed, getting there, but a couple of things remaining -

Use the ShortenedHash for the hash display (the overflow/cutting is not 100% "nice" - and as per your comment above, no real need to click or copy from there, it is available)
Would make sense to show a condensed method decoding (i.e. method, recipient, value, no parameters)
Adjust the right/bottom margins slightly to be closer to the edges.

and not worth a grumble...

Still not convinced on the actual animation in use, still believe height from 100% -> 0% would be better to not have the drop effect. Which is especially jarring when the sizes change, so...
The sizes of the little boxes change as transaction states change and/or disappear. Probably a fixed size would make sense here.

ngotchac · 2017-03-27T16:27:18Z

I took care of every gumbles.

ngotchac added 8 commits March 15, 2017 19:20

Watch the requests and display them throughout the app

773a32f

Linting

fe99a0d

Showing Requests

6e4b26d

Merge remote-tracking branch 'origin/signing-fix' into ng-new-txs

19534c5

Fully working Transaction Requests Display

92e7428

Add FormattedMessage to Requests

206687b

Clean-up the Transfer dialog

f5353c3

Update Validations

c211e09

ngotchac added A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. M7-ui labels Mar 17, 2017

ngotchac added 12 commits March 17, 2017 13:01

Cleanup Create Wallet

f751e32

Clean Deploy Contract Dialog

b72d0b3

Cleanup Contract Execution

feebf53

Fix Requests

33d0613

Cleanup Wallet Settings

107c948

Don't show stepper in Portal if less than 2 steps

460cead

WIP local storage requests

0604cb0

Merge branch 'master' into ng-new-txs

1b5389c

Caching requests and saving contract deployments

9dce8ce

Add Historic prop to Requests MethodDecoding

623cfde

Fix tests

e74b9c9

Add Contract address to MethodDecoding

2021a17

ngotchac added A0-pleasereview 🤓 Pull request needs code review. and removed A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. labels Mar 20, 2017

jacogr reviewed Mar 20, 2017

View reviewed changes

jacogr reviewed Mar 21, 2017

View reviewed changes

jacogr added A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. and removed A0-pleasereview 🤓 Pull request needs code review. labels Mar 22, 2017

ngotchac added A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. and removed A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. labels Mar 22, 2017

ngotchac added 2 commits March 22, 2017 15:54

Merge branch 'master' into ng-new-txs

a2dbc91

PR Grumbles + Playground fix

4677dd9

ngotchac added A0-pleasereview 🤓 Pull request needs code review. and removed A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. labels Mar 22, 2017

jacogr added A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. and removed A0-pleasereview 🤓 Pull request needs code review. labels Mar 23, 2017

ngotchac added 3 commits March 27, 2017 17:11

Merge branch 'master' into ng-new-txs

a1c1105

Merge branch 'master' into ng-new-txs

38aef12

Revert Playground changes

45b6dee

ngotchac added A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. and removed A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. labels Mar 27, 2017

PR Grumbles

e74d68e

ngotchac added A0-pleasereview 🤓 Pull request needs code review. and removed A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. labels Mar 27, 2017

Better showEth in MethodDecoding

32e28b0

jacogr added A8-looksgood 🦄 Pull request is reviewed well. and removed A0-pleasereview 🤓 Pull request needs code review. labels Mar 28, 2017

jacogr merged commit a997210 into master Mar 28, 2017

ngotchac mentioned this pull request Mar 28, 2017

Minimize tx sending progress #4921

Closed

ngotchac deleted the ng-new-txs branch March 29, 2017 08:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Minimise transactions progress #4942

Minimise transactions progress #4942

ngotchac commented Mar 17, 2017 •

edited

Loading

jacogr Mar 20, 2017

jacogr Mar 21, 2017

jacogr Mar 21, 2017

jacogr Mar 21, 2017

jacogr Mar 21, 2017

jacogr Mar 21, 2017

jacogr commented Mar 22, 2017 •

edited

Loading

ngotchac commented Mar 22, 2017

jacogr commented Mar 22, 2017

ngotchac commented Mar 22, 2017

jacogr commented Mar 23, 2017 •

edited

Loading

ngotchac commented Mar 27, 2017 •

edited

Loading


		import styles from './scrollableText.css';

		export default function ScrollableText (props) {


		const contractAddress = receipt.contractAddress;

		return api.eth.getCode(contractAddress)

Minimise transactions progress #4942

Minimise transactions progress #4942

Conversation

ngotchac commented Mar 17, 2017 • edited Loading

jacogr Mar 20, 2017

Choose a reason for hiding this comment

jacogr Mar 21, 2017

Choose a reason for hiding this comment

jacogr Mar 21, 2017

Choose a reason for hiding this comment

jacogr Mar 21, 2017

Choose a reason for hiding this comment

jacogr Mar 21, 2017

Choose a reason for hiding this comment

jacogr Mar 21, 2017

Choose a reason for hiding this comment

jacogr commented Mar 22, 2017 • edited Loading

ngotchac commented Mar 22, 2017

jacogr commented Mar 22, 2017

ngotchac commented Mar 22, 2017

jacogr commented Mar 23, 2017 • edited Loading

ngotchac commented Mar 27, 2017 • edited Loading

ngotchac commented Mar 17, 2017 •

edited

Loading

jacogr commented Mar 22, 2017 •

edited

Loading

jacogr commented Mar 23, 2017 •

edited

Loading

ngotchac commented Mar 27, 2017 •

edited

Loading