feat: copyable_text component

.cargo/config.toml

@@ -0,0 +1,2 @@
+[build]
+rustflags = ["--cfg=web_sys_unstable_apis"]

Cargo.toml

@@ -44,7 +44,7 @@ tokio = { version = "1.28.2", features = [ "rt", "sync", "time" ] }
 tokio-stream = "0.1.14"
 wasm-bindgen = "0.2.87"
 wasm-bindgen-futures = "0.4.37"
-web-sys = { version = "0.3.65", features = [ "Navigator", "Window", "ServiceWorkerContainer" ] }
+web-sys = { version = "0.3.65", features = [ "Navigator", "Window", "ServiceWorkerContainer", "HtmlTextAreaElement" ] }
 gloo-storage = "0.3.0"
 rand = "0.8.5"
 

src/components/copyable_text.rs

@@ -0,0 +1,54 @@
+use leptos::*;
+use leptos_use::{use_clipboard, UseClipboardReturn};
+use web_sys::HtmlTextAreaElement;
+
+#[component]
+pub fn CopyableText(
+    #[prop(into)] text: Signal<String>,
+    #[prop(default = 4)] rows: usize,
+    #[prop(into, optional)] class: String,
+) -> impl IntoView {
+    let UseClipboardReturn {
+        is_supported,
+        text: _,
+        copied,
+        copy,
+    } = use_clipboard();
+
+    view! {
+        <div class=format!("flex flex-col gap-2 {}", class)>
+            <textarea
+                readonly
+                prop:rows={rows}
+                class="w-full p-3 break-all resize-none text-gray-600 border-gray-400 ring-0 focus:border-blue-400"
+                style="font-family: mono"
+                on:focus=|ev| {
+                    let t = event_target::<HtmlTextAreaElement>(&ev);
+                    t.select();
+                }
+                on:mouseup=|ev| ev.prevent_default()
+            >
+                { text }
+            </textarea>
+            <Show when=move || is_supported.get() >
+                <button
+                    on:click={
+                        let copy = copy.clone();
+                        move |_| copy(text.get().as_str())
+                    }
+                    class="w-full py-3 text-xl bg-blue-500 hover:enabled:bg-blue-600
+                        text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70
+                        disabled:cursor-not-allowed hover:enabled:shadow-lg"
+                >
+                    { move || {
+                        if copied.get() {
+                            "Copied!"
+                        } else {
+                            "Copy"
+                        }
+                    }}
+                </button>
+            </Show>
+        </div>
+    }
+}

src/components/mod.rs

@@ -1,6 +1,7 @@
 pub mod alerts;
 pub mod app;
 pub mod balance;
+pub mod copyable_text;
 pub mod footer;
 pub mod joined;
 pub mod ln_receive_form;
@@ -20,6 +21,7 @@ pub mod wallet_selector;
 pub use alerts::*;
 pub use app::*;
 pub use balance::*;
+pub use copyable_text::*;
 pub use footer::*;
 pub use joined::*;
 pub use loader_icon::*;

src/components/receive_ln.rs

@@ -1,6 +1,6 @@
 use leptos::*;
 
-use super::{ErrorBlock, SuccessBlock};
+use super::{CopyableText, ErrorBlock, SuccessBlock};
 use crate::components::ln_receive_form::LnReceiveForm;
 use crate::components::loader_icon::LoaderIcon;
 use crate::components::qrcode::QrCode;
@@ -67,7 +67,10 @@ pub fn ReceiveLn() -> impl IntoView {
                                         None => empty_view().into_view(),
                                     }
                                 }}
-                                <span class="break-all" style="font-family: mono">{&invoice}</span>
+                                <CopyableText
+                                    text={ Signal::derive(move || invoice.clone()) }
+                                    rows=9
+                                />
                                 <QrCode
                                     data={Signal::derive(move || qr_invoice_upper.clone())}
                                     class="w-full mt-8"