diff --git a/services/explorer/src/components/DataRow/DataRow.styles.ts b/services/explorer/src/components/DataRow/DataRow.styles.ts index 1d352675a..407b32652 100644 --- 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 index eabf7c912..ec18439f0 100644 --- 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}: - {data} + + {data} + ) ); diff --git a/services/explorer/src/pages/Nodes/Nodes.effects.tsx b/services/explorer/src/pages/Nodes/Nodes.effects.tsx index 08d90e27a..7e77a420f 100644 --- 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(false); const [weekNumber, setWeekNumber] = useState(); @@ -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 index a2a541e0d..78fbee754 100644 --- 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 ( <> - + {weekPagination && ( { {transactionData?.inputData && transactionData?.inputData !== '0x' && ( - + )} {(getTransactionType(transactionData) === TransactionType.Contract_Call ||