Merge pull request #1188 from cosmos/billy/1053-balance-header

Billy/1053 balance header
luniehq · Sep 4, 2018 · a045903 · a045903
2 parents f8028d0 + 600775e
commit a045903
Show file tree

Hide file tree

Showing 35 changed files with 1,025 additions and 435 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 * added more information on validators page @faboweb
+* added new balance header for wallet @okwme
 * E2E environment for a multi validator setup @faboweb
 * added dev tools @okwme
 

diff --git a/app/src/renderer/components/common/PagePreferences.vue b/app/src/renderer/components/common/PagePreferences.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title="Preferences")
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
 
   tm-part(title='Settings')
     tm-list-item(type="field" title="Select network to connect to")
@@ -40,7 +40,7 @@ tm-page(title="Preferences")
 <script>
 import { mapGetters } from "vuex"
 import { TmListItem, TmBtn, TmPage, TmPart, TmField } from "@tendermint/ui"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 import TmModal from "common/TmModal"
 
 export default {
@@ -51,7 +51,7 @@ export default {
     TmListItem,
     TmPage,
     TmPart,
-    ToolBar,
+    VmToolBar,
     TmModal
   },
   computed: {

diff --git a/app/src/renderer/components/common/TmBalance.vue b/app/src/renderer/components/common/TmBalance.vue
@@ -0,0 +1,118 @@
+<template lang="pug">
+  .header-balance
+    .top
+      img.icon(src="~assets/images/cosmos-logo.png")
+      .total-atoms
+        .h3 Total {{bondingDenom}}
+        .h2 {{totalAtoms || "---"}}
+      .unstaked-atoms(v-if="unstakedAtoms")
+        .h3 Unstaked {{bondingDenom}}
+        .h2 {{unstakedAtoms}}
+      .total-earnings(v-if="totalEarnings")
+        .h3 Total Earnings
+        .h2 {{totalEarnings}}
+      .total-rewards(v-if="totalRewards")
+        .h3 Total Rewards
+        .group
+          .h2 {{totalRewards}}
+          router-link(to="claim") Claim
+    .bottom
+      .address(@click="copy") {{address}}
+      .success(:class="{showSuccess:showSuccess}")
+        i.material-icons check
+        span Copied
+</template>
+<script>
+import { clipboard } from "electron"
+import { mapGetters } from "vuex"
+export default {
+  name: "tm-balance",
+  data() {
+    return {
+      showSuccess: false
+    }
+  },
+  props: ["unstakedAtoms", "totalEarnings", "totalRewards"],
+  computed: {
+    ...mapGetters(["bondingDenom", "user", "totalAtoms"]),
+    address() {
+      return this.user.address
+    }
+  },
+  methods: {
+    copy() {
+      clipboard.writeText(this.user.address)
+      this.showSuccess = true
+      setTimeout(() => {
+        this.showSuccess = false
+      }, 3000)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+@import '~variables';
+
+.header-balance
+  display flex
+  flex-grow: 1
+  flex-direction: column
+  align-items baseline
+  padding-top 1rem
+  .top
+    display flex
+    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 none
+    }
+    .h3
+      font-size:14px;
+      color var(--txt)
+    .h2
+      font-size: h1
+      color var(--bright)
+    .icon
+      width 29px * 2
+      height 29px * 2
+      padding 0
+      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
+    .address
+      font-size sm
+      padding-left: 29px * 2 + 10px
+      color var(--dim)
+      cursor pointer
+      &:hover
+        color var(--link)
+    .success
+      font-size sm
+      display flex
+      align-items: flex-end;
+      opacity 0
+      transition opacity 500ms ease
+      padding-left 10px
+      &.showSuccess
+        opacity 1
+      i
+        font-size m
+        padding-right 0
+        padding-bottom 2px
+        color var(--success)
+
+</style>
diff --git a/.../renderer/components/common/TmToolBar.vue → .../renderer/components/common/VmToolBar.vue b/.../renderer/components/common/TmToolBar.vue → .../renderer/components/common/VmToolBar.vue
@@ -1,10 +1,12 @@
 <template lang="pug">
   tm-tool-bar
-    slot
     a.back(@click="back" :disabled="user.history.length === 0" v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
+    slot
     a.help(@click="enableModalHelp" v-tooltip.bottom="'Help'")
       i.material-icons help_outline
+    router-link.settings(to="/preferences" v-tooltip.bottom="'Preferences'")
+      i.material-icons settings
     a#signOut-btn(@click="signOut" v-tooltip.bottom.end="'Sign Out'")
       i.material-icons exit_to_app
 </template>

diff --git a/app/src/renderer/components/govern/PageProposal.vue b/app/src/renderer/components/govern/PageProposal.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(:title='proposal.title')
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     a(@click="commentOnProposal(proposal.id)"): i.material-icons comment
     a(@click="proposalIsSpam(proposal.id)"): i.material-icons error
 
@@ -31,7 +31,7 @@ import { mapGetters } from "vuex"
 import { TmBtn, TmFormStruct, TmPage, TmPart } from "@tendermint/ui"
 import FieldVote from "common/TmFieldVote"
 import TextBlock from "common/TextBlock"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposal",
   components: {
@@ -41,7 +41,7 @@ export default {
     TmPage,
     TmPart,
     TextBlock,
-    ToolBar
+    VmToolBar
   },
   computed: {
     ...mapGetters(["proposals"]),

diff --git a/app/src/renderer/components/govern/PageProposals.vue b/app/src/renderer/components/govern/PageProposals.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title='Proposals')
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'New Proposal'")
       i.material-icons add
     a(@click='setSearch()' v-tooltip.bottom="'Search'" :disabled="!somethingToSearch")
@@ -24,7 +24,7 @@ import Mousetrap from "mousetrap"
 import DataEmptySearch from "common/TmDataEmptySearch"
 import LiProposal from "govern/LiProposal"
 import ModalSearch from "common/TmModalSearch"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 import { TmPage, TmDataEmpty, TmDataLoading } from "@tendermint/ui"
 export default {
   name: "page-proposals",
@@ -35,7 +35,7 @@ export default {
     LiProposal,
     ModalSearch,
     TmPage,
-    ToolBar
+    VmToolBar
   },
   computed: {
     ...mapGetters(["proposals", "filters"]),

diff --git a/app/src/renderer/components/govern/PageProposalsNew.vue b/app/src/renderer/components/govern/PageProposalsNew.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title='New Proposal')
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   tm-part(title='Choose a Type')
@@ -14,7 +14,7 @@ tm-page(title='New Proposal')
 <script>
 import { mapGetters } from "vuex"
 import { TmListItem, TmPage, TmPart } from "@tendermint/ui"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposals-new",
   computed: {
@@ -24,7 +24,7 @@ export default {
     TmListItem,
     TmPage,
     TmPart,
-    ToolBar
+    VmToolBar
   }
 }
 </script>
diff --git a/app/src/renderer/components/govern/PageProposalsNewAdjust.vue b/app/src/renderer/components/govern/PageProposalsNewAdjust.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title="Proposal: Adjust Parameters")
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   tm-form-struct(:submit="onSubmit")
@@ -41,7 +41,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposals-new-adjust",
   components: {
@@ -51,7 +51,7 @@ export default {
     TmFormMsg,
     TmFormStruct,
     TmPage,
-    ToolBar
+    VmToolBar
   },
   data: () => ({
     titleMinLength: 10,

diff --git a/app/src/renderer/components/govern/PageProposalsNewAmend.vue b/app/src/renderer/components/govern/PageProposalsNewAmend.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title="Proposal: Amend Constitution")
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   tm-form-struct(:submit="onSubmit")
@@ -41,7 +41,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposals-new-amend",
   components: {
@@ -51,7 +51,7 @@ export default {
     TmFormMsg,
     TmFormStruct,
     TmPage,
-    ToolBar
+    VmToolBar
   },
   data: () => ({
     titleMinLength: 10,

diff --git a/app/src/renderer/components/govern/PageProposalsNewCreate.vue b/app/src/renderer/components/govern/PageProposalsNewCreate.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(:title="`Proposal: Create ${bondingDenom}s`")
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   tm-form-struct(:submit="onSubmit")
@@ -42,7 +42,7 @@ import {
   TmField,
   TmFormMsg
 } from "@tendermint/ui"
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposals-new-create",
   components: {
@@ -52,7 +52,7 @@ export default {
     TmFormMsg,
     TmFormStruct,
     TmPage,
-    ToolBar
+    VmToolBar
   },
   data: () => ({
     titleMinLength: 10,

diff --git a/app/src/renderer/components/govern/PageProposalsNewText.vue b/app/src/renderer/components/govern/PageProposalsNewText.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title="Proposal: Freeform Text")
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   tm-form-struct(:submit="onSubmit")
@@ -42,7 +42,7 @@ import {
   TmFormMsg
 } from "@tendermint/ui"
 
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposals-text",
   components: {
@@ -52,7 +52,7 @@ export default {
     TmFormMsg,
     TmFormStruct,
     TmPage,
-    ToolBar
+    VmToolBar
   },
   data: () => ({
     titleMinLength: 10,

diff --git a/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue b/app/src/renderer/components/govern/PageProposalsNewUpgrade.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 tm-page(title="Proposal: Upgrade Code")
-  div(slot="menu"): tool-bar
+  div(slot="menu"): vm-tool-bar
     router-link(to="/proposals/new" exact v-tooltip.bottom="'Back'")
       i.material-icons arrow_back
   tm-form-struct(:submit="onSubmit")
@@ -42,7 +42,7 @@ import {
   TmFormMsg
 } from "@tendermint/ui"
 
-import ToolBar from "common/TmToolBar"
+import VmToolBar from "common/VmToolBar"
 export default {
   name: "page-proposals-new-upgrade",
   components: {
@@ -52,7 +52,7 @@ export default {
     TmFormMsg,
     TmFormStruct,
     TmPage,
-    ToolBar
+    VmToolBar
   },
   data: () => ({
     titleMinLength: 10,