added help pop-over

src/main.rs

@@ -11,9 +11,12 @@ use crossterm::{
     terminal::{disable_raw_mode, enable_raw_mode},
 };
 use network::network::{handle_tokio, Network, NetworkEvent};
+use ratatui::backend::Backend;
+use ratatui::layout::Rect;
 use ratatui::style::{Color, Style};
-use ratatui::widgets::Paragraph;
+use ratatui::widgets::{Clear, Paragraph};
 use util::constants::{GENERAL_HELP_TEXT, TICK_RATE};
+use widgets::help::render_help_popup;
 
 use crate::widgets::{
     chart::{render_chart, TokenChart},
@@ -125,8 +128,6 @@ async fn main() -> Result<(), Box<dyn Error>> {
     let mut table = StatefulTable::new();
     let mut token_chart = TokenChart::new();
 
-    let word = String::new();
-
     terminal.clear()?;
 
     loop {
@@ -136,35 +137,47 @@ async fn main() -> Result<(), Box<dyn Error>> {
             // with at least a margin of 1
             let size = f.size();
 
-            let block = Block::default()
+            let outer_block = Block::default()
                 .borders(Borders::ALL)
-                .title("Top Tokens")
                 .border_type(BorderType::Thick);
-            f.render_widget(block, size);
+            f.render_widget(outer_block, size);
 
             let chunks = Layout::default()
                 .direction(Direction::Vertical)
                 .constraints(
                     [
                         Constraint::Percentage(10),
                         Constraint::Percentage(50),
-                        Constraint::Percentage(40),
+                        Constraint::Percentage(30),
+                        Constraint::Percentage(10),
                     ]
                     .as_ref(),
                 )
-                .margin(5)
+                .margin(1)
                 .split(f.size());
 
+            if app.show_help {
+                let (help, help_block, help_area) = render_help_popup(size);
+                f.render_widget(Clear, help_area); //this clears out the background
+                f.render_widget(help_block, help_area);
+                f.render_widget(help, help_area);
+            }
+
             if let Some((search_bar, search_bar_rect)) = render_search_block(chunks[0], &mut app) {
                 // Render search bar at the stop
                 f.render_widget(search_bar, search_bar_rect);
             }
 
             // Render welcome in the middle
-            f.render_widget(render_welcome(), chunks[1]);
+            let (welcome, welcome_block) = render_welcome();
+            f.render_widget(welcome_block, chunks[1]);
+            f.render_widget(welcome, chunks[1]);
 
             // Render table at the bottom
-            f.render_stateful_widget(render_table(&mut table), chunks[2], &mut table.state);
+            let (table_widget, table_block) = render_table(&table);
+            f.render_widget(table_block, chunks[2]);
+            f.render_stateful_widget(table_widget, chunks[2], &mut table.state);
+
             //Render the help text at the bottom
             let help_text = Paragraph::new(GENERAL_HELP_TEXT)
                 .style(Style::default().fg(Color::White))
@@ -173,7 +186,7 @@ async fn main() -> Result<(), Box<dyn Error>> {
                         .borders(Borders::ALL)
                         .border_type(BorderType::Plain),
                 );
-            f.render_widget(help_text, chunks[2]);
+            f.render_widget(help_text, chunks[3]);
         })?;
 
         // #TODO: Move this to event handling
@@ -191,6 +204,12 @@ async fn main() -> Result<(), Box<dyn Error>> {
                                 terminal.show_cursor()?;
                                 break;
                             }
+                            KeyCode::Char('h') => {
+                                app.show_help = true;
+                            }
+                            KeyCode::Esc => {
+                                app.show_help = false;
+                            }
                             _ => {}
                         },
                         InputMode::Editing => match event.code {
@@ -235,6 +254,18 @@ async fn main() -> Result<(), Box<dyn Error>> {
                         KeyCode::Esc => {
                             app.show_help = false;
                         }
+                        KeyCode::Up => {
+                            table.previous();
+                        }
+                        KeyCode::Down => {
+                            table.next();
+                        }
+                        KeyCode::Char('1') => {
+                            app.change_active_block(ActiveBlock::PositionInfo);
+                        }
+                        KeyCode::Char('2') => {
+                            app.change_active_block(ActiveBlock::MyPositions);
+                        }
                         _ => {}
                     }
                 }

src/routes.rs

@@ -11,6 +11,7 @@ pub enum RouteId {
 pub enum ActiveBlock {
     SearchBar,
     MyPositions,
+    PositionInfo,
 }
 
 #[derive(Clone)]

src/widgets/help.rs

@@ -0,0 +1,51 @@
+use ratatui::{
+    layout::{Constraint, Direction, Layout, Rect},
+    style::{Color, Style, Stylize},
+    text::{Line, Span},
+    widgets::{Block, Borders, Paragraph},
+};
+
+pub fn render_help_popup<'a>(size: Rect) -> (Paragraph<'a>, Block<'a>, Rect) {
+    let block = Block::default()
+        .title("Keybindings - Press Esc to close the popup")
+        .borders(Borders::ALL);
+
+    let input = Paragraph::new(vec![
+        Line::from(
+            Span::raw(format!(" {:<4}: {}", "s", "Move to the Search Bar")).fg(Color::White),
+        ),
+        Line::from(
+            Span::raw(format!(" {:<4}: {}", "1", "Move to Positions Info area")).fg(Color::White),
+        ),
+        Line::from(
+            Span::raw(format!(" {:<4}: {}", "2", "Move to the My Positions")).fg(Color::White),
+        ),
+    ])
+    .style(Style::default().fg(Color::Green))
+    .block(block.to_owned());
+
+    let area = centered_rect(40, 10, size);
+
+    (input, block, area)
+}
+
+/// helper function to create a centered rect using up certain percentage of the available rect `r`
+fn centered_rect(percent_x: u16, percent_y: u16, r: Rect) -> Rect {
+    let popup_layout = Layout::default()
+        .direction(Direction::Vertical)
+        .constraints([
+            Constraint::Percentage((100 - percent_y) / 2),
+            Constraint::Percentage(percent_y),
+            Constraint::Percentage((100 - percent_y) / 2),
+        ])
+        .split(r);
+
+    Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([
+            Constraint::Percentage((100 - percent_x) / 2),
+            Constraint::Percentage(percent_x),
+            Constraint::Percentage((100 - percent_x) / 2),
+        ])
+        .split(popup_layout[1])[1]
+}

src/widgets/mod.rs

@@ -1,4 +1,5 @@
 pub mod chart;
+pub mod help;
 pub mod search;
 pub mod spinner;
 pub mod table;

src/widgets/table.rs

@@ -1,7 +1,7 @@
 use ratatui::{
     layout::Constraint,
     style::{Color, Modifier, Style},
-    widgets::{Cell, Row, Table, TableState},
+    widgets::{Block, BorderType, Borders, Cell, Row, Table, TableState},
 };
 
 pub struct StatefulTable<'a> {
@@ -52,11 +52,11 @@ impl<'a> StatefulTable<'a> {
     }
 }
 
-pub fn render_table<'a>(table: &StatefulTable<'a>) -> Table<'a> {
+pub fn render_table<'a>(table: &StatefulTable<'a>) -> (Table<'a>, Block<'a>) {
     // Table Layout
     let selected_style = Style::default().add_modifier(Modifier::REVERSED);
     let normal_style = Style::default().bg(Color::LightBlue);
-    let header_cells = ["Name", "Price", "Volume"]
+    let header_cells = ["Name", "Fees", "In-Range", "Age"]
         .iter()
         .map(|h| Cell::from(*h).style(Style::default().fg(Color::White)));
     let header = Row::new(header_cells)
@@ -81,10 +81,15 @@ pub fn render_table<'a>(table: &StatefulTable<'a>) -> Table<'a> {
         Constraint::Max(10),
     ];
 
-    let t = Table::new(rows, widths)
+    let table = Table::new(rows, widths)
         .header(header)
         .highlight_style(selected_style)
         .highlight_symbol(">> ");
 
-    t
+    let block = Block::default()
+        .title("My Positions")
+        .borders(Borders::ALL)
+        .border_type(BorderType::Thick);
+
+    (table, block)
 }

src/widgets/welcome.rs

@@ -1,6 +1,11 @@
 use ratatui::{prelude::*, widgets::*};
 
-pub fn render_welcome<'a>() -> Paragraph<'a> {
+pub fn render_welcome<'a>() -> (Paragraph<'a>, Block<'a>) {
+    let outer_block = Block::default()
+        .title("Position Info")
+        .borders(Borders::ALL)
+        .border_type(BorderType::Plain);
+
     let banner = Paragraph::new(Text::from(
         cfonts::render(cfonts::Options {
             text: String::from("gerrehbenta"),
@@ -12,5 +17,5 @@ pub fn render_welcome<'a>() -> Paragraph<'a> {
     .wrap(Wrap { trim: false })
     .alignment(Alignment::Center);
 
-    banner
+    (banner, outer_block)
 }