Merge #467: Gui change transaction view

ac97b27b9650434a205659ffcf135ae991635811 gui: add payment view (edouard)
94e719975e4c12bacb67e1d9b9b11b77ee9f55bb gui: remove transaction view in modal (edouard)

Pull request description:

  close #199
  close #462
  close #229

ACKs for top commit:
  edouardparis:
    Self-ACK ac97b27b9650434a205659ffcf135ae991635811

Tree-SHA512: f49a2e1eff7fe882d409caba1f2d9a4a9281c3a786f3bd8245e94e2b7b00ad042522a13912b61acc1a93f68084c9b2fa90cc2ceae9d87926f06d82e1a7d1d2e0

gui/src/app/state/mod.rs

@@ -53,7 +53,7 @@ pub struct Home {
     number_of_expiring_coins: usize,
     pending_events: Vec<HistoryTransaction>,
     events: Vec<HistoryTransaction>,
-    selected_event: Option<usize>,
+    selected_event: Option<(usize, usize)>,
     warning: Option<Error>,
 }
 
@@ -87,32 +87,28 @@ impl Home {
 
 impl State for Home {
     fn view<'a>(&'a self, cache: &'a Cache) -> Element<'a, view::Message> {
-        if let Some(i) = self.selected_event {
+        if let Some((i, output_index)) = self.selected_event {
             let event = if i < self.pending_events.len() {
                 &self.pending_events[i]
             } else {
                 &self.events[i - self.pending_events.len()]
             };
-            return view::modal(
+            view::home::payment_view(cache, event, output_index, self.warning.as_ref())
-                false,
+        } else {
-                self.warning.as_ref(),
+            view::dashboard(
-                view::transactions::tx_view(cache, event),
+                &Menu::Home,
-                None::<Element<view::Message>>,
+                cache,
-            );
+                None,
+                view::home::home_view(
+                    &self.balance,
+                    &self.unconfirmed_balance,
+                    &self.remaining_sequence,
+                    self.number_of_expiring_coins,
+                    &self.pending_events,
+                    &self.events,
+                ),
+            )
         }
-        view::dashboard(
-            &Menu::Home,
-            cache,
-            None,
-            view::home::home_view(
-                &self.balance,
-                &self.unconfirmed_balance,
-                &self.remaining_sequence,
-                self.number_of_expiring_coins,
-                &self.pending_events,
-                &self.events,
-            ),
-        )
     }
 
     fn update(
@@ -180,8 +176,8 @@ impl State for Home {
             Message::View(view::Message::Close) => {
                 self.selected_event = None;
             }
-            Message::View(view::Message::Select(i)) => {
+            Message::View(view::Message::SelectSub(i, j)) => {
-                self.selected_event = Some(i);
+                self.selected_event = Some((i, j));
             }
             Message::View(view::Message::Next) => {
                 if let Some(last) = self.events.last() {

gui/src/app/state/transactions.rs

@@ -5,7 +5,7 @@ use std::time::{SystemTime, UNIX_EPOCH};
 use iced::Command;
 use liana_ui::widget::*;
 
-use crate::app::{cache::Cache, error::Error, menu::Menu, message::Message, view, State};
+use crate::app::{cache::Cache, error::Error, message::Message, view, State};
 
 use crate::daemon::{model::HistoryTransaction, Daemon};
 
@@ -36,19 +36,15 @@ impl State for TransactionsPanel {
             } else {
                 &self.txs[i - self.pending_txs.len()]
             };
-            return view::modal(
+            view::transactions::tx_view(cache, tx, self.warning.as_ref())
-                false,
+        } else {
+            view::transactions::transactions_view(
+                cache,
+                &self.pending_txs,
+                &self.txs,
                 self.warning.as_ref(),
-                view::transactions::tx_view(cache, tx),
+            )
-                None::<Element<view::Message>>,
-            );
         }
-        view::dashboard(
-            &Menu::Transactions,
-            cache,
-            None,
-            view::transactions::transactions_view(&self.pending_txs, &self.txs),
-        )
     }
 
     fn update(

gui/src/app/view/home.rs

@@ -5,14 +5,19 @@ use iced::{alignment, Alignment, Length};
 use liana::miniscript::bitcoin;
 use liana_ui::{
     color,
-    component::{amount::*, event, text::*},
+    component::{amount::*, card, event, text::*},
     icon, theme,
     util::Collection,
     widget::*,
 };
 
 use crate::{
-    app::view::{coins, message::Message},
+    app::{
+        cache::Cache,
+        error::Error,
+        menu::Menu,
+        view::{coins, dashboard, message::Message},
+    },
     daemon::model::HistoryTransaction,
 };
 
@@ -143,12 +148,12 @@ fn event_list_view<'a>(i: usize, event: &HistoryTransaction) -> Column<'a, Messa
                     col.push(event::confirmed_incoming_event(
                         NaiveDateTime::from_timestamp_opt(t as i64, 0).unwrap(),
                         &Amount::from_sat(output.value),
-                        Message::Select(i),
+                        Message::SelectSub(i, output_index),
                     ))
                 } else {
                     col.push(event::unconfirmed_incoming_event(
                         &Amount::from_sat(output.value),
-                        Message::Select(i),
+                        Message::SelectSub(i, output_index),
                     ))
                 }
             } else if event.change_indexes.contains(&output_index) {
@@ -157,14 +162,92 @@ fn event_list_view<'a>(i: usize, event: &HistoryTransaction) -> Column<'a, Messa
                 col.push(event::confirmed_outgoing_event(
                     NaiveDateTime::from_timestamp_opt(t as i64, 0).unwrap(),
                     &Amount::from_sat(output.value),
-                    Message::Select(i),
+                    Message::SelectSub(i, output_index),
                 ))
             } else {
                 col.push(event::unconfirmed_outgoing_event(
                     &Amount::from_sat(output.value),
-                    Message::Select(i),
+                    Message::SelectSub(i, output_index),
                 ))
             }
         },
     )
 }
+
+pub fn payment_view<'a>(
+    cache: &'a Cache,
+    tx: &'a HistoryTransaction,
+    output_index: usize,
+    warning: Option<&'a Error>,
+) -> Element<'a, Message> {
+    dashboard(
+        &Menu::Home,
+        cache,
+        warning,
+        Column::new()
+            .push(if tx.is_self_send() {
+                Container::new(h3("Payment")).width(Length::Fill)
+            } else if tx.is_external() {
+                Container::new(h3("Incoming payment")).width(Length::Fill)
+            } else {
+                Container::new(h3("Outgoing payment")).width(Length::Fill)
+            })
+            .push(Container::new(amount_with_size(
+                &Amount::from_sat(tx.tx.output[output_index].value),
+                H1_SIZE,
+            )))
+            .push(Container::new(h3("Transaction")).width(Length::Fill))
+            .push_maybe(tx.fee_amount.map(|fee_amount| {
+                Row::new()
+                    .align_items(Alignment::Center)
+                    .push(h3("Miner fee: ").style(color::GREY_3))
+                    .push(amount_with_size(&fee_amount, H3_SIZE))
+            }))
+            .push(card::simple(
+                Column::new()
+                    .push_maybe(tx.time.map(|t| {
+                        let date = NaiveDateTime::from_timestamp_opt(t as i64, 0)
+                            .unwrap()
+                            .format("%b. %d, %Y - %T");
+                        Row::new()
+                            .width(Length::Fill)
+                            .push(Container::new(text("Date:").bold()).width(Length::Fill))
+                            .push(Container::new(text(format!("{}", date))).width(Length::Shrink))
+                    }))
+                    .push(
+                        Row::new()
+                            .width(Length::Fill)
+                            .align_items(Alignment::Center)
+                            .push(Container::new(text("Txid:").bold()).width(Length::Fill))
+                            .push(
+                                Row::new()
+                                    .align_items(Alignment::Center)
+                                    .push(Container::new(text(format!("{}", tx.tx.txid())).small()))
+                                    .push(
+                                        Button::new(icon::clipboard_icon())
+                                            .on_press(Message::Clipboard(tx.tx.txid().to_string()))
+                                            .style(theme::Button::TransparentBorder),
+                                    )
+                                    .width(Length::Shrink),
+                            ),
+                    )
+                    .spacing(5),
+            ))
+            .push(super::psbt::inputs_and_outputs_view(
+                &tx.coins,
+                &tx.tx,
+                cache.network,
+                if tx.is_external() {
+                    None
+                } else {
+                    Some(tx.change_indexes.clone())
+                },
+                if tx.is_external() {
+                    Some(tx.change_indexes.clone())
+                } else {
+                    None
+                },
+            ))
+            .spacing(20),
+    )
+}

gui/src/app/view/message.rs

@@ -8,6 +8,7 @@ pub enum Message {
     Menu(Menu),
     Close,
     Select(usize),
+    SelectSub(usize, usize),
     Settings(SettingsMessage),
     CreateSpend(CreateSpendMessage),
     ImportSpend(ImportSpendMessage),

gui/src/app/view/mod.rs

@@ -34,7 +34,7 @@ use crate::app::{cache::Cache, error::Error, menu::Menu};
 pub fn sidebar<'a>(menu: &Menu, cache: &'a Cache) -> Container<'a, Message> {
     let home_button = if *menu == Menu::Home {
         button::menu_active(Some(home_icon()), "Home")
-            .on_press(Message::Reload)
+            .on_press(Message::Menu(Menu::Home))
             .width(iced::Length::Fill)
     } else {
         button::menu(Some(home_icon()), "Home")
@@ -53,7 +53,7 @@ pub fn sidebar<'a>(menu: &Menu, cache: &'a Cache) -> Container<'a, Message> {
             .align_items(iced::Alignment::Center),
         )
         .style(theme::Button::Menu(true))
-        .on_press(Message::Reload)
+        .on_press(Message::Menu(Menu::Transactions))
         .width(iced::Length::Fill)
     } else {
         Button::new(

gui/src/app/view/transactions.rs

@@ -3,6 +3,7 @@ use chrono::NaiveDateTime;
 use iced::{alignment, Alignment, Length};
 
 use liana_ui::{
+    color,
     component::{amount::*, badge, card, text::*},
     icon, theme,
     util::Collection,
@@ -10,65 +11,76 @@ use liana_ui::{
 };
 
 use crate::{
-    app::{cache::Cache, view::message::Message},
+    app::{
+        cache::Cache,
+        error::Error,
+        menu::Menu,
+        view::{dashboard, message::Message},
+    },
     daemon::model::HistoryTransaction,
 };
 
 pub const HISTORY_EVENT_PAGE_SIZE: u64 = 20;
 
 pub fn transactions_view<'a>(
+    cache: &'a Cache,
     pending_txs: &[HistoryTransaction],
     txs: &Vec<HistoryTransaction>,
+    warning: Option<&'a Error>,
 ) -> Element<'a, Message> {
-    Column::new()
+    dashboard(
-        .push(Container::new(h3("Transactions")).width(Length::Fill))
+        &Menu::Transactions,
-        .push(
+        cache,
-            Column::new()
+        warning,
-                .spacing(10)
+        Column::new()
-                .push_maybe(if !pending_txs.is_empty() {
+            .push(Container::new(h3("Transactions")).width(Length::Fill))
-                    Some(
+            .push(
-                        pending_txs
+                Column::new()
-                            .iter()
+                    .spacing(10)
-                            .enumerate()
+                    .push_maybe(if !pending_txs.is_empty() {
-                            .fold(Column::new().spacing(10), |col, (i, tx)| {
-                                col.push(tx_list_view(i, tx))
-                            }),
-                    )
-                } else {
-                    None
-                })
-                .push(
-                    txs.iter()
-                        .enumerate()
-                        .fold(Column::new().spacing(10), |col, (i, tx)| {
-                            col.push(tx_list_view(i + pending_txs.len(), tx))
-                        }),
-                )
-                .push_maybe(
-                    if txs.len() % HISTORY_EVENT_PAGE_SIZE as usize == 0 && !txs.is_empty() {
                         Some(
-                            Container::new(
+                            pending_txs
-                                Button::new(
+                                .iter()
-                                    text("See more")
+                                .enumerate()
-                                        .width(Length::Fill)
+                                .fold(Column::new().spacing(10), |col, (i, tx)| {
-                                        .horizontal_alignment(alignment::Horizontal::Center),
+                                    col.push(tx_list_view(i, tx))
-                                )
+                                }),
-                                .width(Length::Fill)
-                                .padding(15)
-                                .style(theme::Button::TransparentBorder)
-                                .on_press(Message::Next),
-                            )
-                            .width(Length::Fill)
-                            .style(theme::Container::Card(theme::Card::Simple)),
                         )
                     } else {
                         None
-                    },
+                    })
-                ),
+                    .push(
-        )
+                        txs.iter()
-        .align_items(Alignment::Center)
+                            .enumerate()
-        .spacing(30)
+                            .fold(Column::new().spacing(10), |col, (i, tx)| {
-        .into()
+                                col.push(tx_list_view(i + pending_txs.len(), tx))
+                            }),
+                    )
+                    .push_maybe(
+                        if txs.len() % HISTORY_EVENT_PAGE_SIZE as usize == 0 && !txs.is_empty() {
+                            Some(
+                                Container::new(
+                                    Button::new(
+                                        text("See more")
+                                            .width(Length::Fill)
+                                            .horizontal_alignment(alignment::Horizontal::Center),
+                                    )
+                                    .width(Length::Fill)
+                                    .padding(15)
+                                    .style(theme::Button::TransparentBorder)
+                                    .on_press(Message::Next),
+                                )
+                                .width(Length::Fill)
+                                .style(theme::Container::Card(theme::Card::Simple)),
+                            )
+                        } else {
+                            None
+                        },
+                    ),
+            )
+            .align_items(Alignment::Center)
+            .spacing(30),
+    )
 }
 
 fn tx_list_view<'a>(i: usize, tx: &HistoryTransaction) -> Element<'a, Message> {
@@ -125,74 +137,86 @@ fn tx_list_view<'a>(i: usize, tx: &HistoryTransaction) -> Element<'a, Message> {
     .into()
 }
 
-pub fn tx_view<'a>(cache: &Cache, tx: &'a HistoryTransaction) -> Element<'a, Message> {
+pub fn tx_view<'a>(
-    Column::new()
+    cache: &'a Cache,
-        .push(
+    tx: &'a HistoryTransaction,
-            Row::new()
+    warning: Option<&'a Error>,
-                .push(if tx.is_external() {
+) -> Element<'a, Message> {
-                    badge::receive()
+    dashboard(
-                } else {
+        &Menu::Transactions,
-                    badge::spend()
+        cache,
-                })
+        warning,
-                .spacing(10)
+        Column::new()
-                .align_items(Alignment::Center),
+            .push(if tx.is_self_send() {
-        )
+                Container::new(h3("Transaction")).width(Length::Fill)
-        .push(if tx.is_external() {
+            } else if tx.is_external() {
-            amount_with_size(&tx.incoming_amount, 50)
+                Container::new(h3("Incoming transaction")).width(Length::Fill)
-        } else {
+            } else {
-            amount_with_size(&tx.outgoing_amount, 50)
+                Container::new(h3("Outgoing transaction")).width(Length::Fill)
-        })
+            })
-        .push_maybe(
+            .push(
-            tx.fee_amount
+                Column::new().spacing(20).push(
-                .map(|fee| Row::new().push(text("Miner Fee: ")).push(amount(&fee))),
+                    Column::new()
-        )
+                        .push(if tx.is_self_send() {
-        .push(card::simple(
+                            Container::new(h1("Self send"))
-            Column::new()
+                        } else if tx.is_external() {
-                .push_maybe(tx.time.map(|t| {
+                            Container::new(amount_with_size(&tx.incoming_amount, H1_SIZE))
-                    let date = NaiveDateTime::from_timestamp_opt(t as i64, 0)
+                        } else {
-                        .unwrap()
+                            Container::new(amount_with_size(&tx.outgoing_amount, H1_SIZE))
-                        .format("%b. %d, %Y - %T");
+                        })
-                    Row::new()
+                        .push_maybe(tx.fee_amount.map(|fee_amount| {
-                        .width(Length::Fill)
-                        .push(Container::new(text("Date:").bold()).width(Length::Fill))
-                        .push(Container::new(text(format!("{}", date))).width(Length::Shrink))
-                }))
-                .push(
-                    Row::new()
-                        .width(Length::Fill)
-                        .align_items(Alignment::Center)
-                        .push(Container::new(text("Txid:").bold()).width(Length::Fill))
-                        .push(
                             Row::new()
                                 .align_items(Alignment::Center)
-                                .push(Container::new(text(format!("{}", tx.tx.txid())).small()))
+                                .push(h3("Miner fee: ").style(color::GREY_3))
-                                .push(
+                                .push(amount_with_size(&fee_amount, H3_SIZE))
-                                    Button::new(icon::clipboard_icon())
+                        })),
-                                        .on_press(Message::Clipboard(tx.tx.txid().to_string()))
+                ),
-                                        .style(theme::Button::TransparentBorder),
+            )
-                                )
+            .push(card::simple(
-                                .width(Length::Shrink),
+                Column::new()
-                        ),
+                    .push_maybe(tx.time.map(|t| {
-                )
+                        let date = NaiveDateTime::from_timestamp_opt(t as i64, 0)
-                .spacing(5),
+                            .unwrap()
-        ))
+                            .format("%b. %d, %Y - %T");
-        .push(super::psbt::inputs_and_outputs_view(
+                        Row::new()
-            &tx.coins,
+                            .width(Length::Fill)
-            &tx.tx,
+                            .push(Container::new(text("Date:").bold()).width(Length::Fill))
-            cache.network,
+                            .push(Container::new(text(format!("{}", date))).width(Length::Shrink))
-            if tx.is_external() {
+                    }))
-                None
+                    .push(
-            } else {
+                        Row::new()
-                Some(tx.change_indexes.clone())
+                            .width(Length::Fill)
-            },
+                            .align_items(Alignment::Center)
-            if tx.is_external() {
+                            .push(Container::new(text("Txid:").bold()).width(Length::Fill))
-                Some(tx.change_indexes.clone())
+                            .push(
-            } else {
+                                Row::new()
-                None
+                                    .align_items(Alignment::Center)
-            },
+                                    .push(Container::new(text(format!("{}", tx.tx.txid())).small()))
-        ))
+                                    .push(
-        .align_items(Alignment::Center)
+                                        Button::new(icon::clipboard_icon())
-        .spacing(20)
+                                            .on_press(Message::Clipboard(tx.tx.txid().to_string()))
-        .max_width(800)
+                                            .style(theme::Button::TransparentBorder),
-        .into()
+                                    )
+                                    .width(Length::Shrink),
+                            ),
+                    )
+                    .spacing(5),
+            ))
+            .push(super::psbt::inputs_and_outputs_view(
+                &tx.coins,
+                &tx.tx,
+                cache.network,
+                if tx.is_external() {
+                    None
+                } else {
+                    Some(tx.change_indexes.clone())
+                },
+                if tx.is_external() {
+                    Some(tx.change_indexes.clone())
+                } else {
+                    None
+                },
+            ))
+            .spacing(20),
+    )
 }