Merge pull request #34 from MutinyWallet/add-info-header

add header with info about balance and mint

src/components/layout.rs

@@ -0,0 +1,13 @@
+use iced::widget::{container, scrollable, Column};
+use iced::Length;
+use iced::{Element, Padding};
+
+use crate::Message;
+
+pub fn basic_layout(column: Column<Message>) -> Element<Message> {
+    container(
+        scrollable(column.width(Length::Fixed(512.)).padding(Padding::new(48.)))
+            .height(Length::Fill),
+    )
+    .into()
+}

src/components/mod.rs

@@ -30,3 +30,12 @@ pub use caption_text::*;
 
 mod federation_item;
 pub use federation_item::*;
+
+mod screen_header;
+pub use screen_header::*;
+
+mod rules;
+pub use rules::*;
+
+mod layout;
+pub use layout::*;

src/components/rules.rs

@@ -0,0 +1,39 @@
+use crate::components::lighten;
+use iced::widget::{horizontal_rule, rule, vertical_rule};
+use iced::{Element, Theme};
+
+use crate::Message;
+
+pub fn hr() -> Element<'static, Message> {
+    horizontal_rule(1)
+        .style(|theme: &Theme| {
+            {
+                let gray = lighten(theme.palette().background, 0.1);
+                // TODO: is there an easier way to just override the color?
+                rule::Style {
+                    color: gray,
+                    width: 1,
+                    radius: (0.).into(),
+                    fill_mode: rule::FillMode::Full,
+                }
+            }
+        })
+        .into()
+}
+
+pub fn vr() -> Element<'static, Message> {
+    vertical_rule(1)
+        .style(|theme: &Theme| {
+            {
+                let gray = lighten(theme.palette().background, 0.1);
+                // TODO: is there an easier way to just override the color?
+                rule::Style {
+                    color: gray,
+                    width: 1,
+                    radius: (0.).into(),
+                    fill_mode: rule::FillMode::Full,
+                }
+            }
+        })
+        .into()
+}

src/components/screen_header.rs

@@ -0,0 +1,36 @@
+use iced::{
+    widget::{column, row, text},
+    Alignment, Element, Length,
+};
+
+use crate::{HarborWallet, Message};
+
+use super::{hr, map_icon, vr, FederationItem, SvgIcon};
+
+pub fn h_screen_header(harbor: &HarborWallet, show_balance: bool) -> Element<Message> {
+    if let Some(item) = harbor.federation_list.first() {
+        let FederationItem { name, id: _id } = item;
+        let people_icon = map_icon(SvgIcon::People).width(24).height(24);
+        let current_federation = row![people_icon, text(name).size(24)]
+            .align_items(Alignment::Center)
+            .spacing(16)
+            .width(Length::Shrink)
+            .padding(16);
+
+        let balance = row![text(format!("{} sats", harbor.balance_sats)).size(24)]
+            .align_items(Alignment::Center)
+            .padding(16);
+
+        let row = row![current_federation].spacing(16);
+
+        column![
+            row.push_maybe(show_balance.then_some(vr()))
+                .push_maybe(show_balance.then_some(balance))
+                .height(Length::Shrink),
+            hr()
+        ]
+        .into()
+    } else {
+        row![].spacing(16).into()
+    }
+}

src/routes/history.rs

@@ -1,8 +1,7 @@
-use iced::widget::{column, container, scrollable};
+use iced::widget::column;
 use iced::Element;
-use iced::{Length, Padding};
 
-use crate::components::{h_header, h_transaction_item};
+use crate::components::{basic_layout, h_header, h_screen_header, h_transaction_item};
 use crate::{HarborWallet, Message};
 
 pub fn history(harbor: &HarborWallet) -> Element<Message> {
@@ -17,12 +16,9 @@ pub fn history(harbor: &HarborWallet) -> Element<Message> {
 
     let column = column![header, transactions].spacing(48);
 
-    container(scrollable(
-        column
-            .spacing(48)
-            .width(Length::Fill)
-            .max_width(512)
-            .padding(Padding::new(48.)),
-    ))
+    column![
+        h_screen_header(harbor, true),
+        basic_layout(column.spacing(48)),
+    ]
     .into()
 }

src/routes/home.rs

@@ -1,6 +1,6 @@
-use crate::components::{h_button, SvgIcon};
+use crate::components::{h_button, h_screen_header, SvgIcon};
 use iced::widget::{center, column, container, row, text};
-use iced::{Alignment, Element};
+use iced::{Alignment, Element, Length};
 
 use crate::{HarborWallet, Message};
 
@@ -14,11 +14,15 @@ pub fn home(harbor: &HarborWallet) -> Element<Message> {
         h_button("Receive", SvgIcon::DownLeft, false).on_press(Message::Navigate(Route::Receive));
     let buttons = row![send_button, receive_button].spacing(32);
 
-    container(center(
-        column![balance, buttons]
-            .spacing(32)
-            .align_items(Alignment::Center)
-            .max_width(512),
-    ))
+    column![
+        h_screen_header(harbor, false),
+        container(center(
+            column![balance, buttons]
+                .spacing(32)
+                .align_items(Alignment::Center)
+                .max_width(512)
+        ))
+        .height(Length::Fill)
+    ]
     .into()
 }

src/routes/mints.rs

@@ -1,8 +1,7 @@
-use iced::widget::{column, container, scrollable, text};
+use iced::widget::{column, text};
 use iced::{Color, Element};
-use iced::{Length, Padding};
 
-use crate::components::{h_button, h_federation_item, h_header, h_input, SvgIcon};
+use crate::components::{basic_layout, h_button, h_federation_item, h_header, h_input, SvgIcon};
 use crate::{HarborWallet, Message};
 
 pub fn mints(harbor: &HarborWallet) -> Element<Message> {
@@ -55,12 +54,5 @@ pub fn mints(harbor: &HarborWallet) -> Element<Message> {
         column.push(federation_list)
     };
 
-    container(scrollable(
-        column
-            .spacing(48)
-            .width(Length::Fill)
-            .max_width(512)
-            .padding(Padding::new(48.)),
-    ))
-    .into()
+    basic_layout(column.spacing(48))
 }

src/routes/receive.rs

@@ -1,9 +1,11 @@
 use iced::widget::container::Style;
-use iced::widget::{column, container, qr_code, radio, scrollable, text};
-use iced::{Border, Element, Font, Padding};
-use iced::{Color, Length};
+use iced::widget::{column, container, qr_code, radio, text};
+use iced::Color;
+use iced::{Border, Element, Font};
 
-use crate::components::{h_button, h_caption_text, h_header, h_input, SvgIcon};
+use crate::components::{
+    basic_layout, h_button, h_caption_text, h_header, h_input, h_screen_header, SvgIcon,
+};
 use crate::{HarborWallet, Message, ReceiveMethod, ReceiveStatus};
 
 pub fn receive(harbor: &HarborWallet) -> Element<Message> {
@@ -116,12 +118,9 @@ pub fn receive(harbor: &HarborWallet) -> Element<Message> {
         }
     };
 
-    container(scrollable(
-        column
-            .spacing(48)
-            .width(Length::Fill)
-            .max_width(512)
-            .padding(Padding::new(48.)),
-    ))
+    column![
+        h_screen_header(harbor, true),
+        basic_layout(column.spacing(48)),
+    ]
     .into()
 }

src/routes/send.rs

@@ -1,8 +1,8 @@
-use iced::widget::{column, container, scrollable, text};
-use iced::{Color, Length};
-use iced::{Element, Padding};
+use iced::widget::{column, text};
+use iced::Color;
+use iced::Element;
 
-use crate::components::{h_button, h_header, h_input, SvgIcon};
+use crate::components::{basic_layout, h_button, h_header, h_input, h_screen_header, SvgIcon};
 use crate::{HarborWallet, Message, SendStatus};
 
 pub fn send(harbor: &HarborWallet) -> Element<Message> {
@@ -59,12 +59,9 @@ pub fn send(harbor: &HarborWallet) -> Element<Message> {
         column![header, amount_input, dest_input, send_button]
     };
 
-    container(scrollable(
-        column
-            .spacing(48)
-            .width(Length::Fill)
-            .max_width(512)
-            .padding(Padding::new(48.)),
-    ))
+    column![
+        h_screen_header(harbor, true),
+        basic_layout(column.spacing(48)),
+    ]
     .into()
 }