app/wallet: improve send_step3

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

@@ -23,15 +23,18 @@ use darkfi_serial::Encodable;
 
 use crate::{
     app::{
-        node::{create_decimal_edit, create_layer, create_singleline_edit, create_text},
+        node::{
+            create_decimal_edit, create_layer, create_singleline_edit, create_text,
+            create_vector_art,
+        },
         App,
     },
     expr,
     gfx::gfxtag,
-    mesh::{COLOR_CYAN, COLOR_PALECYAN},
+    mesh::{COLOR_CYAN, COLOR_NEONGREEN, COLOR_PALECYAN, COLOR_TRANSAQUA},
     prop::{PropertyAtomicGuard, PropertyBool, PropertyFloat32, PropertyRect, Role},
     scene::{SceneNodePtr, Slot},
-    ui::{BaseEdit, BaseEditType, Layer, Text},
+    ui::{BaseEdit, BaseEditType, Layer, Text, VectorArt, VectorShape},
     util::i18n::I18nBabelFish,
 };
 
@@ -172,6 +175,8 @@ pub async fn make(
 
     y += PADDING_Y * 2. + SUBTITLE_FONTSIZE + 1.;
 
+    create_separator(app, atom, &send_step3_layer, "recipient_separator", &mut y, true).await;
+
     // Recipient address value
     let node = create_text("send_recipient_value3");
     let addr_h_prop = node.get_property("height").unwrap();
@@ -180,12 +185,12 @@ 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();
-    node.get_property("font_size").unwrap().set_default_f32(0, TITLE_FONTSIZE).unwrap();
+    prop.set_default_f32(3, SUBTITLE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, SUBTITLE_FONTSIZE).unwrap();
     node.set_property_str(atom, Role::App, "text", "").unwrap();
     node.set_property_enum(atom, Role::App, "overflow_wrap", "anywhere").unwrap();
     let prop = node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&COLOR_NEONGREEN).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let node = node
         .setup(|me| {
@@ -200,6 +205,30 @@ pub async fn make(
         .await;
     send_step3_layer.link(node);
 
+    // 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_step3_layer.link(addr_bg_node);
+
     // Separator line
     let mut y_ = y.clone();
     let y2 = format!("{y} + (PADDING_Y * 2. + addr_height) + 1");
@@ -209,7 +238,7 @@ pub async fn make(
         &send_step3_layer,
         "send_amount_label_separator",
         &mut y_,
-        false,
+        true,
     )
     .await;
     let prop = node.get_property("rect").unwrap();
@@ -367,7 +396,7 @@ pub async fn make(
         .set_default_f32(0, AMOUNT_FONTSIZE)
         .unwrap();
     let prop = token_symbol_node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[0.5, 0.5, 0.5, 1.]).unwrap();
+    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
     let prop = token_symbol_node.get_property("hi_bg_color").unwrap();
     prop.set_default_f32_multi(&[0.5, 0.5, 0.5, 1.]).unwrap();
     let prop = token_symbol_node.get_property("text_hi_color").unwrap();
@@ -468,6 +497,7 @@ pub async fn make(
                     &amount_input2,
                     &token_symbol_node2,
                     Some(&available_balance_node2),
+                    0.,
                 )
                 .await;
                 let is_valid = if sanitized_amount == "0" {
@@ -531,6 +561,7 @@ pub async fn make(
                 // Store the amount (use sanitized value)
                 let mut data = send_tx_data4.lock().unwrap();
                 data.amount = Some(sanitized_text.clone());
+                data.tx_built = false;
                 let token_symbol = data.token_symbol.clone().unwrap();
                 let recipient_str = data.recipient_str.clone().unwrap();
                 let amount = data.amount.clone().unwrap();
@@ -636,6 +667,7 @@ pub async fn make(
                             &input_node_clone,
                             &token_symbol_node_clone,
                             Some(&available_balance_node_clone),
+                            0.,
                         )
                         .await;
                     }

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

@@ -467,6 +467,7 @@ pub async fn make(
                     &amount_text_node_clone,
                     &token_symbol_node_clone,
                     None,
+                    0.,
                 )
                 .await;
 

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

@@ -65,6 +65,7 @@ pub async fn update_amount_screen(
     amount_input_node: &SceneNodePtr,
     token_node: &SceneNodePtr,
     available_balance_node: Option<&SceneNodePtr>,
+    left_pad: f32,
 ) -> u64 {
     let mut cc = expr::Compiler::new();
 
@@ -80,20 +81,32 @@ pub async fn update_amount_screen(
     cc.add_const_f32("AMOUNT_WIDTH", text_width);
     cc.add_const_f32("AMOUNT_TOKEN_SPACING", AMOUNT_TOKEN_SPACING);
     cc.add_const_f32("AMOUNT_FONTSIZE", AMOUNT_FONTSIZE);
+    cc.add_const_f32("AMOUNT_LEFT_PAD", left_pad);
 
     let wrapper_rect = amount_wrapper_node.get_property("rect").unwrap();
     wrapper_rect
-        .set_expr(atom, Role::App, 0, cc.compile("(w - AMOUNT_TOTAL_WIDTH) / 2").unwrap())
+        .set_expr(
+            atom,
+            Role::App,
+            0,
+            cc.compile("(w - AMOUNT_TOTAL_WIDTH) / 2 - AMOUNT_LEFT_PAD").unwrap(),
+        )
         .unwrap();
 
     let width_code = cc.compile("AMOUNT_WIDTH").unwrap();
     let amount_rect = amount_input_node.get_property("rect").unwrap();
+    amount_rect.set_expr(atom, Role::App, 0, cc.compile("AMOUNT_LEFT_PAD").unwrap()).unwrap();
     amount_rect.set_expr(atom, Role::App, 2, width_code).unwrap();
 
     // Update token symbol position
     let token_rect = token_node.get_property("rect").unwrap();
     token_rect
-        .set_expr(atom, Role::App, 0, cc.compile("AMOUNT_TOKEN_SPACING + AMOUNT_WIDTH").unwrap())
+        .set_expr(
+            atom,
+            Role::App,
+            0,
+            cc.compile("AMOUNT_LEFT_PAD + AMOUNT_TOKEN_SPACING + AMOUNT_WIDTH").unwrap(),
+        )
         .unwrap();
 
     // Set available balance

bin/app/src/mesh.rs

@@ -72,6 +72,8 @@ pub const COLOR_DARKTEAL: Color = [0.3686, 0.6, 0.5451, 1.];
 #[allow(dead_code)]
 pub const COLOR_PALECYAN: Color = [0.6902, 1., 1., 1.];
 #[allow(dead_code)]
+pub const COLOR_NEONGREEN: Color = [0.3647, 1., 0.6941, 1.];
+#[allow(dead_code)]
 pub const COLOR_TRANSAQUA: Color = [0.0353, 0.1294, 0.1333, 0.60];
 #[allow(dead_code)]
 pub const COLOR_TRANSTEAL: Color = [0.0902, 0.1333, 0.1333, 0.60];