app/wallet: improve main drk balance

bin/app/src/app/schema/wallet/data.rs

@@ -28,6 +28,8 @@ mod android_ui_consts {
     pub const BACKARROW_BG_W: f32 = 140.;
     pub const TITLE_FONTSIZE: f32 = 46.;
     pub const SUBTITLE_FONTSIZE: f32 = 56.;
+    pub const MAIN_BALANCE_FONTSIZE: f32 = 79.;
+    pub const MAIN_BALANCE_TOKEN_SPACING: f32 = MAIN_BALANCE_FONTSIZE * 0.35;
     pub const BUTTON_FONTSIZE: f32 = 48.;
     pub const BASE_FONTSIZE: f32 = 48.;
     pub const HINT_FONTSIZE: f32 = BASE_FONTSIZE * 0.8;
@@ -86,6 +88,8 @@ mod ui_consts {
     pub const BACKARROW_BG_W: f32 = 80.;
     pub const TITLE_FONTSIZE: f32 = 15.;
     pub const SUBTITLE_FONTSIZE: f32 = 20.;
+    pub const MAIN_BALANCE_FONTSIZE: f32 = 30.;
+    pub const MAIN_BALANCE_TOKEN_SPACING: f32 = MAIN_BALANCE_FONTSIZE * 0.35;
     pub const BUTTON_FONTSIZE: f32 = 20.;
     pub const BASE_FONTSIZE: f32 = 20.;
     pub const HINT_FONTSIZE: f32 = BASE_FONTSIZE * 0.8;

bin/app/src/app/schema/wallet/main.rs

@@ -28,7 +28,7 @@ use crate::{
     mesh::{COLOR_CYAN, COLOR_TEAL},
     prop::{PropertyAtomicGuard, PropertyBool, PropertyFloat32, Role},
     scene::{SceneNodePtr, Slot},
-    shape,
+    shape, text,
     theme::wire_color,
     ui::{Button, Layer, Text, TokenTable, VectorArt, VectorShape},
     util::i18n::I18nBabelFish,
@@ -269,15 +269,44 @@ pub async fn make(
 
     let mut y = HEADER_HEIGHT;
 
-    // Balance display
-    let node = create_text("wallet_balance");
+    // Balance display: "DRK" label + amount side by side.
+    let scale = window_scale.get();
+    let drk_layout =
+        text::make_layout("DRK", COLOR_CYAN, MAIN_BALANCE_FONTSIZE, 1.0, scale, None, &[]);
+    let drk_width = drk_layout.width();
+
+    let node = create_text("wallet_balance_drk");
     let prop = node.get_property("rect").unwrap();
     prop.set_default_f32(0, PADDING_X).unwrap();
     prop.set_default_f32(1, y + TITLE_PADDING).unwrap();
+    prop.set_default_f32(2, drk_width).unwrap();
+    prop.set_default_f32(3, MAIN_BALANCE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, MAIN_BALANCE_FONTSIZE).unwrap();
+    node.set_property_str(atom, Role::App, "text", "DRK").unwrap();
+    let prop = node.get_property("text_color").unwrap();
+    prop.set_default_f32_multi(&[0., 0.94, 1., 1.]).unwrap();
+    node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
+    let node = node
+        .setup(|me| {
+            Text::new(
+                me,
+                window_scale.clone(),
+                app.renderer.clone(),
+                i18n_fish.clone(),
+                app.redraw_trigger.clone(),
+            )
+        })
+        .await;
+    main_layer.link(node);
+
+    let node = create_text("wallet_balance");
+    let prop = node.get_property("rect").unwrap();
+    prop.set_default_f32(0, PADDING_X + drk_width + MAIN_BALANCE_TOKEN_SPACING).unwrap();
+    prop.set_default_f32(1, y + TITLE_PADDING).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
-    prop.set_default_f32(3, TITLE_FONTSIZE).unwrap();
-    node.get_property("font_size").unwrap().set_default_f32(0, TITLE_FONTSIZE).unwrap();
-    node.set_property_str(atom, Role::App, "text", "DRK 0").unwrap();
+    prop.set_default_f32(3, MAIN_BALANCE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, MAIN_BALANCE_FONTSIZE).unwrap();
+    node.set_property_str(atom, Role::App, "text", "0").unwrap();
     // Class wiring: the wallet title follows the shared text token.
     let theme = app.sg_root.lookup_node("/theme").unwrap();
     wire_color(&node, "text_color", &theme, "text_color").unwrap();
@@ -295,7 +324,27 @@ pub async fn make(
         .await;
     main_layer.link(node);
 
-    y += TITLE_PADDING * 2. + TITLE_FONTSIZE + 1.;
+    let node = create_vector_art("wallet_balance_bg");
+    let prop = node.get_property("rect").unwrap();
+    prop.set_default_f32(0, 0.).unwrap();
+    prop.set_default_f32(1, y + 0.5).unwrap();
+    prop.set_default_expr(2, expr::load_var("w")).unwrap();
+    prop.set_default_f32(3, TITLE_PADDING * 2. + MAIN_BALANCE_FONTSIZE + 0.5).unwrap();
+    node.set_property_u32(atom, Role::App, "z_index", 1).unwrap();
+    let mut shape = VectorShape::new();
+    shape.add_filled_box(
+        expr::const_f32(0.),
+        expr::const_f32(0.),
+        expr::load_var("w"),
+        expr::load_var("h"),
+        [0., 0.0157, 0.1569, 0.6],
+    );
+    node.set_property_shape(atom, Role::App, "shape", shape).unwrap();
+    let node =
+        node.setup(|me| VectorArt::new(me, app.renderer.clone(), app.redraw_trigger.clone())).await;
+    main_layer.link(node);
+
+    y += TITLE_PADDING * 2. + MAIN_BALANCE_FONTSIZE + 1.;
 
     create_separator(app, atom, &main_layer, "wallet_balance_separator", &mut y, false).await;
 

bin/app/src/main.rs

@@ -569,12 +569,7 @@ async fn load_plugins(
                             .lookup_node("/window/content/wallet/main_layer/wallet_balance")
                             .unwrap();
                         balance_node
-                            .set_property_str(
-                                atom,
-                                Role::App,
-                                "text",
-                                format!("DRK {}", drk_row.balance),
-                            )
+                            .set_property_str(atom, Role::App, "text", &drk_row.balance)
                             .unwrap();
                     }