Improve 'Withdraw' popup

apps/block_scout_web/assets/css/_mixins.scss

@@ -119,6 +119,10 @@
       opacity: 0.5;
     }
   }
+
+  &.m-b-0-7 {
+    margin-bottom: 0.7rem;
+  }
 }
 
 @mixin btn-line($bg-color: #fff, $text-color: $secondary) {

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

@@ -94,7 +94,7 @@ function isAmountValid (value, store, msg) {
   const currentStake = new BigNumber(msg.delegator_staked)
   const amount = new BigNumber(value.replace(',', '.').trim()).shiftedBy(decimals).integerValue()
 
-  if (!amount.isPositive() && !amount.isNegative()) {
+  if ((!amount.isPositive() && !amount.isNegative()) || amount.isZero()) {
     return 'Invalid amount'
   } else if (amount.isLessThan(currentStake) && currentStake.minus(amount).isLessThan(minStake)) {
     return `A minimum of ${minStake.shiftedBy(-decimals)} ${store.getState().tokenSymbol} is required to remain in the pool, or withdraw the entire amount to leave this pool`
@@ -114,7 +114,7 @@ function isWithdrawAmountValid (value, store, msg) {
     return null
   } else if (amount.isLessThan(currentStake) && currentStake.minus(amount).isLessThan(minStake)) {
     return null
-  } else if (!amount.isPositive() || amount.isGreaterThan(maxAllowed)) {
+  } else if (amount.isGreaterThan(maxAllowed)) {
     return null
   }
 

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

@@ -134,13 +134,14 @@ defmodule BlockScoutWeb.StakesChannel do
     balance = Chain.fetch_last_token_balance(socket.assigns.account, token.contract_address_hash)
 
     min_stake =
+      Decimal.new(
         if staking_address == socket.assigns.account do
           ContractState.get(:min_candidate_stake)
         else
           ContractState.get(:min_delegator_stake)
         end
+      )
 
-    min_stake = Decimal.new(min_stake)
     delegator_staked = Decimal.new((delegator && delegator.stake_amount) || 0)
 
     html =

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

@@ -14,41 +14,63 @@
                 <%= format_token_amount(@delegator.stake_amount, @token) %>
               </span>
             </p>
-            <%= if Decimal.positive?(@delegator.ordered_withdraw) do %>
+
+            <%
+              withdraw_now_allowed = Decimal.positive?(@delegator.max_withdraw_allowed)
+              order_allowed = Decimal.positive?(@delegator.max_ordered_withdraw_allowed)
+              has_already_ordered = Decimal.positive?(@delegator.ordered_withdraw)
+              show_order_withdrawal = order_allowed or has_already_ordered
+            %>
+
+            <% # display available amounts %>
+            <%= if has_already_ordered do %>
               <p class="form-p m-b-0"><%= gettext("Already Ordered:") %>
                 <span class="text-dark">
                   <%= format_token_amount(@delegator.ordered_withdraw, @token) %>
                 </span>
               </p>
             <% end %>
-            <%= if Decimal.positive?(@delegator.max_ordered_withdraw_allowed) or Decimal.positive?(@delegator.ordered_withdraw) do %>
+            <%= if show_order_withdrawal do %>
-              <div class="form-p m-b-0-7"><%= gettext("You Can Order:") %>
+              <div class="form-p m-b-0<%= if not withdraw_now_allowed, do: "-7" %>"><%= gettext("You Can Order:") %>
+                <%= if order_allowed do %>
                   <span class="text-dark link-dotted" data-available-amount="<%= from_wei(@delegator.max_ordered_withdraw_allowed, @token) %>">
                     <%= format_token_amount(@delegator.max_ordered_withdraw_allowed, @token) %>
                   </span>
                   <%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip.html", text: gettext("The amount can be claimed after the current epoch finishes.") %>
+                <% else %>
+                  <span class="text-dark">
+                    <%= format_token_amount(@delegator.max_ordered_withdraw_allowed, @token) %>
+                  </span>
+                <% end %>
               </div>
-              <%=
-                render BlockScoutWeb.StakesView,
-                "_stakes_btn_withdraw.html",
-                text: gettext("Order Withdrawal"),
-                extra_class: "full-width btn-add-full order-withdraw"
-              %>
             <% end %>
-            <%= if Decimal.positive?(@delegator.max_withdraw_allowed) do %>
+            <%= if withdraw_now_allowed do %>
               <div class="form-p m-b-0-7"><%= gettext("Available Now:") %>
                 <span class="text-dark link-dotted" data-available-amount="<%= from_wei(@delegator.max_withdraw_allowed, @token) %>">
                   <%= format_token_amount(@delegator.max_withdraw_allowed, @token) %>
                 </span>
                 <%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip.html", text: gettext("You can withdraw this amount right now.") %>
               </div>
+            <% end %>
+
+            <% # display buttons %>
+            <%=
+              if show_order_withdrawal do
+                bottom_margin = if withdraw_now_allowed, do: " m-b-0-7", else: ""
+                render BlockScoutWeb.StakesView,
+                  "_stakes_btn_withdraw.html",
+                  text: gettext("Order Withdrawal"),
+                  extra_class: "full-width btn-add-full order-withdraw" <> bottom_margin
+              end
+            %>
             <%=
+              if withdraw_now_allowed do
                 render BlockScoutWeb.StakesView,
                   "_stakes_btn_withdraw.html",
                   text: gettext("Withdraw Now"),
                   extra_class: "full-width btn-add-full withdraw"
+              end
             %>
-            <% end %>
           </form>
         </div>
         <%= render BlockScoutWeb.CommonComponentsView, "_modal_bottom_disclaimer.html", text: gettext("<p>Pending stake (stake placed on a candidate pool or placed during the current staking epoch) may be withdrawn now.</p>