Show "Withdraw stake" and "Claim withdraw" modal windows (#2465)

If there is available ordered withdraw for claiming, we generate both
withdraw and claim modal windows, and present user a question modal.

Co-Authored-By: Anatoly Nikiforov <anatolyniky@gmail.com>

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

@@ -11,6 +11,7 @@ import { openBecomeCandidateModal } from './stakes/become_candidate'
 import { openRemovePoolModal } from './stakes/remove_pool'
 import { openMakeStakeModal } from './stakes/make_stake'
 import { openMoveStakeModal } from './stakes/move_stake'
+import { openWithdrawStakeModal } from './stakes/withdraw_stake'
 
 export const initialState = {
   channel: null,
@@ -88,6 +89,7 @@ if ($stakesPage.length) {
     .on('click', '.js-remove-pool', () => openRemovePoolModal(store))
     .on('click', '.js-make-stake', event => openMakeStakeModal(event, store))
     .on('click', '.js-move-stake', event => openMoveStakeModal(event, store))
+    .on('click', '.js-withdraw-stake', event => openWithdrawStakeModal(event, store))
 
   initializeWeb3(store)
 }

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

@@ -0,0 +1,77 @@
+import $ from 'jquery'
+import { BigNumber } from 'bignumber.js'
+import { openModal, openQuestionModal, lockModal } from '../../lib/modals'
+import { makeContractCall, setupChart } from './utils'
+
+export function openWithdrawStakeModal (event, store) {
+  const address = $(event.target).closest('[data-address]').data('address')
+
+  store.getState().channel
+    .push('render_withdraw_stake', { address })
+    .receive('ok', msg => {
+      if (msg.claim_html) {
+        openQuestionModal(
+          'Claim or order', 'Do you want withdraw or claim ordered withdraw?',
+          () => setupClaimWithdrawModal(address, store, msg),
+          () => setupWithdrawStakeModal(address, store, msg),
+          'Claim', 'Withdraw'
+        )
+      } else {
+        setupWithdrawStakeModal(address, store, msg)
+      }
+    })
+}
+
+function setupClaimWithdrawModal (address, store, msg) {
+  const $modal = $(msg.claim_html)
+  setupChart($modal.find('.js-stakes-progress'), msg.self_staked_amount, msg.staked_amount)
+  $modal.find('form').submit(() => {
+    claimWithdraw($modal, address, store)
+    return false
+  })
+  openModal($modal)
+}
+
+function setupWithdrawStakeModal (address, store, msg) {
+  const $modal = $(msg.html)
+  setupChart($modal.find('.js-stakes-progress'), msg.self_staked_amount, msg.staked_amount)
+  $modal.find('.btn-full-primary.withdraw').click(() => {
+    withdrawStake($modal, address, store)
+    return false
+  })
+  $modal.find('.btn-full-primary.order-withdraw').click(() => {
+    orderWithdraw($modal, address, store)
+    return false
+  })
+  openModal($modal)
+}
+
+function claimWithdraw ($modal, address, store) {
+  lockModal($modal)
+
+  const stakingContract = store.getState().stakingContract
+
+  makeContractCall(stakingContract.methods.claimOrderedWithdraw(address), store)
+}
+
+function withdrawStake ($modal, address, store) {
+  lockModal($modal)
+
+  const stakingContract = store.getState().stakingContract
+  const decimals = store.getState().tokenDecimals
+
+  const amount = new BigNumber($modal.find('[amount]').val().replace(',', '.').trim()).shiftedBy(decimals).integerValue()
+
+  makeContractCall(stakingContract.methods.withdraw(address, amount.toString()), store)
+}
+
+function orderWithdraw ($modal, address, store) {
+  lockModal($modal)
+
+  const stakingContract = store.getState().stakingContract
+  const decimals = store.getState().tokenDecimals
+
+  const amount = new BigNumber($modal.find('[amount]').val().replace(',', '.').trim()).shiftedBy(decimals).integerValue()
+
+  makeContractCall(stakingContract.methods.orderWithdraw(address, amount.toString()), store)
+}

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

@@ -115,6 +115,38 @@ defmodule BlockScoutWeb.StakesChannel do
     {:reply, {:ok, result}, socket}
   end
 
+  def handle_in("render_withdraw_stake", %{"address" => staking_address}, socket) do
+    pool = Chain.staking_pool(staking_address)
+    token = ContractState.get(:token)
+    delegator = Chain.staking_pool_delegator(staking_address, socket.assigns.account)
+    epoch_number = ContractState.get(:epoch_number, 0)
+
+    claim_html =
+      if Decimal.positive?(delegator.ordered_withdraw) and delegator.ordered_withdraw_epoch < epoch_number do
+        View.render_to_string(StakesView, "_stakes_modal_claim.html",
+          token: token,
+          delegator: delegator,
+          pool: pool
+        )
+      end
+
+    html =
+      View.render_to_string(StakesView, "_stakes_modal_withdraw.html",
+        token: token,
+        delegator: delegator,
+        pool: pool
+      )
+
+    result = %{
+      claim_html: claim_html,
+      html: html,
+      self_staked_amount: pool.self_staked_amount,
+      staked_amount: pool.staked_amount
+    }
+
+    {:reply, {:ok, result}, socket}
+  end
+
   def handle_out("staking_update", _data, socket) do
     push(socket, "staking_update", %{
       top_html: StakesController.render_top(socket)

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

@@ -37,6 +37,9 @@
         <%= if @buttons.move do %>
           <%= render BlockScoutWeb.StakesView, "_stakes_control_move.html", address: @pool.staking_address_hash %>
         <% end %>
+        <%= if @buttons.withdraw do %>
+          <%= render BlockScoutWeb.StakesView, "_stakes_control_withdraw.html", address: @pool.staking_address_hash %>
+        <% end %>
         <%= if @buttons.stake do %>
           <%= render BlockScoutWeb.StakesView, "_stakes_control_stake.html", address: @pool.staking_address_hash %>
         <% end %>

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

@@ -0,0 +1,9 @@
+<button
+    class="btn-stake-more-full btn-full-primary <%= if assigns[:extra_class] do @extra_class end %>"
+    <%= if assigns[:disabled] do "disabled" end %>
+>
+    <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_control_withdraw.html.eex

@@ -0,0 +1,6 @@
+<span class="stakes-control js-withdraw-stake <%= if assigns[:extra_class] do @extra_class end %>" data-address="<%= to_string(@address) %>">
+    <svg class="stakes-control-icon" 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.488L5.765 4.719a1.042 1.042 0 0 1-1.469 0 1.032 1.032 0 0 1 0-1.464L7.235.326a1.04 1.04 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.036 1.036 0 0 1-1.46 0z"/>
+    </svg>
+    <span class="stakes-control-text">Withdraw</span>
+</span>

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

@@ -0,0 +1,31 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-stake" role="document">
+    <div class="modal-content">
+      <%= render BlockScoutWeb.CommonComponentsView, "_modal_close_button.html" %>
+      <div class="modal-stake-two-cols">
+        <div>
+          <div class="modal-header">
+            <h5 class="modal-title"><%= gettext("Claim Ordered Withdraw") %></h5>
+          </div>
+          <div class="modal-body">
+            <form>
+              <p class="form-p">Your ordered amount</p>
+              <p class="form-p">
+                <span class="text-dark">
+                  <%= format_according_to_decimals(@delegator.ordered_withdraw, @token.decimals) %> <%= @token.symbol %>
+                </span>
+              </p>
+              <div class="form-buttons">
+                <%= render BlockScoutWeb.StakesView, "_stakes_btn_withdraw.html", text: gettext("Claim the Amount"), extra_class: "full-width btn-add-full" %>
+              </div>
+            </form>
+          </div>
+          <%= render BlockScoutWeb.CommonComponentsView, "_modal_bottom_disclaimer.html", text: "Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod temp incididunt ut labore et dolore magna. Sed do eiusmod temp incididunt ut.", extra_class: "b-b-r-0" %>
+        </div>
+        <div class="modal-stake-right">
+          <%= render BlockScoutWeb.StakesView, "_stakes_progress.html", pool: @pool, token: @token %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,51 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-stake" role="document">
+    <div class="modal-content">
+      <%= render BlockScoutWeb.CommonComponentsView, "_modal_close_button.html" %>
+      <div class="modal-stake-two-cols">
+        <div>
+          <div class="modal-header">
+            <h5 class="modal-title"><%= gettext("Withdraw") %></h5>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="input-group form-group">
+                <input amount type="text" class="form-control n-b-r" placeholder="<%= gettext("Amount") %>">
+                <div class="input-group-prepend last">
+                  <div class="input-group-text"><%= @token.symbol %></div>
+                </div>
+              </div>
+              <p class="form-p">You Staked:
+                <span class="text-dark">
+                  <%= format_according_to_decimals(@delegator.stake_amount, @token.decimals) %> <%= @token.symbol %>
+                </span>
+              </p>
+              <div class="form-buttons">
+                <%=
+                  if Decimal.positive?(@delegator.max_withdraw_allowed) do
+                    render BlockScoutWeb.StakesView,
+                    "_stakes_btn_withdraw.html",
+                    text: gettext("Withdraw Now"),
+                    extra_class: "full-width btn-add-full withdraw"
+                  end
+                %>
+                <%=
+                  if Decimal.positive?(@delegator.max_ordered_withdraw_allowed) do
+                    render BlockScoutWeb.StakesView,
+                    "_stakes_btn_withdraw.html",
+                    text: gettext("Order Withdrawal"),
+                    extra_class: "full-width btn-add-full order-withdraw"
+                  end
+                %>
+              </div>
+            </form>
+          </div>
+          <%= render BlockScoutWeb.CommonComponentsView, "_modal_bottom_disclaimer.html", text: "Lorem ipsum dolor sit amet, consect adipiscing elit, sed do eiusmod temp incididunt ut labore et dolore magna. Sed do eiusmod temp incididunt ut.", extra_class: "b-b-r-0" %>
+        </div>
+        <div class="modal-stake-right">
+          <%= render BlockScoutWeb.StakesView, "_stakes_progress.html", pool: @pool, token: @token %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>