Prepare Recalculate button for Claim Reward

apps/block_scout_web/assets/js/pages/stakes/claim_reward.js

@@ -54,13 +54,17 @@ function onPoolsFound($modal, $modalBody) {
   const $poolsDropdown = $('[pool-select]', $modalBody)
   const $epochChoiceRadio = $('input[name="epoch_choice"]', $modalBody)
   const $specifiedEpochsText = $('.specified-epochs', $modalBody)
+  let allowedEpochs = []
 
   $poolsDropdown.on('change', () => {
     const data = $('option:selected', this).data()
     const $poolInfo = $('.selected-pool-info', $modalBody)
+    const epochs = data.epochs ? data.epochs : ''
+
+    allowedEpochs = expandEpochsToArray(epochs)
 
     $poolsDropdown.blur()
-    $('textarea', $poolInfo).val(data.epochs ? data.epochs : '')
+    $('textarea', $poolInfo).val(epochs)
     $('#token-reward-sum', $poolInfo).html(data.tokenRewardSum ? data.tokenRewardSum : '0')
     $('#native-reward-sum', $poolInfo).html(data.nativeRewardSum ? data.nativeRewardSum : '0')
     $('#tx-gas-limit', $poolInfo).html(data.gasLimit ? '~' + data.gasLimit : '0')
@@ -71,6 +75,80 @@ function onPoolsFound($modal, $modalBody) {
   })
 
   $epochChoiceRadio.on('change', () => {
-    $specifiedEpochsText.toggleClass('hidden')
+    if ($('#epoch-choice-all', $modalBody).is(':checked')) {
+      $specifiedEpochsText.addClass('hidden')
+      showRecalcButton(false, $modalBody)
+    } else {
+      $specifiedEpochsText.removeClass('hidden')
+      $specifiedEpochsText.trigger('input')
+    }
+  })
+
+  $specifiedEpochsText.on('input', () => {
+    const filtered = filterSpecifiedEpochs($specifiedEpochsText.val())
+    const pointedEpochs = expandEpochsToArray(filtered)
+    const needsRecalc = pointedEpochs.length > 0 && !isArrayIncludedToArray(allowedEpochs, pointedEpochs)
+    showRecalcButton(needsRecalc, $modalBody)
+    $specifiedEpochsText.val(filtered)
+  })
+}
+
+function showRecalcButton(show, $modalBody) {
+  const $itemsToStrikeOut = $('#token-reward-sum, #native-reward-sum, #tx-gas-limit', $modalBody)
+  const $recalculateButton = $('button.recalculate', $modalBody)
+  const $submitButton = $('button.submit', $modalBody)
+  if (show) {
+    $itemsToStrikeOut.css('text-decoration', 'line-through')
+    $recalculateButton.removeClass('hidden')
+    $submitButton.addClass('hidden')
+  } else {
+    $itemsToStrikeOut.css('text-decoration', '')
+    $recalculateButton.addClass('hidden')
+    $submitButton.removeClass('hidden')
+  }
+}
+
+function expandEpochsToArray(epochs) {
+  let filtered = epochs.replace(/[-|,]$/g, '').trim()
+  if (filtered == '') return []
+  let ranges = filtered.split(',')
+  ranges = ranges.map((v) => {
+    if (v.indexOf('-') > -1) {
+      v = v.split('-')
+      v[0] = parseInt(v[0])
+      v[1] = parseInt(v[1])
+      v.sort((a, b) => a - b)
+      const min = v[0]
+      const max = v[1]
+      let expanded = []
+      for (let i = min; i <= max; i++) {
+        expanded.push(i)
+      }
+      return expanded
+    } else {
+      return parseInt(v)
+    }
   })
+  ranges = ranges.reduce((acc, val) => acc.concat(val), []) // similar to ranges.flat()
+  ranges.sort((a, b) => a - b)
+  ranges = [...new Set(ranges)] // make unique
+  ranges = ranges.filter(epoch => epoch != 0)
+  return ranges
+}
+
+function filterSpecifiedEpochs(epochs) {
+  let filtered = epochs
+  filtered = filtered.replace(/[^0-9,-]+/g, '')
+  filtered = filtered.replace(/-{2,}/g, '-')
+  filtered = filtered.replace(/,{2,}/g, ',')
+  filtered = filtered.replace(/,-/g, ',')
+  filtered = filtered.replace(/-,/g, '-')
+  filtered = filtered.replace(/(-[0-9]+)-/g, '$1,')
+  filtered = filtered.replace(/^[,|-|0]/g, '')
+  return filtered
+}
+
+function isArrayIncludedToArray(source, target) {
+  const filtered = target.filter(item => source.indexOf(item) != -1)
+  return filtered.length == source.length
 }

apps/block_scout_web/lib/block_scout_web/channels/stakes_channel.ex

@@ -399,6 +399,7 @@ defmodule BlockScoutWeb.StakesChannel do
 
               {data, pool_staking_address}
             end)
+            |> Enum.filter(fn {data, _} -> data.epochs != "" end)
 
           pools_gas_estimates = Enum.map(pools, fn {_data, pool_staking_address} ->
             result = ContractReader.claim_reward_estimate_gas(

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_claim_reward.html.eex

@@ -1,3 +1,6 @@
 <button class="btn-full-primary js-claim-reward">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+        <path fill-rule="evenodd" d="M15 16H1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1zm-1-3H2v1h12v-1zm-3.754-8.279L9 3.479V8a1 1 0 0 1-2 0V3.489l-1.235 1.23a1.042 1.042 0 0 1-1.469 0 1.032 1.032 0 0 1 0-1.464L7.235.326a1.041 1.041 0 0 1 1.137-.22c.007.003.012.01.019.013.144.049.28.122.394.236l2.921 2.911a1.027 1.027 0 0 1 0 1.455 1.034 1.034 0 0 1-1.46 0z"/>
+    </svg>
     <span class="btn-full-primary-text"><%= @text %></span>
 </button>

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_recalculate.html.eex

@@ -0,0 +1,34 @@
+<button
+    class="btn-full-primary <%= if assigns[:extra_class] do @extra_class end %>"
+    <%= if assigns[:disabled] do "disabled" end %>
+>
+    <svg
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:cc="http://web.resource.org/cc/"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        version="1.1"
+        xml:space="preserve"
+        enable-background="new 0 0 65 65"
+        y="0px"
+        x="0px"
+        viewBox="0 0 65 65"
+        width="16"
+        height="16"
+      >
+    <g id="Layer_3_copy_2">
+        <g fill="#555753">
+            <path
+              d="m32.5 4.999c-5.405 0-10.444 1.577-14.699 4.282l-5.75-5.75v16.11h16.11l-6.395-6.395c3.18-1.787 6.834-2.82 10.734-2.82 12.171 0 22.073 9.902 22.073 22.074 0 2.899-0.577 5.664-1.599 8.202l4.738 2.762c1.47-3.363 2.288-7.068 2.288-10.964 0-15.164-12.337-27.501-27.5-27.501z"
+          />
+            <path
+              d="m43.227 51.746c-3.179 1.786-6.826 2.827-10.726 2.827-12.171 0-22.073-9.902-22.073-22.073 0-2.739 0.524-5.35 1.439-7.771l-4.731-2.851c-1.375 3.271-2.136 6.858-2.136 10.622 0 15.164 12.336 27.5 27.5 27.5 5.406 0 10.434-1.584 14.691-4.289l5.758 5.759v-16.112h-16.111l6.389 6.388z"
+          />
+        </g>
+    </g>
+    </svg>
+    <span class="btn-full-primary-text"><%= @text %></span>
+</button>

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_modal_claim_reward_content.html.eex

@@ -41,15 +41,14 @@
           <%= gettext("You will receive:") %><br />
           <span class="text-dark" id="token-reward-sum"></span> <span class="text-dark"><%= @token.symbol %></span><br />
           <span class="text-dark" id="native-reward-sum"></span> <span class="text-dark"><%= @coin.symbol %></span><br />
-          <a href="#" class="recalculate hidden"><%= gettext("Recalculate") %></a>
         </p>
         <p class="form-p right">
           <%= gettext("Tx Gas Limit:") %><br />
           <span class="text-dark" id="tx-gas-limit"></span><br />
-          <a href="#" class="recalculate hidden"><%= gettext("Recalculate") %></a>
         </p>
       </div>
-      <%= render BlockScoutWeb.StakesView, "_stakes_btn_withdraw.html", text: gettext("Claim Reward"), extra_class: "full-width" %>
+      <%= render BlockScoutWeb.StakesView, "_stakes_btn_recalculate.html", text: gettext("Recalculate"), extra_class: "full-width recalculate hidden" %>
+      <%= render BlockScoutWeb.StakesView, "_stakes_btn_withdraw.html", text: gettext("Claim Reward"), extra_class: "full-width submit" %>
     </div>
   </form>
 <% else %>