Billy/1053 balance header #1188

okwme · 2018-08-28T12:32:20Z

Description:
Added the new header style to the wallet balance page. Needed to make some updates to tendermint/cosmos-ui#62 as well.

Including:

settings / preferences in icon bar
back button icon is most left
"claim" link doesn't appear if there are no rewards
incorporates the new "copy to clipboard" proposal improve copy to clipboard ux #1174
- wasn't sure if my colors are right since the dims are done with opactiy settings and wanted to reuse the styles we have in our variables file.

Not sure if this should be merged into our develop branch or if we should be implementing all these larger layout changes into a single branch and then merge them all in at once for consistency in style.

Using the new header on other pages should follow this format in front of the menu slot:

tm-page
  template(slot="menu-body"): tm-balance(:unstakedAtoms="unstakedAtoms", totalRewards="100")
  div(slot="menu")
    vm-tool-bar
      a(@click='connected && updateBalances()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
        i.material-icons refresh
      a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
        i.material-icons search

Where unstakedAtoms, totalRewards & totalEarnings are strings that only show if they're truthy.

also update TmToolBar to consistent naming of VmToolBar do differentiate from the ui library TmToolBar

okwme · 2018-08-28T12:34:35Z

okwme · 2018-08-28T12:40:38Z

e2es failing at this screen:

locally they fail because localstorage isn't persisting for the introduction popup

okwme · 2018-08-28T12:44:20Z

locally on the develop branch my e2e is failing because:

panic: listen tcp 0.0.0.0:26656: bind: address already in use

@faboweb could this have to do with the new multiple validator testing setup?

on circleci the log says:

(node:731) [DEP0016] DeprecationWarning: 'root' is deprecated, use 'global'
Xlib:  extension "RANDR" missing on display ":99".
[731:0828/123843.711219:ERROR:bus.cc(395)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
[731:0828/123843.781245:ERROR:bus.cc(395)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
mainWindow opened
[731:0828/123843.788360:ERROR:bus.cc(395)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
Redirecting console output to logfile /home/circleci/project/testArtifacts/cli_home/main.log
Adding new peer: localhost

… into billy/1053-balance-header

codecov · 2018-08-28T13:03:31Z

Codecov Report

Merging #1188 into develop will increase coverage by 0.02%.
The diff coverage is 100%.

@@             Coverage Diff             @@
##           develop    #1188      +/-   ##
===========================================
+ Coverage    95.86%   95.89%   +0.02%     
===========================================
  Files           80       81       +1     
  Lines         1598     1608      +10     
  Branches        75       75              
===========================================
+ Hits          1532     1542      +10     
  Misses          60       60              
  Partials         6        6

Impacted Files	Coverage Δ
app/src/renderer/components/common/VmToolBar.vue	`100% <ø> (ø)`
...src/renderer/components/common/PagePreferences.vue	`100% <100%> (ø)`	⬆️
app/src/renderer/components/common/TmBalance.vue	`100% <100%> (ø)`
...pp/src/renderer/components/staking/PageStaking.vue	`100% <100%> (ø)`	⬆️
app/src/renderer/vuex/getters.js	`100% <100%> (ø)`	⬆️
app/src/renderer/components/wallet/PageWallet.vue	`94.73% <100%> (+0.14%)`	⬆️
app/src/renderer/components/staking/PageBond.vue	`100% <100%> (ø)`	⬆️
app/src/renderer/components/wallet/PageSend.vue	`100% <100%> (ø)`	⬆️
...rc/renderer/components/wallet/PageTransactions.vue	`100% <100%> (ø)`	⬆️

okwme · 2018-08-28T16:27:36Z

add config for disabling feature

faboweb · 2018-08-29T12:14:12Z

What does Vm stand for?

faboweb · 2018-08-29T12:15:30Z

app/src/renderer/components/common/TmBalance.vue

+          .h2 {{totalRewards}}
+          router-link(to="claim") Claim
+    .bottom
+      .address(@click="copy") {{address}}


Should this be it's own component?

is it used anywhere else?

Not yet. OK, we can extract it later.

faboweb · 2018-08-29T12:17:57Z

package.json

@@ -98,7 +98,7 @@
    "webpack-dev-server": "2.11.2"
  },
  "dependencies": {
-    "@tendermint/ui": "0.2.20",
+    "@tendermint/ui": "https://github.com/tendermint/ui.git#5493de3544dae62dfd8f8cc565076a2f161ce909",


Let's wait for a release to merge.

sounds good

faboweb · 2018-08-29T12:18:49Z

test/e2e/common.js

+    try {
+      await app.client.waitUntilTextExists(".tm-page-header-title", titleText)
+    } catch (error) {
+      console.log("failed trying to navigate to " + titleText)


Can you add a comment on why we need to check for errors here?

faboweb · 2018-08-29T12:20:20Z

test/unit/specs/components/common/__snapshots__/VmToolBar.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VmToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`;


Can we format the output to better readable?

faboweb · 2018-08-29T12:20:26Z

test/unit/specs/components/common/__snapshots__/TmBalance.spec.js.snap

+
+exports[`TmBalance has the expected html structure before adding props 1`] = `"<div class=\\"header-balance\\"><div class=\\"top\\"><img src=\\"~assets/images/cosmos-logo.png\\" class=\\"icon\\"><div class=\\"total-atoms\\"><div class=\\"h3\\">Total Steak</div><div class=\\"h2\\">321</div></div><!----><!----><!----></div><div class=\\"bottom\\"><div class=\\"address\\">useraddress16876876876876876786876876876876876</div><div class=\\"success\\"><i class=\\"material-icons\\">check</i><span>Copied</span></div></div></div>"`;
+
+exports[`TmBalance shows correct stats depending on props 1`] = `"<div class=\\"header-balance\\"><div class=\\"top\\"><img src=\\"~assets/images/cosmos-logo.png\\" class=\\"icon\\"><div class=\\"total-atoms\\"><div class=\\"h3\\">Total Steak</div><div class=\\"h2\\">321</div></div><div class=\\"unstaked-atoms\\"><div class=\\"h3\\">Unstaked Steak</div><div class=\\"h2\\">1337</div></div><div class=\\"total-earnings\\"><div class=\\"h3\\">Total Earnings</div><div class=\\"h2\\">1337</div></div><div class=\\"total-rewards\\"><div class=\\"h3\\">Total Rewards</div><div class=\\"group\\"><div class=\\"h2\\">1337</div><a href=\\"#/claim\\" class=\\"\\">Claim</a></div></div></div><div class=\\"bottom\\"><div class=\\"address\\">useraddress16876876876876876786876876876876876</div><div class=\\"success\\"><i class=\\"material-icons\\">check</i><span>Copied</span></div></div></div>"`;


Can we format the outputs to better readable?

okwme · 2018-08-29T13:21:38Z

@Fabo Vm was a quick voyager specific rename of Tm. Wanted to avoid the confusion between two TmToolBar components. Happy to edit all of them if we come up w a voyager-specific-version-of-Tendermin/ui naming convention. Any suggestions?

faboweb · 2018-08-29T16:51:43Z

Just V or no prefix? -> Not a blocker from my side.

faboweb · 2018-08-30T09:22:53Z

I will get npm publish rights soon ;)

…-header

okwme added 7 commits August 28, 2018 10:49

pause

7d81e36

tests and new ui version

64a11ef

new ui

87fb0fe

wont install

fc11c06

changelog

9fec1bd

update tests w new logic

7265164

icon swaps

02f0294

okwme requested review from faboweb, NodeGuy and nylira as code owners August 28, 2018 12:32

Merge branch 'develop' into billy/1053-balance-header

dd7f648

okwme mentioned this pull request Aug 28, 2018

Billy/new voyager header tendermint/cosmos-ui#62

Merged

okwme changed the title ~~Billy/1053 balance header~~ WIP: Billy/1053 balance header Aug 28, 2018

okwme added 2 commits August 28, 2018 15:03

add back advanced

c3ce67d

Merge branch 'billy/1053-balance-header' of github.com:cosmos/voyager…

b8a8d54

… into billy/1053-balance-header

okwme added 3 commits August 28, 2018 16:48

fix e2e

8646526

fix e2e

83b7536

fix unit

741fc90

okwme changed the title ~~WIP: Billy/1053 balance header~~ R4R: Billy/1053 balance header Aug 28, 2018

okwme mentioned this pull request Aug 28, 2018

Make feature branch for new ui #1190

Closed

okwme changed the title ~~R4R: Billy/1053 balance header~~ WIP: Billy/1053 balance header Aug 28, 2018

okwme added 2 commits August 29, 2018 12:53

devMode

98bb137

Merge branch 'develop' into billy/1053-balance-header

db4847d

okwme changed the title ~~WIP: Billy/1053 balance header~~ Billy/1053 balance header Aug 29, 2018

Update TmBalance.vue

9673c2f

okwme added 2 commits August 29, 2018 13:30

Update PageBond.vue

106bb16

snapshots

bfa31b7

faboweb reviewed Aug 29, 2018

View reviewed changes

okwme added 2 commits August 29, 2018 15:16

feedback

a8c521f

Merge branch 'develop' into billy/1053-balance-header

486b8b8

okwme added the blocked ✋ issues blocked by other implementations/issues label Aug 29, 2018

okwme and others added 3 commits September 4, 2018 15:24

Update package.json

923e5e3

updated tendermint/ui

389b608

Merge remote-tracking branch 'origin/develop' into billy/1053-balance…

600775e

…-header

faboweb removed the blocked ✋ issues blocked by other implementations/issues label Sep 4, 2018

okwme mentioned this pull request Sep 4, 2018

rename VmToolBar to ToolBar #1277

Closed

faboweb approved these changes Sep 4, 2018

View reviewed changes

faboweb merged commit a045903 into develop Sep 4, 2018

faboweb deleted the billy/1053-balance-header branch September 4, 2018 14:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Billy/1053 balance header #1188

Billy/1053 balance header #1188

okwme commented Aug 28, 2018 •

edited

Loading

okwme commented Aug 28, 2018

okwme commented Aug 28, 2018

okwme commented Aug 28, 2018

codecov bot commented Aug 28, 2018 •

edited

Loading

okwme commented Aug 28, 2018

faboweb commented Aug 29, 2018

faboweb Aug 29, 2018

okwme Aug 29, 2018

faboweb Aug 29, 2018

faboweb Aug 29, 2018

okwme Aug 29, 2018

faboweb Aug 29, 2018

faboweb Aug 29, 2018

faboweb Aug 29, 2018

okwme commented Aug 29, 2018

faboweb commented Aug 29, 2018 •

edited

Loading

faboweb commented Aug 30, 2018

		@@ -0,0 +1,3 @@
		// Jest Snapshot v1, https://goo.gl/fbAQLP

		exports[`VmToolBar has the expected html structure 1`] = `"<div class=\\"tm-tool-bar\\"><div class=\\"tm-tool-bar-container\\"><div class=\\"main\\"><a disabled=\\"disabled\\" class=\\"back\\"><i class=\\"material-icons\\">arrow_back</i></a><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a><a href=\\"#/preferences\\" class=\\"settings\\"><i class=\\"material-icons\\">settings</i></a><a id=\\"signOut-btn\\"><i class=\\"material-icons\\">exit_to_app</i></a></div></div></div>"`;


		exports[`TmBalance has the expected html structure before adding props 1`] = `"<div class=\\"header-balance\\"><div class=\\"top\\"><img src=\\"~assets/images/cosmos-logo.png\\" class=\\"icon\\"><div class=\\"total-atoms\\"><div class=\\"h3\\">Total Steak</div><div class=\\"h2\\">321</div></div><!----><!----><!----></div><div class=\\"bottom\\"><div class=\\"address\\">useraddress16876876876876876786876876876876876</div><div class=\\"success\\"><i class=\\"material-icons\\">check</i><span>Copied</span></div></div></div>"`;

		exports[`TmBalance shows correct stats depending on props 1`] = `"<div class=\\"header-balance\\"><div class=\\"top\\"><img src=\\"~assets/images/cosmos-logo.png\\" class=\\"icon\\"><div class=\\"total-atoms\\"><div class=\\"h3\\">Total Steak</div><div class=\\"h2\\">321</div></div><div class=\\"unstaked-atoms\\"><div class=\\"h3\\">Unstaked Steak</div><div class=\\"h2\\">1337</div></div><div class=\\"total-earnings\\"><div class=\\"h3\\">Total Earnings</div><div class=\\"h2\\">1337</div></div><div class=\\"total-rewards\\"><div class=\\"h3\\">Total Rewards</div><div class=\\"group\\"><div class=\\"h2\\">1337</div><a href=\\"#/claim\\" class=\\"\\">Claim</a></div></div></div><div class=\\"bottom\\"><div class=\\"address\\">useraddress16876876876876876786876876876876876</div><div class=\\"success\\"><i class=\\"material-icons\\">check</i><span>Copied</span></div></div></div>"`;

Billy/1053 balance header #1188

Billy/1053 balance header #1188

Conversation

okwme commented Aug 28, 2018 • edited Loading

okwme commented Aug 28, 2018

okwme commented Aug 28, 2018

okwme commented Aug 28, 2018

codecov bot commented Aug 28, 2018 • edited Loading

Codecov Report

okwme commented Aug 28, 2018

faboweb commented Aug 29, 2018

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

okwme commented Aug 29, 2018

faboweb commented Aug 29, 2018 • edited Loading

faboweb commented Aug 30, 2018

okwme commented Aug 28, 2018 •

edited

Loading

codecov bot commented Aug 28, 2018 •

edited

Loading

faboweb commented Aug 29, 2018 •

edited

Loading