Fabo/1294 undelegation modal

CHANGELOG.md

@@ -33,6 +33,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * Add commission and uptime to LiValidator @fedekunze
 * Delete old bonding page @fedekunze
 * `watch` script for running unit tests @faboweb @NodeGuy
+* added unstake modal @faboweb
+* `watch` script for running unit tests @faboweb @NodeGuy
 
 ### Changed
 

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

@@ -2,14 +2,14 @@
 li.li-validator(:class='styles')
   router-link(:to="{ name: 'validator', params: { validator: validator.id }}")
     .li-validator__value.name
-      span.validator-profile__status(v-tooltip.top="status")
+      span.validator-profile__status(v-bind:class="statusColor" v-tooltip.top="status")
       img.avatar(v-if="validator.keybase" :src="validator.keybase.avatarUrl" width="48" height="48")
       img.avatar(v-else src="~assets/images/validator-icon.svg" width="48" height="48")
       .vert
         .top {{ validator.description.moniker }}
         .bottom {{ shortAddress(validator.id)}}
     .li-validator__value.your-votes
-      span {{ yourVotes }}
+      span {{ yourVotes.isLessThan(0.01) && yourVotes.isGreaterThan(0) ? '< ' + num.pretty(0.01) : num.pretty(yourVotes) }}
     .li-validator__value.your-rewards
       span n/a
     .li-validator__break: span
@@ -29,6 +29,7 @@ li.li-validator(:class='styles')
 import { mapGetters } from "vuex"
 import num from "scripts/num"
 import { shortAddress, calculateTokens, ratToBigNumber } from "scripts/common"
+import BigNumber from "bignumber.js"
 export default {
   name: `li-validator`,
   props: [`validator`, `disabled`],
@@ -77,14 +78,12 @@ export default {
     //   } else return "0"
     // },
     yourVotes() {
-      return this.num.pretty(
-        this.committedDelegations[this.validator.id]
-          ? calculateTokens(
-              this.validator,
-              this.committedDelegations[this.validator.id]
-            ).toString()
-          : `0`
-      )
+      return this.committedDelegations[this.validator.id]
+        ? calculateTokens(
+            this.validator,
+            this.committedDelegations[this.validator.id]
+          )
+        : BigNumber(0)
     },
     styles() {
       let value = ``
@@ -124,18 +123,17 @@ export default {
 
       // status: validator
       return `This validator is actively validating`
+    },
+    statusColor() {
+      // status: jailed
+      if (this.validator.revoked) return `red`
+
+      // status: candidate
+      if (parseFloat(this.validator.voting_power) === 0) return `yellow`
+
+      // status: validator
+      return `green`
     }
-    // TODO enable once we decide on limits
-    // statusColor() {
-    //   // status: jailed
-    //   if (this.validator.revoked) return "red"
-    //
-    //   // status: candidate
-    //   if (parseFloat(this.validator.voting_power) === 0) return "yellow"
-    //
-    //   // status: validator
-    //   return "green"
-    // }
   },
   data: () => ({ num, shortAddress })
 }
@@ -279,7 +277,7 @@ ol li
   height 82px
 
 ol li:before
-  content counter(counter) ""
+  content counter(counter) ''
   color var(--dim)
   font-size sm
   position absolute

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

@@ -21,12 +21,18 @@ tm-page
             //- TODO replace with address component when ready
             anchor-copy.validator-profile__header__name__address(:value="validator.owner" :label="shortAddress(validator.owner)")
           .column.validator-profile__header__actions
-            tm-btn(value="Delegate" color="primary" @click.native="onDelegation()")#delegation-btn
-            tm-btn(v-if="config.devMode" value="Undelegate" color="secondary")#undelegation-btn
+            tm-btn#delegation-btn(value="Delegate" color="primary" @click.native="onDelegation")
+
+            tm-btn#undelegation-btn(
+              value="Undelegate"
+              color="secondary"
+              @click.native="onUndelegation"
+            )
+
         .row.validator-profile__header__data
           dl.colored_dl
             dt My Bonded {{bondingDenom}}
-            dd {{ myBond < 0.01 ? '< ' + 0.01 : pretty(myBond)}}
+            dd {{myBond.isLessThan(0.01) && myBond.isGreaterThan(0) ? '< ' + 0.01 : pretty(myBond)}}
           dl.colored_dl(v-if="config.devMode")
             dt My Rewards
             dd n/a
@@ -87,23 +93,56 @@ tm-page
       v-on:submitDelegation="submitDelegation"
       :bondingDenom="bondingDenom"
       :showDelegationModal.sync="showDelegationModal"
-      :fromOptions="modalOptions()"
+      :fromOptions="delegationTargetOptions()"
       :to="validator.owner"
     )
 
+    undelegation-modal(
+      v-if="showUndelegationModal"
+      v-on:submitUndelegation="submitUndelegation"
+      :maximum="myBond"
+      :to="this.wallet.address"
+    )
+
     tm-modal(:close="closeCannotDelegate" icon="warning" v-if="showCannotDelegate")
       div(slot='title') Cannot Complete Delegation
       p You have no {{ bondingDenom }}s to delegate.
       div(slot='footer')
-        tmBtn(id="no-atoms-modal__btn" @click.native="closeCannotDelegate()" value="OK")
+        tmBtn(
+          id="no-atoms-modal__btn"
+          @click.native="closeCannotDelegate"
+          value="OK"
+        )
+
+    tm-modal(
+      :close="closeCannotUndelegate"
+      icon="warning"
+      v-if="showCannotUndelegate"
+    )
+      div(slot='title') Cannot Complete Undelegation
+      p You have no {{ bondingDenom }}s delegated to this validator.
+      div(slot='footer')
+        tmBtn#no-bond-modal__btn(
+          @click.native="closeCannotUndelegate"
+          value="OK"
+        )
 </template>
 
 <script>
+import { calculateTokens } from "scripts/common"
 import { mapGetters } from "vuex"
-import { TmBtn, TmListItem, TmPage, TmPart, TmToolBar } from "@tendermint/ui"
+import {
+  TmBtn,
+  TmListItem,
+  TmPage,
+  TmPart,
+  TmToolBar,
+  TmModal
+} from "@tendermint/ui"
 import { TmDataError } from "common/TmDataError"
 import { shortAddress, ratToBigNumber } from "scripts/common"
 import DelegationModal from "staking/DelegationModal"
+import UndelegationModal from "staking/UndelegationModal"
 import numeral from "numeral"
 import AnchorCopy from "common/AnchorCopy"
 import TmBalance from "common/TmBalance"
@@ -113,9 +152,10 @@ export default {
   components: {
     AnchorCopy,
     DelegationModal,
+    UndelegationModal,
     TmBtn,
     TmListItem,
-    TmBalance,
+    TmModal,
     TmPage,
     TmPart,
     TmToolBar,
@@ -124,7 +164,9 @@ export default {
   },
   data: () => ({
     showCannotDelegate: false,
+    showCannotUndelegate: false,
     showDelegationModal: false,
+    showUndelegationModal: false,
     shortAddress,
     tabIndex: 1
   }),
@@ -155,7 +197,10 @@ export default {
         : 0
     },
     myBond() {
-      return this.delegation.committedDelegates[this.validator.owner] || 0
+      return calculateTokens(
+        this.validator,
+        this.committedDelegations[this.validator.owner] || 0
+      )
     },
     powerRatio() {
       return ratToBigNumber(this.validator.tokens)
@@ -204,13 +249,23 @@ export default {
     closeCannotDelegate() {
       this.showCannotDelegate = false
     },
+    closeCannotUndelegate() {
+      this.showCannotUndelegate = false
+    },
     onDelegation() {
       if (this.availableAtoms > 0) {
         this.showDelegationModal = true
       } else {
         this.showCannotDelegate = true
       }
     },
+    onUndelegation() {
+      if (this.myBond.isGreaterThan(0)) {
+        this.showUndelegationModal = true
+      } else {
+        this.showCannotUndelegate = true
+      }
+    },
     async submitDelegation({ amount, from }) {
       const delegatorAddr = this.wallet.address
       let stakingTransactions = {}
@@ -273,7 +328,45 @@ export default {
         }
       }
     },
-    modalOptions() {
+    async submitUndelegation({ amount }) {
+      try {
+        await this.$store.dispatch(`submitDelegation`, {
+          stakingTransactions: {
+            unbondings: [
+              {
+                atoms: -amount,
+                validator: this.validator
+              }
+            ]
+          }
+        })
+
+        this.$store.commit(`notify`, {
+          title: `Successful Undelegation!`,
+          body: `You have successfully undelegated ${amount} ${
+            this.bondingDenom
+          }s.`
+        })
+      } catch (exception) {
+        const { message } = exception
+        let errData = message.split(`\n`)[5]
+
+        if (errData) {
+          let parsedErr = errData.split(`"`)[1]
+
+          this.$store.commit(`notifyError`, {
+            title: `Error while undelegating ${this.bondingDenom}s`,
+            body: parsedErr[0].toUpperCase() + parsedErr.slice(1)
+          })
+        } else {
+          this.$store.commit(`notifyError`, {
+            title: `Error while undelegating ${this.bondingDenom}s`,
+            body: message
+          })
+        }
+      }
+    },
+    delegationTargetOptions() {
       //- First option should always be your wallet (i.e normal delegation)
       let myWallet = [
         {