popup ids, server selection, other misc updates

README.md

@@ -35,6 +35,21 @@ Once you have Rusty Kaspa built, you will be able to build and run this project
 ```bash
 cargo run --release
 ```
+Once you have Rusty Kaspa built, you will be able to build and run this project as follows:
+
+#### Running as Native App
+```bash
+cargo run --release
+```
+
+#### Running as Web App
+```bash
+cargo install trunk
+trunk serve --release
+```
+Access via [https://localhost:8080](https://localhost:8080)
+
+While the application is a static serve, you can not load it from the local file system due to CORS restrictions. Due to this, a web server is required. This application is designed to be built with [Trunk](https://trunkrs.dev/) and is served from the `dist/` folder.  This is a self-contained client-side application - once the application is loaded, the web server is no longer required.
 
 ## License
 

Servers.toml

@@ -4,21 +4,42 @@ name = "kaspa-ng.org"
 location = "EU"
 protocol = "borsh"
 network = "mainnet"
-address = "wss://eu-1.kaspa-ng.org:443/mainnet"
+address = "wss://eu-1.kaspa-ng.org/mainnet"
 
 [[server]]
 name = "kaspa-ng.org"
 location = "EU"
 protocol = "borsh"
 network = "testnet-10"
-address = "wss://eu-1.kaspa-ng.org:443/testnet-10"
+address = "wss://eu-1.kaspa-ng.org/testnet-10"
 
 [[server]]
 name = "kaspa-ng.org"
 location = "EU"
 protocol = "borsh"
 network = "testnet-11"
-address = "wss://eu-1.kaspa-ng.org:443/testnet-11"
+address = "wss://eu-1.kaspa-ng.org/testnet-11"
+
+[[server]]
+name = "kaspa-ng.org"
+location = "US"
+protocol = "borsh"
+network = "mainnet"
+address = "wss://us-west-1.kaspa-ng.org/mainnet"
+
+[[server]]
+name = "kaspa-ng.org"
+location = "US"
+protocol = "borsh"
+network = "testnet-10"
+address = "wss://us-west-1.kaspa-ng.org/testnet-10"
+
+[[server]]
+name = "kaspa-ng.org"
+location = "US"
+protocol = "borsh"
+network = "testnet-11"
+address = "wss://us-west-1.kaspa-ng.org/testnet-11"
 
 [[server]]
 name = "kaspa-ng.io"

core/src/egui/popup.rs

@@ -23,14 +23,14 @@ impl<'panel> PopupPanel<'panel> {
     }
 
     pub fn new(
-        ui: &mut Ui,
-        id: impl Into<String>,
+        id: Id,
         widget: impl FnOnce(&mut Ui) -> Response + 'panel,
         content: impl FnOnce(&mut Ui, &mut bool) + 'panel,
     ) -> Self {
-        let id = ui.make_persistent_id(id.into());
+        // let id = ui.make_persistent_id(id.into());
 
         Self {
+            // id : id.into(),
             id,
             min_width: None,
             max_height: None,
@@ -45,6 +45,34 @@ impl<'panel> PopupPanel<'panel> {
         }
     }
 
+    // pub fn new_with_string_id(
+    //     ui: &mut Ui,
+    //     id: impl Into<String>,
+    //     // id: Id,
+    //     widget: impl FnOnce(&mut Ui) -> Response + 'panel,
+    //     content: impl FnOnce(&mut Ui, &mut bool) + 'panel,
+    // ) -> Self {
+    //     let id = ui.make_persistent_id(id.into());
+
+    //     Self {
+    //         id,
+    //         min_width: None,
+    //         max_height: None,
+    //         widget: Box::new(widget),
+    //         content: Box::new(content),
+    //         caption: None,
+    //         with_close_button: false,
+    //         close_on_interaction: false,
+    //         close_on_escape: true,
+    //         above_or_below: AboveOrBelow::Below,
+    //         with_padding: true,
+    //     }
+    // }
+
+    pub fn is_open(ui: &mut Ui, popup_id: Id) -> bool {
+        ui.memory(|mem| mem.is_popup_open(popup_id))
+    }
+
     pub fn with_min_width(mut self, min_width: f32) -> Self {
         self.min_width = Some(min_width);
         self

core/src/menu.rs

@@ -64,8 +64,7 @@ impl<'core> Menu<'core> {
                     ui.separator();
 
                     PopupPanel::new(
-                        ui,
-                        "display_settings",
+                        PopupPanel::id(ui, "display_settings"),
                         |ui| {
                             ui.add(
                                 Label::new(RichText::new(egui_phosphor::light::MONITOR).size(16.))

core/src/modules/account_manager/menus.rs

@@ -19,7 +19,7 @@ impl WalletMenu {
             return;
         };
 
-        PopupPanel::new(ui, "wallet_selector_popup",|ui|{ ui.add(Label::new(format!("{} {} ⏷", i18n("Wallet:"), wallet_name)).sense(Sense::click())) }, |ui, _| {
+        PopupPanel::new(PopupPanel::id(ui,"wallet_selector_popup"),|ui|{ ui.add(Label::new(format!("{} {} ⏷", i18n("Wallet:"), wallet_name)).sense(Sense::click())) }, |ui, _| {
 
             ScrollArea::vertical()
                 .id_source("wallet_selector_popup_scroll")
@@ -99,7 +99,7 @@ impl AccountMenu {
     pub fn render(&mut self, core: &mut Core, ui : &mut Ui, account_manager : &mut AccountManager, rc : &RenderContext<'_>, max_height: f32) {
         let RenderContext { account, network_type, .. } = rc;
 
-        PopupPanel::new(ui, "account_selector_popup",|ui|{ ui.add(Label::new(format!("{} {} ⏷",i18n("Account:"), account.name_or_id())).sense(Sense::click())) }, |ui, close| {
+        PopupPanel::new(PopupPanel::id(ui,"account_selector_popup"),|ui|{ ui.add(Label::new(format!("{} {} ⏷",i18n("Account:"), account.name_or_id())).sense(Sense::click())) }, |ui, close| {
 
             egui::ScrollArea::vertical()
                 .id_source("account_selector_popup_scroll")
@@ -187,7 +187,7 @@ impl ToolsMenu {
     }
     pub fn render(&mut self, core: &mut Core, ui : &mut Ui, _account_manager : &mut AccountManager, _rc : &RenderContext<'_>, max_height: f32) {
 
-        PopupPanel::new(ui, "tools_popup",|ui|{ ui.add(Label::new(i18n("Tools ⏷")).sense(Sense::click())) }, |ui, _| {
+        PopupPanel::new(PopupPanel::id(ui,"tools_popup"),|ui|{ ui.add(Label::new(i18n("Tools ⏷")).sense(Sense::click())) }, |ui, _| {
 
             egui::ScrollArea::vertical()
                 .id_source("tools_popup_scroll")

core/src/modules/account_manager/transactions.rs

@@ -14,13 +14,10 @@ impl Transactions {
         egui::ScrollArea::vertical().auto_shrink([false,false]).show(ui, |ui| {
             let transactions = account.transactions();
             if transactions.is_empty() {
-                ui.label(i18n("No transactions"));
-
-                #[cfg(target_arch = "wasm32")] {
-                    ui.label("");
-                    ui.label("Please note that transaction storage support in the browser is not yet implemented. Only transactions from the available UTXOs will be shown once the wallet is reloaded.");
+                ui.vertical_centered(|ui| {
                     ui.label("");
-                }
+                    ui.label(RichText::new(i18n("No transactions")).size(16.));
+                });
             } else {
                 let total: u64 = transactions.iter().map(|transaction|transaction.aggregate_input_value()).sum();
                 transactions.iter().for_each(|transaction| {

core/src/modules/account_manager/transfer.rs

@@ -38,8 +38,7 @@ impl<'context> Transfer<'context> {
 
             let transfer_to_account = self.context.transfer_to_account.clone();
 
-
-            PopupPanel::new(ui, "transfer_selector_popup",|ui|{ 
+            PopupPanel::new(PopupPanel::id(ui,"transfer_selector_popup"),|ui|{ 
                 let response = ui.vertical_centered(|ui| {
                     if let Some(account) = transfer_to_account {
                         let response = ui.add(Label::new(format!("Transferring funds to: {} ⏷", account.name_or_id())).sense(Sense::click()));

core/src/modules/block_dag.rs

@@ -13,6 +13,7 @@ pub struct Preset {
     daa_range : f64,
     daa_offset : f64,
     spread : f64,
+    noise : f64,
     block_scale : f64,
 }
 
@@ -22,27 +23,31 @@ const PRESETS: &[Preset] = &[
         daa_range : 36.0,
         daa_offset : 10.0,
         spread : 10.0,
+        noise : 0.0,
         block_scale : 1.0,
     },
     Preset {
         name : "Medium Wide",
         daa_range : 100.0,
         daa_offset : 16.0,
         spread : 36.0,
+        noise : 0.0,
         block_scale : 1.0,
     },
     Preset {
         name : "Medium Narrow",
         daa_range : 80.0,
         daa_offset : 16.0,
         spread : 22.0,
+        noise : 0.0,
         block_scale : 1.2,
     },
     Preset {
         name : "Small (10 BPS)",
         daa_range : 180.0,
         daa_offset : 32.0,
         spread : 36.0,
+        noise : 1.0,
         block_scale : 1.4,
     },
 ];
@@ -113,8 +118,9 @@ impl BlockDag {
     pub fn load_preset(&mut self, preset : &Preset) {
         self.daa_range = preset.daa_range;
         self.daa_offset = preset.daa_offset;
-        self.settings.y_dist = preset.spread;
         self.block_scale = preset.block_scale;
+        self.settings.y_dist = preset.spread;
+        self.settings.noise = preset.noise;
     }
 
     fn reset_state(&mut self) {
@@ -152,6 +158,7 @@ impl ModuleT for BlockDag {
         let theme_color = theme_color();
 
         let y_dist = self.settings.y_dist;
+        let noise = self.settings.noise;
         let vspc_center = self.settings.center_vspc;
 
         if core.settings.node.network != self.network {
@@ -164,7 +171,7 @@ impl ModuleT for BlockDag {
             ui.heading(i18n("Block DAG"));
 
             ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                PopupPanel::new(ui, "block_dag_settings",|ui|{ ui.add(Label::new("Settings ⏷").sense(Sense::click())) }, |ui, _| {
+                PopupPanel::new(PopupPanel::id(ui,"block_dag_settings"),|ui|{ ui.add(Label::new("Settings ⏷").sense(Sense::click())) }, |ui, _| {
 
                     CollapsingHeader::new(i18n("Dimensions"))
                         .open(Some(true))
@@ -193,6 +200,12 @@ impl ModuleT for BlockDag {
                                     .text(i18n("Spread"))
                             );
                             ui.space();
+                            ui.add(
+                                Slider::new(&mut self.settings.noise, 0.0..=10.0)
+                                    .clamp_to_range(true)
+                                    .text(i18n("Noise"))
+                            );
+                            ui.space();
                             ui.add(
                                 Slider::new(&mut self.block_scale, 0.1..=2.5)
                                     .clamp_to_range(true)
@@ -257,8 +270,7 @@ impl ModuleT for BlockDag {
                 let response = ui
                         .add(Label::new(RichText::new(format!("{} ⏷", i18n("Presets")))).sense(Sense::click()));
                 PopupPanel::new(
-                    ui,
-                    "network_selector_popup",
+                    PopupPanel::id(ui,"network_selector_popup"),
                     |_ui| response,
                     |ui, close| {
                         set_menu_style(ui.style_mut());
@@ -276,7 +288,7 @@ impl ModuleT for BlockDag {
         });
         ui.separator();
 
-        if y_dist != self.settings.y_dist || vspc_center != self.settings.center_vspc {
+        if y_dist != self.settings.y_dist || noise != self.settings.noise || vspc_center != self.settings.center_vspc {
             runtime().block_dag_monitor_service().update_settings(self.settings.clone());
         }
 

core/src/modules/metrics.rs

@@ -66,7 +66,7 @@ impl ModuleT for Metrics {
         ui.horizontal(|ui|{
             ui.heading(i18n("Metrics"));
             ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
-                PopupPanel::new(ui, "metrics_settings",|ui|{ ui.add(Label::new("Settings ⏷").sense(Sense::click())) }, |ui, _| {
+                PopupPanel::new(PopupPanel::id(ui,"metrics_settings"),|ui|{ ui.add(Label::new("Settings ⏷").sense(Sense::click())) }, |ui, _| {
                     ui.add(
                         Slider::new(&mut graph_columns, 1..=8)
                             .text("Columns")

core/src/modules/overview.rs

@@ -166,6 +166,10 @@ impl Overview {
                     .show(ui, |ui| {
                         // egui::special_emojis
                         // use egui_phosphor::light::{DISCORD_LOGO,GITHUB_LOGO};
+                        ui.hyperlink_to_tab(
+                            format!("• {}",i18n("Kaspa NG Web App")),
+                            "https://kaspa-ng.org"
+                        );
                         ui.hyperlink_to_tab(
                             format!("• {}",i18n("Kaspa NG on GitHub")),
                             "https://github.com/aspectron/kaspa-ng"

core/src/modules/settings/mod.rs

@@ -417,7 +417,7 @@ impl Settings {
                 CollapsingHeader::new(i18n("Check for Updates"))
                     .default_open(true)
                     .show(ui, |ui| {
-                        if ui.checkbox(&mut self.settings.update_monitor, i18n("Check for Software Updates via GitHub")).changed() {
+                        if ui.checkbox(&mut self.settings.update_monitor, i18n("Check for Software Updates on GitHub")).changed() {
                             core.settings.update_monitor = self.settings.update_monitor;
                             self.runtime.update_monitor_service().enable(core.settings.update_monitor);
                             core.store_settings();

core/src/modules/welcome.rs

@@ -28,6 +28,8 @@ impl Welcome {
         ui: &mut egui::Ui,
     ) {
 
+        let mut error = None;
+
         ui.heading(i18n("Welcome to Kaspa NG"));
         ui.add_space(16.0);
         ui.label(i18n("Please configure your Kaspa NG settings"));
@@ -74,7 +76,7 @@ impl Welcome {
                         });
 
                         if self.settings.node.node_kind == KaspadNodeKind::Remote {
-                            crate::modules::settings::Settings::render_remote_settings(core,ui,&mut self.settings.node);
+                            error = crate::modules::settings::Settings::render_remote_settings(core,ui,&mut self.settings.node);
                         }
                     });
 
@@ -140,22 +142,31 @@ impl Welcome {
                     });
 
                 ui.add_space(32.0);
-                ui.horizontal(|ui| {
-                    ui.add_space(
-                        ui.available_width()
-                            - 16.
-                            - (theme_style().medium_button_size.x + ui.spacing().item_spacing.x),
-                    );
-                    if ui.medium_button(format!("{} {}", egui_phosphor::light::CHECK, i18n("Apply"))).clicked() {
-                        let mut settings = self.settings.clone();
-                        settings.initialized = true;
-                        settings.store_sync().expect("Unable to store settings");
-                        self.runtime.kaspa_service().update_services(&self.settings.node, None);
-                        core.settings = settings.clone();
-                        core.get_mut::<modules::Settings>().load(settings);
-                        core.select::<modules::Changelog>();
-                    }
-                });
+                if let Some(error) = error {
+                    ui.vertical_centered(|ui| {
+                        ui.colored_label(theme_color().alert_color, error);
+                    });
+                    ui.add_space(32.0);
+                } else {
+
+                    ui.horizontal(|ui| {
+                        ui.add_space(
+                            ui.available_width()
+                                - 16.
+                                - (theme_style().medium_button_size.x + ui.spacing().item_spacing.x),
+                        );
+                        if ui.medium_button(format!("{} {}", egui_phosphor::light::CHECK, i18n("Apply"))).clicked() {
+                            let mut settings = self.settings.clone();
+                            settings.initialized = true;
+                            settings.store_sync().expect("Unable to store settings");
+                            self.runtime.kaspa_service().update_services(&self.settings.node, None);
+                            core.settings = settings.clone();
+                            core.get_mut::<modules::Settings>().load(settings);
+                            core.select::<modules::Changelog>();
+                        }
+                    });
+                }
+
                 ui.separator();
         });
 

core/src/notifications.rs

@@ -204,8 +204,7 @@ impl Notifications {
         let height = (screen_rect.height() / 4.).min(240.);
 
         PopupPanel::new(
-            ui,
-            "notification_popup",
+            PopupPanel::id(ui, "notification_popup"),
             |ui| ui.add(Label::new(icon.size(16.)).sense(Sense::click())),
             |ui, close| {
                 egui::ScrollArea::vertical()