Node GUI visual improvements

Author: ImplOfAnImpl

Cargo.lock

@@ -174,7 +174,9 @@ hex = "0.4"
 hex-literal = "0.4"
 hmac = "0.12"
 iced = "0.13"
-iced_aw = "0.11"
+# Note: we need this fix - https://github.com/iced-rs/iced_aw/pull/329
+# TODO: switch back to a released version of iced_aw once the fix is released (need version > 0.12)
+iced_aw = { git = "https://github.com/iced-rs/iced_aw", branch = "main" }
 iced_fonts = "0.1"
 indoc = "2.0"
 itertools = "0.14"

Cargo.toml

@@ -55,7 +55,8 @@ use super::{
 
 // The fork at which we:
 // * enable tokens v1;
-// * upgrade consensus to PoSConsensusVersion::V1 to dis-incentivize large pools.
+// * upgrade consensus to PoSConsensusVersion::V1 to dis-incentivize large pools;
+// * change the maturity block count to 7200.
 const TESTNET_FORK_HEIGHT_1_TOKENS_V1: BlockHeight = BlockHeight::new(78_440);
 
 // The fork at which we:

common/src/chain/config/builder.rs

@@ -83,10 +83,16 @@ impl Checkpoints {
             .checkpoints
             .range(..=height)
             .next_back()
-            .expect("Genesis must be there, at least.");
+            .expect("Genesis must be there, at least");
         (*cp.0, *cp.1)
     }
 
+    pub fn last_checkpoint(&self) -> (BlockHeight, Id<GenBlock>) {
+        let (height, cp) =
+            self.checkpoints.last_key_value().expect("Genesis must be there, at least");
+        (*height, *cp)
+    }
+
     #[cfg(test)]
     pub fn checkpoints_map(&self) -> &BTreeMap<BlockHeight, Id<GenBlock>> {
         &self.checkpoints

common/src/chain/config/checkpoints.rs

@@ -16,7 +16,7 @@
 use std::collections::BTreeMap;
 
 use iced::{
-    widget::{button, column, row, text_input, tooltip, tooltip::Position, Text},
+    widget::{button, column, row, text_input, tooltip, tooltip::Position, Space, Text},
     Element, Length,
 };
 use iced_aw::{Grid, GridRow};
@@ -61,9 +61,15 @@ pub fn view_delegation(
     delegate_staking_amounts: &BTreeMap<DelegationId, String>,
     still_syncing: Option<WalletMessage>,
 ) -> Element<'static, WalletMessage> {
-    let field = |text: String| iced::widget::container(Text::new(text)).padding(5);
-
     let delegation_balance_grid = {
+        let field_padding = 5;
+        // Default horizontal padding used by Button.
+        let button_horizontal_padding = 10;
+        let field = |text: String| iced::widget::container(Text::new(text)).padding(field_padding);
+
+        // Note: due to how the items are arranged in each row (and due to their lack of borders),
+        // the visual spacing between columns will be `field_padding + button_horizontal_padding`.
+
         // We print the table only if there are delegations
         if account.delegations_balance.is_empty() {
             Grid::new().push(
@@ -106,7 +112,7 @@ pub fn view_delegation(
                                         }
                                     )
                                 )
-                                .padding(5),
+                                .padding(field_padding),
                                 Text::new(delegation_address.to_string()),
                                 Position::Bottom,
                             )
@@ -134,7 +140,7 @@ pub fn view_delegation(
                                         }
                                     )
                                 )
-                                .padding(5),
+                                .padding(field_padding),
                                 Text::new(pool_address.to_string()),
                                 Position::Bottom,
                             )
@@ -149,6 +155,10 @@ pub fn view_delegation(
                             .on_press(WalletMessage::CopyToClipboard(pool_address.to_string())),
                         ])
                         .push(field(print_coin_amount(chain_config, balance)))
+                        .push(Space::new(
+                            Length::Fixed(button_horizontal_padding as f32),
+                            Length::Shrink,
+                        ))
                         .push(
                             text_input("Amount", &delegate_staking_amount)
                                 .on_input(move |value| {
@@ -158,9 +168,13 @@ pub fn view_delegation(
                                         WalletMessage::NoOp
                                     }
                                 })
-                                .padding(5)
+                                .padding(field_padding)
                                 .width(Length::Fixed(100.)),
                         )
+                        .push(Space::new(
+                            Length::Fixed((field_padding + button_horizontal_padding) as f32),
+                            Length::Shrink,
+                        ))
                         .push(
                             button(Text::new("Delegate")).on_press(
                                 still_syncing
@@ -174,7 +188,16 @@ pub fn view_delegation(
         }
     };
 
-    let maturity_period = chain_config.staking_pool_spend_maturity_block_count(1.into()).to_int();
+    let maturity_period = chain_config
+        .staking_pool_spend_maturity_block_count(
+            // Assume that at the last checkpoint we already had the latest value for the maturity
+            // period.
+            // Note: this value has only been upgraded once on testnet (where we initially had a
+            // 2000 block maturity period).
+            // TODO: it's probably better to pass the actual tip height here anyway.
+            chain_config.height_checkpoints().last_checkpoint().0,
+        )
+        .to_int();
     let maturity_period_text = format!(
         "Maturity period: {maturity_period} blocks (a block takes on average {} seconds)",
         chain_config.target_block_spacing().as_secs()

node-gui/src/main_window/main_widget/tabs/wallet/delegation.rs

@@ -91,6 +91,10 @@ pub fn view_left_panel(
         WalletMessage::SelectAccount(item.account_id)
     });
 
+    let panel_button_row_padding = 8;
+    // The pick-list row looks a bit nicer when these values are equal.
+    let pick_list_row_spacing = panel_button_row_padding;
+
     let panel_button = |label, panel, selected_panel, tooltip_text| {
         let label = row![
             text(label).size(16).width(Length::Fill),
@@ -101,7 +105,7 @@ pub fn view_left_panel(
                 tooltip::Position::Bottom
             )
             .gap(10)
-            .style(iced::widget::container::bordered_box),
+            .style(iced::widget::container::bordered_box)
         ];
 
         button(label)
@@ -112,7 +116,7 @@ pub fn view_left_panel(
             })
             .width(Length::Fill)
             .on_press(WalletMessage::SelectPanel(panel))
-            .padding(8)
+            .padding(panel_button_row_padding)
     };
 
     // `next_height` is used to prevent flickering when a new block is found
@@ -159,7 +163,7 @@ pub fn view_left_panel(
         column![
             text(file_name).size(25),
             row![
-                pick_list,
+                pick_list.width(Length::Fill),
                 button(Text::new("+"))
                     .style(iced::widget::button::success)
                     .on_press(WalletMessage::NewAccount),
@@ -170,14 +174,17 @@ pub fn view_left_panel(
                     tooltip::Position::Bottom
                 )
                 .gap(10)
-                .style(iced::widget::container::bordered_box),
+                .style(iced::widget::container::bordered_box)
             ]
             .align_y(Alignment::Center)
-            .spacing(10)
+            .spacing(pick_list_row_spacing)
             .width(Length::Fill)
         ]
         .spacing(10)
-        .padding(10),
+        // Note: this specifies both vertical and horizontal padding; so if this value is different
+        // from the one used in `panel_button`, the tooltip's question mark will be misaligned with
+        // `panel_button's question marks.
+        .padding(panel_button_row_padding),
         match wallet_info.wallet_type {
             #[cfg(feature = "trezor")]
             WalletType::Trezor => {

node-gui/src/main_window/main_widget/tabs/wallet/left_panel.rs

@@ -34,15 +34,26 @@ pub fn view_transactions(
     let mut transactions = Column::new();
 
     let current_transaction_list = &account.transaction_list;
-    let mut transaction_list = Grid::new().width(Length::Fill).push(
-        GridRow::new()
-            .push(field("#".into()))
-            .push(field("Transaction Id".into()))
-            .push(field("Timestamp (UTC)".into()))
-            .push(field("Type".into()))
-            .push(field("Amount".into()))
-            .push(field("State".into())),
-    );
+    let mut transaction_list = Grid::new()
+        .width(Length::Fill)
+        .push(
+            GridRow::new()
+                .push(field("#".into()))
+                .push(field("Transaction Id".into()))
+                .push(field("Timestamp (UTC)".into()))
+                .push(field("Type".into()))
+                .push(field("Amount".into()))
+                .push(field("State".into())),
+        )
+        .column_widths(&[
+            // Make the number column stretch just a little bit, compared to the other ones.
+            Length::FillPortion(1),
+            Length::FillPortion(5),
+            Length::FillPortion(5),
+            Length::FillPortion(5),
+            Length::FillPortion(5),
+            Length::FillPortion(5),
+        ]);
     for (index, tx) in current_transaction_list.txs.iter().enumerate() {
         let amount_str = tx
             .tx_type