From 97ef23d0cf32f499e25e1d5063445ce3a15ca460 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?El=C5=91d=20Varga?= <100562086+VargaElod23@users.noreply.github.com> Date: Mon, 16 Oct 2023 22:11:17 +0200 Subject: [PATCH 1/5] adds simple reroute from block to pbft on decimal param (#595) --- services/explorer/src/App.tsx | 2 +- .../src/pages/BlockData/DAGDataContainer.tsx | 24 +++++++++++++------ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/services/explorer/src/App.tsx b/services/explorer/src/App.tsx index da0d18fcf..faee54eed 100644 --- a/services/explorer/src/App.tsx +++ b/services/explorer/src/App.tsx @@ -35,7 +35,7 @@ const Root = (): JSX.Element => { } /> } /> - } /> + } /> } /> } /> } /> diff --git a/services/explorer/src/pages/BlockData/DAGDataContainer.tsx b/services/explorer/src/pages/BlockData/DAGDataContainer.tsx index f39bfb3fe..41ad23f03 100644 --- a/services/explorer/src/pages/BlockData/DAGDataContainer.tsx +++ b/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,7 +25,17 @@ 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, @@ -33,7 +43,7 @@ const DAGDataContainer = (): JSX.Element => { 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)} ) : ( @@ -125,9 +135,9 @@ const DAGDataContainer = (): JSX.Element => { component='h6' style={{ fontWeight: 'bold', wordBreak: 'break-all' }} > - {zeroX(txHash)} + {zeroX(identifier)} - + From 0b4e3fc30886aa63222c2956583969ee471a56b2 Mon Sep 17 00:00:00 2001 From: Florin Georgescu Date: Tue, 17 Oct 2023 17:08:42 +0300 Subject: [PATCH 2/5] Fixing design issue in firefox (#594) --- services/explorer/src/components/AddressInfo/AddressDetails.tsx | 1 + services/explorer/src/components/DataRow/DataRow.styles.ts | 1 - services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/services/explorer/src/components/AddressInfo/AddressDetails.tsx b/services/explorer/src/components/AddressInfo/AddressDetails.tsx index df7f52543..7f74b2de9 100644 --- a/services/explorer/src/components/AddressInfo/AddressDetails.tsx +++ b/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} > diff --git a/services/explorer/src/components/DataRow/DataRow.styles.ts b/services/explorer/src/components/DataRow/DataRow.styles.ts index 9710e0db2..1d352675a 100644 --- a/services/explorer/src/components/DataRow/DataRow.styles.ts +++ b/services/explorer/src/components/DataRow/DataRow.styles.ts @@ -19,7 +19,6 @@ const useStyles = makeStyles( [theme.breakpoints.down('md')]: { width: '100%', }, - wordBreak: 'break-all', }, }; }, diff --git a/services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx b/services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx index bb616e19d..a550e3cad 100644 --- a/services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx +++ b/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} > From 7ca6e276bdacc5c7ce9be05cdf9ab3c2093c7441 Mon Sep 17 00:00:00 2001 From: Florin Georgescu Date: Tue, 17 Oct 2023 17:09:14 +0300 Subject: [PATCH 3/5] Fixed fetching blocks on last page (#593) --- services/explorer/src/pages/Blocks/Blocks.effects.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/services/explorer/src/pages/Blocks/Blocks.effects.ts b/services/explorer/src/pages/Blocks/Blocks.effects.ts index 96475ad8b..1571fbe8d 100644 --- a/services/explorer/src/pages/Blocks/Blocks.effects.ts +++ b/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 = ( From d611a57306cdf1c23d9134516bd4a26b7e668b16 Mon Sep 17 00:00:00 2001 From: Florin Georgescu Date: Thu, 19 Oct 2023 17:04:07 +0300 Subject: [PATCH 4/5] Enabled network selection regardless of host (#597) --- services/explorer/src/components/Header/DrawerElements.tsx | 6 ++---- services/explorer/src/components/Header/Header.effects.ts | 4 +--- services/explorer/src/hooks/useExplorerNetwork.tsx | 3 --- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/services/explorer/src/components/Header/DrawerElements.tsx b/services/explorer/src/components/Header/DrawerElements.tsx index 62a8c3642..ef94767d7 100644 --- a/services/explorer/src/components/Header/DrawerElements.tsx +++ b/services/explorer/src/components/Header/DrawerElements.tsx @@ -20,9 +20,8 @@ export interface DrawerElementsProps { export const DrawerElements: FC = ({ toggleDrawer, headerButtons, -}) => { - const { networks, currentNetwork, setNetwork, disableNetworkSelection } = - useExplorerNetwork(); +}: DrawerElementsProps) => { + const { networks, currentNetwork, setNetwork } = useExplorerNetwork(); return ( @@ -46,7 +45,6 @@ export const DrawerElements: FC = ({ networks={networks} currentNetwork={currentNetwork} onNetworkChange={setNetwork} - disableNetworkSelection={disableNetworkSelection} /> {headerButtons?.length && diff --git a/services/explorer/src/components/Header/Header.effects.ts b/services/explorer/src/components/Header/Header.effects.ts index 210bcf3c2..6dcd003fe 100644 --- a/services/explorer/src/components/Header/Header.effects.ts +++ b/services/explorer/src/components/Header/Header.effects.ts @@ -39,8 +39,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(false); const [searchString, setSearchString] = useState(''); const [searchHash, setSearchHash] = useState(null); @@ -321,7 +320,6 @@ export const useHeaderEffects = () => { onLabelSelect, searchString, setNetwork, - disableNetworkSelection, onClear, }; }; diff --git a/services/explorer/src/hooks/useExplorerNetwork.tsx b/services/explorer/src/hooks/useExplorerNetwork.tsx index 5e379c0b6..47cd8e606 100644 --- a/services/explorer/src/hooks/useExplorerNetwork.tsx +++ b/services/explorer/src/hooks/useExplorerNetwork.tsx @@ -18,7 +18,6 @@ type Context = { rpcEndpoint: string; faucetEndpoint: string; setNetwork: (network: string) => void; - disableNetworkSelection: boolean; }; const createClient = (endpoint: string): Client => @@ -35,7 +34,6 @@ const initialState: Context = { faucetEndpoint: recreateFaucetConnection(Network.MAINNET), // 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(initialState); @@ -80,7 +78,6 @@ const useNetworkSelection = () => { backendEndpoint, rpcEndpoint, faucetEndpoint, - disableNetworkSelection: !!hostNetwork, }; }; From dfcb16d769d5fd9a4a7b5d9ce16ab20fa4650ce4 Mon Sep 17 00:00:00 2001 From: Florin Georgescu Date: Fri, 20 Oct 2023 16:52:59 +0300 Subject: [PATCH 5/5] Fix/mui fixes (#598) * Solved merge issue * Fixed typing for ProgressBar --- .../src/components/AwardCard/AwardCard.tsx | 6 +- .../src/components/BlockCard/BlockCard.tsx | 4 +- .../src/components/Icons/Exclamation.tsx | 2 +- .../components/ProgressBar/ProgressBar.tsx | 2 +- .../TransactionDetails/TransactionDetails.tsx | 6 +- .../src/components/Header/DrawerElements.tsx | 4 +- .../src/components/PageTitle/PageTitle.tsx | 4 +- .../src/components/Tables/BlocksTable.tsx | 1 + .../explorer/src/components/Tables/Table.tsx | 1 + .../components/Tables/TransactionsTable.tsx | 1 + .../explorer/src/pages/Holders/Holders.tsx | 2 +- services/explorer/src/pages/Nodes/Nodes.tsx | 2 +- services/explorer/tsconfig.json | 92 +++++++++---------- 13 files changed, 65 insertions(+), 62 deletions(-) diff --git a/packages/taraxa-ui/src/components/AwardCard/AwardCard.tsx b/packages/taraxa-ui/src/components/AwardCard/AwardCard.tsx index db0f3e350..6b8264f39 100644 --- a/packages/taraxa-ui/src/components/AwardCard/AwardCard.tsx +++ b/packages/taraxa-ui/src/components/AwardCard/AwardCard.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React from 'react'; import { Card, CardContent, Box, Typography } from '@mui/material'; import useStyles from './AwardCard.styles'; import { Award } from '../Icons'; @@ -10,12 +10,12 @@ export interface AwardCardProps { description: string; } -export const AwardCard: FC = ({ +export const AwardCard = ({ title, subtitle, total, description, -}) => { +}: AwardCardProps) => { const classes = useStyles(); return ( diff --git a/packages/taraxa-ui/src/components/BlockCard/BlockCard.tsx b/packages/taraxa-ui/src/components/BlockCard/BlockCard.tsx index e694191cb..4cf2e1619 100644 --- a/packages/taraxa-ui/src/components/BlockCard/BlockCard.tsx +++ b/packages/taraxa-ui/src/components/BlockCard/BlockCard.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React from 'react'; import { Divider, Card, @@ -18,7 +18,7 @@ export interface BlockCardProps { transactions: TransactionDetailsProps[]; } -export const BlockCard: FC = ({ title, transactions }) => { +export const BlockCard = ({ title, transactions }: BlockCardProps) => { const classes = useStyles(); return ( diff --git a/packages/taraxa-ui/src/components/Icons/Exclamation.tsx b/packages/taraxa-ui/src/components/Icons/Exclamation.tsx index 692c4d549..19ca3c619 100644 --- a/packages/taraxa-ui/src/components/Icons/Exclamation.tsx +++ b/packages/taraxa-ui/src/components/Icons/Exclamation.tsx @@ -1,6 +1,6 @@ import React from 'react'; -const Exclamation: React.FC<{ color: string }> = ({ color }) => { +const Exclamation = ({ color }: { color: string }) => { return ( = ({ percentage }) => { +const ProgressBar = ({ percentage }: ProgressBarCellProps) => { const classes = useStyles(); return (
diff --git a/packages/taraxa-ui/src/components/TransactionDetails/TransactionDetails.tsx b/packages/taraxa-ui/src/components/TransactionDetails/TransactionDetails.tsx index bb1c8fa39..0f54e85b6 100644 --- a/packages/taraxa-ui/src/components/TransactionDetails/TransactionDetails.tsx +++ b/packages/taraxa-ui/src/components/TransactionDetails/TransactionDetails.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React from 'react'; import { Box, Typography } from '@mui/material'; import useStyles from './TransactionDetails.styles'; import { Block, Route } from '../Icons'; @@ -19,14 +19,14 @@ export const shortenHash = (text: string, visibleLength = 44): string => { return `${text.substring(0, visibleLength).replace(/\s+$/, '')}...`; }; -export const TransactionDetails: FC = ({ +export const TransactionDetails = ({ hash, transactionCount, timeSince, hashElement, level, blockNumber, -}) => { +}: TransactionDetailsProps) => { const classes = useStyles(); return ( diff --git a/services/explorer/src/components/Header/DrawerElements.tsx b/services/explorer/src/components/Header/DrawerElements.tsx index ef94767d7..5a97f39c6 100644 --- a/services/explorer/src/components/Header/DrawerElements.tsx +++ b/services/explorer/src/components/Header/DrawerElements.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React from 'react'; import { Box, IconButton, @@ -17,7 +17,7 @@ export interface DrawerElementsProps { headerButtons: HeaderBtn[]; } -export const DrawerElements: FC = ({ +export const DrawerElements = ({ toggleDrawer, headerButtons, }: DrawerElementsProps) => { diff --git a/services/explorer/src/components/PageTitle/PageTitle.tsx b/services/explorer/src/components/PageTitle/PageTitle.tsx index 4e82383fb..b44deb811 100644 --- a/services/explorer/src/components/PageTitle/PageTitle.tsx +++ b/services/explorer/src/components/PageTitle/PageTitle.tsx @@ -1,12 +1,12 @@ +import React from 'react'; import { Box, Typography } from '@taraxa_project/taraxa-ui'; -import React, { FC } from 'react'; export interface PageTitleProps { title: string; subtitle: string; } -export const PageTitle: FC = ({ title, subtitle }) => { +export const PageTitle = ({ title, subtitle }: PageTitleProps) => { return ( = ({ component='div' count={totalCount || transactionsData?.length || 0} rowsPerPage={rowsPage} + component={'div' as any} page={pageNo} showFirstButton={true} showLastButton={true} diff --git a/services/explorer/src/pages/Holders/Holders.tsx b/services/explorer/src/pages/Holders/Holders.tsx index 7d04e6062..c88636422 100644 --- a/services/explorer/src/pages/Holders/Holders.tsx +++ b/services/explorer/src/pages/Holders/Holders.tsx @@ -31,7 +31,7 @@ const HoldersPage = (): JSX.Element => { { />