app/wallet: improve send_step4

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

@@ -130,10 +130,7 @@ pub async fn make(
                 .lookup_node("/window/content/wallet/send_step4_layer/send_fee_label")
             {
                 let prop = tx_fee_label.get_property("text_color").unwrap();
-                prop.set_f32(atom, Role::App, 0, COLOR_CYAN[0]).unwrap();
-                prop.set_f32(atom, Role::App, 1, COLOR_CYAN[1]).unwrap();
-                prop.set_f32(atom, Role::App, 2, COLOR_CYAN[2]).unwrap();
-                prop.set_f32(atom, Role::App, 3, COLOR_CYAN[3]).unwrap();
+                prop.set_f32(atom, Role::App, 3, 1.).unwrap();
             }
             if let Some(tx_fee_value) = sg_root_for_built
                 .lookup_node("/window/content/wallet/send_step4_layer/send_fee_value")
@@ -143,13 +140,10 @@ pub async fn make(
                         atom,
                         Role::App,
                         "text",
-                        encode_base10(fees, BALANCE_BASE10_DECIMALS),
+                        format!("{} DRK", encode_base10(fees, BALANCE_BASE10_DECIMALS)),
                     )
                     .unwrap();
                 let prop = tx_fee_value.get_property("text_color").unwrap();
-                prop.set_f32(atom, Role::App, 0, 1.).unwrap();
-                prop.set_f32(atom, Role::App, 1, 1.).unwrap();
-                prop.set_f32(atom, Role::App, 2, 1.).unwrap();
                 prop.set_f32(atom, Role::App, 3, 1.).unwrap();
             }
         }

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

@@ -19,18 +19,19 @@
 use std::sync::Arc;
 
 use darkfi_serial::{Decodable, Encodable};
+use parking_lot::Mutex as SyncMutex;
 
 use crate::{
     app::{
-        node::{create_layer, create_text},
+        node::{create_layer, create_text, create_vector_art},
         App,
     },
     expr,
     gfx::gfxtag,
-    mesh::COLOR_PALECYAN,
+    mesh::{Color, COLOR_CYAN, COLOR_NEONGREEN, COLOR_PALECYAN, COLOR_TRANSAQUA},
     prop::{PropertyAtomicGuard, PropertyBool, PropertyFloat32, Role},
     scene::{SceneNodePtr, Slot},
-    ui::{Layer, Text},
+    ui::{Layer, Text, VectorArt, VectorShape},
     util::i18n::I18nBabelFish,
 };
 
@@ -165,6 +166,8 @@ pub async fn make(
 
     y += PADDING_Y * 2. + SUBTITLE_FONTSIZE + 1.;
 
+    create_separator(app, atom, &send_step4_layer, "recipient_separator", &mut y, true).await;
+
     // Recipient address value
     let recipient_addr_node = create_text("send_recipient_value4");
     let addr_h_prop = recipient_addr_node.get_property("height").unwrap();
@@ -173,16 +176,16 @@ pub async fn make(
     prop.set_default_f32(1, y + PADDING_Y).unwrap();
     let code = cc.compile("w - PADDING_X * 2").unwrap();
     prop.set_default_expr(2, code).unwrap();
-    prop.set_default_f32(3, TITLE_FONTSIZE).unwrap();
+    prop.set_default_f32(3, SUBTITLE_FONTSIZE).unwrap();
     recipient_addr_node
         .get_property("font_size")
         .unwrap()
-        .set_default_f32(0, TITLE_FONTSIZE)
+        .set_default_f32(0, SUBTITLE_FONTSIZE)
         .unwrap();
     recipient_addr_node.set_property_str(atom, Role::App, "text", "").unwrap();
     recipient_addr_node.set_property_enum(atom, Role::App, "overflow_wrap", "anywhere").unwrap();
     let prop = recipient_addr_node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&COLOR_NEONGREEN).unwrap();
     recipient_addr_node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let recipient_addr_node = recipient_addr_node
         .setup(|me| {
@@ -197,6 +200,30 @@ pub async fn make(
         .await;
     send_step4_layer.link(recipient_addr_node.clone());
 
+    // Recipient address background
+    let addr_bg_node = create_vector_art("send_recipient_bg");
+    let prop = addr_bg_node.get_property("rect").unwrap();
+    prop.set_default_f32(0, 0.).unwrap();
+    prop.set_default_f32(1, y).unwrap();
+    prop.set_default_expr(2, expr::load_var("w")).unwrap();
+    let code = cc.compile("PADDING_Y * 2 + addr_height + 1").unwrap();
+    prop.set_default_expr(3, code).unwrap();
+    prop.add_depend(Role::App, &addr_h_prop, 0, "addr_height");
+    addr_bg_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"),
+        COLOR_TRANSAQUA,
+    );
+    addr_bg_node.set_property_shape(atom, Role::App, "shape", shape).unwrap();
+    let addr_bg_node = addr_bg_node
+        .setup(|me| VectorArt::new(me, app.renderer.clone(), app.redraw_trigger.clone()))
+        .await;
+    send_step4_layer.link(addr_bg_node);
+
     // Separator line
     let mut y_ = y.clone();
     let y2 = format!("{y} + (PADDING_Y * 2. + addr_height) + 1");
@@ -206,7 +233,7 @@ pub async fn make(
         &send_step4_layer,
         "send_amount_label_separator4",
         &mut y_,
-        false,
+        true,
     )
     .await;
     let prop = node.get_property("rect").unwrap();
@@ -215,7 +242,8 @@ pub async fn make(
     prop.add_depend(Role::App, &addr_h_prop, 0, "addr_height");
 
     // Amount display - same layout as step3's amount input
-    let amount_y = format!("({y2}) + (h - ({y2}) - BUTTON_HEIGHT - PADDING_X * 2 - PADDING_Y - BASE_FONTSIZE - AMOUNT_FONTSIZE - 1) / 2 - AMOUNT_FONTSIZE * 0.1");
+    // The wrapper is 2x the font height so the glow fits
+    let amount_y = format!("({y2}) + (h - ({y2}) - BUTTON_HEIGHT - PADDING_X * 2 - PADDING_Y - BASE_FONTSIZE - AMOUNT_FONTSIZE - 1) / 2 - AMOUNT_FONTSIZE * 0.6");
     let amount_wrapper = create_layer("send_amount_wrapper4");
     amount_wrapper.set_property_bool(atom, Role::App, "is_visible", true).unwrap();
     let prop = amount_wrapper.get_property("rect").unwrap();
@@ -223,7 +251,7 @@ pub async fn make(
     let code = cc.compile(&amount_y).unwrap();
     prop.set_default_expr(1, code).unwrap();
     prop.set_default_expr(2, expr::load_var("w")).unwrap();
-    prop.set_default_f32(3, AMOUNT_FONTSIZE).unwrap();
+    prop.set_default_f32(3, AMOUNT_FONTSIZE * 2.).unwrap();
     prop.add_depend(Role::App, &addr_h_prop, 0, "addr_height");
     amount_wrapper.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let amount_wrapper = amount_wrapper
@@ -235,7 +263,7 @@ pub async fn make(
     let amount_text_node = create_text("send_amount_text4");
     let prop = amount_text_node.get_property("rect").unwrap();
     prop.set_default_f32(0, 0.).unwrap();
-    prop.set_default_f32(1, 0.).unwrap();
+    prop.set_default_f32(1, AMOUNT_FONTSIZE / 2.).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
     prop.set_default_f32(3, AMOUNT_FONTSIZE).unwrap();
     amount_text_node
@@ -244,7 +272,11 @@ pub async fn make(
         .set_default_f32(0, AMOUNT_FONTSIZE)
         .unwrap();
     let prop = amount_text_node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&[0.5451, 1., 1., 1.]).unwrap();
+    let prop = amount_text_node.get_property("text_shadow_color").unwrap();
+    prop.set_default_f32_multi(&[0., 0.9411, 1., 1.]).unwrap();
+    let prop = amount_text_node.get_property("text_shadow_blur").unwrap();
+    prop.set_default_f32(0, AMOUNT_FONTSIZE / 1.6).unwrap();
     amount_text_node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     amount_text_node.set_property_str(atom, Role::App, "text", "0").unwrap();
     let amount_text_node = amount_text_node
@@ -264,7 +296,7 @@ pub async fn make(
     let token_symbol_node = create_text("send_amount_token_symbol4");
     let prop = token_symbol_node.get_property("rect").unwrap();
     prop.set_default_f32(0, 0.).unwrap();
-    prop.set_default_f32(1, 0.).unwrap();
+    prop.set_default_f32(1, AMOUNT_FONTSIZE / 2.).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
     prop.set_default_f32(3, AMOUNT_FONTSIZE).unwrap();
     prop.add_depend(Role::App, &addr_h_prop, 0, "addr_height");
@@ -275,7 +307,11 @@ pub async fn make(
         .unwrap();
     token_symbol_node.set_property_str(atom, Role::App, "text", "").unwrap();
     let prop = token_symbol_node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&[0.5451, 1., 1., 1.]).unwrap();
+    let prop = token_symbol_node.get_property("text_shadow_color").unwrap();
+    prop.set_default_f32_multi(&[0., 0.9411, 1., 0.6]).unwrap();
+    let prop = token_symbol_node.get_property("text_shadow_blur").unwrap();
+    prop.set_default_f32(0, AMOUNT_FONTSIZE / 1.8).unwrap();
     token_symbol_node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let token_symbol_node = token_symbol_node
         .setup(|me| {
@@ -302,7 +338,7 @@ pub async fn make(
     tx_fee_label_node.get_property("font_size").unwrap().set_default_f32(0, BASE_FONTSIZE).unwrap();
     tx_fee_label_node.set_property_str(atom, Role::App, "text", "Transaction fee").unwrap();
     let prop = tx_fee_label_node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[0., 0., 0., 0.]).unwrap();
+    prop.set_default_f32_multi(&[1., 1., 1., 0.]).unwrap();
     tx_fee_label_node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let tx_fee_label_node = tx_fee_label_node
         .setup(|me| {
@@ -332,7 +368,7 @@ pub async fn make(
     tx_fee_value_node.set_property_enum(atom, Role::App, "text_align", "end").unwrap();
     tx_fee_value_node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let prop = tx_fee_value_node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[0., 0., 0., 0.]).unwrap();
+    prop.set_default_f32_multi(&[0.8157, 0.6275, 1., 0.]).unwrap();
     let tx_fee_value_node = tx_fee_value_node
         .setup(|me| {
             Text::new(
@@ -467,7 +503,7 @@ pub async fn make(
                     &amount_text_node_clone,
                     &token_symbol_node_clone,
                     None,
-                    0.,
+                    AMOUNT_FONTSIZE / 3.,
                 )
                 .await;
 
@@ -483,18 +519,12 @@ pub async fn make(
                         .lookup_node("/window/content/wallet/send_step4_layer/send_fee_label")
                     {
                         let prop = tx_fee_label.get_property("text_color").unwrap();
-                        prop.set_f32(atom, Role::App, 0, 1.).unwrap();
-                        prop.set_f32(atom, Role::App, 1, 1.).unwrap();
-                        prop.set_f32(atom, Role::App, 2, 1.).unwrap();
                         prop.set_f32(atom, Role::App, 3, 1.).unwrap();
                     }
                     if let Some(tx_fee_value) = sg_root
                         .lookup_node("/window/content/wallet/send_step4_layer/send_fee_value")
                     {
                         let prop = tx_fee_value.get_property("text_color").unwrap();
-                        prop.set_f32(atom, Role::App, 0, 1.).unwrap();
-                        prop.set_f32(atom, Role::App, 1, 1.).unwrap();
-                        prop.set_f32(atom, Role::App, 2, 1.).unwrap();
                         prop.set_f32(atom, Role::App, 3, 1.).unwrap();
                     }
                 } else {
@@ -503,18 +533,12 @@ pub async fn make(
                         .lookup_node("/window/content/wallet/send_step4_layer/send_fee_label")
                     {
                         let prop = tx_fee_label.get_property("text_color").unwrap();
-                        prop.set_f32(atom, Role::App, 0, 0.).unwrap();
-                        prop.set_f32(atom, Role::App, 1, 0.).unwrap();
-                        prop.set_f32(atom, Role::App, 2, 0.).unwrap();
                         prop.set_f32(atom, Role::App, 3, 0.).unwrap();
                     }
                     if let Some(tx_fee_value) = sg_root
                         .lookup_node("/window/content/wallet/send_step4_layer/send_fee_value")
                     {
                         let prop = tx_fee_value.get_property("text_color").unwrap();
-                        prop.set_f32(atom, Role::App, 0, 0.).unwrap();
-                        prop.set_f32(atom, Role::App, 1, 0.).unwrap();
-                        prop.set_f32(atom, Role::App, 2, 0.).unwrap();
                         prop.set_f32(atom, Role::App, 3, 0.).unwrap();
                     }
                 }