(add) stakes withdraw modal

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

@@ -11,15 +11,27 @@ $(function () {
   })
 
   $('.js-stake-stake').on('click', function () {
-    $('#stakeModal').modal()
-    const progress = parseInt($('.js-stakes-progress-data-progress').text())
-    const total = parseInt($('.js-stakes-progress-data-total').text())
+    const modal = '#stakeModal'
+    const progress = parseInt($(`${modal} .js-stakes-progress-data-progress`).text())
+    const total = parseInt($(`${modal} .js-stakes-progress-data-total`).text())
 
-    setupStakesProgress(progress, total)
+    $(modal).modal()
+
+    setupStakesProgress(progress, total, modal)
+  })
+
+  $('.js-withdraw-stake').on('click', function () {
+    const modal = '#withdrawModal'
+    const progress = parseInt($(`${modal} .js-stakes-progress-data-progress`).text())
+    const total = parseInt($(`${modal} .js-stakes-progress-data-total`).text())
+
+    $(modal).modal()
+
+    setupStakesProgress(progress, total, modal)
   })
 
-  function setupStakesProgress (progress, total) {
-    const stakeProgress = $('#stakeProgress')
+  function setupStakesProgress (progress, total, modal) {
+    const stakeProgress = $(`${modal} .js-stakes-progress`)
     const primaryColor = $('.btn-full-primary').css('background-color')
     const backgroundColors = [
       primaryColor,

apps/block_scout_web/lib/block_scout_web/templates/stakes/_stakes_btn_stake.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-1zM8.785 8.675c-.114.114-.25.187-.394.237-.007.003-.012.01-.02.013a1.036 1.036 0 0 1-1.136-.221L4.296 5.765a1.038 1.038 0 1 1 1.469-1.469L7 5.531V1a1 1 0 0 1 2 0v4.54l1.246-1.246a1.033 1.033 0 0 1 1.46 1.46L8.785 8.675z"/>
+    </svg>
+    <span class="btn-full-primary-text"><%= @text %></span>
+</button>

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

@@ -1,9 +0,0 @@
-<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="#FFF" 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-1zM8.785 8.675c-.114.114-.25.187-.394.237-.007.003-.012.01-.02.013a1.036 1.036 0 0 1-1.136-.221L4.296 5.765a1.038 1.038 0 1 1 1.469-1.469L7 5.531V1a1 1 0 0 1 2 0v4.54l1.246-1.246a1.033 1.033 0 0 1 1.46 1.46L8.785 8.675z"/>
-    </svg>
-    <span class="btn-full-primary-text"><%= @text %></span>
-</button>

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_modal_become_candidate.html.eex

@@ -1,4 +1,4 @@
-<div class="modal fade" id="becomeCandidateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+<div class="modal fade" id="becomeCandidateModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-become-candidate" role="document">
     <div class="modal-content">
       <div class="modal-header">

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

@@ -1,4 +1,4 @@
-<div class="modal fade" id="stakeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+<div class="modal fade" id="stakeModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-stake" role="document">
     <div class="modal-content">
       <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close">
@@ -22,7 +22,7 @@
               <p class="form-p m-b-0">Minimum Stake: <span class="text-dark">100 POA20</span></p>
               <p class="form-p">Your Balance: <span class="text-dark">2000 POA20</span></p>
               <div class="form-button">
-                <%= render BlockScoutWeb.StakesView, "_stakes_btn_stake_more.html", text: gettext("Stake More"), extra_class: "full-width" %>
+                <%= render BlockScoutWeb.StakesView, "_stakes_btn_stake.html", text: gettext("Stake More"), extra_class: "full-width" %>
               </div>
             </form>
           </div>

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

@@ -1,4 +1,4 @@
-<div class="modal fade" id="validatorInfoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+<div class="modal fade" id="validatorInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-validator-info" role="document">
     <div class="modal-content">
       <div class="modal-header">

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

@@ -0,0 +1,53 @@
+<div class="modal fade" id="withdrawModal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-stake" role="document">
+    <div class="modal-content">
+      <button type="button" class="close close-modal" data-dismiss="modal" aria-label="Close">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+            <path fill="#F6F7F9" fill-rule="evenodd" d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"/>
+        </svg>
+      </button>
+      <div class="modal-stake-two-cols">
+        <div class="modal-stake-left">
+          <div class="modal-header">
+            <h5 class="modal-title"><%= gettext("Withdraw") %></h5>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="input-group form-group">
+                <input type="text" class="form-control n-b-r" placeholder='<%= gettext("Amount") %>'>
+                <div class="input-group-prepend last">
+                  <div class="input-group-text">POA20</div>
+                </div>
+              </div>
+              <p class="form-p m-b-0">Your Balance: <span class="text-dark">2000 POA20</span></p>
+              <p class="form-p">Your Staked: <span class="text-dark">600 POA20</span></p>
+              <div class="form-button">
+                <%= render BlockScoutWeb.StakesView, "_stakes_btn_withdraw.html", text: gettext("Withdraw Now"), extra_class: "full-width" %>
+                <%= render BlockScoutWeb.StakesView, "_stakes_btn_withdraw.html", text: gettext("Order Withdrawal"), extra_class: "full-width", disabled: true %>
+              </div>
+            </form>
+          </div>
+          <div class="modal-bottom-disclaimer b-b-r-0">
+            <div class="modal-bottom-disclaimer-graphic">
+                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="16">
+                    <path fill="#333" fill-rule="evenodd" d="M9 16H1a1 1 0 0 1 0-2h3V6H1a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v9h3a1 1 0 0 1 0 2zM5 2H4a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/>
+                </svg>
+            </div>
+            <div class="modal-bottom-disclaimer-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.</div>
+          </div>
+        </div>
+        <div class="modal-stake-right">
+          <%=
+            render BlockScoutWeb.StakesView,
+            "_stakes_progress.html",
+            progress: "1250",
+            total: "3000",
+            pool: "0x7130-95a480",
+            stakes_ratio: "1.095%",
+            delegators: "3200"
+          %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,9 +1,8 @@
 <div class="stakes-progress">
   <div class="stakes-progress-graph">
     <canvas
-      class="stakes-progress-graph-canvas"
+      class="stakes-progress-graph-canvas js-stakes-progress"
       height="125"
-      id="stakeProgress"
       width="125"
     ></canvas>
     <div class="stakes-progress-data">

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

@@ -81,6 +81,7 @@
 </div>
 <%= render BlockScoutWeb.StakesView, "_stakes_modal_validator_info.html" %>
 <%= render BlockScoutWeb.StakesView, "_stakes_modal_stake.html" %>
+<%= render BlockScoutWeb.StakesView, "_stakes_modal_withdraw.html" %>
 <%=
     render BlockScoutWeb.CommonComponentsView,
     "_pagination.html"