Show QR code for LN invoice

Cargo.toml

@@ -11,6 +11,7 @@ opt-level = 'z'
 [dependencies]
 async-trait = "0.1.68"
 anyhow = "1.0.71"
+base64 = "0.21.3"
 fedimint-client = { git = "https://github.com/fedimint/fedimint", rev = "183bff69f030b89f2cd78dbb91bdecf895048e3e" }
 fedimint-core = { git = "https://github.com/fedimint/fedimint", rev = "183bff69f030b89f2cd78dbb91bdecf895048e3e" }
 fedimint-wallet-client = { git = "https://github.com/fedimint/fedimint", rev = "183bff69f030b89f2cd78dbb91bdecf895048e3e" }
@@ -22,6 +23,7 @@ leptos = { version = "0.4.8", features = ["csr"] }
 leptos-qr-scanner = { git = "https://github.com/elsirion/leptos-qr-scanner", rev = "75e976e99d9c1ed64921081a23f7da823d2a0b6d" }
 leptos_meta = { version = "0.4.8", features = ["csr"] }
 lightning-invoice = { version = "0.21.0", features = [ "serde" ] }
+qrcode-generator = "4.1.8"
 
 console_error_panic_hook = "0.1.7"
 tracing = "0.1.37"

src/components/mod.rs

@@ -6,6 +6,7 @@ pub mod ln_receive_form;
 pub mod loader_icon;
 pub mod logo;
 pub mod logo_fedimint;
+pub mod qrcode;
 pub mod receive;
 pub mod receive_ln;
 pub mod send;

src/components/qrcode.rs

@@ -0,0 +1,31 @@
+use leptos::*;
+
+#[component]
+pub fn QrCode(
+    cx: Scope,
+    #[prop(into)] data: Signal<String>,
+    #[prop(optional, into)] qr_image_size: Option<usize>,
+    #[prop(optional, into)] class: Option<String>,
+) -> impl IntoView {
+    let qr_image_size = qr_image_size.unwrap_or(1024);
+    let qr_data_url = move || {
+        let png_bytes = qrcode_generator::to_png_to_vec_from_str(
+            &data.get(),
+            qrcode_generator::QrCodeEcc::Medium,
+            qr_image_size,
+        )
+        .expect("Failed to generate QR code");
+        let png_base64 = base64::display::Base64Display::new(
+            &png_bytes,
+            &base64::engine::general_purpose::STANDARD,
+        );
+        format!("data:image/png;base64,{png_base64}")
+    };
+
+    view! { cx,
+        <img
+            src=qr_data_url
+            class=class
+        />
+    }
+}

src/components/receive_ln.rs

@@ -1,4 +1,6 @@
 use crate::components::ln_receive_form::LnReceiveForm;
+use crate::components::loader_icon::LoaderIcon;
+use crate::components::qrcode::QrCode;
 use crate::context::ClientContext;
 use crate::utils::empty_view;
 use leptos::*;
@@ -28,16 +30,39 @@ pub fn ReceiveLn(cx: Scope) -> impl IntoView {
                 submit_action.dispatch((amount_msat, description));
             }
         />
-        { move || {
-            if let Some(invoice) = submit_action.value().get() {
-                view!(cx,
-                    <div class="w-full my-4 p-4 bg-slate-100">
-                        <span class="break-all" style="font-family: mono">{invoice}</span>
-                    </div>
-                ).into_view(cx)
-            } else {
-                empty_view().into_view(cx)
-            }
-        }}
+        <div class="w-full my-4 p-4 bg-slate-100 flex justify-center">
+            <Show
+                when=move || !submit_action.pending().get()
+                fallback=|cx| view!{cx, <LoaderIcon />}
+            >
+            { move || {
+                match submit_action.value().get() {
+                    Some(Ok(invoice)) => {
+                        let qr_invoice_upper = format!("lightning:{invoice}").to_ascii_uppercase();
+                        view!{ cx,
+                            <div class="w-full">
+                                <span class="break-all" style="font-family: mono">{&invoice}</span>
+                                <QrCode
+                                    data={Signal::derive(cx, move || qr_invoice_upper.clone())}
+                                    class="w-full mt-8"
+                                />
+                            </div>
+                        }.into_view(cx)
+                    }
+                    Some(Err(e)) => {
+                        view!{ cx,
+                            <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 w-full" role="alert">
+                                <p class="font-bold">Error</p>
+                                <p>{e.to_string()}</p>
+                            </div>
+                        }.into_view(cx)
+                    }
+                    None => {
+                        empty_view().into_view(cx)
+                    }
+                }
+            }}
+            </Show>
+        </div>
     }
 }