sync

src/renderer/App.tsx

@@ -26,6 +26,7 @@ import { AddressDetails } from './components/AddressDetails';
  * @todo make the sidebar collapsible
  * @todo make the app responsive on all screen sizes(remove 550px set height on pages/tables)
  * @todo Accounts.tsx: add a button to copy/see the private key
+ * @todo sometimes transactions do not get into blocks!!!
  */
 
 export default function App() {

src/renderer/components/Pagination.tsx

@@ -4,7 +4,7 @@ interface PaginationProps {
   paginate: (pageNumber: number) => void;
 }
 
-const ITEMS_PER_PAGE = 10;
+const ITEMS_PER_PAGE = 20;
 
 export const Pagination = ({
   currentPage,

src/renderer/components/TransactionsTable.tsx

@@ -8,7 +8,7 @@ export const TransactionsTable = ({
   transactions: TransactionExtended[];
 }) => {
   return (
-    <div className="h-[550px]">
+    <div className="min-h-[550px]">
       <table className="table w-full table-compact">
         <thead>
           <tr>

src/renderer/constants.ts

@@ -0,0 +1 @@
+export const ITEMS_PER_PAGE = 20;

src/renderer/hooks/usePagination.ts

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+interface PaginationResult<T> {
+  currentItems: T[];
+  currentPage: number;
+  paginate: (pageNumber: number) => void;
+}
+
+/**
+ * A custom hook for handling pagination.
+ *
+ * @param {T[]} items - The array of items to paginate.
+ * @param {number} itemsPerPage - The maximum number of items per page.
+ *
+ * @returns {PaginationResult<T>} An object with the following properties:
+ * - currentItems: The items for the current page.
+ * - currentPage: The current page number.
+ * - paginate: A function to change the current page.
+ */
+export function usePagination<T>(
+  items: T[],
+  itemsPerPage: number
+): PaginationResult<T> {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+
+  const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);
+
+  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+
+  return { currentItems, currentPage, paginate };
+}

src/renderer/pages/Blocks.tsx

@@ -9,8 +9,8 @@ import {
   Pagination,
 } from 'renderer/components';
 import { Block, Address, Hash, isAddress } from 'viem';
-
-const BLOCKS_PER_PAGE = 10;
+import { ITEMS_PER_PAGE } from 'renderer/constants';
+import { usePagination } from 'renderer/hooks/usePagination';
 
 export const Blocks = ({ blocks }: { blocks: Block[] }) => {
   const [intervalMining, setIntervalMining] = useState<number>(0);
@@ -19,15 +19,14 @@ export const Blocks = ({ blocks }: { blocks: Block[] }) => {
   const [blockTimestampInterval, setBlockTimestampInterval] =
     useState<number>(0);
   const [coinbase, setCoinbase] = useState<string>('');
-  const [currentPage, setCurrentPage] = useState(1);
 
   let { blockHash } = useParams();
 
-  const indexOfLastBlock = currentPage * BLOCKS_PER_PAGE;
-  const indexOfFirstBlock = indexOfLastBlock - BLOCKS_PER_PAGE;
-  const currentBlocks = blocks.slice(indexOfFirstBlock, indexOfLastBlock);
-
-  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  const {
+    currentItems: currentBlocks,
+    currentPage,
+    paginate,
+  } = usePagination(blocks, ITEMS_PER_PAGE);
 
   const handleSetIntervalMining = async () => {
     try {
@@ -199,7 +198,7 @@ export const Blocks = ({ blocks }: { blocks: Block[] }) => {
             <BlockDetails />
           ) : (
             <div>
-              <div className="h-[550px]">
+              <div className="min-h-[550px]">
                 <table className="table w-full table-compact">
                   <thead>
                     <tr>
@@ -219,7 +218,7 @@ export const Blocks = ({ blocks }: { blocks: Block[] }) => {
                         </td>
                       </tr>
                     )}
-                    {currentBlocks.map((block) => (
+                    {currentBlocks.map((block: Block) => (
                       <tr key={block.hash} className="h-[50px]">
                         <td>
                           <HashComp hash={block.hash} type="block" />

src/renderer/pages/Transactions.tsx

@@ -1,29 +1,22 @@
 import { Pagination, TransactionDetails } from 'renderer/components';
 import { useParams } from 'react-router-dom';
-import { useState } from 'react';
 import { TransactionsTable } from 'renderer/components/TransactionsTable';
 import { TransactionExtended } from 'renderer/utils';
-
-const TRANSACTIONS_PER_PAGE = 10;
+import { ITEMS_PER_PAGE } from 'renderer/constants';
+import { usePagination } from 'renderer/hooks/usePagination';
 
 export const Transactions = ({
   transactions,
 }: {
   transactions: TransactionExtended[];
 }) => {
-  const [currentPage, setCurrentPage] = useState(1);
-
   let { txHash } = useParams();
 
-  const indexOfLastTransaction = currentPage * TRANSACTIONS_PER_PAGE;
-  const indexOfFirstTransaction =
-    indexOfLastTransaction - TRANSACTIONS_PER_PAGE;
-  const currentTransactions = transactions.slice(
-    indexOfFirstTransaction,
-    indexOfLastTransaction
-  );
-
-  const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
+  const {
+    currentItems: currentTransactions,
+    currentPage,
+    paginate,
+  } = usePagination(transactions, ITEMS_PER_PAGE);
 
   return (
     <div className="flex h-full">