Fabo/1199 improve jank at start

CHANGELOG.md

@@ -25,7 +25,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 * use correct set of seed nodes @ƒaboweb
 * validator page showed incorrect voting power @faboweb
+* improves poor performance at start by throttling the updates of the cached store @faboweb
 * Run lint test in CI. @NodeGuy
+* current atoms in PageBond still showed old atoms right after staking @ƒaboweb
+* fix showing undefined for bonding denom in staking sucess message @faboweb
+* fix not showing a lock (I have stake with this one) on a validator if stake is less then 1 @faboweb
+* fix showing wrong error on pagebond validation @okwme
 
 ## [0.10.1] - 2018-08-29
 

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

@@ -12,7 +12,7 @@
   .li-delegate__value.status
     span {{ delegateType }}
   template(v-if="userCanDelegate")
-    .li-delegate__value.checkbox(v-if="yourVotes > 0")
+    .li-delegate__value.checkbox(v-if="committedDelegations[delegate.id]")
       i.material-icons lock
     .li-delegate__value.checkbox#remove-from-cart(v-else-if="inCart" @click='rm(delegate)')
       i.material-icons check_box

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

@@ -38,8 +38,8 @@ tm-page.page-bond(title="Staking")
       :class="bondGroupClass(delta(d.atoms, d.oldAtoms))")
       .bond-group__fields
         .bond-bar
-          label.bond-bar__label(v-if="!d.delegate.revoked") {{ d.delegate.moniker }}
-          label.bond-bar__label.revoked(v-if="d.delegate.revoked") {{ d.delegate.moniker }}
+          label.bond-bar__label(v-if="!d.delegate.revoked") {{ d.delegate.description.moniker }}
+          label.bond-bar__label.revoked(v-if="d.delegate.revoked") {{ d.delegate.description.moniker }}
           label.bond-bar__revoked(v-if="d.delegate.revoked") REVOKED
           .bond-bar__input
             .bond-bar-old__outer
@@ -72,7 +72,7 @@ tm-page.page-bond(title="Staking")
 
       tm-form-msg(:name="bondingDenom + 's'" type="required"
         v-if="!$v.fields.delegates.$each[index].atoms.required")
-      tm-form-msg(name="bondingDenom + 's'" type="numeric"
+      tm-form-msg(:name="bondingDenom + 's'" type="numeric"
         v-if="!$v.fields.delegates.$each[index].atoms.numeric")
 
     .bond-group.bond-group--unbonding(
@@ -232,7 +232,7 @@ export default {
           await this.$store.dispatch("submitDelegation", this.fields.delegates)
           this.$store.commit("notify", {
             title: "Successful Staking!",
-            body: `You have successfully staked your ${this.denom}s.`
+            body: `You have successfully staked your ${this.bondingDenom}s.`
           })
           this.$router.push("/staking")
         } catch (err) {

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

@@ -67,7 +67,8 @@ export default {
       "config",
       "user",
       "connected",
-      "bondingDenom"
+      "bondingDenom",
+      "keybase"
     ]),
     address() {
       return this.user.address
@@ -93,6 +94,7 @@ export default {
             v.small_moniker = v.description.moniker.toLowerCase()
             v.percent_of_vote = num.percent(v.voting_power / this.vpTotal)
             v.your_votes = this.num.prettyInt(this.committedDelegations[v.id])
+            v.keybase = this.keybase[v.description.identity]
             return v
           })
     },

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

@@ -53,11 +53,14 @@ export default {
     TmDataError
   },
   computed: {
-    ...mapGetters(["delegates", "config"]),
+    ...mapGetters(["delegates", "config", "keybase"]),
     validator() {
-      return this.delegates.delegates.find(
+      let validator = this.delegates.delegates.find(
         v => this.$route.params.validator === v.owner
       )
+      if (validator)
+        validator.keybase = this.keybase[validator.description.identity]
+      return validator
     },
     selfBond() {
       parseFloat(this.validator.tokens) -

app/src/renderer/vuex/getters.js

@@ -48,6 +48,7 @@ export const committedDelegations = state => state.delegation.committedDelegates
 export const delegates = state => state.delegates
 export const shoppingCart = state => state.delegation.delegates
 export const validators = state => state.validators.validators
+export const keybase = state => state.keybase.identities
 
 // govern
 export const proposals = state => state.proposals

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

@@ -1,5 +1,3 @@
-import axios from "axios"
-
 export default ({ node }) => {
   const emptyState = {
     delegates: [],
@@ -38,16 +36,6 @@ export default ({ node }) => {
       }
 
       state.delegates.push(delegate)
-    },
-    setKeybaseIdentity(
-      state,
-      { validatorOwner, avatarUrl, profileUrl, userName }
-    ) {
-      let validator = state.delegates.find(v => v.owner === validatorOwner)
-      if (!validator.keybase) validator.keybase = {}
-      validator.keybase.avatarUrl = avatarUrl
-      validator.keybase.profileUrl = profileUrl
-      validator.keybase.userName = userName
     }
   }
 
@@ -73,32 +61,9 @@ export default ({ node }) => {
 
       commit("setDelegates", candidates)
       commit("setDelegateLoading", false)
-      dispatch("updateValidatorAvatars")
+      dispatch("getKeybaseIdentities", candidates)
 
       return state.delegates
-    },
-    async updateValidatorAvatars({ state, commit }) {
-      return Promise.all(
-        state.delegates.map(async validator => {
-          if (validator.description.identity && !validator.keybase) {
-            let urlPrefix =
-              "https://keybase.io/_/api/1.0/user/lookup.json?key_suffix="
-            let fullUrl = urlPrefix + validator.description.identity
-            let json = await axios.get(fullUrl)
-            if (json.data.status.name === "OK") {
-              let user = json.data.them[0]
-              if (user && user.pictures && user.pictures.primary) {
-                commit("setKeybaseIdentity", {
-                  validatorOwner: validator.owner,
-                  avatarUrl: user.pictures.primary.url,
-                  userName: user.basics.username,
-                  profileUrl: "https://keybase.io/" + user.basics.username
-                })
-              }
-            }
-          }
-        })
-      )
     }
   }
 

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

@@ -147,15 +147,23 @@ export default ({ node }) => {
         begin_unbondings: unbond
       })
 
-      // usually I would just query the new state through the LCD but at this point we still get the old shares
-      dispatch("updateDelegates").then(() => {
-        for (let delegation of delegations) {
-          commit("setCommittedDelegation", {
-            candidateId: delegation.delegate.owner,
-            value: delegation.atoms
-          })
-        }
-      })
+      // (optimistic update) we update the atoms of the user before we get the new values from chain
+      let atomsDiff = delegations
+        // compare old and new delegations and diff against old atoms
+        .map(
+          delegation =>
+            state.committedDelegates[delegation.delegate.owner] -
+            delegation.atoms
+        )
+        .reduce((sum, diff) => sum + diff, 0)
+      commit("setAtoms", rootState.user.atoms + atomsDiff)
+
+      // we optimistically update the committed delegations
+      updateCommittedDelegations(delegations, commit)
+      // TODO usually I would just query the new state through the LCD and update the state with the result, but at this point we still get the old shares
+      dispatch("updateDelegates").then(() =>
+        updateCommittedDelegations(delegations, commit)
+      )
     }
   }
 
@@ -165,3 +173,12 @@ export default ({ node }) => {
     actions
   }
 }
+
+function updateCommittedDelegations(delegations, commit) {
+  for (let delegation of delegations) {
+    commit("setCommittedDelegation", {
+      candidateId: delegation.delegate.owner,
+      value: delegation.atoms
+    })
+  }
+}

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

@@ -12,5 +12,6 @@ export default opts => ({
   themes: require("./themes.js").default(opts),
   user: require("./user.js").default(opts),
   validators: require("./validators.js").default(opts),
-  wallet: require("./wallet.js").default(opts)
+  wallet: require("./wallet.js").default(opts),
+  keybase: require("./keybase.js").default(opts)
 })

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

@@ -0,0 +1,60 @@
+import axios from "axios"
+
+export default ({}) => {
+  const emptyState = {
+    identities: {},
+    loading: false
+  }
+  const state = JSON.parse(JSON.stringify(emptyState))
+
+  const mutations = {
+    setKeybaseIdentities(state, identities) {
+      identities.forEach(identity => {
+        state.identities[identity.keybaseId] = identity
+      })
+    }
+  }
+
+  const actions = {
+    async getKeybaseIdentity({ state }, keybaseId) {
+      if (!/.{16}/.test(keybaseId)) return // the keybase id is not correct
+      if (state.identities[keybaseId]) return // we already have this identity
+
+      let urlPrefix =
+        "https://keybase.io/_/api/1.0/user/lookup.json?key_suffix="
+      let fullUrl = urlPrefix + keybaseId
+      let json = await axios.get(fullUrl)
+      if (json.data.status.name === "OK") {
+        let user = json.data.them[0]
+        if (user && user.pictures && user.pictures.primary) {
+          return {
+            keybaseId,
+            avatarUrl: user.pictures.primary.url,
+            userName: user.basics.username,
+            profileUrl: "https://keybase.io/" + user.basics.username
+          }
+        }
+      }
+    },
+    async getKeybaseIdentities({ dispatch, commit }, validators) {
+      return Promise.all(
+        validators.map(async validator => {
+          if (validator.description.identity) {
+            return dispatch(
+              "getKeybaseIdentity",
+              validator.description.identity
+            )
+          }
+        })
+      ).then(identities => {
+        commit("setKeybaseIdentities", identities.filter(x => !!x))
+      })
+    }
+  }
+
+  return {
+    state,
+    actions,
+    mutations
+  }
+}

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

@@ -44,7 +44,11 @@ export default function({ node }) {
         rootState.wallet.zoneIds.unshift(header.chain_id)
       }
 
-      await dispatch("maybeUpdateValidators", header)
+      // updating the header is done even while the user is not logged in
+      // to prevent errors popping up from the LCD before the user is signed on, we skip updating validators before
+      // TODO identify why rest calls fail at this point
+      if (rootState.user.signedIn)
+        await dispatch("maybeUpdateValidators", header)
     },
     async reconnect({ commit }) {
       if (state.stopConnecting) return

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

@@ -106,7 +106,7 @@ export default ({ node }) => {
       let { address } = await node.getKey(account)
       state.address = address
 
-      commit("loadPersistedState", { password })
+      dispatch("loadPersistedState", { password })
       commit("setModalSession", false)
       dispatch("initializeWallet", address)
       dispatch("loadErrorCollection", account)

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

@@ -37,15 +37,6 @@ export default ({ node }) => {
     },
     setDenoms(state, denoms) {
       state.denoms = denoms
-    },
-    setTransactionTime(state, { blockHeight, blockMetaInfo }) {
-      state.history = state.history.map(t => {
-        if (t.height === blockHeight) {
-          // console.log("blockMetaInfo", blockMetaInfo)
-          t.time = blockMetaInfo && blockMetaInfo.header.time
-        }
-        return t
-      })
     }
   }
 
@@ -99,30 +90,20 @@ export default ({ node }) => {
       if (!res) return
 
       const uniqueTransactions = uniqBy(res, "hash")
-      commit("setWalletHistory", uniqueTransactions)
-
       await dispatch("enrichTransactions", uniqueTransactions)
+      commit("setWalletHistory", uniqueTransactions)
 
       commit("setHistoryLoading", false)
     },
     async enrichTransactions({ dispatch }, transactions) {
-      let blockHeights = []
-      transactions.forEach(t => {
-        if (!blockHeights.find(h => h === t.height)) {
-          blockHeights.push(t.height)
-        }
-      })
-      await Promise.all(
-        blockHeights.map(h => dispatch("queryTransactionTime", h))
+      transactions = await Promise.all(
+        transactions.map(async t => {
+          let blockMetaInfo = await dispatch("queryBlockInfo", t.height)
+          t.time = blockMetaInfo && blockMetaInfo.header.time
+          return t
+        })
       )
-    },
-    async queryTransactionTime({ commit, dispatch }, blockHeight) {
-      let blockMetaInfo = await dispatch("queryBlockInfo", blockHeight)
-      // console.log(
-      //   "received blockMetaInfo at height " + blockHeight,
-      //   blockMetaInfo
-      // )
-      commit("setTransactionTime", { blockHeight, blockMetaInfo })
+      return transactions
     },
     async loadDenoms({ commit }) {
       // read genesis.json to get default denoms