Display “Accounted Stake Amount” and “Current Reward Percent” in delegators list

apps/block_scout_web/assets/css/components/_stakes_table.scss

@@ -118,6 +118,7 @@ $stakes-link-color: $primary !default;
 .stakes-th-text {
   margin-right: 10px;
   white-space: nowrap;
+  text-align: center;
 }
 
 .stakes-td {

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

@@ -13,14 +13,14 @@
               <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: gettext("Staker's Address"), tooltip: gettext("All pool participant addresses. The top address belongs to the validator.") %>
             </div>
             <div class="col-4">
-              <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: gettext("Total Stake Amount"), tooltip: gettext("Amount of STAKE placed by an address") %>
+              <%= render BlockScoutWeb.StakesView, "_stakes_th.html", title: gettext("Current Stake Amount") <> "<br />(" <> gettext("Accounted Stake Amount")  <> ")", tooltip: gettext("Amount of STAKE placed by an address") %>
             </div>
             <div class="col-3">
               <%=
-                title = if @pool.is_validator do gettext("Reward Percent") else gettext("Potential Reward Percent") end
+                _title = if @pool.is_validator do gettext("Reward Percent") else gettext("Potential Reward Percent") end
                 render BlockScoutWeb.StakesView,
                   "_stakes_th.html",
-                  title: title,
+                  title: gettext("Potential Reward Percent") <> "<br />(" <> gettext("Current Reward Percent")  <> ")",
                   tooltip: gettext("Reward distribution is based on stake amount. Validator receives a minimum of 30%.")
               %>
             </div>
@@ -52,8 +52,15 @@
                     <% end %>
                   </div>
                 </div>
-                <div class="col-4 stakes-td stakes-cell"><%= format_token_amount(delegator.stake_amount, @token, symbol: false) %></div>
-                <div class="col-3 stakes-td stakes-cell"><%= if delegator.reward_ratio do "#{delegator.reward_ratio}%" else "-" end %></div>
+                <div class="col-4 stakes-td stakes-cell"><%= format_token_amount(delegator.stake_amount, @token, symbol: false) %> (<%= if delegator.snapshotted_stake_amount do format_token_amount(delegator.snapshotted_stake_amount, @token, symbol: false) else 0 end %>)</div>
+                <div class="col-3 stakes-td stakes-cell">
+                <%= if delegator.reward_ratio do %> 
+                  <%= delegator.reward_ratio %>%
+                  (<%= if delegator.snapshotted_reward_ratio do "#{delegator.snapshotted_reward_ratio}%" else "0%" end %>)
+                <% else %>
+                  -
+                <% end %>
+                </div>
               </div>
             <% end %>
           </div>

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

@@ -1,6 +1,6 @@
 <th class="stakes-table-th">
     <div class="stakes-table-th-content">
-        <span class="stakes-th-text"><%= @title %></span>
+        <span class="stakes-th-text"><%= raw(@title) %></span>
         <%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip.html", text: @tooltip %>
     </div>
 </th>