Fabo/1171 Validator Profile (#1317)

* latest

* commented old content

* fixed bad class naming for li-validator

* latest

* minor style updates

* moved tabs into balance header and updated css

* changed the way validator status is displayed and continued with style changes

* show full pub key

* cha cha cha changelog

* added coverage for validator

* linted

* fixed typos

* updated snapshots regarding new header

* added data-title to staking page to fix e2e test

* updated snapshots

* incorporated feedback and updated validator mocks

* added test for revoked validators

CHANGELOG.md

@@ -18,10 +18,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 
 * Refactored Addressbook. @NodeGuy
-
-### Changed
-
 * Created new modal window for staking to a validator. @NodeGuy
+* Added new validator profile page @faboweb
+* cleaning up new validator profile page and balance header @jbibla
 
 ### Fixed
 

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

@@ -2,16 +2,16 @@
   .header-balance
     .top
       img.icon(src="~assets/images/cosmos-logo.png")
-      .total-atoms
+      .total-atoms.top-section
         .h3 Total {{bondingDenom}}
         .h2 {{num.pretty(totalAtoms) || "---"}}
-      .unstaked-atoms(v-if="unstakedAtoms")
+      .unstaked-atoms.top-section(v-if="unstakedAtoms")
         .h3 Unstaked {{bondingDenom}}
         .h2 {{unstakedAtoms}}
-      .total-earnings(v-if="totalEarnings")
+      .total-earnings.top-section(v-if="totalEarnings")
         .h3 Total Earnings
         .h2 {{totalEarnings}}
-      .total-rewards(v-if="totalRewards")
+      .total-rewards.top-section(v-if="totalRewards")
         .h3 Total Rewards
         .group
           .h2 {{totalRewards}}
@@ -21,6 +21,11 @@
       .success(:class="{showSuccess:showSuccess}")
         i.material-icons check
         span Copied
+    .tabs
+      .tab(v-for="(tab, i) in tabs",
+        :key="'tab-' + i",
+        :class="{'tab-selected': i === tabIndex}",
+        @click="tabIndex = 1") {{tab}}
 </template>
 <script>
 import num from "scripts/num"
@@ -31,10 +36,11 @@ export default {
   data() {
     return {
       num,
+      tabIndex: 1,
       showSuccess: false
     }
   },
-  props: ["unstakedAtoms", "totalEarnings", "totalRewards"],
+  props: ["unstakedAtoms", "totalEarnings", "totalRewards", "tabs"],
   computed: {
     ...mapGetters(["bondingDenom", "user", "totalAtoms"]),
     address() {
@@ -57,58 +63,67 @@ export default {
 
 .header-balance
   display flex
-  flex-grow: 1
-  flex-direction: column
+  flex-grow 1
+  flex-direction column
   align-items baseline
   padding-top 1rem
+
   .top
     display flex
-    flex-direction: row
+    flex-direction row
+
     > *
-      padding-right 1em
-      padding-left 1em
-      display flex
-      flex-direction column
-      border-right: var(--bc) 1px solid
-    > div:last-of-type {
+      border-right var(--bc-dim) 1px solid
+
+    > div:last-of-type
       border-right none
-    }
+
     .h3
-      font-size:14px;
+      font-size 14px
       color var(--txt)
+
     .h2
       font-size: h1
       color var(--bright)
+      font-weight 400
+
     .icon
-      width 29px * 2
-      height 29px * 2
+      width 60px
+      height 60px
       padding 0
-      border-right: none;
+      margin 0 1rem 0 2rem
+      border-right none
+
     .total-rewards .group
       display flex
       align-items baseline
       flex-direction: row
       a
         padding-left 10px
+
   .bottom
     display flex
-    align-items: flex-start;
-    padding-top:20px
-    padding-bottom:20px
+    align-items flex-start;
+    padding-top 1rem
+    padding-bottom 1.5rem
+
     .address
       font-size sm
-      padding-left: 29px * 2 + 10px
+      padding-left 142px
       color var(--dim)
       cursor pointer
+
       &:hover
         color var(--link)
+
     .success
       font-size sm
       display flex
-      align-items: flex-end;
+      align-items flex-end
       opacity 0
       transition opacity 500ms ease
       padding-left 10px
+
       &.showSuccess
         opacity 1
       i
@@ -117,4 +132,23 @@ export default {
         padding-bottom 2px
         color var(--success)
 
+.top-section
+  padding 0 2rem
+
+.tabs
+  display flex
+  margin 1rem 2rem 0
+
+  .tab
+    cursor pointer
+    margin 0 1rem
+    padding-bottom 1rem
+
+    &:first-of-type
+      cursor not-allowed
+      margin-left 0
+
+    &.tab-selected
+      color var(--bright)
+      border-bottom 2px solid var(--tertiary)
 </style>

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

@@ -42,3 +42,7 @@ export default {
   }
 }
 </script>
+<style lang="stylus">
+.tm-tool-bar-container a
+  margin-top 0 !important
+</style>

app/src/renderer/components/staking/LiDelegate.vue → app/src/renderer/components/staking/LiValidator.vue

@@ -1,45 +1,45 @@
 <template lang='pug'>
-.li-delegate(:class='styles'): .li-delegate__values
-  .li-delegate__value.name
+.li-validator(:class='styles'): .li-validator__values
+  .li-validator__value.name
     router-link(:to="{ name: 'validator', params: { validator: delegate.id }}")
       img.avatar(v-if="delegate.keybase" :src="delegate.keybase.avatarUrl" width="48" height="48")
       img.avatar(v-else src="~assets/images/validator-icon.svg" width="48" height="48")
       .vert
         .top {{ delegate.description.moniker }}
         .bottom {{ shortAddress(delegate.id)}}
-  .li-delegate__value.your-votes
+  .li-validator__value.your-votes
     span {{ yourVotes }}
-  .li-delegate__value.your-rewards
+  .li-validator__value.your-rewards
     span {{ yourRewards }}
-  .li-delegate__break: span
-  .li-delegate__value.percent_of_vote
+  .li-validator__break: span
+  .li-validator__value.percent_of_vote
     span {{ delegate.percent_of_vote }}
-  .li-delegate__value.uptime
+  .li-validator__value.uptime
     // add .green .yellow or .red class to this span to trigger inidication by color
     span {{ uptime }}
-  .li-delegate__value.commission
+  .li-validator__value.commission
     // add .green .yellow or .red class to this span to trigger inidication by color
     span {{ commission }}
-  .li-delegate__value.slashes
+  .li-validator__value.slashes
     // add .green .yellow or .red class to this span to trigger inidication by color
     span {{ slashes }}
   template(v-if="!disabled")
-    .li-delegate__value.checkbox(v-if="committedDelegations[delegate.id]")
+    .li-validator__value.checkbox(v-if="committedDelegations[delegate.id]")
       i.material-icons lock
-    .li-delegate__value.checkbox#remove-from-cart(v-else-if="inCart" @click='rm(delegate)')
+    .li-validator__value.checkbox#remove-from-cart(v-else-if="inCart" @click='rm(delegate)')
       i.material-icons check_box
-    .li-delegate__value.checkbox#add-to-cart(v-else @click='add(delegate)')
+    .li-validator__value.checkbox#add-to-cart(v-else @click='add(delegate)')
       i.material-icons check_box_outline_blank
   template(v-else)
-    .li-delegate__value
+    .li-validator__value
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import { shortAddress, calculateTokens } from "scripts/common"
 export default {
-  name: "li-delegate",
+  name: "li-validator",
   props: ["delegate", "disabled"],
   computed: {
     ...mapGetters([
@@ -73,8 +73,8 @@ export default {
     },
     styles() {
       let value = ""
-      if (this.inCart || this.yourVotes > 0) value += "li-delegate-active "
-      if (this.delegate.isValidator) value += "li-delegate-validator "
+      if (this.inCart || this.yourVotes > 0) value += "li-validator-active "
+      if (this.delegate.isValidator) value += "li-validator-validator "
       return value
     },
     inCart() {
@@ -103,29 +103,29 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.li-delegate
+.li-validator
   border 1px solid var(--bc)
   margin-bottom 1em
 
   &:nth-of-type(2n-1)
     background var(--app-fg)
 
-  &.li-delegate-active
+  &.li-validator-active
     background var(--app-bg-alpha)
 
-    .li-delegate__value i
+    .li-validator__value i
       color var(--link)
 
   &:hover
     background var(--hover-bg)
 
-.li-delegate__values
+.li-validator__values
   display flex
   height 5rem
   padding 12px 1em
   background-color var(--app-nav)
 
-  & > .li-delegate__value:not(:first-of-type) span
+  & > .li-validator__value:not(:first-of-type) span
     color var(--dim)
     background-color var(--white-fade-1)
     border 1px solid var(--white-fade-2)
@@ -153,7 +153,7 @@ export default {
       background-color var(--red-fade-1)
       border 1px solid var(--red-fade-2)
 
-.li-delegate__break
+.li-validator__break
   flex 0
   display flex
   align-items center
@@ -165,7 +165,7 @@ export default {
     background-color var(--white-fade-1)
     height 2rem
 
-.li-delegate__value
+.li-validator__value
   flex 1
   display flex
   align-items center
@@ -194,7 +194,7 @@ export default {
           font-size h6
           color var(--dim)
 
-    .li-delegate__icon
+    .li-validator__icon
       width 1.5rem
       display flex
       align-items center

app/src/renderer/components/staking/PageStaking.vue

@@ -1,24 +1,22 @@
 <template lang="pug">
-tm-page(title='Staking')
+tm-page(data-title="Staking", :title="config.devMode ? '' : 'Staking'")
+  template(slot="menu-body", v-if="config.devMode"): tm-balance(:unstakedAtoms="user.atoms" :tabs="tabs")
+
   div(slot="menu"): vm-tool-bar
     a(@click='connected && updateDelegates()' v-tooltip.bottom="'Refresh'" :disabled="!connected")
       i.material-icons refresh
     a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
       i.search.material-icons search
 
   modal-search(type="delegates" v-if="somethingToSearch")
-  .delegates-tabs
-    .tab(v-for="(tab, i) in tabs",
-      :key="'tab-' + i",
-      :class="{'tab-selected': i === tabIndex}",
-      @click="tabIndex = 1") {{tab}}
+
   .delegates-container
     tm-data-loading(v-if="delegates.loading && sortedFilteredEnrichedDelegates.length === 0")
     tm-data-empty(v-else-if="!delegates.loading && delegates.delegates.length === 0")
     data-empty-search(v-else-if="!delegates.loading && sortedFilteredEnrichedDelegates.length === 0")
     template(v-else)
       panel-sort(:sort='sort', :properties="properties")
-      li-delegate(v-for='i in sortedFilteredEnrichedDelegates' :disabled="!userCanDelegate" :key='i.id' :delegate='i')
+      li-validator(v-for='i in sortedFilteredEnrichedDelegates' :disabled="!userCanDelegate" :key='i.id' :delegate='i')
 
   .fixed-button-bar(v-if="!delegates.loading")
     template(v-if="userCanDelegate")
@@ -35,23 +33,25 @@ import { mapGetters } from "vuex"
 import num from "scripts/num"
 import { includes, orderBy } from "lodash"
 import Mousetrap from "mousetrap"
-import LiDelegate from "staking/LiDelegate"
+import LiValidator from "staking/LiValidator"
 import { TmBtn, TmPage, TmDataEmpty, TmDataLoading } from "@tendermint/ui"
 import DataEmptySearch from "common/TmDataEmptySearch"
 import { calculateTokens } from "scripts/common"
 import ModalSearch from "common/TmModalSearch"
 import PanelSort from "staking/PanelSort"
 import VmToolBar from "common/VmToolBar"
+import TmBalance from "common/TmBalance"
 export default {
   name: "page-staking",
   components: {
-    LiDelegate,
+    LiValidator,
     TmBtn,
     TmDataEmpty,
     DataEmptySearch,
     TmDataLoading,
     ModalSearch,
     TmPage,
+    TmBalance,
     PanelSort,
     VmToolBar
   },
@@ -213,22 +213,6 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.delegates-tabs
-  display flex
-
-  .tab
-    cursor pointer
-    margin 0 0.5em
-    padding-bottom 0.5em
-    margin-bottom 1em
-
-    &:first-of-type
-      cursor not-allowed
-
-    &.tab-selected
-      color var(--bright)
-      border-bottom 2px solid var(--tertiary)
-
 .delegates-container
   padding-bottom 3rem