Fuse explorer UI update

apps/block_scout_web/assets/css/components/_card.scss

@@ -233,3 +233,41 @@ $card-tab-icon-color-active: #20b760 !default;
     }
   }
 }
+
+.dashboard-banner-card-title {
+  font-size: 14px;
+  color: #9a9a9a;
+
+  &+i {
+    font-size: 1rem;
+  }
+
+  &+.fa-exchange-alt {
+    color: var(--green);
+  }
+
+  &+.fa-wallet {
+    color: var(--purple);
+  }
+
+  &+.fa-database {
+    color: var(--yellow);
+  }
+
+  &+.fa-users {
+    color: var(--orange);
+  }
+
+  &+.fa-circle-notch {
+    color: var(--yellow);
+  }
+}
+
+.dashboard-banner-card-value {
+  font-size: 1.5rem;
+  color: #a3a9b5; 
+
+  .symbol {
+    font-size: 14px;
+  }
+}

apps/block_scout_web/assets/js/lib/utils.js

@@ -1,4 +1,6 @@
 import _ from 'lodash'
+import { of } from 'rxjs'
+import { delay, tap, mergeMap, repeat } from 'rxjs/operators'
 
 export function batchChannel (func) {
   let msgs = []
@@ -11,3 +13,28 @@ export function batchChannel (func) {
     debouncedFunc()
   }
 }
+
+export function secondsToDhms (seconds) {
+  seconds = Number(seconds)
+  var floor = Math.floor
+
+  var d = floor(seconds / (3600 * 24))
+  var h = floor(seconds % (3600 * 24) / 3600)
+  var m = floor(seconds % 3600 / 60)
+  var s = Math.floor(seconds % 60)
+
+  var dDisplay = d > 0 ? d + 'd ' : ''
+  var hDisplay = h > 0 ? h + 'h ' : ''
+  var mDisplay = m > 0 ? m + 'm ' : ''
+  var sDisplay = s > 0 ? s + 's' : ''
+  return dDisplay + hDisplay + mDisplay + sDisplay
+}
+
+export function poll (fn, ms, cb) {
+  return of({}).pipe(
+    mergeMap(_ => fn()),
+    tap(cb),
+    delay(ms),
+    repeat()
+  )
+}

apps/block_scout_web/assets/js/pages/chain.js

@@ -5,9 +5,10 @@ import numeral from 'numeral'
 import socket from '../socket'
 import { exchangeRateChannel, formatUsdValue } from '../lib/currency'
 import { createStore, connectElements } from '../lib/redux_helpers.js'
-import { batchChannel } from '../lib/utils'
+import { batchChannel, poll } from '../lib/utils'
 import listMorph from '../lib/list_morph'
 import { createMarketHistoryChart } from '../lib/market_history_chart'
+import { getActiveValidators, getTotalStacked, getCurrentCycleBlocks, getCycleEnd } from '../lib/smart_contract/consensus'
 
 const BATCH_THRESHOLD = 6
 
@@ -25,7 +26,11 @@ export const initialState = {
   transactionsLoading: true,
   transactionCount: null,
   usdMarketCap: null,
-  blockCount: null
+  blockCount: null,
+  validatorCount: null,
+  stackCount: null,
+  currentCycleBlocks: null,
+  cycleEnd: null
 }
 
 export const reducer = withMissingBlocks(baseReducer)
@@ -111,6 +116,14 @@ function baseReducer (state = initialState, action) {
       return Object.assign({}, state, { transactionsError: true })
     case 'FINISH_TRANSACTIONS_FETCH':
       return Object.assign({}, state, { transactionsLoading: false })
+    case 'RECEIVED_NEW_VALIDATOR_COUNT':
+      return Object.assign({}, state, { validatorCount: action.msg })
+    case 'RECEIVED_NEW_STACK_COUNT':
+      return Object.assign({}, state, { stackCount: action.msg })
+    case 'RECEIVED_CURRENT_CYCLE_BLOCKS':
+      return Object.assign({}, state, { currentCycleBlocks: action.msg })
+    case 'RECEIVED_CYCLE_END_COUNT':
+      return Object.assign({}, state, { cycleEnd: action.msg })
     default:
       return state
   }
@@ -245,6 +258,30 @@ const elements = {
       $channelBatching.show()
       $el[0].innerHTML = numeral(state.transactionsBatch.length).format()
     }
+  },
+  '[data-selector="validator-count"]': {
+    render ($el, state, oldState) {
+      if (state.validatorCount === oldState.validatorCount) return
+      $el.empty().append(state.validatorCount)
+    }
+  },
+  '[data-selector="stack-count"]': {
+    render ($el, state, oldState) {
+      if (state.stackCount === oldState.stackCount) return
+      $el.empty().append(numeral(state.stackCount).format('0,0'))
+    }
+  },
+  '[data-selector="current-cycle-blocks"]': {
+    render ($el, state, oldState) {
+      if (state.currentCycleBlocks === oldState.currentCycleBlocks) return
+      $el.empty().append(state.currentCycleBlocks)
+    }
+  },
+  '[data-selector="cycle-end"]': {
+    render ($el, state, oldState) {
+      if (state.cycleEnd === oldState.cycleEnd) return
+      $el.empty().append(state.cycleEnd)
+    }
   }
 }
 
@@ -284,6 +321,42 @@ if ($chainDetailsPage.length) {
     type: 'RECEIVED_NEW_TRANSACTION_BATCH',
     msgs: humps.camelizeKeys(msgs)
   })))
+
+  poll(getActiveValidators, 5000,
+    (data) => {
+      store.dispatch({
+        type: 'RECEIVED_NEW_VALIDATOR_COUNT',
+        msg: data
+      })
+    }
+  ).subscribe()
+
+  poll(getTotalStacked, 5000,
+    (data) => {
+      store.dispatch({
+        type: 'RECEIVED_NEW_STACK_COUNT',
+        msg: data
+      })
+    }
+  ).subscribe()
+
+  poll(getCurrentCycleBlocks, 5000,
+    (data) => {
+      store.dispatch({
+        type: 'RECEIVED_CURRENT_CYCLE_BLOCKS',
+        msg: data
+      })
+    }
+  ).subscribe()
+
+  poll(getCycleEnd, 5000,
+    (data) => {
+      store.dispatch({
+        type: 'RECEIVED_CYCLE_END_COUNT',
+        msg: data
+      })
+    }
+  ).subscribe()
 }
 
 function loadTransactions (store) {