receive screen layout, qr code

Cargo.toml

@@ -11,7 +11,7 @@ vendored = ["rusqlite/bundled-sqlcipher-vendored-openssl"]
 anyhow = "1"
 log = "0.4"
 pretty_env_logger = "0.5" # todo swap to a file logger
-iced = { git = "https://github.com/iced-rs/iced", rev = "b30d34f", features = ["debug", "tokio", "svg"] }
+iced = { git = "https://github.com/iced-rs/iced", rev = "b30d34f", features = ["debug", "tokio", "svg", "qr_code"] }
 tokio = { version = "1", features = ["full"] }
 palette = "0.7"
 config = "0.14.0"

src/components/button.rs

@@ -44,7 +44,7 @@ pub fn h_button(text_str: &str, icon: SvgIcon) -> Button<'_, Message, Theme> {
                 shadow: Shadow::default(),
             }
         })
-        .width(Length::Fixed(192.))
+        .width(Length::Fill)
         .height(Length::Fixed(64.))
 }
 

src/components/header.rs

@@ -0,0 +1,19 @@
+use iced::widget::text::Style;
+use iced::widget::{column, text};
+use iced::{Element, Theme};
+
+use crate::Message;
+
+use super::lighten;
+
+pub fn h_header(title: &'static str, subtitle: &'static str) -> Element<'static, Message> {
+    column![
+        text(title).size(32),
+        text(subtitle).size(18).style(|theme: &Theme| {
+            let gray = lighten(theme.palette().background, 0.5);
+            Style { color: Some(gray) }
+        })
+    ]
+    .spacing(8)
+    .into()
+}

src/components/mod.rs

@@ -12,3 +12,6 @@ pub use icon::*;
 
 mod input;
 pub use input::*;
+
+mod header;
+pub use header::*;

src/main.rs

@@ -1,6 +1,7 @@
 use core::run_core;
 use fedimint_core::Amount;
 use fedimint_ln_common::lightning_invoice::Bolt11Invoice;
+use iced::widget::qr_code::Data;
 use routes::Route;
 use std::str::FromStr;
 use std::sync::Arc;
@@ -60,6 +61,7 @@ pub struct HarborWallet {
     receive_status: ReceiveStatus,
     receive_amount_str: String,
     receive_invoice: Option<Bolt11Invoice>,
+    receive_qr_data: Option<Data>,
 }
 
 impl Default for HarborWallet {
@@ -131,6 +133,7 @@ impl HarborWallet {
             receive_failure_reason: None,
             receive_status: ReceiveStatus::Idle,
             receive_invoice: None,
+            receive_qr_data: None,
         }
     }
 
@@ -300,6 +303,14 @@ impl HarborWallet {
                 CoreUIMsg::ReceiveInvoiceGenerated(invoice) => {
                     self.receive_status = ReceiveStatus::WaitingToReceive;
                     println!("Received invoice: {invoice}");
+                    self.receive_qr_data = Some(
+                        Data::with_error_correction(
+                            invoice.to_string(),
+                            // iced::widget::qr_code::Version::Normal(4),
+                            iced::widget::qr_code::ErrorCorrection::Low,
+                        )
+                        .unwrap(),
+                    );
                     self.receive_invoice = Some(invoice);
                     Command::none()
                 }

src/routes/home.rs

@@ -17,7 +17,8 @@ pub fn home(harbor: &HarborWallet) -> Element<Message> {
     container(center(
         column![balance, buttons]
             .spacing(32)
-            .align_items(Alignment::Center),
+            .align_items(Alignment::Center)
+            .max_width(512),
     ))
     .into()
 }

src/routes/receive.rs

@@ -1,34 +1,61 @@
-use iced::widget::{column, container, scrollable, text, text_input};
-use iced::Length;
-use iced::{Alignment, Element};
+use iced::widget::container::Style;
+use iced::widget::{column, container, qr_code, scrollable, text};
+use iced::{Border, Element, Padding};
+use iced::{Color, Length};
 
-use crate::components::{h_button, SvgIcon};
+use crate::components::{h_button, h_header, h_input, SvgIcon};
 use crate::{HarborWallet, Message};
 
 pub fn receive(harbor: &HarborWallet) -> Element<Message> {
-    let col = if let Some(invoice) = harbor.receive_invoice.as_ref() {
+    let column = if let Some(invoice) = harbor.receive_invoice.as_ref() {
+        let header = h_header("Receive", "Scan this QR or copy the string.");
+
+        let data = harbor.receive_qr_data.as_ref().unwrap();
+        let qr_code = qr_code(data);
+        let qr_container = container(qr_code).padding(16).style(|_theme| Style {
+            background: Some(iced::Background::Color(Color::WHITE)),
+            border: Border {
+                radius: (8.).into(),
+                ..Border::default()
+            },
+            ..Style::default()
+        });
+
+        let first_ten_chars = invoice.to_string().chars().take(10).collect::<String>();
+
         column![
-            "Here's an invoice!",
-            text(format!("{invoice}")).size(16),
+            header,
+            qr_container,
+            text(format!("{first_ten_chars}...")).size(16),
             h_button("Copy to clipboard", SvgIcon::Copy)
                 .on_press(Message::CopyToClipboard(invoice.to_string())),
         ]
     } else {
-        column![
-            "How much do you want to receive?",
-            text_input("how much?", &harbor.receive_amount_str)
-                .on_input(Message::ReceiveAmountChanged),
-            h_button("Generate Invoice", SvgIcon::DownLeft).on_press(Message::GenerateInvoice),
-        ]
+        let header = h_header("Receive", "Receive on-chain or via lightning.");
+
+        let amount_input = h_input(
+            "Amount",
+            "420",
+            &harbor.receive_amount_str,
+            Message::ReceiveAmountChanged,
+            Message::Noop,
+            false,
+            None,
+            Some("sats"),
+        );
+
+        let generate_button =
+            h_button("Generate Invoice", SvgIcon::DownLeft).on_press(Message::GenerateInvoice);
+
+        column![header, amount_input, generate_button]
     };
 
-    container(
-        scrollable(
-            col.spacing(32)
-                .align_items(Alignment::Center)
-                .width(Length::Fill),
-        )
-        .height(Length::Fill),
-    )
+    container(scrollable(
+        column
+            .spacing(48)
+            .width(Length::Fill)
+            .max_width(512)
+            .padding(Padding::new(48.)),
+    ))
     .into()
 }