[feat](route): add InputDataOfTransaction

src/app/event_handling.rs

@@ -209,6 +209,14 @@ where
                                                 }
                                             }
                                         }
+                                        SelectableTransactionDetailItem::InputData => {
+                                            app.set_route(Route::new(
+                                                RouteId::InputDataOfTransaction(
+                                                    transaction.to_owned(),
+                                                ),
+                                                ActiveBlock::Main,
+                                            ));
+                                        }
                                     }
                                 }
                             }

src/app/transaction.rs

@@ -1,8 +1,9 @@
 use crate::ethers::types::TransactionWithReceipt;
 
 pub enum SelectableTransactionDetailItem {
-    From,
-    To,
+    From,      //0
+    To,        //1
+    InputData, //2
 }
 
 impl SelectableTransactionDetailItem {
@@ -15,20 +16,22 @@ impl SelectableTransactionDetailItem {
                     Self::From
                 }
             }
-            Self::To => Self::From,
+            Self::To => Self::InputData,
+            Self::InputData => Self::From,
         }
     }
 
     pub fn previous(&self, transaction: &TransactionWithReceipt) -> Self {
         match self {
-            Self::From => {
+            Self::From => Self::InputData,
+            Self::To => Self::From,
+            Self::InputData => {
                 if transaction.transaction.to.is_some() {
                     Self::To
                 } else {
                     Self::From
                 }
             }
-            Self::To => Self::From,
         }
     }
 }
@@ -39,6 +42,8 @@ impl From<usize> for SelectableTransactionDetailItem {
             Self::From
         } else if i == 1 {
             Self::To
+        } else if i == 2 {
+            Self::InputData
         } else {
             unreachable!()
         }
@@ -50,6 +55,7 @@ impl From<SelectableTransactionDetailItem> for usize {
         match val {
             SelectableTransactionDetailItem::From => 0,
             SelectableTransactionDetailItem::To => 1,
+            SelectableTransactionDetailItem::InputData => 2,
         }
     }
 }

src/route.rs

@@ -10,6 +10,7 @@ pub enum RouteId {
     TransactionsOfBlock(Option<BlockWithTransactionReceipts<Transaction>>),
     WithdrawalsOfBlock(Option<BlockWithTransactionReceipts<Transaction>>),
     Transaction(Option<TransactionWithReceipt>),
+    InputDataOfTransaction(Option<TransactionWithReceipt>),
 }
 
 #[derive(Clone, Copy, PartialEq, Debug)]

src/ui/home.rs

@@ -81,7 +81,7 @@ pub fn render_home_layout<B: Backend>(f: &mut Frame<B>, app: &mut App) {
             RouteId::WithdrawalsOfBlock(block_with_transaction_receipts) => {
                 block::render(f, app, block_with_transaction_receipts, rest);
             }
-            RouteId::Transaction(transaction) => {
+            RouteId::Transaction(transaction) | RouteId::InputDataOfTransaction(transaction) => {
                 transaction::render(f, app, transaction, rest);
             }
             RouteId::Welcome => {
@@ -125,7 +125,7 @@ pub fn render_home_layout<B: Backend>(f: &mut Frame<B>, app: &mut App) {
             RouteId::WithdrawalsOfBlock(block) => {
                 block::render(f, app, block, detail);
             }
-            RouteId::Transaction(transaction) => {
+            RouteId::Transaction(transaction) | RouteId::InputDataOfTransaction(transaction) => {
                 transaction::render(f, app, transaction, detail);
             }
             RouteId::Welcome => {

src/ui/home/transaction.rs

@@ -4,7 +4,7 @@ use crate::{
         transaction::calculate_transaction_fee,
         types::{ERC20Token, TransactionWithReceipt},
     },
-    route::ActiveBlock,
+    route::{ActiveBlock, RouteId},
     App,
 };
 use ethers::core::{
@@ -40,7 +40,7 @@ pub fn render<B: Backend>(
 
         let [detail_rect, input_data_rect] = *Layout::default()
             .direction(Direction::Vertical)
-            .constraints([Constraint::Max(11), Constraint::Min(1)].as_ref())
+            .constraints([Constraint::Max(15), Constraint::Min(1)].as_ref())
             .split(rect)
         else {
             return;
@@ -239,6 +239,35 @@ pub fn render<B: Backend>(
             ));
         }
 
+        details.push(Line::from(
+            if app.transaction_detail_list_state.selected()
+                == Some(SelectableTransactionDetailItem::InputData.into())
+            {
+                Span::raw(format!(
+                    "{:<17}: {}",
+                    "Input Data",
+                    if let RouteId::InputDataOfTransaction(_) = app.get_current_route().get_id() {
+                        "▼"
+                    } else {
+                        "▶"
+                    }
+                ))
+                .fg(Color::White)
+                .add_modifier(Modifier::BOLD)
+            } else {
+                Span::raw(format!(
+                    "{:<17}: {}",
+                    "Input Data",
+                    if let RouteId::InputDataOfTransaction(_) = app.get_current_route().get_id() {
+                        "▼"
+                    } else {
+                        "▶"
+                    }
+                ))
+                .fg(Color::White)
+            },
+        ));
+
         let input_data = transaction
             .input
             .to_string()
@@ -273,7 +302,23 @@ pub fn render<B: Backend>(
                 .collect();
 
             let tabs = Tabs::new(titles)
-                .block(Block::default().borders(Borders::RIGHT | Borders::LEFT | Borders::TOP))
+                .block(
+                    Block::default()
+                        .borders(Borders::RIGHT | Borders::LEFT | Borders::TOP)
+                        .border_style(
+                            if let ActiveBlock::Main = app.get_current_route().get_active_block() {
+                                if let RouteId::InputDataOfTransaction(_) =
+                                    app.get_current_route().get_id()
+                                {
+                                    Style::default().fg(Color::Green)
+                                } else {
+                                    Style::default().fg(Color::White)
+                                }
+                            } else {
+                                Style::default().fg(Color::White)
+                            },
+                        ),
+                )
                 .select(app.selectable_contract_detail_item.into())
                 .style(Style::default())
                 .highlight_style(Style::default().bold().green());
@@ -289,7 +334,23 @@ pub fn render<B: Backend>(
                 Paragraph::new(raw_input_data.to_owned())
                     .alignment(Alignment::Left)
                     .block(
-                        Block::default().borders(Borders::RIGHT | Borders::LEFT | Borders::BOTTOM),
+                        Block::default()
+                            .borders(Borders::RIGHT | Borders::LEFT | Borders::BOTTOM)
+                            .border_style(
+                                if let ActiveBlock::Main =
+                                    app.get_current_route().get_active_block()
+                                {
+                                    if let RouteId::InputDataOfTransaction(_) =
+                                        app.get_current_route().get_id()
+                                    {
+                                        Style::default().fg(Color::Green)
+                                    } else {
+                                        Style::default().fg(Color::White)
+                                    }
+                                } else {
+                                    Style::default().fg(Color::White)
+                                },
+                            ),
                     )
                     .scroll((app.input_data_scroll, 0))
                     .wrap(Wrap { trim: false }),