feat: truncate balance value if it's too large

bochaco · Jan 12, 2025 · b0f6fb8 · b0f6fb8
1 parent f67b8ed
commit b0f6fb8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/src/helpers.rs b/src/helpers.rs
@@ -9,13 +9,26 @@ use super::{
     },
 };
 
+use alloy::primitives::U256;
 use gloo_timers::future::TimeoutFuture;
 use leptos::{logging, prelude::*, task::spawn_local};
 use rand::Rng;
 
 // Duration of each alert message shows in the UI
 const ALERT_MSG_DURATION_MILLIS: u32 = 9_000;
 
+// Format a U256 value truncating it to only 4 decimals if it's too large in attos.
+pub fn truncated_balance_str(v: U256) -> String {
+    if v > U256::from(1_000_000u128) {
+        format!(
+            "{:.4}",
+            f64::from(v / U256::from(1_000_000_000_000u128)) / 1_000_000.0
+        )
+    } else {
+        format!("{v} attos")
+    }
+}
+
 // Shows an alert message in the UI (currently as an error).
 // TODO: allow to provide the type of alert, i.e. info, warning, etc.
 pub fn show_alert_msg(msg: String) {

diff --git a/src/nodes_list_view.rs b/src/nodes_list_view.rs
@@ -1,7 +1,7 @@
 use super::{
     app::{BatchInProgress, ClientGlobalState},
     chart_view::{node_metrics_update, ChartSeriesData, NodeChartView},
-    helpers::{node_logs_stream, show_alert_msg},
+    helpers::{node_logs_stream, show_alert_msg, truncated_balance_str},
     icons::{
         IconCancel, IconRecycle, IconRemove, IconShowChart, IconShowLogs, IconStartNode,
         IconStopNode, IconUpgradeNode,
@@ -331,13 +331,15 @@ fn NodeInstanceView(
                     </p>
                     <p>
                         <div class="flex flex-row">
-                            <div class="basis-1/2">
+                            <div class="basis-2/3">
                                 <span class="node-info-item">"Balance: "</span>
                                 {move || {
-                                    info.read().balance.map_or(" -".to_string(), |v| v.to_string())
+                                    info.read()
+                                        .balance
+                                        .map_or(" -".to_string(), |v| truncated_balance_str(v))
                                 }}
                             </div>
-                            <div class="basis-1/2">
+                            <div class="basis-1/3">
                                 <span class="node-info-item">"Rewards: "</span>
                                 {move || {
                                     info.read().rewards.map_or(" -".to_string(), |v| v.to_string())

diff --git a/src/stats.rs b/src/stats.rs
@@ -1,6 +1,6 @@
-use super::app::ClientGlobalState;
+use super::{app::ClientGlobalState, helpers::truncated_balance_str};
 
-use alloy::primitives::U256;
+use alloy::primitives::{utils::format_units, U256};
 use leptos::prelude::*;
 use std::collections::HashMap;
 
@@ -27,7 +27,7 @@ pub fn AggregatedStatsView() -> impl IntoView {
             .filter(|n| n.read().status.is_inactive())
             .count()
     };
-    let balance = move || {
+    let total_balance = move || {
         let mut total = U256::ZERO;
         let seen = context
             .nodes
@@ -48,8 +48,9 @@ pub fn AggregatedStatsView() -> impl IntoView {
             total += balance;
         }
 
-        total.to_string()
+        total
     };
+
     let connected_peers = move || {
         context
             .nodes
@@ -144,7 +145,12 @@ pub fn AggregatedStatsView() -> impl IntoView {
         <div class="stats flex">
             <div class="stat place-items-center">
                 <div class="stat-title">Current total balance</div>
-                <div class="stat-value text-primary">{balance}</div>
+                <div class="stat-value text-primary">
+                    {move || truncated_balance_str(total_balance())}
+                </div>
+                <div class="stat-desc text-secondary">
+                    {move || format_units(total_balance(), "ether").unwrap_or_default()}
+                </div>
             </div>
 
             <div class="stat place-items-center">