Merge pull request #2322 from cosmos/fabo/2303-balance-display-as-whole

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…`)
  })