Claim reward updates

.dialyzer-ignore

@@ -12,4 +12,6 @@ apps/block_scout_web/lib/block_scout_web/views/layout_view.ex:175: The call 'Eli
 apps/explorer/lib/explorer/smart_contract/publisher_worker.ex:6: The pattern 'false' can never match the type 'true'
 apps/explorer/lib/explorer/smart_contract/publisher_worker.ex:6: The test 5 == 'infinity' can never evaluate to 'true'
 lib/block_scout_web/router.ex:1
-lib/phoenix/router.ex:324
+lib/phoenix/router.ex:324
+lib/explorer/staking/stake_snapshotting.ex:14: Function do_snapshotting/6 has no local return
+lib/explorer/staking/stake_snapshotting.ex:179

apps/block_scout_web/assets/css/_helpers.scss

@@ -29,3 +29,7 @@
   height: 0;
   visibility: hidden;
 }
+
+.hidden {
+  display: none!important;
+}

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

@@ -66,6 +66,10 @@ $modal-status-graph-question: #329ae9 !default;
   line-height: 1.5;
   margin: 0 0 25px;
   text-align: center;
+
+  &.m-b-0 {
+    margin-bottom: 0;
+  }
 }
 
 .modal-status-button-wrapper {

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

@@ -86,6 +86,13 @@ $stakes-link-color: $primary !default;
   padding: 0 15px;
   min-width: 930px;
   min-height: 311px;
+
+  .refresh-informer {
+    text-align: right;
+    padding-top: 15px;
+    padding-right: 15px;
+    display: none;
+  }
 }
 
 .stakes-table-th {
@@ -118,6 +125,7 @@ $stakes-link-color: $primary !default;
 .stakes-th-text {
   margin-right: 10px;
   white-space: nowrap;
+  text-align: center;
 }
 
 .stakes-td {

apps/block_scout_web/assets/css/components/stakes/_modal_claim_reward.scss

@@ -0,0 +1,36 @@
+.modal-claim-reward {
+  max-width: 400px;
+  width: 100%;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.modal-claim-reward {
+  label {
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-bottom: 0.3rem;
+    width: 100%;
+
+    &.m-b-0 {
+      margin-bottom: 0;
+    }
+  }
+
+  textarea {
+    background: #fff!important;
+    height: 38px;
+  }
+
+  .amounts {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr 80px;
+    grid-gap: 2vw;
+  }
+}

apps/block_scout_web/assets/css/components/stakes/_stakes.scss

@@ -93,6 +93,11 @@ $stakes-stats-item-border-color: #fff !default;
     .stakes-tr-banned & {
       color: $stakes-banned-color;
     }
+
+    a {
+      text-decoration: none;
+      color: $stakes-address-color;
+    }
   }
 
   .stakes-address-active {
@@ -166,7 +171,7 @@ $stakes-stats-item-border-color: #fff !default;
   @include media-breakpoint-down(md) {
     grid-column-start: 2;
     grid-row-start: 2;
-    justify-self: end;
+    justify-self: left;
   }
 
   @include media-breakpoint-down(sm) {

apps/block_scout_web/assets/css/stakes.scss

@@ -16,6 +16,7 @@
 @import "components/stakes/stakes_progress";
 @import "components/stakes/modal_stake";
 @import "components/stakes/modal_become_candidate";
+@import "components/stakes/modal_claim_reward";
 @import "components/stakes/modal_validator_info";
 @import "components/stakes/modal_delegators_info";
 @import "components/stakes/modal_bottom_disclaimer";

apps/block_scout_web/assets/js/lib/modals.js

@@ -21,34 +21,59 @@ $(document.body).on('hide.bs.modal', e => {
   $currentModal = null
 })
 
-export function openModal ($modal) {
+export function currentModal () {
+  return $currentModal
+}
+
+export function openModal ($modal, unclosable) {
   // Hide all tooltips before showing a modal,
   // since they are sticking on top of modal
   $('.tooltip').tooltip('hide')
+
+  if (unclosable) {
+    $('.close-modal, .modal-status-button-wrapper', $modal).addClass('hidden')
+    $('.modal-status-text', $modal).addClass('m-b-0')
+  }
+
   if ($currentModal) {
     modalLocked = false
 
     $currentModal
       .one('hidden.bs.modal', () => {
         $modal.modal('show')
         $currentModal = $modal
+        if (unclosable) {
+          modalLocked = true
+        }
       })
       .modal('hide')
   } else {
     $modal.modal('show')
     $currentModal = $modal
+    if (unclosable) {
+      modalLocked = true
+    }
   }
 }
 
-export function lockModal ($modal, $submitButton = null) {
+export function lockModal ($modal, $submitButton = null, spinnerText = '') {
   $modal.find('.close-modal').attr('disabled', true)
 
   const $button = $submitButton || $modal.find('.btn-add-full')
 
   $button
     .attr('data-text', $button.text())
     .attr('disabled', true)
-    .html(spinner)
+
+  const $span = $('span', $button)
+  const waitHtml = spinner + (spinnerText ? ` ${spinnerText}` : '')
+
+  if ($span.length) {
+    $('svg', $button).hide()
+    $span.html(waitHtml)
+  } else {
+    $button.html(waitHtml)
+  }
 
   modalLocked = true
 }
@@ -57,19 +82,26 @@ export function unlockModal ($modal, $submitButton = null) {
   $modal.find('.close-modal').attr('disabled', false)
 
   const $button = $submitButton || $modal.find('.btn-add-full')
+  const buttonText = $button.attr('data-text')
 
-  $button
-    .text($button.attr('data-text'))
-    .attr('disabled', false)
+  $button.attr('disabled', false)
+
+  const $span = $('span', $button)
+  if ($span.length) {
+    $('svg', $button).show()
+    $span.text(buttonText)
+  } else {
+    $button.text(buttonText)
+  }
 
   modalLocked = false
 }
 
-export function openErrorModal (title, text) {
+export function openErrorModal (title, text, unclosable) {
   const $modal = $('#errorStatusModal')
   $modal.find('.modal-status-title').text(title)
   $modal.find('.modal-status-text').html(text)
-  openModal($modal)
+  openModal($modal, unclosable)
 }
 
 export function openWarningModal (title, text) {

apps/block_scout_web/assets/js/lib/validation.js

@@ -49,14 +49,14 @@ function updateSubmit ($submit, errors) {
   $submit.prop('disabled', !$.isEmptyObject(errors))
 }
 
-function displayInputError ($input, message) {
+export function displayInputError ($input, message) {
   const group = $input.parent('.input-group')
 
   group.addClass('input-status-error')
   group.find('.input-group-message').html(message)
 }
 
-function hideInputError ($input) {
+export function hideInputError ($input) {
   const group = $input.parent('.input-group')
 
   group.removeClass('input-status-error')

apps/block_scout_web/assets/js/pages/address.js

@@ -59,6 +59,14 @@ export function reducer (state = initialState, action) {
   }
 }
 
+let fetchedTokenBalanceBlockNumber = 0
+function loadTokenBalance (blockNumber) {
+  if (blockNumber > fetchedTokenBalanceBlockNumber) {
+    fetchedTokenBalanceBlockNumber = blockNumber
+    setTimeout(loadTokenBalanceDropdown, 1000)
+  }
+}
+
 const elements = {
   '[data-selector="channel-disconnected-message"]': {
     render ($el, state) {
@@ -72,7 +80,7 @@ const elements = {
     render ($el, state, oldState) {
       if (oldState.balance === state.balance) return
       $el.empty().append(state.balanceCard)
-      loadTokenBalanceDropdown()
+      loadTokenBalance(state.fetchedCoinBalanceBlockNumber)
       updateAllCalculatedUsdValues()
     }
   },
@@ -127,6 +135,9 @@ if ($addressDetailsPage.length) {
     type: 'RECEIVED_UPDATED_BALANCE',
     msg: humps.camelizeKeys(msg)
   }))
+  addressChannel.on('token_balance', (msg) => loadTokenBalance(
+    msg.block_number
+  ))
   addressChannel.on('transaction', (msg) => {
     store.dispatch({
       type: 'RECEIVED_NEW_TRANSACTION',