Merge pull request #75 from elsirion/2024-05-menu-overhaul

Clean up menu, select LN or e-cash in a second step

Author: elsirion

Cargo.lock

@@ -25,6 +25,7 @@ fedimint-mint-client = "0.2.1-rc1"
 fedimint-ln-client = "0.2.1-rc1"
 futures = "0.3.28"
 hex = "0.4.3"
+itertools = "0.13.0"
 leptos = { version = "0.6.5", features = ["csr"] }
 leptos-use = "0.10.2"
 leptos-qr-scanner = { git = "https://github.com/elsirion/leptos-qr-scanner", rev = "5830bd6f75d7836189ef1434f71a10222a737a44" }

Cargo.toml

@@ -111,6 +111,7 @@ pub fn App() -> impl IntoView {
                 placeholder="invite code".into()
                 submit_label="Join".into()
                 loading=join_action.pending()
+                default_scan=true
               />
             </Show>
 

src/components/app.rs

@@ -28,6 +28,7 @@ where
         </button>
       </Show>
       <Show when=move || show_create_wallet_form.get() fallback=|| empty_view() >
+        <div class="w-full">
         <SubmitForm
           description="Enter a name for the new wallet".into()
           on_submit=move |name| {
@@ -38,6 +39,7 @@ where
           submit_label="Create".into()
           loading=loading
         />
+        </div>
       </Show>
     </div>
         }

src/components/create_wallet.rs

@@ -1,6 +1,6 @@
 use leptos::*;
 
-use crate::components::{Balance, ReceiveEcash, ReceiveLn, SendEcash, SendLn, TxList};
+use crate::components::{Balance, Receive, Send, TxList};
 use crate::context::ClientContext;
 
 //
@@ -36,20 +36,12 @@ pub fn Joined() -> impl IntoView {
             view: view! { <TxList update_signal=move || tab_change_signal.get() /> },
         },
         MenuItem {
-            title: "Spend".into(),
-            view: view! { <SendEcash /> },
+            title: "Send".into(),
+            view: view! { <Send /> },
         },
         MenuItem {
-            title: "Redeem".into(),
-            view: view! { <ReceiveEcash /> },
-        },
-        MenuItem {
-            title: "LN Send".into(),
-            view: view! { <SendLn /> },
-        },
-        MenuItem {
-            title: "LN Receive".into(),
-            view: view! { <ReceiveLn /> },
+            title: "Receive".into(),
+            view: view! { <Receive /> },
         },
     ];
 

src/components/joined.rs

@@ -9,9 +9,13 @@ pub mod ln_receive_form;
 pub mod loader_icon;
 pub mod logo;
 pub mod logo_fedimint;
+pub mod protocol_selector;
 pub mod qrcode;
+pub mod receive;
 pub mod receive_ecash;
 pub mod receive_ln;
+pub mod segmented_button;
+pub mod send;
 pub mod send_ecash;
 pub mod send_ln;
 pub mod service_worker;
@@ -29,9 +33,13 @@ pub use joined::*;
 pub use loader_icon::*;
 pub use logo::*;
 pub use logo_fedimint::*;
+pub use protocol_selector::*;
 pub use qrcode::*;
+pub use receive::*;
 pub use receive_ecash::*;
 pub use receive_ln::*;
+pub use segmented_button::*;
+pub use send::*;
 pub use send_ecash::*;
 pub use send_ln::*;
 pub use submit_button::*;

src/components/mod.rs

@@ -0,0 +1,45 @@
+use leptos::*;
+
+use crate::components::SegmentedButton;
+
+#[derive(Debug, Copy, Clone, Eq, PartialEq)]
+pub enum Protocol {
+    OnChain,
+    Lightning,
+    ECash,
+}
+
+impl Protocol {
+    fn from_idx(idx: usize) -> Protocol {
+        match idx {
+            0 => Protocol::OnChain,
+            1 => Protocol::Lightning,
+            2 => Protocol::ECash,
+            _ => panic!("Out of bounds"),
+        }
+    }
+
+    fn into_idx(self) -> usize {
+        match self {
+            Protocol::OnChain => 0,
+            Protocol::Lightning => 1,
+            Protocol::ECash => 2,
+        }
+    }
+}
+#[component]
+pub fn ProtocolSelector<F>(
+    #[prop(default = Protocol::Lightning)] active_protocol: Protocol,
+    on_change: F,
+) -> impl IntoView
+where
+    F: Fn(Protocol) + 'static + Copy,
+{
+    view! {
+        <SegmentedButton
+          active_idx=active_protocol.into_idx()
+          segments=vec!["On-Chain".into(), "Lightning".into(), "E-Cash".into()]
+          on_change=move |idx| on_change(Protocol::from_idx(idx))
+        />
+    }
+}

src/components/protocol_selector.rs

@@ -0,0 +1,32 @@
+use leptos::*;
+
+use crate::components::{Protocol, ProtocolSelector, ReceiveEcash, ReceiveLn};
+
+#[component]
+pub fn Receive() -> impl IntoView {
+    const DEFAULT_PROTOCOL: Protocol = Protocol::Lightning;
+    let (active_protocol, set_active_protocol) = create_signal(DEFAULT_PROTOCOL);
+
+    let active_protocol_view = move || match active_protocol.get() {
+        Protocol::OnChain => view! {
+            "TODO"
+        }
+        .into_view(),
+        Protocol::Lightning => view! {
+            <ReceiveLn />
+        }
+        .into_view(),
+        Protocol::ECash => view! {
+            <ReceiveEcash />
+        }
+        .into_view(),
+    };
+
+    view! {
+        <ProtocolSelector
+          active_protocol=DEFAULT_PROTOCOL
+          on_change=move |protocol| set_active_protocol.set(protocol)
+        />
+        {active_protocol_view}
+    }
+}

src/components/receive.rs

@@ -24,6 +24,7 @@ pub fn ReceiveEcash() -> impl IntoView {
         placeholder="e-cash notes".into()
         submit_label="Redeem".into()
         loading=submit_action.pending()
+        default_scan=true
       />
 
       {move ||

src/components/receive_ecash.rs

@@ -0,0 +1,57 @@
+use itertools::Itertools;
+use leptos::*;
+
+#[component]
+pub fn SegmentedButton<F>(
+    #[prop(default = 0)] active_idx: usize,
+    segments: Vec<String>,
+    on_change: F,
+) -> impl IntoView
+where
+    F: Fn(usize) + 'static + Copy,
+{
+    const ALL_CLASS: &str = "px-4 py-2 focus:outline-none flex-1 text-center";
+    const FIRST_CLASS: &str = "rounded-l-full";
+    const LAST_CLASS: &str = "rounded-r-full";
+    const ACTIVE_CLASS: &str = "text-white bg-blue-500";
+    const INACTIVE_CLASS: &str = "text-blue-500 bg-transparent";
+
+    let (active_idx, set_active_idx) = create_signal(active_idx);
+    let num_segments = segments.len();
+
+    let buttons = segments
+        .into_iter()
+        .enumerate()
+        .map(|(idx, name)| {
+            let class = move || {
+                let is_first = idx == 0;
+                let is_last = idx == num_segments - 1;
+                let is_active = idx == active_idx.get();
+
+                std::iter::once(ALL_CLASS)
+                    .chain(is_first.then(|| FIRST_CLASS))
+                    .chain(is_last.then(|| LAST_CLASS))
+                    .chain(is_active.then(|| ACTIVE_CLASS))
+                    .chain((!is_active).then(|| INACTIVE_CLASS))
+                    .join(" ")
+            };
+            view! {
+              <button
+                class=class
+                on:click=move |_| {
+                    set_active_idx.set(idx);
+                    on_change(idx);
+                }
+              >
+                {name}
+              </button>
+            }
+        })
+        .collect::<Vec<_>>();
+
+    view! {
+        <div class="bg-white p-1 rounded-full shadow flex w-full mb-8">
+            {buttons}
+        </div>
+    }
+}

src/components/segmented_button.rs

@@ -0,0 +1,32 @@
+use leptos::*;
+
+use crate::components::{Protocol, ProtocolSelector, SendEcash, SendLn};
+
+#[component]
+pub fn Send() -> impl IntoView {
+    const DEFAULT_PROTOCOL: Protocol = Protocol::Lightning;
+    let (active_protocol, set_active_protocol) = create_signal(DEFAULT_PROTOCOL);
+
+    let active_protocol_view = move || match active_protocol.get() {
+        Protocol::OnChain => view! {
+            "TODO"
+        }
+        .into_view(),
+        Protocol::Lightning => view! {
+            <SendLn />
+        }
+        .into_view(),
+        Protocol::ECash => view! {
+            <SendEcash />
+        }
+        .into_view(),
+    };
+
+    view! {
+        <ProtocolSelector
+          active_protocol=DEFAULT_PROTOCOL
+          on_change=move |protocol| set_active_protocol.set(protocol)
+        />
+        {active_protocol_view}
+    }
+}

src/components/send.rs

@@ -24,6 +24,7 @@ pub fn SendLn() -> impl IntoView {
         placeholder="LN invoice".into()
         submit_label="Send".into()
         loading=submit_action.pending()
+        default_scan=true
       />
 
 

src/components/send_ln.rs

@@ -1,6 +1,8 @@
 use leptos::ev::KeyboardEvent;
+use leptos::html::Form;
 use leptos::*;
 use leptos_qr_scanner::Scan;
+use leptos_use::use_element_visibility;
 
 use crate::components::SubmitButton;
 
@@ -11,6 +13,7 @@ pub fn SubmitForm<F>(
     description: String,
     submit_label: String,
     loading: ReadSignal<bool>,
+    #[prop(default = false)] default_scan: bool,
 ) -> impl IntoView
 where
     F: Fn(String) + 'static + Copy,
@@ -20,7 +23,7 @@ where
     let button_is_disabled = Signal::derive(move || loading.get() || value.get().is_empty());
     let scan_disabled = Signal::derive(move || loading.get());
 
-    let (scan, set_scan) = create_signal(false);
+    let (scan, set_scan) = create_signal(default_scan);
 
     let textarea = view! {
         <textarea
@@ -47,9 +50,12 @@ where
         />
     };
 
+    let form_ref = create_node_ref::<Form>();
+    let is_visible = use_element_visibility(form_ref);
+
     let qr_scanner = view! {
         <Scan
-          active=scan
+          active=Signal::derive(move || scan.get() && is_visible.get())
           on_scan=move |invite| {
             set_scan.set(false);
             set_value.set(invite.clone());
@@ -60,7 +66,10 @@ where
     };
 
     view! {
-      <form on:submit=|ev| ev.prevent_default()>
+      <form
+        on:submit=|ev| ev.prevent_default()
+        node_ref=form_ref
+      >
 
       <p class="font-body text-gray-600 text-xl">{description}</p>
       <Show
@@ -88,7 +97,7 @@ where
         }
       >{move || {
         if scan.get() {
-          "Stop"
+          "Manual"
         } else {
           "Scan"
         }