Merge pull request #1068 from cosmos/fedekunze/1010-lcd-stake

Fedekunze/1010 lcd stake

CHANGELOG.md

@@ -14,11 +14,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * removed light theme option from preferences page @jolesbi
 * enabled staked balance on PageWallet in production @faboweb
 * removed unused xmlhttprequest dependency @faboweb
+* LCD staking endpoints @fedekunze @faboweb
 
 ### Added
 
 * storing balance, tx history and delegations locally to serve an old state faster @faboweb
 * added error message for missing network config @faboweb
+* showing staking txs in history @faboweb
 
 ### Fixed
 

README.md

@@ -182,7 +182,7 @@ $ sed -i.bak 's/seeds = ""/seeds = "localhost"/g' ./builds/testnets/local-testne
 Activate TX indexing in your local node:
 
 ```bash
-$ sed -i.bak 's/index_all_tags = true/index_all_tags = false/g' ./builds/testnets/local-testnet/config.toml
+$ sed -i.bak 's/index_all_tags = false/index_all_tags = true/g'  ~/.gaiad-testnet/config/config.toml
 ```
 
 Store the gaia version used in your local testnet:

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

@@ -44,6 +44,7 @@ export default {
         document.documentElement.clientWidth,
         window.innerWidth || 0
       )
+
       if (w >= 1024) {
         this.close()
         this.$store.commit("setConfigDesktop", true)
@@ -65,6 +66,7 @@ export default {
 
 #app-header
   z-index z(appHeader)
+
   .container
     -webkit-app-region drag
 
@@ -85,7 +87,6 @@ export default {
     top 0
     left 0
     width 100%
-
     background var(--app-bg)
 
     > .container
@@ -103,7 +104,6 @@ export default {
       align-items center
       justify-content center
       padding 0 1rem
-
       color var(--link)
       cursor pointer
 
@@ -131,6 +131,7 @@ export default {
       border-bottom px solid var(--bc)
       padding 2.5rem 1rem 1rem 1rem
       line-height normal
+
       img
         height 1.75rem
 </style>

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

@@ -152,15 +152,17 @@ export default {
     ToolBar
   },
   computed: {
-    ...mapGetters(["shoppingCart", "user", "committedDelegations", "config"]),
+    ...mapGetters(["shoppingCart", "user", "delegation", "config"]),
     denom() {
       return this.config.bondingDenom.toUpperCase()
     },
     totalAtoms() {
-      return parseInt(this.user.atoms) + this.oldBondedAtoms
+      return (
+        parseInt(this.user.atoms) + this.oldBondedAtoms + this.oldUnbondingAtoms
+      )
     },
     oldBondedAtoms() {
-      return Object.values(this.committedDelegations).reduce(
+      return Object.values(this.delegation.committedDelegates).reduce(
         (sum, d) => sum + parseInt(d),
         0
       )
@@ -177,14 +179,22 @@ export default {
         return atoms
       }, this.oldUnbondedAtoms)
     },
+    oldUnbondingAtoms() {
+      return Object.values(this.delegation.unbondingDelegations).reduce(
+        (atoms, value) => {
+          return atoms + value
+        },
+        0
+      )
+    },
     newUnbondingAtoms() {
       return this.fields.delegates.reduce((atoms, d) => {
         let delta = d.oldAtoms - d.atoms
         if (delta > 0) {
           return atoms + delta
         }
         return atoms
-      }, 0)
+      }, this.oldUnbondingAtoms)
     },
     newUnbondingAtomsDelta() {
       return this.delta(this.newUnbondingAtoms, 0)
@@ -247,7 +257,7 @@ export default {
       }
     },
     resetFields() {
-      let committedDelegations = this.committedDelegations
+      let committedDelegations = this.delegation.committedDelegates
       let totalAtoms = this.totalAtoms
       this.fields.bondConfirm = false
       this.fields.delegates = this.shoppingCart.map(c =>

app/src/renderer/components/wallet/PageTransactions.vue

@@ -9,14 +9,19 @@ tm-page(title='Transactions')
   modal-search(type="transactions" v-if="somethingToSearch")
 
   tm-data-loading(v-if="wallet.historyLoading")
-  data-empty-tx(v-else-if='transactions.length === 0')
+  data-empty-tx(v-else-if='allTransactions.length === 0')
   data-empty-search(v-else-if="filteredTransactions.length === 0")
-  tm-li-transaction(
-    v-else
-    v-for="i in filteredTransactions"
-    :key="shortid.generate()"
-    :transaction="i"
-    :address="wallet.address")
+  template(v-else v-for="i in filteredTransactions")
+    tm-li-transaction(
+      v-if="i.type === 'wallet'"
+      :key="shortid.generate()"
+      :transaction="i"
+      :address="wallet.address")
+    tm-li-staking-transaction(
+      v-if="i.type === 'staking'"
+      :key="shortid.generate()"
+      :transaction="i"
+      :address="wallet.address")
 </template>
 
 <script>
@@ -27,12 +32,15 @@ import Mousetrap from "mousetrap"
 import DataEmptySearch from "common/TmDataEmptySearch"
 import DataEmptyTx from "common/TmDataEmptyTx"
 import ModalSearch from "common/TmModalSearch"
-import { TmPage, TmDataLoading, TmLiTransaction } from "@tendermint/ui"
+import { TmPage, TmDataLoading } from "@tendermint/ui"
+import TmLiTransaction from "./TmLiTransaction"
+import TmLiStakingTransaction from "./TmLiStakingTransaction"
 import ToolBar from "common/TmToolBar"
 export default {
   name: "page-transactions",
   components: {
     TmLiTransaction,
+    TmLiStakingTransaction,
     TmDataLoading,
     DataEmptySearch,
     DataEmptyTx,
@@ -41,12 +49,37 @@ export default {
     ToolBar
   },
   computed: {
-    ...mapGetters(["filters", "transactions", "wallet", "config"]),
+    ...mapGetters([
+      "filters",
+      "transactions",
+      "wallet",
+      "config",
+      "delegation"
+    ]),
     somethingToSearch() {
-      return !this.wallet.historyLoading && !!this.transactions.length
+      return !this.wallet.historyLoading && !!this.allTransactions.length
+    },
+    allTransactions() {
+      return [].concat(
+        this.transactions.map(t => {
+          t.type = "wallet"
+          return t
+        }),
+        this.delegation.delegationTxs.map(t => {
+          t.type = "staking"
+          return t
+        })
+      )
     },
     orderedTransactions() {
-      return orderBy(this.transactions, [this.sort.property], [this.sort.order])
+      return orderBy(
+        this.allTransactions.map(t => {
+          t.height = parseInt(t.height)
+          return t // TODO what happens if block height is bigger then int?
+        }),
+        [this.sort.property],
+        [this.sort.order]
+      )
     },
     filteredTransactions() {
       let query = this.filters.transactions.search.query
@@ -70,6 +103,7 @@ export default {
   methods: {
     refreshTransactions() {
       this.$store.dispatch("queryWalletHistory")
+      this.$store.dispatch("getDelegationTxs")
     },
     setSearch(bool = !this.filters["transactions"].search.visible) {
       if (!this.somethingToSearch) return false
@@ -79,6 +113,7 @@ export default {
   mounted() {
     Mousetrap.bind(["command+f", "ctrl+f"], () => this.setSearch(true))
     Mousetrap.bind("esc", () => this.setSearch(false))
+    this.refreshTransactions()
   }
 }
 </script>

app/src/renderer/components/wallet/TmLiStakingTransaction.vue

@@ -0,0 +1,160 @@
+<template lang='pug'>
+.tm-li-tx(v-if="type === 'cosmos-sdk/MsgDelegate'" @click="() => devMode && viewTransaction()")
+  .tx-icon: i.material-icons remove_circle
+  .tx-container
+    .tx-element.tx-coins
+      .tx-coin
+        .key {{ tx.delegation.denom.toUpperCase() }}
+        .value {{ pretty(tx.delegation.amount) }}
+    div
+      .tx-element.tx-date(v-if="devMode") {{ date }}
+      .tx-element.tx-address Staked to {{ tx.validator_addr }}
+
+.tm-li-tx.tm-li-tx-sent(v-else-if="type === 'cosmos-sdk/BeginUnbonding'" @click="() => devMode && viewTransaction()")
+  .tx-icon: i.material-icons add_circle
+  .tx-container
+    .tx-element.tx-coins
+      .tx-coin
+        .key STEAK
+        .value {{ pretty(tx.shares_amount) }}
+    div
+      .tx-element.tx-date(v-if="devMode") {{ date }}
+      .tx-element.tx-address Started unbonding from {{ tx.validator_addr }}
+</template>
+
+<script>
+import moment from "moment"
+import numeral from "numeral"
+
+export default {
+  name: "tm-li-staking-transaction",
+  computed: {
+    tx() {
+      return this.transaction.tx.value.msg[0].value
+    },
+    type() {
+      return this.transaction.tx.value.msg[0].type
+    },
+    date() {
+      try {
+        return moment(this.transaction.time).format("MMMM Do YYYY, h:mm:ss a")
+      } catch (error) {
+        return null
+      }
+    }
+  },
+  data: () => ({
+    devMode:
+      process.env.PREVIEW !== undefined
+        ? JSON.parse(process.env.PREVIEW)
+        : process.env.NODE_ENV === "development"
+  }),
+  methods: {
+    pretty(num) {
+      return numeral(num).format("0,0.00")
+    },
+    viewTransaction() {
+      // console.log("TODO: implement tx viewer")
+    }
+  },
+  props: {
+    transaction: {},
+    address: null
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '~variables'
+
+.tm-li-tx
+  display flex
+  font-size sm
+  border-bottom 1px solid var(--bc-dim)
+
+  &:nth-of-type(2n-1)
+    background var(--app-fg)
+
+  .tx-icon
+    padding 0 0.5rem
+    background var(--app-fg)
+    display flex
+    align-items center
+    justify-content center
+
+  .tx-container
+    flex-direction column
+    flex-wrap nowrap
+    padding 0.5rem 0
+    margin 0.5rem 0
+    display flex
+    width 100%
+    min-width 0 // fix text-overflow
+
+  .tx-element
+    padding 0 2rem 0 1.5rem
+    line-height 1.5rem
+
+  .tx-coin
+    .value
+      flex 0 0 100%
+      font-size sm
+      color var(--dim)
+
+      &:before
+        content ''
+        display inline
+
+    .key
+      font-weight 500
+      font-size m
+
+    .value, .key
+      line-height 1.5rem
+
+  .tx-address
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+    color var(--dim)
+    font-size sm
+
+  &.tm-li-tx-sent
+    .tx-coin .value
+      &:before
+        content '-'
+
+  &.tm-li-tx-received
+    .tx-icon
+      background var(--app-fg)
+
+    .tx-coin .value
+      color success
+
+      &:before
+        content '+'
+
+  &:hover
+    cursor pointer
+    background var(--hover-bg)
+
+@media screen and (min-width: 700px)
+  .tm-li-tx
+    font-size 0.875rem
+
+    .tx-container
+      flex-direction row
+
+      .tx-coins
+        flex 0 0 9rem
+        padding 0
+        min-width 0
+
+        .tx-coin
+          padding 0 1.5rem 0
+
+          .key
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+</style>