Fabo/2303 balance display as whole

PENDING.md

@@ -1,3 +1,7 @@
+### Changed
+
+- [\#2303](https://github.com/cosmos/voyager/issues/2303) Hide amounts in header until they are fully loaded @faboweb
+
 ### Security
 
 - [\#2309](https://github.com/cosmos/voyager/pull/2309) remove markdown parser to reduce vulnerability of xss @faboweb

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

@@ -4,7 +4,7 @@
       <div class="total-atoms top-section">
         <h3>Total {{ bondDenom }}</h3>
         <h2 class="total-atoms__value">
-          {{ num.shortNumber(num.atoms(totalAtoms)) }}
+          {{ totalAtomsDisplay }}
         </h2>
         <short-bech32 :address="session.address || ''" />
       </div>
@@ -52,16 +52,29 @@ export default {
     ...mapGetters([
       `connected`,
       `session`,
+      `wallet`,
+      `delegation`,
       `liquidAtoms`,
       `lastHeader`,
       `totalAtoms`,
       `bondDenom`,
       `distribution`
     ]),
+    loaded() {
+      return this.wallet.loaded && this.delegation.loaded
+    },
+    totalAtomsDisplay() {
+      return this.loaded ? num.shortNumber(num.atoms(this.totalAtoms)) : `--`
+    },
     unbondedAtoms() {
-      return this.num.shortNumber(this.num.atoms(this.liquidAtoms))
+      return this.loaded
+        ? this.num.shortNumber(this.num.atoms(this.liquidAtoms))
+        : `--`
     },
     rewards() {
+      if (!this.distribution.loaded) {
+        return `--`
+      }
       const rewards = this.distribution.totalRewards[this.bondDenom]
       return this.num.shortNumber(
         this.num.atoms(rewards && rewards > 10 ? rewards : 0)

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

@@ -16,10 +16,17 @@ describe(`TmBalance`, () => {
         totalAtoms: 3210000000,
         bondDenom: `stake`,
         distribution: {
+          loaded: true,
           totalRewards: {
             stake: 1000450000000
           }
         },
+        delegation: {
+          loaded: true
+        },
+        wallet: {
+          loaded: true
+        },
         lastHeader: { height: `10` }
       },
       dispatch: jest.fn()
@@ -39,6 +46,19 @@ describe(`TmBalance`, () => {
   it(`displays unbonded tokens`, () => {
     expect(wrapper.vm.unbondedAtoms).toBe(`1,230.0000…`)
   })
+
+  it(`displays neither total tokens nor unbonded tokens if not completely loaded`, () => {
+    wrapper.vm.wallet.loaded = false
+    wrapper.vm.distribution.loaded = false
+    expect(wrapper.vm.totalAtomsDisplay).toBe(`--`)
+    expect(wrapper.vm.unbondedAtoms).toBe(`--`)
+  })
+
+  it(`should not display rewards if not loaded`, () => {
+    wrapper.vm.distribution.loaded = false
+    expect(wrapper.vm.rewards).toBe(`--`)
+  })
+
   it(`gets user rewards`, () => {
     expect(wrapper.vm.rewards).toBe(`1,000,450.0000…`)
   })