Added undelegation transactions to TabMyDelegation

CHANGELOG.md

@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added compatibility to Gaia/SDK version 0.28.0-rc2 @faboweb
 - [\#1673](https://github.com/cosmos/voyager/issues/1673) Documentation and single command to run one or all tests with fallback for end to end test @sabau
 - [\#1683](https://github.com/cosmos/voyager/issues/1683) Governance: block voting twice for the same option @sabau
+- [\#1387](https://github.com/cosmos/voyager/issues/1387) Staking: Added list of undelegation transactions @sabau
 - [\#1661](https://github.com/cosmos/voyager/issues/1661) Boot: multinode available for local-testnet @sabau
 - [\#1748](https://github.com/cosmos/voyager/issues/1748) display governance parameters on tab @fedekunze
 - [\#1660](https://github.com/cosmos/voyager/issues/1660) Add parameters and pool to store @fedekunze
@@ -85,6 +86,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1638](https://github.com/cosmos/voyager/issues/1638) removed account password from the state and now user has to input it on every transaction @fedekunze
 - [\#1655](https://github.com/cosmos/voyager/issues/1655) Text and Textarea fields trimmed @sabau
 - [\#1686](https://github.com/cosmos/voyager/issues/1686) Changed proposals from array to object @sabau
+- [\#1387](https://github.com/cosmos/voyager/issues/1387) Delegation: modifiers simplified, setUnbondingDelegations takes an array as input now as the name suggest and replace the current dictionary with a new one @sabau
 - [\#1626](https://github.com/cosmos/voyager/issues/1626) upgraded from raven to sentry/browser @jbibla
 - [\#1724](https://github.com/cosmos/voyager/issues/1724) set tabindex attribute to -1 for readonly denom on ModalProposals. tab navgiation now skips element @enyan94
 - [\#1277](https://github.com/cosmos/voyager/issues/1277) change name of VmToolBar to ToolBar, update all snapshots and import statements @coreycosman

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

@@ -175,12 +175,12 @@
       />
       <tm-modal v-if="showCannotModal" :close="closeCannotModal">
         <div slot="title">
-          Cannot {{ action == `delegate` ? `Delegate` : `Undelegate` }}
+          Cannot {{ action === `delegate` ? `Delegate` : `Undelegate` }}
         </div>
         <p>
           You have no {{ bondingDenom }}s
-          {{ action == `undelegate` ? ` delegated ` : ` ` }}to
-          {{ action == `delegate` ? ` delegate.` : ` this validator.` }}
+          {{ action === `undelegate` ? ` delegated ` : ` ` }}to
+          {{ action === `delegate` ? ` delegate.` : ` this validator.` }}
         </p>
         <div slot="footer">
           <tmBtn

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

@@ -1,6 +1,12 @@
 <template>
   <div>
     <div v-if="delegation.loaded && yourValidators.length > 0">
+      <h3 class="tab-header">
+        My active validators
+        <i v-tooltip.top="unbondInfo" class="material-icons info-button">
+          info_outline
+        </i>
+      </h3>
       <table-validators :validators="yourValidators" />
     </div>
     <tm-data-connecting v-if="!delegation.loaded && !connected" />
@@ -22,52 +28,95 @@
       <router-link :to="{ name: 'Validators' }">the validator list</router-link>
       to find other validators to delegate to.
     </div>
-    <div v-if="delegation.loaded && undelegatedValidators.length > 0">
-      <h3 class="tab-header">
-        Inactive Delegations
-        <i v-tooltip.top="unbondInfo" class="material-icons info-button"
-          >info_outline</i
+    <div v-if="delegation.loaded && unbondingTransactions.length > 0">
+      <h3 class="tab-header transactions">
+        Unbonding transactions
+        <i
+          v-tooltip.top="unbondTransactions"
+          class="material-icons info-button"
         >
+          info_outline
+        </i>
       </h3>
-      <table-validators :validators="undelegatedValidators" />
+      <div class="unbonding-transactions">
+        <template v-for="transaction in unbondingTransactions">
+          <tm-li-stake-transaction
+            :transaction="transaction"
+            :validators="yourValidators"
+            :bonding-denom="bondingDenom"
+            :key="transaction.hash"
+            :url="validatorURL"
+            :unbonding-time="
+              time.getUnbondingTime(
+                transaction,
+                delegation.unbondingDelegations
+              )
+            "
+          />
+        </template>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex"
+import TmLiStakeTransaction from "../transactions/TmLiStakeTransaction"
 import TmDataMsg from "common/TmDataMsg"
 import TmDataLoading from "common/TmDataLoading"
 import TableValidators from "staking/TableValidators"
 import TmDataConnecting from "common/TmDataConnecting"
+import time from "scripts/time"
 
 export default {
   name: `tab-my-delegations`,
-  components: { TableValidators, TmDataMsg, TmDataConnecting, TmDataLoading },
+  components: {
+    TableValidators,
+    TmDataMsg,
+    TmDataConnecting,
+    TmDataLoading,
+    TmLiStakeTransaction
+  },
   data: () => ({
     bondInfo: `Validators you are currently bonded to`,
-    unbondInfo: `Your bonded validators in unbonding process`
+    unbondInfo: `Your bonded validators in undelegation process`,
+    unbondTransactions: `The transactions currently in undelegation period`,
+    validatorURL: `/staking/validators`,
+    time
   }),
   computed: {
     ...mapGetters([
+      `allTransactions`,
       `delegates`,
       `delegation`,
       `committedDelegations`,
       `bondingDenom`,
       `connected`
     ]),
-    undelegatedValidators(
-      { delegates: { delegates }, delegation: { unbondingDelegations } } = this
-    ) {
-      return delegates.filter(
-        ({ operator_address }) => operator_address in unbondingDelegations
-      )
-    },
     yourValidators({ committedDelegations, delegates: { delegates } } = this) {
       return delegates.filter(
         ({ operator_address }) => operator_address in committedDelegations
       )
-    }
+    },
+    unbondingTransactions: ({ allTransactions, delegation } = this) =>
+      allTransactions
+        .filter(
+          transaction =>
+            // Checking the type of transaction
+            transaction.tx.value.msg[0].type === `cosmos-sdk/BeginUnbonding` &&
+            // getting the unbonding time and checking if it has passed already
+            time.getUnbondingTime(
+              transaction,
+              delegation.unbondingDelegations
+            ) >= Date.now()
+        )
+        .map(transaction => ({
+          ...transaction,
+          unbondingDelegation:
+            delegation.unbondingDelegations[
+              transaction.tx.value.msg[0].value.validator_addr
+            ]
+        }))
   }
 }
 </script>
@@ -78,6 +127,9 @@ export default {
   font-weight: 500;
   margin: 1rem 1rem 0 2rem;
 }
+.tab-header.transactions {
+  margin: 2rem 0 1rem 2rem;
+}
 
 .info-button {
   color: var(--link);
@@ -88,9 +140,24 @@ export default {
   border: 1px solid var(--bc-dim);
   border-radius: 0.25rem;
   font-size: var(--sm);
-  margin-bottom: 4rem;
   margin-left: 2rem;
   padding: 0.5rem;
   text-align: center;
 }
+
+.unbonding-transactions {
+  margin-left: 2rem;
+  counter-reset: transaction;
+}
+.unbonding-transactions .tm-li-tx {
+  counter-increment: transaction;
+}
+.unbonding-transactions .tm-li-tx::before {
+  content: counter(transaction);
+  position: absolute;
+  width: 2rem;
+  text-align: right;
+  color: var(--dim);
+  left: 0;
+}
 </style>

app/src/renderer/components/transactions/TmLiAnyTransaction.vue

@@ -1,9 +1,9 @@
-s<template>
+<template>
   <tm-li-bank-transaction
     v-if="bankTx"
     :transaction="transaction"
     :address="address"
-  ></tm-li-bank-transaction>
+  />
   <tm-li-stake-transaction
     v-else-if="stakingTx"
     :transaction="transaction"
@@ -12,20 +12,21 @@ s<template>
     :unbonding-time="unbondingTime"
     :bonding-denom="bondingDenom"
     @end-unbonding="$emit('end-unbonding')"
-  ></tm-li-stake-transaction>
+  />
   <tm-li-gov-transaction
     v-else-if="governanceTx"
     :transaction="transaction"
     :bonding-denom="bondingDenom"
     :url="proposalsUrl"
-  ></tm-li-gov-transaction>
+  />
   <tm-li-transaction
     v-else
     :color="colors.grey"
     :time="transaction.time"
     :block="transaction.height"
-    ><span slot="caption">Unknown Transaction Type</span></tm-li-transaction
   >
+    <span slot="caption">Unknown Transaction Type</span>
+  </tm-li-transaction>
 </template>
 
 <script>

app/src/renderer/components/transactions/TmLiGovTransaction.vue

@@ -24,7 +24,7 @@
       </div>
       <div slot="details">
         On&nbsp;
-        <router-link :to="URL + '/' + tx.proposal_id">
+        <router-link :to="url + '/' + tx.proposal_id">
           Proposal &#35;{{ tx.proposal_id }}
         </router-link>
       </div>
@@ -45,7 +45,7 @@ export default {
       type: Object,
       required: true
     },
-    URL: {
+    url: {
       type: String,
       required: true
     },

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

@@ -35,7 +35,9 @@
         :transaction="tx"
         :address="wallet.address"
         :bonding-denom="bondingDenom"
-        :unbonding-time="getUnbondingTime(tx)"
+        :unbonding-time="
+          time.getUnbondingTime(tx, delegation.unbondingDelegations)
+        "
       />
     </template>
   </tm-page>
@@ -56,6 +58,8 @@ import TmPage from "common/TmPage"
 import TmDataLoading from "common/TmDataLoading"
 import TmLiAnyTransaction from "transactions/TmLiAnyTransaction"
 import ToolBar from "common/ToolBar"
+import time from "scripts/time"
+
 export default {
   name: `page-transactions`,
   components: {
@@ -77,7 +81,8 @@ export default {
       order: `desc`
     },
     validatorURL: `/staking/validators`,
-    proposalsURL: `/governance/proposals`
+    proposalsURL: `/governance/proposals`,
+    time
   }),
   computed: {
     ...mapState([`transactions`]),
@@ -124,22 +129,6 @@ export default {
     refreshTransactions() {
       this.$store.dispatch(`getAllTxs`)
     },
-    getUnbondingTime(transaction) {
-      let copiedTransaction = JSON.parse(JSON.stringify(transaction))
-      let type = copiedTransaction.tx.value.msg[0].type
-      if (type === `cosmos-sdk/BeginUnbonding`) {
-        let tx = copiedTransaction.tx.value.msg[0].value
-        let unbondingDelegation = this.delegation.unbondingDelegations[
-          tx.validator_addr
-        ]
-        if (
-          unbondingDelegation &&
-          unbondingDelegation.creation_height ===
-            String(copiedTransaction.height)
-        )
-          return new Date(unbondingDelegation.min_time).getTime()
-      }
-    },
     setSearch(bool = !this.filters[`transactions`].search.visible) {
       if (!this.somethingToSearch) return false
       this.$store.commit(`setSearchVisible`, [`transactions`, bool])

app/src/renderer/scripts/time.js

@@ -0,0 +1,18 @@
+"use strict"
+
+const getUnbondingTime = ({ height, tx }, unbondingDelegations) => {
+  let { type, value } = tx.value.msg[0]
+  if (type === `cosmos-sdk/BeginUnbonding`) {
+    let unbondingDelegation = unbondingDelegations[value.validator_addr]
+    if (
+      unbondingDelegation &&
+      unbondingDelegation.creation_height === String(height)
+    ) {
+      return new Date(unbondingDelegation.min_time).getTime()
+    }
+  }
+  return NaN
+}
+module.exports = {
+  getUnbondingTime
+}