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
 
 ### Changed
 
@@ -81,6 +82,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
 

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" />
@@ -24,30 +30,58 @@
     </div>
     <div v-if="delegation.loaded && undelegatedValidators.length > 0">
       <h3 class="tab-header">
-        Inactive Delegations
+        Unbonding validators
         <i v-tooltip.top="unbondInfo" class="material-icons info-button"
           >info_outline</i
         >
       </h3>
       <table-validators :validators="undelegatedValidators" />
     </div>
+    <div v-if="delegation.loaded && undelegatedValidators.length > 0">
+      <h3 class="tab-header transactions">
+        Unbonding transactions
+        <i
+          v-tooltip.top="unbondTransactions"
+          class="material-icons info-button"
+        >
+          info_outline
+        </i>
+      </h3>
+      <template v-for="transaction in unbondingTransactions">
+        <tm-li-stake-transaction
+          :transaction="transaction"
+          :validators="undelegatedValidators"
+          :bonding-denom="bondingDenom"
+          :key="transaction.hash"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex"
-import { TmDataMsg, TmDataLoading } from "@tendermint/ui"
+import { mapGetters, mapState } from "vuex"
+import { TmDataMsg, TmDataLoading, TmLiStakeTransaction } from "@tendermint/ui"
 import TableValidators from "staking/TableValidators"
 import TmDataConnecting from "common/TmDataConnecting"
+import moment from "moment"
 
 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 unbonding process`,
+    unbondTransactions: `The transactions currently in unbonding period`
   }),
   computed: {
+    ...mapState([`transactions`]),
     ...mapGetters([
       `delegates`,
       `delegation`,
@@ -66,7 +100,23 @@ export default {
       return delegates.filter(
         ({ operator_address }) => operator_address in committedDelegations
       )
-    }
+    },
+    unbondingTransactions: ({ transactions, delegation } = this) =>
+      transactions.staking
+        .filter(
+          transaction =>
+            transaction.tx.value.msg[0].type === `cosmos-sdk/BeginUnbonding`
+        )
+        .map(transaction => ({
+          ...transaction,
+          unbondingDelegation:
+            delegation.unbondingDelegations[
+              transaction.tx.value.msg[0].value.validator_addr
+            ]
+        }))
+  },
+  methods: {
+    timeDiff: min_time => moment(min_time).fromNow()
   }
 }
 </script>
@@ -77,6 +127,9 @@ export default {
   font-weight: 500;
   margin: 1rem 1rem 0 2rem;
 }
+.tab-header.transactions {
+  margin: 2rem;
+}
 
 .info-button {
   color: var(--link);

app/src/renderer/vuex/modules/delegation.js

@@ -33,32 +33,28 @@ export default ({ node }) => {
       state.delegates = state.delegates.filter(c => c.id !== delegate)
     },
     setCommittedDelegation(state, { candidateId, value }) {
-      let committedDelegates = Object.assign({}, state.committedDelegates)
+      state.committedDelegates[candidateId] = value
       if (value === 0) {
-        delete committedDelegates[candidateId]
-      } else {
-        committedDelegates[candidateId] = value
+        delete state.committedDelegates[candidateId]
       }
-      state.committedDelegates = committedDelegates
     },
-    setUnbondingDelegations(
-      state,
-      { validator_addr, min_time, balance, creation_height }
-    ) {
-      let unbondingDelegations = Object.assign({}, state.unbondingDelegations)
-      if (balance.amount === 0) {
-        delete unbondingDelegations[validator_addr]
-      } else {
-        unbondingDelegations[validator_addr] = {
-          min_time,
-          balance,
-          creation_height
-        }
-      }
+    setUnbondingDelegations(state, unbondingDelegations) {
       state.unbondingDelegations = unbondingDelegations
+        ? unbondingDelegations
+            // building a dict from the array and taking out the transactions with amount 0
+            .reduce(
+              (dict, { validator_addr, ...delegation }) => ({
+                ...dict,
+                // filtering out the transactions with amount 0
+                ...(delegation.balance.amount > 0 && {
+                  [validator_addr]: delegation
+                })
+              }),
+              {}
+            )
+        : {}
     }
   }
-
   let actions = {
     reconnected({ state, dispatch }) {
       if (state.loading) {
@@ -82,11 +78,11 @@ export default ({ node }) => {
 
       try {
         let delegations = await node.getDelegations(address)
-        let unbonding_delegations = await node.getUndelegations(address)
+        let unbondingDelegations = await node.getUndelegations(address)
         let redelegations = await node.getRedelegations(address)
         let delegator = {
           delegations,
-          unbonding_delegations,
+          unbondingDelegations,
           redelegations
         }
         state.error = null
@@ -126,24 +122,7 @@ export default ({ node }) => {
             })
         })
 
-        if (delegator.unbonding_delegations) {
-          delegator.unbonding_delegations.forEach(ubd => {
-            commit(`setUnbondingDelegations`, ubd)
-          })
-        }
-        // delete undelegations not present anymore
-        Object.keys(state.unbondingDelegations).forEach(validatorAddr => {
-          if (
-            !delegator.unbonding_delegations ||
-            !delegator.unbonding_delegations.find(
-              ({ validator_addr }) => validator_addr === validatorAddr
-            )
-          )
-            commit(`setUnbondingDelegations`, {
-              validator_addr: validatorAddr,
-              balance: { amount: 0 }
-            })
-        })
+        commit(`setUnbondingDelegations`, unbondingDelegations)
       } catch (error) {
         commit(`notifyError`, {
           title: `Error fetching delegations`,

test/e2e/delegation.js

@@ -62,11 +62,13 @@ test(`delegation`, async function(t) {
   t.test(`Stake`, async t => {
     let totalAtoms = (await app.client
       .$(`.header-balance .total-atoms h2`)
-      .getText()).split(`.`)[0] // 130.000...
+      .getText()).split(`.`)[0] // 30.000...
     let unbondedAtoms = (await app.client
       .$(`.header-balance .unbonded-atoms h2`)
       .getText()).split(`.`)[0] // 30.000...
 
+    await t.equal(totalAtoms, `30`, `i have 30 Atoms`)
+    await t.equal(unbondedAtoms, `30`, `i have 30 unbbounded Atoms`)
     // Select the second validator.
     await app.client.click(`//*[. = 'local_2']`)
 
@@ -97,13 +99,13 @@ test(`delegation`, async function(t) {
     console.log(`Testing total balance`)
     await waitForText(
       () => app.client.$(`.header-balance .total-atoms h2`),
-      `${totalAtoms}.0000…`,
+      `${parseInt(totalAtoms) - 10}.0000…`,
       10 * 1000
     )
     console.log(`Testing unbonded balance`)
     await waitForText(
       () => app.client.$(`.header-balance .unbonded-atoms h2`),
-      `${unbondedAtoms - 10}.0000…`
+      `${parseInt(unbondedAtoms) - 10}.0000…`
     )
     await closeNotifications(app)
 

test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap

@@ -153,7 +153,7 @@ exports[`PageGovernance has the expected html structure 1`] = `
          Total STAKE
       </h3>
       <h2 class=\\"total-atoms__value\\">
-         1,351.0000…
+         1,337.0000…
       </h2>
 </div>
    <div class=\\"unbonded-atoms top-section\\">
@@ -213,7 +213,7 @@ exports[`PageGovernance has the expected html structure 1`] = `
             Total STAKE
          </h3>
          <h2 class=\\"total-atoms__value\\">
-            1,351.0000…
+            1,337.0000…
          </h2>
 </div>
       <div class=\\"unbonded-atoms top-section\\">

test/unit/specs/components/staking/TabMyDelegations.spec.js

@@ -1,6 +1,7 @@
 import setup from "../../../helpers/vuex-setup"
 import lcdClientMock from "renderer/connectors/lcdClientMock.js"
 import TabMyDelegations from "renderer/components/staking/TabMyDelegations"
+import moment from "moment"
 
 const delegates = lcdClientMock.candidates
 
@@ -50,7 +51,7 @@ describe(`Component: TabMyDelegations`, () => {
       }
     })
 
-    expect(instance.wrapper.html()).toContain(`Inactive Delegations`)
+    expect(instance.wrapper.html()).toContain(`Unbonding validators`)
     expect(instance.wrapper.vm.$el).toMatchSnapshot()
   })
 
@@ -132,6 +133,30 @@ describe(`Component: TabMyDelegations`, () => {
     ).toEqual([delegates[1], delegates[2]])
   })
 
+  it(`unbondingTransactions`, async () => {
+    const address = delegates[0].operator_address
+    const transactions = await lcdClientMock.getDelegatorTxs(
+      lcdClientMock.addresses[0]
+    )
+    expect(
+      TabMyDelegations.computed.unbondingTransactions({
+        delegation: {
+          unbondingDelegations: {
+            [address]: 1
+          }
+        },
+        transactions: { staking: transactions }
+      })
+    ).toHaveLength(1)
+  })
+
+  it(`should return the time diff`, () => {
+    const now = new Date()
+    expect(TabMyDelegations.methods.timeDiff(now)).toEqual(
+      moment(now).fromNow()
+    )
+  })
+
   it(`yourValidators`, () => {
     expect(
       TabMyDelegations.computed.yourValidators({

test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap

@@ -18,7 +18,7 @@ exports[`PageStaking has the expected html structure 1`] = `
          Total STAKE
       </h3>
       <h2 class=\\"total-atoms__value\\">
-         1,351.0000…
+         1,337.0000…
       </h2>
 </div>
    <div class=\\"unbonded-atoms top-section\\">
@@ -79,7 +79,7 @@ exports[`PageStaking has the expected html structure 1`] = `
             Total STAKE
          </h3>
          <h2 class=\\"total-atoms__value\\">
-            1,351.0000…
+            1,337.0000…
          </h2>
 </div>
       <div class=\\"unbonded-atoms top-section\\">