Transaction styling #3181

mariopino · 2019-11-22T13:24:09Z

Closes #3078

Description:

Implement the new transaction page design:

Bonus: Add support for multisend transactions.

Thank you! 🚀

For contributor:

Added changes entries. Run yarn changelog for a guided process.
Reviewed Files changed in the github PR explorer
Attach screenshots of the UI components on the PR description (if applicable)
Scope of work approved for big PRs

For reviewer:

Manually tested the changes on the UI

jbibla · 2019-11-22T16:51:44Z

really nice work mario!

let's add a slight animation / transition to the extra info box
the background color of the tx should change on hover (like with li-validators)
we have new icons we can use (but i don't think fabo likes them 🤭)
there are a number of alignment and spacing issues that need to be addressed - and many places where there are extra spaces or not enough spaces

mariopino · 2019-11-22T17:30:47Z

Thanks! I saw that there is room to improve in the mobile view :-D The transition was on my plans, for sure and will follow the rest of your suggestions.

jbibla · 2019-11-22T18:26:21Z

@fedekunze i know this PR is close to your heart - you can check it out here https://deploy-preview-3181--lunieio.netlify.com/

codecov · 2019-11-23T09:53:56Z

Codecov Report

Merging #3181 into develop will increase coverage by 0.68%.
The diff coverage is 99.16%.

@@             Coverage Diff             @@
##           develop    #3181      +/-   ##
===========================================
+ Coverage    88.15%   88.83%   +0.68%     
===========================================
  Files          126      125       -1     
  Lines         1832     1908      +76     
  Branches       275      291      +16     
===========================================
+ Hits          1615     1695      +80     
+ Misses         210      206       -4     
  Partials         7        7

Impacted Files	Coverage Δ
src/components/transactions/TransactionList.vue	`90% <ø> (+25%)`	⬆️
src/components/wallet/PageTransactions.vue	`47.82% <ø> (ø)`	⬆️
src/components/transactions/messageTypes.js	`100% <ø> (ø)`	⬆️
...ransactions/message-view/DepositMessageDetails.vue	`100% <100%> (ø)`	⬆️
...sactions/message-view/UndelegateMessageDetails.vue	`100% <100%> (ø)`	⬆️
src/vuex/modules/connection.js	`100% <100%> (ø)`	⬆️
src/components/network/PageBlock.vue	`50% <100%> (+2.17%)`	⬆️
src/components/transactions/TransactionItem.vue	`100% <100%> (ø)`	⬆️
...ions/message-view/SubmitProposalMessageDetails.vue	`100% <100%> (ø)`	⬆️
...ge-view/WithdrawDelegationRewardMessageDetails.vue	`100% <100%> (ø)`	⬆️
... and 16 more

faboweb · 2019-11-23T13:38:11Z

Improvement idea: Use icons for the meta information.
Currently the information looks very noisy.
Also: It necessary to hide the transaction details like the recipient validator. I think they are very important. @jbibla

mariopino · 2019-11-25T11:16:39Z

Also: It necessary to hide the transaction details like the recipient validator. I think they are very important. @jbibla

What do you mean?

faboweb · 2019-11-25T12:49:45Z

src/components/transactions/TransactionIcon.vue

+  },
+  computed: {
+    icon() {
+      if (this.transactionType === `Sent`) {


do you know ob the object switch approach?

const dictionary = { keyA: value, keyB: value } const valueForKey = dictionary[key]

Definitely more cleaner but as I need to make some comparisons for Withdrawal, Vote and Deposit types like:

} else if (this.transactionType.search('Voted') === 0) {

It's possible to do that in a dictionary?

Another option is just to simplify the caption for that messages and include the info in the tx detail, then we can use a dictionary. Maybe a better solution.

Looks funky to me. What are the options for transactionType that there are multiple with Voted in it?

yeah I think you are on the right track. there should be an enum "transactionType" that should be different then the title.

I finally implemented that way. The icon name should be the caption string, so that way we don't need a dictionary, only need to handle Update withdraw address, which is the only specific case. A bit hacky but simplier :-)

computed: { icon() { if (this.transactionType.indexOf(` `) !== -1) { if (this.transactionType === `Update withdraw address`) { return `/img/icons/activity/Withdrawal.svg` } else { return `/img/icons/activity/${this.transactionType.substr( 0, this.transactionType.indexOf(` `) )}.svg` } } else { return `/img/icons/activity/${this.transactionType}.svg` } } }

I am still worried, that the transactionType is the title of the transaction. If we change the title now, we need to change the name of the icon. feels like an unnecessary linkage. But we can improve later.

mariopino · 2019-11-25T14:47:42Z

Hey @jbibla, we have some missing icons for:

Create validator
Edit validator
Submitted proposal
Unjail

mariopino · 2019-11-25T15:20:59Z

Hey @jbibla, we have some missing icons for:

Create validator

Edit validator

Submitted proposal

Unjail

Also having a generic icon could be useful, just to have a fallback.

…t mess with nice tx formatting

jbibla · 2019-11-29T21:28:16Z

jbibla · 2019-11-29T21:29:04Z

this is done IMO and should be merged as soon as possible.

i think @mariopino and @Bitcoinera encountered a number of issues while working on this code — please make sure you open issues so we can fix these problems in the future!

mariopino · 2019-11-29T22:53:57Z

Looks great! New format is missing in multisend though, you can check it signing with cosmos1z8mzakma7vnaajysmtkwt4wgjqr2m84tzvyfkz

faboweb · 2019-11-30T14:10:31Z

Great seeing Jordan helping out the team here!!

faboweb · 2019-11-30T14:11:58Z

src/components/transactions/TransactionIcon.vue

+  },
+  computed: {
+    icon() {
+      if (this.transactionType.indexOf(` `) !== -1) {


I still have concerns around these string searches in comparison to some enum. Also transactionType is used here as title which I think is a bad naming.

True! let's do an small refactor (no new features, I promise! ;-)).

@faboweb i think it should be in a new PR!

src/scripts/transaction-utils.js

faboweb · 2019-11-30T14:15:03Z

src/scripts/transaction-utils.js

    return transaction.value.amount[0]
  } else {
    return transaction.value.amount
  }
 }
+
+export const getMultiSendCoin = (transaction, sessionAddress) => {


Misses a comment, why this is necessary

Co-Authored-By: Fabian <frznhope@gmail.com>

src/scripts/transaction-utils.js

faboweb · 2019-12-02T10:48:01Z

src/components/transactions/TransactionItem.vue

  </div>
 </template>

 <script>
-import TransactionIcon from "./TransactionIcon"
-import TransactionDetails from "./TransactionDetails"
+import { messageType } from "./messageTypes.js"


here is the messageType enum I would have liked to see in the icon handling as well. no need for a separate form of declaring the types.

But we can do that as a follow up.

Co-Authored-By: Fabian <frznhope@gmail.com>

Transaction styling

87a1011

mariopino requested review from colw, faboweb and jbibla as code owners November 22, 2019 13:24

mariopino added 2 commits November 22, 2019 14:26

changelog

3cb404f

Remove unused test, update snaps

d5b3818

Change background tx color on hover

6336a54

Add transition and new activity icons

8ba5e9d

mariopino added 2 commits November 25, 2019 12:11

Add new icons

e885e45

Fix test, update snaps

a63d6f0

faboweb reviewed Nov 25, 2019

View reviewed changes

mariopino added 3 commits November 25, 2019 15:23

Fix e2e

8e0159c

Fix e2e

86821ed

Update snap

29137be

More testing stuff

92edf82

mariopino added 7 commits November 25, 2019 18:28

More testing and snaps

b64e666

More testing stuff

063e39d

Fix e2e

a9c4b57

Fix e2e

cc1c8bc

Trigger CI

718eac9

Fix e2e

cd8cc54

Fix e2e

fe192a8

jbibla added 11 commits November 29, 2019 13:56

added validator images for redelegations

63f3f1e

removed more unneeded nbsp's

48bc682

added redelegation validator names back

ce2c192

updated snaperoos

47f21da

switched from withdraw to claimed - as is our new language

d334cc7

added details as subtitle on web and mobile

13dcc89

reduced css for tx component, fully responsive too

819403b

tests and snaperoos

8462ade

removed comments and made bech32 copied element absolute so it doesn'…

8af4789

…t mess with nice tx formatting

lint

f8f9aba

snapshot fix

785c417

mariopino added 2 commits November 30, 2019 00:02

Add new format to multisend tx

a51537c

Update snap

0def73d

faboweb reviewed Nov 30, 2019

View reviewed changes

src/scripts/transaction-utils.js Outdated Show resolved Hide resolved

faboweb reviewed Nov 30, 2019

View reviewed changes

mariopino and others added 4 commits November 30, 2019 15:23

Update src/scripts/transaction-utils.js

03fb1f9

Co-Authored-By: Fabian <frznhope@gmail.com>

Add new design to all tx messages

9e6b44d

Update snaps, cleanup, comment

c66d10f

Separate tx caption and tx type

50030d9

faboweb reviewed Dec 2, 2019

View reviewed changes

src/scripts/transaction-utils.js Outdated Show resolved Hide resolved

faboweb reviewed Dec 2, 2019

View reviewed changes

mariopino and others added 2 commits December 2, 2019 11:58

Fix test, update snaps

a6b8241

Update src/scripts/transaction-utils.js

3c2c611

Co-Authored-By: Fabian <frznhope@gmail.com>

faboweb merged commit b9566b9 into develop Dec 2, 2019

faboweb deleted the mario/3078-improve-transaction-styling branch December 2, 2019 12:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Transaction styling #3181

Transaction styling #3181

mariopino commented Nov 22, 2019

jbibla commented Nov 22, 2019

mariopino commented Nov 22, 2019

jbibla commented Nov 22, 2019 •

edited

Loading

codecov bot commented Nov 23, 2019 •

edited

Loading

faboweb commented Nov 23, 2019

mariopino commented Nov 25, 2019

faboweb Nov 25, 2019

mariopino Nov 25, 2019 •

edited

Loading

faboweb Nov 25, 2019

faboweb Nov 25, 2019

mariopino Nov 26, 2019

faboweb Nov 28, 2019

mariopino commented Nov 25, 2019

mariopino commented Nov 25, 2019

jbibla commented Nov 29, 2019

jbibla commented Nov 29, 2019

mariopino commented Nov 29, 2019

faboweb commented Nov 30, 2019

faboweb Nov 30, 2019

mariopino Nov 30, 2019

jbibla Dec 1, 2019

faboweb Nov 30, 2019

faboweb Dec 2, 2019

faboweb Dec 2, 2019

Transaction styling #3181

Transaction styling #3181

Conversation

mariopino commented Nov 22, 2019

jbibla commented Nov 22, 2019

mariopino commented Nov 22, 2019

jbibla commented Nov 22, 2019 • edited Loading

codecov bot commented Nov 23, 2019 • edited Loading

Codecov Report

faboweb commented Nov 23, 2019

mariopino commented Nov 25, 2019

Choose a reason for hiding this comment

mariopino Nov 25, 2019 • 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

mariopino commented Nov 25, 2019

mariopino commented Nov 25, 2019

jbibla commented Nov 29, 2019

jbibla commented Nov 29, 2019

mariopino commented Nov 29, 2019

faboweb commented Nov 30, 2019

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

jbibla commented Nov 22, 2019 •

edited

Loading

codecov bot commented Nov 23, 2019 •

edited

Loading

mariopino Nov 25, 2019 •

edited

Loading