Fix 'Stake' and 'Become a Candidate' popups

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

@@ -16,9 +16,10 @@ export function openBecomeCandidateModal (store) {
     .push('render_become_candidate')
     .receive('ok', msg => {
       const $modal = $(msg.html)
+      const $form = $modal.find('form')
 
       setupValidation(
-        $modal.find('form'),
+        $form,
         {
           'candidate-stake': value => isCandidateStakeValid(value, store, msg),
           'mining-address': value => isMiningAddressValid(value, store)
@@ -26,7 +27,14 @@ export function openBecomeCandidateModal (store) {
         $modal.find('form button')
       )
 
-      $modal.find('form').submit(() => {
+      $modal.find('[data-available-amount]').click(e => {
+        const amount = $(e.currentTarget).data('available-amount')
+        $('[candidate-stake]', $form).val(amount).trigger('input')
+        $('.tooltip').tooltip('hide')
+        return false
+      })
+
+      $form.submit(() => {
         becomeCandidate($modal, store, msg)
         return false
       })

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

@@ -107,7 +107,7 @@ defmodule BlockScoutWeb.StakesChannel do
   end
 
   def handle_in("render_become_candidate", _, socket) do
-    min_candidate_stake = ContractState.get(:min_candidate_stake)
+    min_candidate_stake = Decimal.new(ContractState.get(:min_candidate_stake))
     token = ContractState.get(:token)
     balance = Chain.fetch_last_token_balance(socket.assigns.account, token.contract_address_hash)
 
@@ -140,19 +140,22 @@ defmodule BlockScoutWeb.StakesChannel do
         ContractState.get(:min_delegator_stake)
       end
 
+    min_stake = Decimal.new(min_stake)
+    delegator_staked = Decimal.new((delegator && delegator.stake_amount) || 0)
+
     html =
       View.render_to_string(StakesView, "_stakes_modal_stake.html",
-        min_stake: min_stake,
         balance: balance,
-        token: token,
+        delegator_staked: delegator_staked,
+        min_stake: min_stake,
         pool: pool,
-        delegator: delegator
+        token: token
       )
 
     result = %{
       html: html,
       balance: balance,
-      delegator_staked: (delegator && delegator.stake_amount) || 0,
+      delegator_staked: delegator_staked,
       min_stake: min_stake,
       self_staked_amount: pool.self_staked_amount,
       total_staked_amount: pool.total_staked_amount

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

@@ -16,9 +16,15 @@
             </span>
           </p>
           <p class="form-p"><%= gettext("Your Balance:") %>
-            <span class="text-dark">
+            <%= if @balance >= @min_candidate_stake do %>
-              <%= format_token_amount(@balance, @token) %>
+              <span class="text-dark link-dotted" data-available-amount="<%= from_wei(@balance, @token) %>">
-            </span>
+                <%= format_token_amount(@balance, @token) %>
+              </span>
+            <% else %>
+              <span class="text-dark">
+                <%= format_token_amount(@balance, @token) %>
+              </span>
+            <% end %>
           </p>
           <div class="form-buttons"><%= render BlockScoutWeb.CommonComponentsView, "_btn_add_full.html", text: gettext("Become a Candidate"), extra_class: "full-width" %></div>
         </form>

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

@@ -10,12 +10,12 @@
           <form>
             <%= render BlockScoutWeb.CommonComponentsView, "_input_group.html", id: "delegator-stake", classes: "form-group", input_classes: "form-control n-b-r", attributes: "delegator-stake", type: "text", placeholder: gettext("Amount"), prepend: @token.symbol %>
 
-            <% has_stake = @delegator && Decimal.positive?(@delegator.stake_amount) %>
+            <% has_stake = Decimal.positive?(@delegator_staked) %>
 
             <%= if has_stake do %>
               <p class="form-p m-b-0"><%= gettext("Your Current Stake:") %>
                 <span class="text-dark">
-                  <%= format_token_amount(@delegator.stake_amount, @token) %>
+                  <%= format_token_amount(@delegator_staked, @token) %>
                 </span>
               </p>
             <% else %>
@@ -26,7 +26,7 @@
               </p>
             <% end %>
             <p class="form-p"><%= gettext("Your Balance:") %>
-              <%= if Decimal.positive?(@balance) do %>
+              <%= if Decimal.add(@delegator_staked, @balance) >= @min_stake do %>
                 <span class="text-dark link-dotted" data-available-amount="<%= from_wei(@balance, @token) %>">
                   <%= format_token_amount(@balance, @token) %>
                 </span>

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

@@ -36,11 +36,12 @@
               %>
             <% end %>
             <%= if Decimal.positive?(@delegator.max_withdraw_allowed) do %>
-              <p class="form-p m-b-0-7"><%= gettext("Available Now:") %>
+              <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>
-              </p>
+                <%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip.html", text: gettext("You can withdraw this amount right now.") %>
+              </div>
               <%=
                 render BlockScoutWeb.StakesView,
                 "_stakes_btn_withdraw.html",