Fabo/1809 update header on send

CHANGELOG.md

@@ -148,6 +148,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1572](https://github.com/cosmos/voyager/issues/1572) Fixed scroll bug when switching between tabs @jbibla
 - [\#1749](https://github.com/cosmos/voyager/issues/1749) Fixed proposal tally update after voting @fedekunze
 - [\#1765](https://github.com/cosmos/voyager/pull/1765) Fixed proposal deposit update after submitting a deposit @fedekunze
+- [\#1791](https://github.com/cosmos/voyager/issue/1791) Fixed a problem with initializing the Voyager config dir @faboweb
+- [\#1815](https://github.com/cosmos/voyager/issue/1815) Fixed getters for proposals denominator, reverted to 945803d586b83d65547cd16f4cd5994eac2957ea until interfaces are ready @sabau
+- [\#1809](https://github.com/cosmos/voyager/issue/1809) Fixed optimistically updating the header on sending @faboweb
 - [\#1791](https://github.com/cosmos/voyager/pull/1791) Fixed a problem with initializing the Voyager config dir @faboweb
 - [\#1707](https://github.com/cosmos/voyager/issues/1707) Governance txs are now disabled if the user doesn't hold any min_deposit token @fedekunze
 - [\#1815](https://github.com/cosmos/voyager/pull/1815) Fixed getters for proposals denominator, reverted to 945803d586b83d65547cd16f4cd5994eac2957ea until interfaces are ready @sabau

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

@@ -51,12 +51,12 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([`user`, `totalAtoms`, `bondDenom`]),
+    ...mapGetters([`user`, `liquidAtoms`, `totalAtoms`, `bondDenom`]),
     address() {
       return this.user.address
     },
     unbondedAtoms() {
-      return this.num.shortNumber(this.user.atoms)
+      return this.num.shortNumber(this.liquidAtoms)
     }
   }
 }

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

@@ -250,8 +250,7 @@ export default {
       `committedDelegations`,
       `config`,
       `keybase`,
-      `oldBondedAtoms`,
-      `totalAtoms`,
+      `liquidAtoms`,
       `wallet`,
       `connected`
     ]),
@@ -312,9 +311,6 @@ export default {
 
       // status: active
       return `green`
-    },
-    availableAtoms() {
-      return this.totalAtoms - this.oldBondedAtoms
     }
   },
   watch: {
@@ -332,7 +328,7 @@ export default {
     },
     onDelegation() {
       this.action = `delegate`
-      if (this.availableAtoms > 0) {
+      if (this.liquidAtoms > 0) {
         this.showDelegationModal = true
       } else {
         this.showCannotModal = true
@@ -415,7 +411,7 @@ export default {
       let myWallet = [
         {
           address: this.wallet.address,
-          maximum: Math.floor(this.totalAtoms - this.oldBondedAtoms),
+          maximum: Math.floor(this.liquidAtoms),
           key: `My Wallet - ${shortAddress(this.wallet.address, 20)}`,
           value: 0
         }

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

@@ -61,6 +61,7 @@ export default {
       `committedDelegations`,
       `config`,
       `user`,
+      `liquidAtoms`,
       `connected`,
       `bondDenom`,
       `keybase`
@@ -110,7 +111,7 @@ export default {
       }
     },
     userCanDelegate() {
-      return this.user.atoms > 0 && this.delegation.loaded
+      return this.liquidAtoms > 0 && this.delegation.loaded
     },
     properties() {
       return [

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

@@ -237,11 +237,12 @@ export default {
       let denom = this.fields.denom
       try {
         let type = `send`
-        await this.sendTx({
+        await this.sendCoins({
           type,
           password: this.fields.password,
-          to: address,
-          amount: [{ denom, amount: amount.toString() }]
+          receiver: address,
+          denom,
+          amount
         })
         this.sending = false
         this.$store.commit(`notify`, {
@@ -271,7 +272,7 @@ export default {
         return false
       }
     },
-    ...mapActions([`sendTx`])
+    ...mapActions([`sendCoins`])
   },
   validations() {
     return {

app/src/renderer/vuex/getters.js

@@ -23,9 +23,15 @@ export const allTransactions = state =>
 export const wallet = state => state.wallet
 
 // staking
+export const liquidAtoms = state =>
+  (
+    state.wallet.balances.find(
+      balance => balance.denom === state.stakingParameters.parameters.bond_denom
+    ) || { amount: 0 }
+  ).amount
 export const delegation = state => state.delegation
 export const totalAtoms = (state, getters) => {
-  return new BN(getters.user.atoms)
+  return new BN(getters.liquidAtoms)
     .plus(new BN(getters.oldBondedAtoms))
     .plus(new BN(getters.oldUnbondingAtoms))
     .toString()

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

@@ -142,7 +142,8 @@ export default ({ node }) => {
     },
     async submitDelegation(
       {
-        rootState: { stakingParameters, user, wallet },
+        rootState: { stakingParameters, wallet },
+        getters: { liquidAtoms },
         state,
         dispatch,
         commit
@@ -165,7 +166,10 @@ export default ({ node }) => {
       })
 
       // optimistic update the atoms of the user before we get the new values from chain
-      commit(`setAtoms`, user.atoms - amount)
+      commit(`updateWalletBalance`, {
+        denom,
+        amount: liquidAtoms - amount
+      })
       // optimistically update the committed delegations
       Vue.set(
         state.committedDelegates,

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

@@ -41,9 +41,6 @@ export default ({}) => {
     setAccounts(state, accounts) {
       state.accounts = accounts
     },
-    setAtoms(state, atoms) {
-      state.atoms = atoms
-    },
     addHistory(state, path) {
       state.history.push(path)
       state.externals.track(`pageview`, {

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

@@ -19,6 +19,20 @@ export default ({ node }) => {
       state.balances = balances
       state.loading = false
     },
+    updateWalletBalance(state, balance) {
+      let updated = false
+      state.balances = state.balances.map(oldBalance => {
+        if (oldBalance.denom === balance.denom) {
+          updated = true
+          return balance
+        }
+        return oldBalance
+      })
+
+      if (!updated) {
+        state.balances.push(balance)
+      }
+    },
     setWalletAddress(state, address) {
       state.address = address
     },
@@ -64,14 +78,6 @@ export default ({ node }) => {
         commit(`setNonce`, res.sequence)
         commit(`setAccountNumber`, res.account_number)
         commit(`setWalletBalances`, coins)
-        for (let coin of coins) {
-          if (
-            coin.denom === rootState.stakingParameters.parameters.bond_denom
-          ) {
-            commit(`setAtoms`, parseFloat(coin.amount))
-            break
-          }
-        }
         state.loading = false
         state.loaded = true
       } catch (error) {
@@ -83,6 +89,23 @@ export default ({ node }) => {
         state.error = error
       }
     },
+    async sendCoins(
+      { dispatch, commit, state },
+      { receiver, amount, denom, password }
+    ) {
+      await dispatch(`sendTx`, {
+        type: `send`,
+        password,
+        to: receiver,
+        amount: [{ denom, amount: amount.toString() }]
+      })
+
+      const oldBalance = state.balances.find(balance => balance.denom === denom)
+      commit(`updateWalletBalance`, {
+        denom,
+        amount: oldBalance.amount - amount
+      })
+    },
     async loadDenoms({ commit, state }) {
       try {
         const { genesis } = await network()

test/unit/specs/components/common/TmBalance.spec.js

@@ -12,10 +12,10 @@ describe(`TmBalance`, () => {
       getters: {
         user: () => {
           return {
-            atoms: 123,
             address: `useraddress16876876876876876786876876876876876`
           }
         },
+        liquidAtoms: () => 123,
         totalAtoms: () => {
           return 321
         }

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

@@ -11,9 +11,10 @@ const proposal = {
   type: `Text`,
   password: `1234567890`
 }
-const { governanceParameters, stakingParameters } = lcdClientMock.state
+const { governanceParameters } = lcdClientMock.state
 const depositDenom = governanceParameters.deposit.min_deposit[0].denom
 
+// TODO: refactor according to new unit test standard
 describe(`PageGovernance`, () => {
   let wrapper, store
   let { mount, localVue } = setup()
@@ -25,15 +26,16 @@ describe(`PageGovernance`, () => {
     let instance = mount(PageGovernance, {
       doBefore: ({ store }) => {
         store.commit(`setGovParameters`, governanceParameters)
-        store.commit(`setStakingParameters`, stakingParameters.parameters)
         store.commit(`setConnected`, true)
+      },
+      stubs: {
+        "tm-balance": true
       }
     })
     wrapper = instance.wrapper
     store = instance.store
     store.state.user.address = lcdClientMock.addresses[0]
     store.dispatch(`updateDelegates`)
-    store.commit(`setAtoms`, 1337)
   })
 
   it(`has the expected html structure`, async () => {

test/unit/specs/components/governance/TableProposals.spec.js

@@ -21,7 +21,10 @@ describe(`TableProposals`, () => {
       doBefore: ({ store }) => {
         store.commit(`setConnected`, true)
         store.state.user.address = `address1234`
-        store.commit(`setAtoms`, 1337)
+        store.commit(`updateWalletBalance`, {
+          denom: `atom`,
+          amount: 1337
+        })
         for (const [proposal_id, tally_result] of Object.entries(tallies)) {
           store.commit(`setProposalTally`, { proposal_id, tally_result })
         }
@@ -83,7 +86,10 @@ describe(`TableProposals`, () => {
       doBefore: ({ store }) => {
         store.commit(`setConnected`, true)
         store.state.user.address = `address1234`
-        store.commit(`setAtoms`, 1337)
+        store.commit(`updateWalletBalance`, {
+          denom: `atom`,
+          amount: 1337
+        })
       },
       propsData: { proposals: {} },
       stubs: { "data-empty-search": true }