Fixed holder network name and contract overflow on tx (#602)

* Fixed holder network name and contract overflow on tx * Fixed network title on Nodes
Taraxa-project · Oct 23, 2023 · 7ec22a8 · 7ec22a8
1 parent 76f4815
commit 7ec22a8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/services/explorer/src/components/DataRow/DataRow.styles.ts b/services/explorer/src/components/DataRow/DataRow.styles.ts
@@ -20,6 +20,10 @@ const useStyles = makeStyles(
           width: '100%',
         },
       },
+      wrapText: {
+        whiteSpace: 'normal',
+        overflowWrap: 'break-word',
+      },
     };
   },
   { name: 'DataRow' }

diff --git a/services/explorer/src/components/DataRow/DataRow.tsx b/services/explorer/src/components/DataRow/DataRow.tsx
@@ -5,8 +5,9 @@ import useStyles from './DataRow.styles';
 export const DataRow: React.FC<{
   title: string;
   data: JSX.Element | string;
+  wrap?: boolean;
 }> = (props) => {
-  const { title, data } = props;
+  const { title, data, wrap } = props;
   const classes = useStyles();
 
   return (
@@ -22,7 +23,11 @@ export const DataRow: React.FC<{
         >
           {title}:
         </Typography>
-        <Box className={classes.dataContainer}>{data}</Box>
+        <Box
+          className={`${classes.dataContainer} ${wrap ? classes.wrapText : ''}`}
+        >
+          {data}
+        </Box>
       </Box>
     )
   );

diff --git a/services/explorer/src/pages/Nodes/Nodes.effects.tsx b/services/explorer/src/pages/Nodes/Nodes.effects.tsx
@@ -39,6 +39,7 @@ export const useNodesEffects = (): {
   year: number;
   loading: boolean;
   weekPagination: WeekPagination;
+  pageSubtitle: string;
 } => {
   const [loading, setLoading] = useState<boolean>(false);
   const [weekNumber, setWeekNumber] = useState<number>();
@@ -52,7 +53,7 @@ export const useNodesEffects = (): {
 
   const { page, rowsPerPage, handleChangePage, handleChangeRowsPerPage } =
     usePagination();
-  const { backendEndpoint } = useExplorerNetwork();
+  const { currentNetwork, backendEndpoint } = useExplorerNetwork();
 
   const { data: blocks } = useGetBlocksThisWeek(
     backendEndpoint,
@@ -138,6 +139,7 @@ export const useNodesEffects = (): {
     weekPagination?.startDate
   )} - ${formatDate(weekPagination?.endDate)})`;
   const description = 'Total blocks produced this week';
+  const pageSubtitle = `List of TARAXA nodes on ${currentNetwork}`;
 
   return {
     blocks: blocks?.data,
@@ -163,5 +165,6 @@ export const useNodesEffects = (): {
     year,
     loading,
     weekPagination,
+    pageSubtitle,
   };
 };
diff --git a/services/explorer/src/pages/Nodes/Nodes.tsx b/services/explorer/src/pages/Nodes/Nodes.tsx
@@ -36,10 +36,11 @@ const NodesPage = (): JSX.Element => {
     year,
     loading,
     weekPagination,
+    pageSubtitle,
   } = useNodesEffects();
   return (
     <>
-      <PageTitle title='Nodes' subtitle='List of TARAXA nodes on Mainnet' />
+      <PageTitle title='Nodes' subtitle={pageSubtitle} />
       {weekPagination && (
         <Box
           sx={{

diff --git a/services/explorer/src/pages/TransactionData/TransactionData.tsx b/services/explorer/src/pages/TransactionData/TransactionData.tsx
@@ -220,7 +220,11 @@ const TransactionDataContainer = (): JSX.Element => {
               <DataRow title='Nonce' data={`${transactionData?.nonce}`} />
               {transactionData?.inputData &&
                 transactionData?.inputData !== '0x' && (
-                  <DataRow title='Data' data={`${transactionData.inputData}`} />
+                  <DataRow
+                    title='Data'
+                    data={`${transactionData.inputData}`}
+                    wrap
+                  />
                 )}
               {(getTransactionType(transactionData) ===
                 TransactionType.Contract_Call ||