ui: add history events to design-system

gui/Cargo.lock

@@ -1887,6 +1887,8 @@ dependencies = [
 name = "liana_ui"
 version = "0.1.0"
 dependencies = [
+ "bitcoin",
+ "chrono",
  "iced",
  "iced_lazy",
  "iced_native",

gui/src/app/view/coins.rs

@@ -2,17 +2,14 @@ use iced::{Alignment, Length};
 
 use liana_ui::{
     color,
-    component::{badge, separation, text::*},
+    component::{amount::*, badge, separation, text::*},
     icon, theme,
     util::Collection,
     widget::*,
 };
 
 use crate::{
-    app::{
+    app::{cache::Cache, view::message::Message},
-        cache::Cache,
-        view::{message::Message, util::*},
-    },
     daemon::model::{remaining_sequence, Coin},
 };
 

gui/src/app/view/home.rs

@@ -5,16 +5,13 @@ use iced::{alignment, Alignment, Length};
 use liana::miniscript::bitcoin;
 use liana_ui::{
     color,
-    component::{badge, text::*},
+    component::{amount::*, badge, text::*},
     icon, theme,
     util::Collection,
     widget::*,
 };
 
-use crate::{
+use crate::{app::view::message::Message, daemon::model::HistoryTransaction};
-    app::view::{message::Message, util::*},
-    daemon::model::HistoryTransaction,
-};
 
 pub const HISTORY_EVENT_PAGE_SIZE: u64 = 20;
 

gui/src/app/view/mod.rs

@@ -1,5 +1,4 @@
 mod message;
-mod util;
 mod warning;
 
 pub mod coins;

gui/src/app/view/psbts.rs

@@ -2,14 +2,14 @@ use iced::{widget::Space, Alignment, Length};
 
 use liana_ui::{
     color,
-    component::{badge, button, card, form, text::*},
+    component::{amount::*, badge, button, card, form, text::*},
     icon, theme,
     util::Collection,
     widget::*,
 };
 
 use crate::{
-    app::{error::Error, menu::Menu, view::util::*},
+    app::{error::Error, menu::Menu},
     daemon::model::{SpendStatus, SpendTx},
 };
 

gui/src/app/view/recovery.rs

@@ -11,15 +11,12 @@ use liana::miniscript::bitcoin::{
 };
 
 use liana_ui::{
-    component::{button, form, text::*},
+    component::{amount::*, button, form, text::*},
     icon, theme,
     widget::*,
 };
 
-use crate::app::view::{
+use crate::app::view::message::{CreateSpendMessage, Message};
-    message::{CreateSpendMessage, Message},
-    util::amount,
-};
 
 #[allow(clippy::too_many_arguments)]
 pub fn recovery<'a>(

gui/src/app/view/spend/detail.rs

@@ -16,6 +16,7 @@ use liana::{
 use liana_ui::{
     color,
     component::{
+        amount::*,
         badge, button, card,
         collapse::Collapse,
         form, hw, separation,
@@ -29,7 +30,7 @@ use liana_ui::{
 use crate::{
     app::{
         error::Error,
-        view::{hw::hw_list_view, message::*, util::*, warning::warn},
+        view::{hw::hw_list_view, message::*, warning::warn},
     },
     daemon::model::{Coin, SpendStatus, SpendTx},
     hw::HardwareWallet,

gui/src/app/view/spend/step.rs

@@ -5,6 +5,7 @@ use liana::miniscript::bitcoin::Amount;
 use liana_ui::{
     color,
     component::{
+        amount::*,
         badge, button, form,
         text::{text, Text},
     },
@@ -17,7 +18,7 @@ use crate::{
     app::{
         cache::Cache,
         error::Error,
-        view::{message::*, modal, util::amount},
+        view::{message::*, modal},
     },
     daemon::model::{remaining_sequence, Coin},
 };

gui/src/app/view/transactions.rs

@@ -3,17 +3,14 @@ use chrono::NaiveDateTime;
 use iced::{alignment, Alignment, Length};
 
 use liana_ui::{
-    component::{badge, card, text::*},
+    component::{amount::*, badge, card, text::*},
     icon, theme,
     util::Collection,
     widget::*,
 };
 
 use crate::{
-    app::{
+    app::{cache::Cache, view::message::Message},
-        cache::Cache,
-        view::{message::Message, util::*},
-    },
     daemon::model::HistoryTransaction,
 };
 

gui/src/daemon/model.rs

@@ -180,4 +180,8 @@ impl HistoryTransaction {
     pub fn is_external(&self) -> bool {
         self.coins.is_empty()
     }
+
+    pub fn is_self_send(&self) -> bool {
+        !self.coins.is_empty() && self.outgoing_amount == Amount::from_sat(0)
+    }
 }

gui/ui/Cargo.toml

@@ -9,3 +9,5 @@ edition = "2021"
 iced = { version = "0.7", features = ["svg", "image"] }
 iced_native = "0.8"
 iced_lazy = { version = "0.4"}
+bitcoin = "0.29"
+chrono = "0.4"

gui/ui/examples/design-system/Cargo.toml

@@ -9,6 +9,7 @@ edition = "2021"
 iced = "0.7"
 iced_native = "0.8"
 web-sys = "0.3.61"
+chrono = "0.4"
 liana_ui = { path = "../.." }
 
 [workspace]

gui/ui/examples/design-system/src/main.rs

@@ -45,6 +45,7 @@ impl Application for DesignSystem {
                 Box::new(section::Typography {}),
                 Box::new(section::Buttons {}),
                 Box::new(section::HardwareWallets {}),
+                Box::new(section::Events {}),
             ],
             current: 0,
         };
@@ -123,12 +124,14 @@ impl Application for DesignSystem {
         .height(Length::Fill);
 
         container(row![
-            sidebar.width(Length::Units(200)),
+            sidebar.width(Length::FillPortion(2)),
-            Space::with_width(Length::Units(150)),
+            Space::with_width(Length::FillPortion(1)),
-            scrollable(column![
+            container(scrollable(column![
                 Space::with_height(Length::Units(150)),
                 container(self.sections[self.current].view()).width(Length::Fill)
-            ]),
+            ]))
+            .width(Length::FillPortion(8)),
+            Space::with_width(Length::FillPortion(1)),
         ])
         .width(Length::Fill)
         .height(Length::Fill)

gui/ui/examples/design-system/src/section.rs

@@ -5,7 +5,7 @@ use iced::{
 };
 use liana_ui::{
     color,
-    component::{hw, separation, text::*},
+    component::{amount::Amount, event, hw, separation, text::*},
     theme,
     widget::Element,
 };
@@ -253,3 +253,33 @@ impl Section for HardwareWallets {
         .into()
     }
 }
+
+pub struct Events {}
+
+impl Section for Events {
+    fn title(&self) -> &'static str {
+        "Events "
+    }
+    fn view(&self) -> Element<Message> {
+        column![
+            h1(self.title()),
+            column![
+                event::unconfirmed_outgoing_event(&Amount::from_sat(32934234), Message::Ignore),
+                event::confirmed_outgoing_event(
+                    chrono::NaiveDate::from_ymd_opt(2023, 04, 19).unwrap(),
+                    &Amount::from_sat(32934234),
+                    Message::Ignore
+                ),
+                event::unconfirmed_incoming_event(&Amount::from_sat(32934234), Message::Ignore),
+                event::confirmed_incoming_event(
+                    chrono::NaiveDate::from_ymd_opt(2023, 04, 19).unwrap(),
+                    &Amount::from_sat(32934234),
+                    Message::Ignore
+                )
+            ]
+            .spacing(20)
+        ]
+        .spacing(100)
+        .into()
+    }
+}

gui/ui/src/component/amount.rs

@@ -1,12 +1,12 @@
-use liana::miniscript::bitcoin::Amount;
+pub use bitcoin::Amount;
 
-use liana_ui::{color, component::text::*, util::Collection, widget::*};
+use crate::{color, component::text::*, util::Collection, widget::*};
 
-pub fn amount<'a, T: 'a>(a: &Amount) -> impl Into<Element<'a, T>> {
+pub fn amount<'a, T: 'a>(a: &Amount) -> Row<'a, T> {
     amount_with_size(a, P1_SIZE)
 }
 
-pub fn amount_with_size<'a, T: 'a>(a: &Amount, size: u16) -> impl Into<Element<'a, T>> {
+pub fn amount_with_size<'a, T: 'a>(a: &Amount, size: u16) -> Row<'a, T> {
     let spacing = if size > P1_SIZE { 10 } else { 5 };
     let sats = format!("{:.8}", a.to_btc());
     assert!(sats.len() >= 9);

gui/ui/src/component/event.rs

@@ -0,0 +1,106 @@
+use crate::{
+    component::{amount, badge, text},
+    theme,
+    widget::*,
+};
+use bitcoin::Amount;
+use iced::{
+    widget::{button, row},
+    Alignment, Length,
+};
+
+pub fn unconfirmed_outgoing_event<'a, T: Clone + 'a>(amount: &Amount, msg: T) -> Container<'a, T> {
+    Container::new(
+        button(
+            row!(
+                row!(badge::spend(), badge::unconfirmed())
+                    .spacing(10)
+                    .align_items(Alignment::Center)
+                    .width(Length::Fill),
+                row!(text::p1_regular("-"), amount::amount(amount))
+                    .spacing(5)
+                    .align_items(Alignment::Center),
+            )
+            .align_items(Alignment::Center)
+            .padding(10)
+            .spacing(20),
+        )
+        .on_press(msg)
+        .style(theme::Button::TransparentBorder),
+    )
+    .style(theme::Container::Card(theme::Card::Simple))
+}
+
+pub fn confirmed_outgoing_event<'a, T: Clone + 'a>(
+    date: chrono::NaiveDate,
+    amount: &Amount,
+    msg: T,
+) -> Container<'a, T> {
+    Container::new(
+        button(
+            row!(
+                row!(badge::spend(), text::p2_regular(date.to_string()))
+                    .spacing(10)
+                    .align_items(Alignment::Center)
+                    .width(Length::Fill),
+                row!(text::p1_regular("-"), amount::amount(amount))
+                    .spacing(5)
+                    .align_items(Alignment::Center),
+            )
+            .align_items(Alignment::Center)
+            .padding(10)
+            .spacing(20),
+        )
+        .on_press(msg)
+        .style(theme::Button::TransparentBorder),
+    )
+    .style(theme::Container::Card(theme::Card::Simple))
+}
+
+pub fn unconfirmed_incoming_event<'a, T: Clone + 'a>(amount: &Amount, msg: T) -> Container<'a, T> {
+    Container::new(
+        button(
+            row!(
+                row!(badge::receive(), badge::unconfirmed())
+                    .spacing(10)
+                    .align_items(Alignment::Center)
+                    .width(Length::Fill),
+                row!(text::p1_regular("+"), amount::amount(amount))
+                    .spacing(5)
+                    .align_items(Alignment::Center),
+            )
+            .align_items(Alignment::Center)
+            .padding(10)
+            .spacing(20),
+        )
+        .on_press(msg)
+        .style(theme::Button::TransparentBorder),
+    )
+    .style(theme::Container::Card(theme::Card::Simple))
+}
+
+pub fn confirmed_incoming_event<'a, T: Clone + 'a>(
+    date: chrono::NaiveDate,
+    amount: &Amount,
+    msg: T,
+) -> Container<'a, T> {
+    Container::new(
+        button(
+            row!(
+                row!(badge::receive(), text::p2_regular(date.to_string()))
+                    .spacing(10)
+                    .align_items(Alignment::Center)
+                    .width(Length::Fill),
+                row!(text::p1_regular("+"), amount::amount(amount))
+                    .spacing(5)
+                    .align_items(Alignment::Center),
+            )
+            .align_items(Alignment::Center)
+            .padding(10)
+            .spacing(20),
+        )
+        .on_press(msg)
+        .style(theme::Button::TransparentBorder),
+    )
+    .style(theme::Container::Card(theme::Card::Simple))
+}

gui/ui/src/component/mod.rs

@@ -1,7 +1,9 @@
+pub mod amount;
 pub mod badge;
 pub mod button;
 pub mod card;
 pub mod collapse;
+pub mod event;
 pub mod form;
 pub mod hw;
 pub mod modal;