Merge pull request #1955 from mintlayer/node_gui_visual_improvements2

More node gui visual improvements; fix wallet recovery in node-gui

Author: ImplOfAnImpl

node-gui/backend/src/backend_impl.rs

@@ -63,7 +63,9 @@ use super::{
     wallet_events::GuiWalletEvents,
 };
 
-const TRANSACTION_LIST_PAGE_COUNT: usize = 10;
+/// This number of transactions will fit into the corresponding widget when the main window
+/// has the initial height (both when the status bar is visible and when it's not).
+const TRANSACTION_LIST_PAGE_COUNT: usize = 16;
 /// In which top N MB should we aim for our transactions to be in the mempool
 /// e.g. for 5, we aim to be in the top 5 MB of transactions based on paid fees
 /// This is to avoid getting trimmed off the lower end if the mempool runs out of memory

node-gui/src/main.rs

@@ -26,7 +26,7 @@ use iced::{
     advanced::graphics::core::window,
     executor, font,
     widget::{column, row, text, tooltip, Text},
-    Element, Length, Settings, Subscription, Task, Theme,
+    Element, Length, Settings, Size, Subscription, Task, Theme,
 };
 use iced_aw::widgets::spinner::Spinner;
 use tokio::sync::mpsc::UnboundedReceiver;
@@ -46,6 +46,10 @@ const HOT_WALLET_TOOLTIP_TEXT: &str = "Start the wallet in Hot mode and connect
 const MAIN_NETWORK_TOOLTIP: &str = "The 'Mainnet' is the main network that has coins with value.";
 const TEST_NETWORK_TOOLTIP: &str = "The 'Testnet' is the network with coins that have no value, but is used for testing various applications before deploying them on Mainnet.";
 
+// Note: these are the default values used by iced.
+const INITIAL_MAIN_WINDOW_WIDTH: f32 = 1024.0;
+const INITIAL_MAIN_WINDOW_HEIGHT: f32 = 768.0;
+
 pub fn main() -> iced::Result {
     utils::rust_backtrace::enable();
 
@@ -56,6 +60,7 @@ pub fn main() -> iced::Result {
         .subscription(subscription)
         .theme(theme)
         .window(window::Settings {
+            size: Size::new(INITIAL_MAIN_WINDOW_WIDTH, INITIAL_MAIN_WINDOW_HEIGHT),
             exit_on_close_request: false,
             ..Default::default()
         })

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

@@ -18,6 +18,12 @@ use iced::{
     Element, Length,
 };
 
+use node_gui_backend::messages::WalletInfo;
+
+use crate::main_window::main_widget::tabs::wallet::{
+    status_bar::estimate_status_bar_height, STATUS_BAR_SEPARATOR_HEIGHT,
+};
+
 use super::{ConsoleState, WalletMessage};
 
 const SUBMIT_TOOLTIP_TEXT: &str = "Submit the provided command to be processed";
@@ -26,6 +32,7 @@ pub const CONSOLE_OUTPUT_ID: &str = "console_input_id";
 pub fn view_console(
     state: &ConsoleState,
     still_syncing: Option<WalletMessage>,
+    wallet_info: &WalletInfo,
 ) -> Element<'static, WalletMessage> {
     let s: Vec<String> = state
         .console_inputs
@@ -35,8 +42,20 @@ pub fn view_console(
         .collect();
 
     let output = s.join("\n");
+    // Note: it doesn't seem possible to make Scrollable fill the entire parent container,
+    // e.g. passing Length::Fill for height will result in a panic:
+    // "scrollable content must not fill its vertical scrolling axis".
+    // So we have to use a fixed height. The value is chosen such that when the main window
+    // has the initial height, the console widget fills the entire area of its parent.
+    // But we also have to take the status bar into account.
+    #[allow(clippy::float_arithmetic)]
+    let height = {
+        let status_bar_height =
+            estimate_status_bar_height(&wallet_info.extra_info) + STATUS_BAR_SEPARATOR_HEIGHT;
+        Length::Fixed(570.0 - status_bar_height)
+    };
     let console_output = Scrollable::new(iced::widget::text(output.clone()))
-        .height(Length::Fixed(350.0))
+        .height(height)
         .width(Length::Fill)
         .id(Id::new(CONSOLE_OUTPUT_ID));
 

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

@@ -52,6 +52,8 @@ use crate::main_window::NodeState;
 
 use super::{Tab, TabsMessage};
 
+pub const STATUS_BAR_SEPARATOR_HEIGHT: f32 = 1.0;
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum SelectedPanel {
     Transactions,
@@ -550,6 +552,7 @@ impl Tab for WalletTab {
                         SelectedPanel::Console => console::view_console(
                             &self.account_state.console_state,
                             still_syncing.clone(),
+                            wallet_info,
                         ),
                     };
 
@@ -577,7 +580,7 @@ impl Tab for WalletTab {
         {
             Element::new(column![
                 pane_grid,
-                horizontal_rule(1),
+                horizontal_rule(STATUS_BAR_SEPARATOR_HEIGHT),
                 container(status_bar).width(Length::Fill)
             ])
         } else {

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

@@ -23,12 +23,27 @@ use wallet_controller::types::WalletExtraInfo;
 
 use super::WalletMessage;
 
+const TEXT_SIZE: f32 = 16.;
+const VERTICAL_PADDING: f32 = 5.;
+const HORIZONTAL_PADDING: f32 = 10.;
+
+#[allow(clippy::float_arithmetic)]
+pub fn estimate_status_bar_height(wallet_info: &WalletExtraInfo) -> f32 {
+    match wallet_info {
+        WalletExtraInfo::SoftwareWallet => 0.,
+        WalletExtraInfo::TrezorWallet { .. } => {
+            TEXT_SIZE + 2. * VERTICAL_PADDING
+            // For some reason, the status bar gets a bit of additional height.
+            + 4.
+        }
+    }
+}
+
 pub fn view_status_bar(wallet_info: &WalletExtraInfo) -> Option<Element<'static, WalletMessage>> {
     let bold_font = Font {
         weight: font::Weight::Bold,
         ..Font::default()
     };
-    let text_size = 16;
 
     let row = match wallet_info {
         WalletExtraInfo::SoftwareWallet => {
@@ -44,28 +59,25 @@ pub fn view_status_bar(wallet_info: &WalletExtraInfo) -> Option<Element<'static,
 
             row![
                 rich_text([span("Device name: ").font(bold_font), span(device_name.clone())])
-                    .size(text_size),
+                    .size(TEXT_SIZE),
                 rich_text([
                     span("Firmware version: ").font(bold_font),
                     span(firmware_version.clone())
                 ])
-                .size(text_size),
+                .size(TEXT_SIZE),
             ]
         }
     };
 
-    let vertical_padding = 5.;
-    let horizontal_padding = 10.;
-
     let status_bar = Container::new(
         row.width(Length::Fill)
             .padding(Padding {
-                top: vertical_padding,
-                right: horizontal_padding,
-                bottom: vertical_padding,
-                left: horizontal_padding,
+                top: VERTICAL_PADDING,
+                right: HORIZONTAL_PADDING,
+                bottom: VERTICAL_PADDING,
+                left: HORIZONTAL_PADDING,
             })
-            .spacing(horizontal_padding)
+            .spacing(HORIZONTAL_PADDING)
             .align_y(Alignment::Center),
     )
     .style(|theme: &Theme| {

node-gui/src/main_window/mod.rs

@@ -882,7 +882,7 @@ impl MainWindow {
                             WalletType::Trezor => hw_wallet_create_dialog(
                                 Box::new(move || MainWindowMessage::ImportWalletMnemonic {
                                     args: WalletArgs::Trezor,
-                                    import: ImportOrCreate::Create,
+                                    import: ImportOrCreate::Import,
                                 }),
                                 Box::new(|| MainWindowMessage::CloseDialog),
                                 ImportOrCreate::Import,

wallet/src/account/transaction_list/mod.rs

@@ -82,10 +82,11 @@ pub struct TransactionInfo {
 
 #[derive(Debug, Clone, Serialize)]
 pub struct TransactionList {
-    /// How many transactions are in the single page (currently it's always 10)
+    /// How many transactions are in a single page.
     pub count: usize,
 
-    /// How many transactions the user has seen and scrolled through (normally it can be 0, 10, 20, etc.)
+    /// How many transactions the user has seen and scrolled through
+    /// (normally it will be a multiple of `count`).
     pub skip: usize,
 
     /// Total number of transactions