feat: blocks in vn ui (#671)

Description --- Changes in the VN UI - Add `blocks` - Remove `recent transactions` Motivation and Context --- How Has This Been Tested? --- Manually. What process can a PR reviewer use to test or verify this change? --- Run a VN on network with blocks. Breaking Changes --- - [x] None - [ ] Requires data directory to be deleted - [ ] Other - Please specify
tari-project · Sep 29, 2023 · ccf9c61 · ccf9c61
1 parent 2a66aed
commit ccf9c61
Show file tree

Hide file tree

Showing 22 changed files with 1,082 additions and 480 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/applications/tari_validator_node/src/json_rpc/handlers.rs b/applications/tari_validator_node/src/json_rpc/handlers.rs
@@ -57,6 +57,9 @@ use tari_validator_node_client::types::{
     AddPeerResponse,
     CommitteeShardInfo,
     DryRunTransactionFinalizeResult,
+    GetBlockRequest,
+    GetBlockResponse,
+    GetBlocksCountResponse,
     GetCommitteeRequest,
     GetEpochManagerStatsResponse,
     GetIdentityResponse,
@@ -168,8 +171,7 @@ impl JsonRpcHandlers {
             target: LOG_TARGET,
             "Transaction {} has {} involved shards",
             transaction.hash(),
-            transaction
-                .num_involved_shards()
+            transaction.num_involved_shards()
         );
 
         let tx_id = *transaction.id();
@@ -389,6 +391,45 @@ impl JsonRpcHandlers {
         }))
     }
 
+    pub async fn get_block(&self, value: JsonRpcExtractor) -> JrpcResult {
+        let answer_id = value.get_answer_id();
+        let data: GetBlockRequest = value.parse_params()?;
+        let mut tx = self.state_store.create_read_tx().unwrap();
+        match Block::get(&mut tx, &data.block_id) {
+            Ok(block) => {
+                let res = GetBlockResponse { block };
+                Ok(JsonRpcResponse::success(answer_id, res))
+            },
+            Err(e) => Err(JsonRpcResponse::error(
+                answer_id,
+                JsonRpcError::new(
+                    JsonRpcErrorReason::InvalidParams,
+                    format!("Something went wrong: {}", e),
+                    json::Value::Null,
+                ),
+            )),
+        }
+    }
+
+    pub async fn get_blocks_count(&self, value: JsonRpcExtractor) -> JrpcResult {
+        let answer_id = value.get_answer_id();
+        let mut tx = self.state_store.create_read_tx().unwrap();
+        match Block::get_count(&mut tx) {
+            Ok(count) => {
+                let res = GetBlocksCountResponse { count };
+                Ok(JsonRpcResponse::success(answer_id, res))
+            },
+            Err(e) => Err(JsonRpcResponse::error(
+                answer_id,
+                JsonRpcError::new(
+                    JsonRpcErrorReason::InternalError,
+                    format!("Something went wrong: {}", e),
+                    json::Value::Null,
+                ),
+            )),
+        }
+    }
+
     pub async fn register_validator_node(&self, value: JsonRpcExtractor) -> JrpcResult {
         let answer_id = value.get_answer_id();
         let req: RegisterValidatorNodeRequest = value.parse_params()?;

diff --git a/applications/tari_validator_node/src/json_rpc/server.rs b/applications/tari_validator_node/src/json_rpc/server.rs
@@ -68,6 +68,9 @@ async fn handler(Extension(handlers): Extension<Arc<JsonRpcHandlers>>, value: Js
         "get_substates_created_by_transaction" => handlers.get_substates_created_by_transaction(value).await,
         "get_substates_destroyed_by_transaction" => handlers.get_substates_destroyed_by_transaction(value).await,
         "list_blocks" => handlers.list_blocks(value).await,
+        // Blocks
+        "get_block" => handlers.get_block(value).await,
+        "get_blocks_count" => handlers.get_blocks_count(value).await,
         // Template
         "get_template" => handlers.get_template(value).await,
         "get_templates" => handlers.get_templates(value).await,
@@ -94,7 +97,11 @@ async fn handler(Extension(handlers): Extension<Arc<JsonRpcHandlers>>, value: Js
     if let Err(ref e) = result {
         match &e.result {
             JsonRpcAnswer::Result(val) => {
-                error!(target: LOG_TARGET, "🚨 JSON-RPC request failed: {}", serde_json::to_string_pretty(val).unwrap_or_else(|e| e.to_string()));
+                error!(
+                    target: LOG_TARGET,
+                    "🚨 JSON-RPC request failed: {}",
+                    serde_json::to_string_pretty(val).unwrap_or_else(|e| e.to_string())
+                );
             },
             JsonRpcAnswer::Error(err) => {
                 error!(target: LOG_TARGET, "🚨 JSON-RPC request failed: {}", err);

diff --git a/applications/tari_validator_node_web_ui/src/App.tsx b/applications/tari_validator_node_web_ui/src/App.tsx
@@ -26,7 +26,7 @@ import Committees from "./routes/Committees/CommitteesLayout";
 import ValidatorNode from "./routes/VN/ValidatorNode";
 import Connections from "./routes/Connections/Connections";
 import Fees from "./routes/Fees/Fees";
-import RecentTransactions from "./routes/RecentTransactions/RecentTransactions";
+import Blocks from "./routes/Blocks/Blocks";
 import Templates from "./routes/Templates/Templates";
 import ValidatorNodes from "./routes/ValidatorNodes/ValidatorNodes";
 import ErrorPage from "./routes/ErrorPage";
@@ -42,6 +42,7 @@ import {
   getShardKey,
 } from "./utils/json_rpc";
 import TransactionDetails from "./routes/Transactions/TransactionDetails";
+import BlockDetails from "./routes/Blocks/BlockDetails";
 
 interface IContext {
   epoch: IEpoch | undefined;
@@ -83,6 +84,16 @@ export const breadcrumbRoutes = [
     path: "/transactions",
     dynamic: false,
   },
+  {
+    label: "Blocks",
+    path: "/blocks",
+    dynamic: false,
+  },
+  {
+    label: "Blocks",
+    path: "/blocks/:blockId",
+    dynamic: true,
+  },
   {
     label: "Templates",
     path: "/templates",
@@ -168,9 +179,6 @@ export default function App() {
       );
     }
   }, [epoch, identity]);
-  useEffect(() => {
-    getRecentTransactions();
-  }, []);
 
   return (
     <>
@@ -181,14 +189,15 @@ export default function App() {
             <Route path="committees" element={<Committees />} />
             <Route path="connections" element={<Connections />} />
             <Route path="fees" element={<Fees />} />
-            <Route path="transactions" element={<RecentTransactions />} />
+            <Route path="blocks" element={<Blocks/>} />
             <Route path="templates" element={<Templates />} />
             <Route path="vns" element={<ValidatorNodes />} />
             <Route path="mempool" element={<Mempool />} />
             <Route
               path="transactions/:transactionHash"
               element={<TransactionDetails />}
             />
+            <Route path="blocks/:blockId" element={<BlockDetails />} />
             <Route path="templates/:address" element={<TemplateFunctions />} />
             <Route path="committees/:address" element={<CommitteeMembers />} />
             <Route path="*" element={<ErrorPage />} />

diff --git a/applications/tari_validator_node_web_ui/src/Components/MenuItems.tsx b/applications/tari_validator_node_web_ui/src/Components/MenuItems.tsx
@@ -41,6 +41,7 @@ import {
   IoLayers,
   IoCodeDownloadOutline,
   IoCodeDownload,
+  IoBarChartSharp,
 } from 'react-icons/io5';
 import Tooltip from '@mui/material/Tooltip';
 import Fade from '@mui/material/Fade';
@@ -65,10 +66,10 @@ const mainItems = [
     link: '/',
   },
   {
-    title: 'Recent Transactions',
-    icon: <IoBarChartOutline style={iconStyle} />,
+    title: 'Blocks',
+    icon: <IoBarChartSharp style={iconStyle} />,
     activeIcon: <IoBarChart style={activeIconStyle} />,
-    link: 'transactions',
+    link: 'blocks',
   },
   {
     title: 'Committees',

diff --git a/applications/tari_validator_node_web_ui/src/Components/SearchFilter.tsx b/applications/tari_validator_node_web_ui/src/Components/SearchFilter.tsx
@@ -94,7 +94,7 @@ const TransactionFilter: React.FC<ISearchProps> = ({
       // original array, and set its "show" property to true
       filteredRows.forEach((filteredRow: any) => {
         const index = updatedObject.findIndex(
-          (item : any) => item.transaction_hash === filteredRow.transaction_hash
+          (item : any) => item.id === filteredRow.id
         );
         if (index !== -1) {
           updatedObject[index].show = true;

diff --git a/applications/tari_validator_node_web_ui/src/index.tsx b/applications/tari_validator_node_web_ui/src/index.tsx
@@ -30,13 +30,14 @@ import Committees from './routes/Committees/CommitteesLayout';
 import Connections from './routes/Connections/Connections';
 import Fees from './routes/Fees/Fees';
 import Mempool from './routes/Mempool/Mempool';
-import RecentTransactions from './routes/RecentTransactions/RecentTransactions';
+import Blocks from './routes/Blocks/Blocks';
 import Templates from './routes/Templates/Templates';
 import ValidatorNodes from './routes/ValidatorNodes/ValidatorNodes';
 import ErrorPage from './routes/ErrorPage';
 import TemplateFunctions from './routes/VN/Components/TemplateFunctions';
 import CommitteeMembers from './routes/Committees/CommitteeMembers';
 import TransactionDetails from './routes/Transactions/TransactionDetails';
+import BlockDetails from './routes/Blocks/BlockDetails';
 
 const router = createBrowserRouter([
   {
@@ -53,8 +54,12 @@ const router = createBrowserRouter([
         element: <Fees />,
       },
       {
-        path: 'transactions',
-        element: <RecentTransactions />,
+        path: 'blocks',
+        element: <Blocks />,
+      },
+      {
+        path: 'blocks/:blockId',
+        element: <BlockDetails />,
       },
       {
         path: 'templates',