Merge pull request #64 from toyota-corolla0/2024-02-component-for-inf…

…o-warning-error refactor: new alert components
elsirion · Feb 21, 2024 · 1b041ad · 1b041ad
2 parents 35dede0 + 995895f
commit 1b041ad
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 25 deletions.
diff --git a/src/components/alerts.rs b/src/components/alerts.rs
@@ -0,0 +1,41 @@
+use leptos::*;
+
+#[component]
+pub fn NoteBlock(children: Children) -> impl IntoView {
+    view! {
+        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-8 w-full" role="alert">
+          <p class="font-bold">Note</p>
+          <p>{ children() }</p>
+        </div>
+    }
+}
+
+#[component]
+pub fn SuccessBlock(children: Children) -> impl IntoView {
+    view! {
+        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-8 w-full" role="alert">
+            <p class="font-bold">Success</p>
+            <p>{ children() }</p>
+        </div>
+    }
+}
+
+#[component]
+pub fn WarningBlock(children: Children) -> impl IntoView {
+    view! {
+        <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mb-8 w-full" role="alert">
+            <p class="font-bold">Warning</p>
+            <p>{ children() }</p>
+        </div>
+    }
+}
+
+#[component]
+pub fn ErrorBlock(children: Children) -> impl IntoView {
+    view! {
+        <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mb-8 w-full" role="alert">
+            <p class="font-bold">Error</p>
+            <p>{ children() }</p>
+        </div>
+    }
+}
diff --git a/src/components/ln_receive_form.rs b/src/components/ln_receive_form.rs
@@ -1,6 +1,6 @@
 use leptos::*;
 
-use super::submit_button::SubmitButton;
+use super::{ErrorBlock, SubmitButton};
 use crate::utils::empty_view;
 
 #[component]
@@ -46,10 +46,9 @@ where
             {move || {
                 if let Some(error) = error.get() {
                     view!{
-                        <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
-                          <p class="font-bold">Error</p>
-                          <p>{error}</p>
-                        </div>
+                        <ErrorBlock>
+                            { error }
+                        </ErrorBlock>
                     }.into_view()
                 } else {
                     empty_view().into_view()

diff --git a/src/components/mod.rs b/src/components/mod.rs
@@ -1,3 +1,4 @@
+pub mod alerts;
 pub mod app;
 pub mod balance;
 pub mod footer;
@@ -16,6 +17,7 @@ pub mod submit_form;
 pub mod tx_list;
 pub mod wallet_selector;
 
+pub use alerts::*;
 pub use app::*;
 pub use balance::*;
 pub use footer::*;

diff --git a/src/components/receive_ln.rs b/src/components/receive_ln.rs
@@ -1,5 +1,6 @@
 use leptos::*;
 
+use super::{ErrorBlock, SuccessBlock};
 use crate::components::ln_receive_form::LnReceiveForm;
 use crate::components::loader_icon::LoaderIcon;
 use crate::components::qrcode::QrCode;
@@ -59,10 +60,9 @@ pub fn ReceiveLn() -> impl IntoView {
 
                                     match paid_resource.get() {
                                         Some(()) => view! {
-                                            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 w-full mb-8" role="alert">
-                                                <p class="font-bold">Success</p>
-                                                <p>The invoice has been paid!</p>
-                                            </div>
+                                            <SuccessBlock>
+                                                "The invoice has been paid!"
+                                            </SuccessBlock>
                                         }.into_view(),
                                         None => empty_view().into_view(),
                                     }
@@ -77,10 +77,9 @@ pub fn ReceiveLn() -> impl IntoView {
                     }
                     Some(Err(e)) => {
                         view!{
-                            <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>
+                            <ErrorBlock>
+                                { e.to_string() }
+                            </ErrorBlock>
                         }.into_view()
                     }
                     None => {

diff --git a/src/components/send.rs b/src/components/send.rs
@@ -4,7 +4,7 @@ use crate::components::SubmitForm;
 use crate::context::ClientContext;
 
 //
-// Receive LN component
+// Send LN component
 //
 #[component]
 pub fn Send() -> impl IntoView {

diff --git a/src/components/wallet_selector.rs b/src/components/wallet_selector.rs
@@ -1,6 +1,6 @@
 use leptos::*;
 
-use super::submit_form::SubmitForm;
+use super::{NoteBlock, SubmitForm, WarningBlock};
 
 #[component]
 pub fn WalletSelector<F>(available: Vec<String>, on_select: F) -> impl IntoView
@@ -35,16 +35,14 @@ where
         .collect::<Vec<_>>();
 
     view! {
-        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-8" role="alert">
-          <p class="font-bold">Note</p>
-          <p> "To switch wallets after selecting one just reload the web app." </p>
-        </div>
-        <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mb-8" role="alert">
-          <p class="font-bold">Warning</p>
-          <p>
-            "Webimint is a highly experimental Fedimint wallet, use at your own risk. It's currently compatible with the 0.2 release of Fedimint."
-          </p>
-        </div>
+        <NoteBlock>
+          "To switch wallets after selecting one just reload the web app."
+        </NoteBlock>
+        <WarningBlock>
+          "Webimint is a highly experimental Fedimint wallet, use at your own risk.
+          It's currently compatible with the 0.2 release of Fedimint."
+        </WarningBlock>
+
         <h1 class="font-heading text-gray-900 text-4xl font-semibold mb-6">"Select a wallet:"</h1>
         <ul class="mb-6 list-disc">
           { available_list }