Jordan/2183 fix page network block loading

CHANGELOG.md

@@ -29,10 +29,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 - [\#1306](https://github.com/cosmos/voyager/issues/1306) Withdraw fee distribution rewards @fedekunze
+- [\#2183](https://github.com/cosmos/voyager/issues/2183) Loading block to network block loader @jbibla
 - [\#1875](https://github.com/cosmos/voyager/issues/1875) optimistic updates for proposal creation @faboweb
 - [\#1876](https://github.com/cosmos/voyager/issues/1876) optimistic updates for depositing on proposals @faboweb
 
-
 ### Changed
 
 - [\#2128](https://github.com/cosmos/voyager/pull/2128) remove loading status on validator page when disconnected from the network @fedekunze

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

@@ -11,7 +11,7 @@
  <img
  class="icon action-modal-atom"
  src="~assets/images/cosmos-logo.png"
- />
+ >
  <span class="action-modal-title">
  {{ session.signedIn ? title : `Sign in required` }}
  </span>

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

@@ -1,6 +1,6 @@
 <template>
  <div class="tm-hardware-state">
- <img v-if="loading" src="~assets/images/loader.svg" >
+ <img v-if="loading" src="~assets/images/loader.svg">
  <i class="tm-hardware-state__icon material-icons">{{ icon }}</i>
  <div class="tm-hardware-state__label">
  <slot />

app/src/renderer/components/governance/TabParameters.vue

@@ -17,7 +17,7 @@
  {{
  governanceParameters.parameters.deposit.min_deposit
  ? minimumDeposit
- : `n/a`
+ : `--`
  }}
  </dd>
  </dl>
@@ -37,7 +37,7 @@
  {{
  governanceParameters.parameters.deposit.max_deposit_period
  ? depositPeriodInDays + ` days`
- : `n/a`
+ : `--`
  }}
  </dd>
  </dl>
@@ -62,9 +62,9 @@
  {{
  governanceParameters.parameters.tallying.threshold
  ? `${parseFloat(
- governanceParameters.parameters.tallying.threshold
- ) * 100} %`
- : `n/a`
+  governanceParameters.parameters.tallying.threshold
+  ) * 100} %`
+ : `--`
  }}
  </dd>
  </dl>
@@ -82,9 +82,9 @@
  {{
  governanceParameters.parameters.tallying.veto
  ? `${parseFloat(
- governanceParameters.parameters.tallying.veto
- ) * 100} %`
- : `n/a`
+  governanceParameters.parameters.tallying.veto
+  ) * 100} %`
+ : `--`
  }}
  </dd>
  </dl>
@@ -105,7 +105,7 @@
  {{
  governanceParameters.parameters.tallying.governance_penalty
  ? governanceParameters.parameters.tallying.governance_penalty
- : `n/a`
+ : `--`
  }}
  </dd>
  </dl>
@@ -124,9 +124,9 @@
  {{
  governanceParameters.parameters.tallying.quorum
  ? `${parseFloat(
- governanceParameters.parameters.tallying.quorum
- ) * 100} %`
- : `n/a`
+  governanceParameters.parameters.tallying.quorum
+  ) * 100} %`
+ : `--`
  }}
  </dd>
  </dl>
@@ -151,7 +151,7 @@
  {{
  governanceParameters.parameters.voting.voting_period
  ? votingPeriodInDays + ` days`
- : `n/a`
+ : `--`
  }}
  </dd>
  </dl>

app/src/renderer/components/network/PageBlock.vue

@@ -6,11 +6,13 @@
  <div class="row">
  <div class="page-profile__header__info">
  <div class="page-profile__status-and-title">
- <h2 class="page-profile__title">
- Block {{ blockTitle }}
- </h2>
+ <h2 class="page-profile__title">Block {{ blockTitle }}</h2>
  <h3 class="page-profile__subtitle">
- {{ block.block_meta && block.block_meta.block_id ? block.block_meta.block_id.hash : '' }}
+ {{
+ block.block_meta && block.block_meta.block_id
+ ? block.block_meta.block_id.hash
+ : ""
+ }}
  </h3>
  </div>
  </div>
@@ -29,7 +31,9 @@
  <div class="column">
  <dl class="info_dl colored_dl">
  <dt>Transactions</dt>
- <dd>{{ block.block && block.block.data.txs || `No Transactions` }}</dd>
+ <dd>
+ {{ (block.block && block.block.data.txs) || `No Transactions` }}
+ </dd>
  </dl>
  </div>
  </div>
@@ -40,7 +44,12 @@
  <div class="column">
  <dl class="info_dl colored_dl">
  <dt>Evidence</dt>
- <dd>{{ block.block && block.block.evidence.evidence || `No Evidence` }}</dd>
+ <dd>
+ {{
+ (block.block && block.block.evidence.evidence) ||
+ `No Evidence`
+ }}
+ </dd>
  </dl>
  </div>
  </div>
@@ -81,11 +90,11 @@ export default {
  ]
  },
  blockTitle({ num, block } = this) {
- if (!block.block) return `n/a`
+ if (!block.block) return `--`
  return `#` + num.prettyInt(block.block.header.height)
  },
  blockTime({ moment, block } = this) {
- if (!block.block) return `n/a`
+ if (!block.block) return `--`
  return moment(block.block.header.time).format(`MMM Do YYYY, HH:mm:ss`)
  }
  },

app/src/renderer/components/network/PageNetwork.vue

@@ -12,47 +12,51 @@
  class="page-profile__status"
  />
  <h2 class="page-profile__title">
- {{ lastHeader.chain_id }}
+ {{ lastHeader.chain_id || `--` }}
  </h2>
  </div>
  </div>
  </div>
  <div class="row">
  <dl class="info_dl colored_dl">
  <dt>Block Height</dt>
- <dd>{{ `#` + num.prettyInt(lastHeader.height) }}</dd>
+ <dd>{{ `#` + num.prettyInt(lastHeader.height) || `--` }}</dd>
  </dl>
  <dl class="info_dl colored_dl">
  <dt>Last Block</dt>
- <dd>{{ lastBlock }}</dd>
+ <dd>{{ lastBlock || `--` }}</dd>
  </dl>
  <dl class="info_dl colored_dl">
  <dt>Transactions</dt>
- <dd>{{ lastHeader.total_txs }}</dd>
+ <dd>{{ lastHeader.total_txs || `--` }}</dd>
  </dl>
  <dl class="info_dl colored_dl">
  <dt>Number of Validators</dt>
- <dd>{{ delegates.delegates.length }}</dd>
+ <dd>{{ delegates.delegates.length || `--` }}</dd>
  </dl>
  </div>
  <div class="row">
  <div class="column">
  <dl class="info_dl">
  <dt>Total Liquid {{ bondDenom }}</dt>
  <dd id="loose_tokens">
- {{ pool.pool && pool.pool.not_bonded_tokens ? num.pretty(
- num.atoms(pool.pool.not_bonded_tokens)
- ) : `n/a` }}
+ {{
+ pool.pool && pool.pool.not_bonded_tokens
+ ? num.full(num.atoms(pool.pool.not_bonded_tokens))
+ : `--`
+ }}
  </dd>
  </dl>
  </div>
  <div class="column">
  <dl class="info_dl">
  <dt>Total Delegated {{ bondDenom }}</dt>
  <dd id="bonded_tokens">
- {{ pool.pool && pool.pool.bonded_tokens ? num.pretty(
- num.atoms(pool.pool.bonded_tokens)
- ) : `n/a` }}
+ {{
+ pool.pool && pool.pool.bonded_tokens
+ ? num.full(num.atoms(pool.pool.bonded_tokens))
+ : `--`
+ }}
  </dd>
  </dl>
  </div>
@@ -63,6 +67,14 @@
  <panel-sort :properties="properties" />
  </thead>
  <tbody>
+ <tr v-if="blocks.length === 0" class="block data-table__row">
+ <td>
+ <img class="loading-icon" src="~assets/images/loader.svg" />
+ </td>
+ <td>
+ <img class="loading-icon" src="~assets/images/loader.svg" />
+ </td>
+ </tr>
  <tr
  v-for="block in blocks"
  :key="block.header.height"

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

@@ -7,17 +7,16 @@
  class="data-table__row__info__image"
  width="48"
  height="48"
- >
+ />
  <img
  v-else
  class="data-table__row__info__image data-table__row__info__image--no-img"
  src="~assets/images/validator-icon.svg"
  width="48"
  height="48"
- >
+ />
  <div class="data-table__row__info__container">
  <span
-
  v-tooltip.top="status"
  :class="statusColor"
  class="data-table__row__info__container__status"
@@ -45,10 +44,10 @@
  }}
  </td>
  <td class="li-validator__rewards data-table__row__cell__separator">
- {{ rewards || "n/a" }}
+ {{ rewards || "--" }}
  </td>
  <td class="li-validator__voting-power">
- {{ validator.percent_of_vote ? validator.percent_of_vote : `n/a` }}
+ {{ validator.percent_of_vote ? validator.percent_of_vote : `--` }}
  </td>
  <td class="li-validator__uptime">
  {{ uptime }}
@@ -57,7 +56,7 @@
  {{ commission }}
  </td>
  <td class="li-validator__slashes">
- n/a
+ --
  </td>
  </tr>
 </template>
@@ -104,7 +103,7 @@ export default {
  const uptimeRollingWindow = info.signed_blocks_counter / rollingWindow
  return `${this.num.pretty(uptimeRollingWindow * 100)}%`
  }
- return `n/a`
+ return `--`
  },
  yourVotes() {
  return this.committedDelegations[this.validator.operator_address]

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

@@ -22,7 +22,7 @@
  {{
  stakingParameters.parameters.unbonding_time
  ? unbondingTimeInDays + ` days`
- : `n/a`
+ : `--`
  }}
  </dd>
  </dl>
@@ -40,7 +40,7 @@
  {{
  stakingParameters.parameters.max_validators
  ? stakingParameters.parameters.max_validators
- : `n/a`
+ : `--`
  }}
  </dd>
  </dl>

test/e2e/delegation.js

@@ -11,7 +11,7 @@ const {
  * NOTE: don't use a global `let client = app.client` as the client object changes when restarting the app
  */
 
-test(`delegation`, async function(t) {
+test(`delegation`, async function (t) {
  const { app } = await getApp(t)
  // app.env.COSMOS_MOCKED = false
  await restart(app)
@@ -22,7 +22,7 @@ test(`delegation`, async function(t) {
  // default values from e2e mounted node
  const bondedStake = 100
 
- t.test(`Validators`, async function(t) {
+ t.test(`Validators`, async function (t) {
  // Select the Validators tab.
  await app.client.click(`//a[normalize-space() = 'Validators']`)
 
@@ -154,7 +154,7 @@ test(`delegation`, async function(t) {
  t.end()
  })
 
- t.test(`showing transactions`, async function(t) {
+ t.test(`showing transactions`, async function (t) {
  await navigate(app, `Transactions`)
 
  // delegated
@@ -173,7 +173,7 @@ test(`delegation`, async function(t) {
  t.end()
  })
 
- t.test(`Parameters`, async function(t) {
+ t.test(`Parameters`, async function (t) {
  await navigate(app, `Staking`)
  await app.client.click(`//a[normalize-space() = 'Parameters']`)
  await t.ok(
@@ -191,7 +191,7 @@ test(`delegation`, async function(t) {
  `Shows staking parameters`
  )
  await t.ok(
- !(await app.client.isExisting(`//dd[contains(text(), "n/a")]`)),
+ !(await app.client.isExisting(`//dd[contains(text(), "--")]`)),
  `all parameters and pool fields are defined`
  )
  await t.ok(

test/unit/specs/components/network/PageNetwork.spec.js

@@ -61,7 +61,21 @@ describe(`PageNetwork`, () => {
  })
  })
 
- it(`has the expected html structure`, () => {
+ it(`should display the network page with data and the blocks table`, () => {
+ expect(wrapper.vm.$el).toMatchSnapshot()
+ })
+
+ it(`should display the network page with the blocks table in a loading state`, () => {
+ $store.getters.blocks = []
+
+ wrapper = shallowMount(PageNetwork, {
+ localVue,
+ mocks: {
+ $store
+ },
+ stubs: [`router-link`]
+ })
+
  expect(wrapper.vm.$el).toMatchSnapshot()
  })