Merged with develop

services/explorer/src/App.tsx

@@ -35,7 +35,7 @@ const Root = (): JSX.Element => {
           <Routes>
             <Route path='/' element={<HomePage />} />
             <Route path='/block' element={<BlocksPage />} />
-            <Route path='/block/:txHash' element={<DAGDataContainer />} />
+            <Route path='/block/:identifier' element={<DAGDataContainer />} />
             <Route path='/pbft/:identifier' element={<PBFTDataContainer />} />
             <Route path='/node' element={<NodesPage />} />
             <Route path='/holder' element={<HoldersPage />} />

services/explorer/src/components/AddressInfo/AddressDetails.tsx

@@ -35,6 +35,7 @@ export const AddressDetails = ({
         flexDirection='row'
         alignItems='center'
         justifyContent='flex-start'
+        flexWrap='wrap'
         gap='2rem'
         mt={3}
       >

services/explorer/src/components/DataRow/DataRow.styles.ts

@@ -19,7 +19,6 @@ const useStyles = makeStyles(
         [theme.breakpoints.down('md')]: {
           width: '100%',
         },
-        wordBreak: 'break-all',
       },
     };
   },

services/explorer/src/components/Header/DrawerElements.tsx

@@ -21,8 +21,7 @@ export const DrawerElements = ({
   toggleDrawer,
   headerButtons,
 }: DrawerElementsProps) => {
-  const { networks, currentNetwork, setNetwork, disableNetworkSelection } =
-    useExplorerNetwork();
+  const { networks, currentNetwork, setNetwork } = useExplorerNetwork();
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', width: '300px' }}>
@@ -46,7 +45,6 @@ export const DrawerElements = ({
           networks={networks}
           currentNetwork={currentNetwork}
           onNetworkChange={setNetwork}
-          disableNetworkSelection={disableNetworkSelection}
         />
       </Box>
       {headerButtons?.length &&

services/explorer/src/components/Header/Header.effects.ts

@@ -40,8 +40,7 @@ export enum SearchLabelOption {
 export const useHeaderEffects = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { networks, currentNetwork, setNetwork, disableNetworkSelection } =
-    useExplorerNetwork();
+  const { networks, currentNetwork, setNetwork } = useExplorerNetwork();
   const [drawerState, setDrawerState] = useState<boolean>(false);
   const [searchString, setSearchString] = useState<string>('');
   const [searchHash, setSearchHash] = useState<string>(null);
@@ -322,7 +321,6 @@ export const useHeaderEffects = () => {
     onLabelSelect,
     searchString,
     setNetwork,
-    disableNetworkSelection,
     onClear,
   };
 };

services/explorer/src/hooks/useExplorerNetwork.tsx

@@ -11,7 +11,6 @@ type Context = {
   rpcEndpoint: string;
   faucetEndpoint: string;
   setNetwork: (network: string) => void;
-  disableNetworkSelection: boolean;
 };
 
 const createClient = (endpoint: string): Client =>
@@ -28,7 +27,6 @@ const initialState: Context = {
   faucetEndpoint: getNetwork(NetworkName.MAINNET).faucetUrl,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setNetwork: (network: string) => {}, // eslint-disable-line @typescript-eslint/no-empty-function
-  disableNetworkSelection: false,
 };
 
 const ExplorerNetworkContext = createContext<Context>(initialState);
@@ -73,7 +71,6 @@ const useNetworkSelection = () => {
     backendEndpoint,
     rpcEndpoint,
     faucetEndpoint,
-    disableNetworkSelection: !!hostNetwork,
   };
 };
 

services/explorer/src/pages/BlockData/DAGDataContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Box,
   Divider,
@@ -8,7 +8,7 @@ import {
   Icons,
 } from '@taraxa_project/taraxa-ui';
 import moment from 'moment';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   DataRow,
   HashLink,
@@ -25,15 +25,25 @@ import { TransactionsTable } from '../../components/Tables';
 import DagLoadingSkeleton from './DagLoadingSkeleton';
 
 const DAGDataContainer = (): JSX.Element => {
-  const { txHash } = useParams();
+  const { identifier } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const decimalNumberRegex = /^\d+$/;
+    const isDecimalNumber = decimalNumberRegex.test(identifier);
+    if (isDecimalNumber) {
+      navigate(`/pbft/${identifier}`);
+    }
+  }, [identifier, navigate]);
+
   const classes = useStyles();
   const {
     blockData,
     transactions,
     currentNetwork,
     showLoadingSkeleton,
     showNetworkChanged,
-  } = useDAGDataContainerEffects(deZeroX(txHash));
+  } = useDAGDataContainerEffects(deZeroX(identifier));
   const onCopy = useCopyToClipboard();
 
   const [txRowsPerPage, setTxRowsPerPage] = useState(25);
@@ -100,7 +110,7 @@ const DAGDataContainer = (): JSX.Element => {
                 color='secondary'
                 style={{ fontWeight: 'bold', wordBreak: 'break-all' }}
               >
-                {zeroX(txHash)}
+                {zeroX(identifier)}
               </Typography>
             </Box>
           ) : (
@@ -125,9 +135,9 @@ const DAGDataContainer = (): JSX.Element => {
                   component='h6'
                   style={{ fontWeight: 'bold', wordBreak: 'break-all' }}
                 >
-                  {zeroX(txHash)}
+                  {zeroX(identifier)}
                 </Typography>
-                <CopyTo text={txHash} onCopy={onCopy} />
+                <CopyTo text={identifier} onCopy={onCopy} />
               </Box>
               <DataRow title='Level' data={`${blockData?.level || ''}`} />
               <DataRow title='Period' data={`${blockData?.pbftPeriod || ''}`} />

services/explorer/src/pages/Blocks/Blocks.effects.ts

@@ -37,9 +37,10 @@ export const useBlockEffects = () => {
   });
 
   const handleChangePage = (newPage: number) => {
+    const toValue = blocksFilters.to - 1 - (rowsPerPage - 1);
     setBlocksFilter({
       from: blocksFilters.to - 1,
-      to: blocksFilters.to - 1 - (rowsPerPage - 1),
+      to: Math.max(0, toValue),
     });
     setPage(newPage);
   };
@@ -49,7 +50,8 @@ export const useBlockEffects = () => {
   ) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
-    setBlocksFilter({ from: finalBlock, to: finalBlock - (rowsPerPage - 1) });
+    const toValue = finalBlock - (rowsPerPage - 1);
+    setBlocksFilter({ from: finalBlock, to: Math.max(0, toValue) });
   };
 
   const formatBlocksToTable = (

services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx

@@ -149,6 +149,7 @@ const PBFTDataContainer = (): JSX.Element => {
             flexDirection='row'
             alignItems='center'
             justifyContent='flex-start'
+            flexWrap='wrap'
             gap='2rem'
             mt={3}
           >