feat: update console wallet tui (#3837)

Description
---
Updated console wallet TUI to better accommodate the expanding number of tabs:
- Moved base node status to the bottom of the screen, expanding tab selection to
  the entire width.
- Regained 1 line of real estate screen space at the bottom of the screen
  (with menu).
- Refined some help text to fit on the screen.
- Added a separate contacts tab to enable better handling of contacts not
  needing to access it via the transaction send tab.
- Improved column spacing on the contacts tab/pane.
- Improved the receive tab layout (moved connection details above the QR code).
- Removed contacts editing ability from the sent tab; only selection remains.

_**Some screenshots:**_

![image](https://user-images.githubusercontent.com/39146854/153877245-dd354e74-f75c-46b4-bb82-4bfeac0fe38b.png)

![image](https://user-images.githubusercontent.com/39146854/153877820-28da3efa-563d-47ab-9fec-dd23c482d337.png)

![image](https://user-images.githubusercontent.com/39146854/153877839-859616dc-8dea-4e6b-b072-dc8f15634141.png)


Motivation and Context
---
See above

How Has This Been Tested?
---
System level tests

applications/tari_console_wallet/src/ui/app.rs

@@ -36,6 +36,7 @@ use crate::{
         components::{
             assets_tab::AssetsTab,
             base_node::BaseNode,
+            contacts_tab::ContactsTab,
             events_component::EventsComponent,
             log_tab::LogTab,
             menu::Menu,
@@ -91,6 +92,7 @@ impl<B: Backend> App<B> {
             .add("Transactions".into(), Box::new(TransactionsTab::new()))
             .add("Send".into(), Box::new(SendTab::new(&app_state)))
             .add("Receive".into(), Box::new(ReceiveTab::new()))
+            .add("Contacts".into(), Box::new(ContactsTab::new()))
             .add("Network".into(), Box::new(NetworkTab::new(base_node_selected)))
             .add("Assets".into(), Box::new(AssetsTab::new()))
             .add("Tokens".into(), Box::new(TokensComponent::new()))
@@ -173,17 +175,20 @@ impl<B: Backend> App<B> {
             .constraints([Constraint::Length(MAX_WIDTH), Constraint::Min(0)].as_ref())
             .split(f.size());
         let title_chunks = Layout::default()
-            .constraints([Constraint::Length(3), Constraint::Min(0), Constraint::Length(2)].as_ref())
+            .constraints(
+                [
+                    Constraint::Length(3),
+                    Constraint::Min(0),
+                    Constraint::Length(2),
+                    Constraint::Length(1),
+                ]
+                .as_ref(),
+            )
             .split(max_width_layout[0]);
-        let title_halves = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Percentage(65), Constraint::Percentage(35)].as_ref())
-            .split(title_chunks[0]);
-
-        self.tabs.draw_titles(f, title_halves[0], &self.app_state);
 
-        self.base_node_status.draw(f, title_halves[1], &self.app_state);
+        self.tabs.draw_titles(f, title_chunks[0], &self.app_state);
         self.tabs.draw_content(f, title_chunks[1], &mut self.app_state);
-        self.menu.draw(f, title_chunks[2], &self.app_state);
+        self.base_node_status.draw(f, title_chunks[2], &self.app_state);
+        self.menu.draw(f, title_chunks[3], &self.app_state);
     }
 }

applications/tari_console_wallet/src/ui/components/base_node.rs

@@ -23,14 +23,14 @@
 use tari_wallet::connectivity_service::{OnlineStatus, WalletConnectivityInterface};
 use tui::{
     backend::Backend,
-    layout::Rect,
-    style::{Color, Modifier, Style},
+    layout::{Constraint, Direction, Layout, Rect},
+    style::{Color, Style},
     text::{Span, Spans},
     widgets::{Block, Borders, Paragraph},
     Frame,
 };
 
-use crate::ui::{components::Component, state::AppState};
+use crate::ui::{components::Component, state::AppState, MAX_WIDTH};
 
 pub struct BaseNode {}
 
@@ -43,9 +43,13 @@ impl BaseNode {
 impl<B: Backend> Component<B> for BaseNode {
     fn draw(&mut self, f: &mut Frame<B>, area: Rect, app_state: &AppState)
     where B: Backend {
-        let base_node_state = app_state.get_base_node_state();
-        let current_online_status = app_state.get_wallet_connectivity().get_connectivity_status();
+        let title = Spans::from(vec![Span::styled(
+            " Base Node Status  -  ",
+            Style::default().fg(Color::White),
+        )]);
 
+        let current_online_status = app_state.get_wallet_connectivity().get_connectivity_status();
+        let mut base_node_id_color = Color::White;
         let chain_info = match current_online_status {
             OnlineStatus::Connecting => Spans::from(vec![
                 Span::styled("Chain Tip:", Style::default().fg(Color::Magenta)),
@@ -58,14 +62,27 @@ impl<B: Backend> Component<B> for BaseNode {
                 Span::styled("Offline", Style::default().fg(Color::Red)),
             ]),
             OnlineStatus::Online => {
+                let base_node_state = app_state.get_base_node_state();
                 if let Some(ref metadata) = base_node_state.chain_metadata {
                     let tip = metadata.height_of_longest_chain();
 
                     let synced = base_node_state.is_synced.unwrap_or_default();
                     let (tip_color, sync_text) = if synced {
-                        (Color::Green, "Synced.")
+                        (
+                            {
+                                base_node_id_color = Color::Green;
+                                base_node_id_color
+                            },
+                            "Synced.",
+                        )
                     } else {
-                        (Color::Yellow, "Syncing...")
+                        (
+                            {
+                                base_node_id_color = Color::Yellow;
+                                base_node_id_color
+                            },
+                            "Syncing...",
+                        )
                     };
 
                     let latency = base_node_state.latency.unwrap_or_default().as_millis();
@@ -100,11 +117,42 @@ impl<B: Backend> Component<B> for BaseNode {
             },
         };
 
-        let chain_metadata_paragraph =
-            Paragraph::new(chain_info).block(Block::default().borders(Borders::ALL).title(Span::styled(
-                "Base Node Status:",
-                Style::default().fg(Color::White).add_modifier(Modifier::BOLD),
-            )));
-        f.render_widget(chain_metadata_paragraph, area);
+        let base_node_id = Spans::from(vec![
+            Span::styled(" Connected Base Node ID: ", Style::default().fg(Color::Magenta)),
+            Span::styled(
+                format!("{}", app_state.get_selected_base_node().node_id.clone()),
+                Style::default().fg(base_node_id_color),
+            ),
+            Span::styled(" ", Style::default().fg(Color::White)),
+        ]);
+
+        let chunks = Layout::default()
+            .constraints([Constraint::Length(1), Constraint::Length(1)].as_ref())
+            .split(area);
+
+        let columns = Layout::default()
+            .direction(Direction::Horizontal)
+            .constraints(
+                [
+                    Constraint::Ratio(title.width() as u32, MAX_WIDTH as u32),
+                    Constraint::Ratio(
+                        MAX_WIDTH.saturating_sub((title.width() + base_node_id.width()) as u16) as u32,
+                        MAX_WIDTH as u32,
+                    ),
+                    Constraint::Ratio(base_node_id.width() as u32, MAX_WIDTH as u32),
+                ]
+                .as_ref(),
+            )
+            .split(chunks[0]);
+
+        let paragraph = Paragraph::new(title).block(Block::default());
+        f.render_widget(paragraph, columns[0]);
+        let paragraph = Paragraph::new(chain_info).block(Block::default());
+        f.render_widget(paragraph, columns[1]);
+        let paragraph = Paragraph::new(base_node_id).block(Block::default());
+        f.render_widget(paragraph, columns[2]);
+
+        let divider = Block::default().borders(Borders::BOTTOM);
+        f.render_widget(divider, chunks[1]);
     }
 }