GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tidy up mixnode and gateway tables

Browse Source
This commit is contained in:
fmtabbara
2023-12-05 21:58:36 +00:00
parent 96a42fa03d
commit 8f1901b6e0
7 changed files with 182 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer/src/components/DetailTable.tsx
-2
View File
@@ -14,7 +14,6 @@ import { useTheme } from '@mui/material/styles';
import { Tooltip } from '@nymproject/react/tooltip/Tooltip';
import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
import { Box } from '@mui/system';
import { cellStyles } from './Universal-DataGrid';
import { unymToNym } from '../utils/currency';
import { GatewayEnrichedRowType } from './Gateways';
import { MixnodeRowType } from './MixNodes';
@@ -110,7 +109,6 @@ export const DetailTable: FCWithChildren<{
scope="row"
variant="body"
sx={{
...cellStyles,
padding: 2,
width: 200,
fontSize: 14,
explorer/src/components/MixNodes/Status.tsx
+4 -22
View File
@@ -1,29 +1,12 @@
import { Typography } from '@mui/material';
import * as React from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { getMixNodeIcon } from '../Icons';
import { MixnodeStatus } from '../../typeDefs/explorer-api';
import { getMixNodeIcon } from '@src/components/Icons';
import { MixnodeStatus } from '@src/typeDefs/explorer-api';
import { useGetMixNodeStatusColor } from '@src/hooks/useGetMixnodeStatusColor';
interface MixNodeStatusProps {
status: MixnodeStatus;
}
export const getMixNodeStatusColor = (theme: Theme, status: MixnodeStatus) => {
let color;
switch (status) {
case MixnodeStatus.active:
color = theme.palette.nym.networkExplorer.mixnodes.status.active;
break;
case MixnodeStatus.standby:
color = theme.palette.nym.networkExplorer.mixnodes.status.standby;
break;
default:
color = theme.palette.nym.networkExplorer.mixnodes.status.inactive;
break;
}
return color;
};
// TODO: should be done with i18n
export const getMixNodeStatusText = (status: MixnodeStatus) => {
switch (status) {
@@ -37,9 +20,8 @@ export const getMixNodeStatusText = (status: MixnodeStatus) => {
};
export const MixNodeStatus: FCWithChildren<MixNodeStatusProps> = ({ status }) => {
const theme = useTheme();
const Icon = React.useMemo(() => getMixNodeIcon(status), [status]);
const color = React.useMemo(() => getMixNodeStatusColor(theme, status), [status, theme]);
const color = React.useMemo(() => useGetMixNodeStatusColor(status), [status]);
return (
<Typography color={color} display="flex" alignItems="center">
explorer/src/components/StyledLink.tsx
+19
View File
@@ -0,0 +1,19 @@
import React from 'react';
import { Link as MuiLink } from '@mui/material';
import { Link as RRDL } from 'react-router-dom';
type StyledLinkProps = {
to: string;
children: string;
target?: React.HTMLAttributeAnchorTarget;
dataTestId?: string;
color?: string;
};
const StyledLink = ({ to, children, dataTestId, target, color = 'inherit' }: StyledLinkProps) => (
<MuiLink color={color} target={target} underline="none" component={RRDL} to={to} data-testid={dataTestId}>
{children}
</MuiLink>
);
export default StyledLink;
explorer/src/components/Universal-DataGrid.tsx
-13
View File
@@ -2,7 +2,6 @@ import * as React from 'react';
import { makeStyles } from '@mui/styles';
import { DataGrid, GridColDef, useGridApiContext, useGridState } from '@mui/x-data-grid';
import Pagination from '@mui/material/Pagination';
import { SxProps } from '@mui/system';
import { LinearProgress } from '@mui/material';
import { GridInitialStateCommunity } from '@mui/x-data-grid/models/gridStateCommunity';
@@ -12,18 +11,6 @@ const useStyles = makeStyles({
},
});
export const cellStyles: SxProps = {
padding: 0,
maxHeight: 100,
color: 'inherit',
textDecoration: 'none',
fontWeight: 400,
lineHeight: 2,
fontSize: '12px',
wordBreak: 'break-word',
whiteSpace: 'break-spaces',
};
const CustomPagination = () => {
const apiRef = useGridApiContext();
const [state] = useGridState(apiRef);
explorer/src/pages/Gateways/index.tsx
+26 -59
View File
@@ -1,6 +1,5 @@
import * as React from 'react';
import { Link as RRDLink } from 'react-router-dom';
import { Box, Card, Grid, Link as MuiLink } from '@mui/material';
import { Box, Card, Grid, Stack } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
@@ -13,12 +12,13 @@ import { GatewayResponse } from '../../typeDefs/explorer-api';
import { TableToolbar } from '../../components/TableToolbar';
import { CustomColumnHeading } from '../../components/CustomColumnHeading';
import { Title } from '../../components/Title';
import { cellStyles, UniversalDataGrid } from '../../components/Universal-DataGrid';
import { UniversalDataGrid } from '../../components/Universal-DataGrid';
import { unymToNym } from '../../utils/currency';
import { Tooltip } from '../../components/Tooltip';
import { NYM_BIG_DIPPER } from '../../api/constants';
import { splice } from '../../utils';
import { VersionDisplaySelector, VersionSelectOptions } from '../../components/Gateways/VersionDisplaySelector';
import StyledLink from '../../components/StyledLink';
export const PageGateways: FCWithChildren = () => {
const { gateways } = useMainContext();
@@ -100,28 +100,19 @@ export const PageGateways: FCWithChildren = () => {
field: 'identity_key',
renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
headerClassName: 'MuiDataGrid-header-override',
width: 380,
width: 400,
disableColumnMenu: true,
headerAlign: 'left',
headerAlign: 'center',
renderCell: (params: GridRenderCellParams) => (
<>
<CopyToClipboard
sx={{ mr: 1, fontSize: 12 }}
value={params.value}
tooltip={`Copy identity key ${params.value} to clipboard`}
/>
<MuiLink
sx={{ ...cellStyles }}
component={RRDLink}
to={`/network-components/gateway/${params.row.identity_key}`}
>
{params.value}
</MuiLink>
</>
<Stack direction="row" gap={1}>
<CopyToClipboard smallIcons value={params.value} tooltip={`Copy identity key ${params.value} to clipboard`} />
<StyledLink to={`/network-components/gateway/${params.row.identity_key}`}>{params.value}</StyledLink>
</Stack>
),
},
{
field: 'node_performance',
align: 'center',
renderHeader: () => (
<>
<InfoTooltip
@@ -136,37 +127,28 @@ export const PageGateways: FCWithChildren = () => {
<CustomColumnHeading headingTitle="Routing Score" />
</>
),
width: 175,
width: 120,
disableColumnMenu: true,
headerAlign: 'left',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...cellStyles }}
component={RRDLink}
to={`/network-components/gateway/${params.row.identity_key}`}
data-testid="pledge-amount"
>
<StyledLink to={`/network-components/gateway/${params.row.identity_key}`} data-testid="pledge-amount">
{`${params.value}%`}
</MuiLink>
</StyledLink>
),
},
{
field: 'version',
align: 'center',
renderHeader: () => <CustomColumnHeading headingTitle="Version" />,
width: 150,
disableColumnMenu: true,
headerAlign: 'left',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...cellStyles }}
component={RRDLink}
to={`/network-components/gateway/${params.row.identity_key}`}
data-testid="version"
>
<StyledLink to={`/network-components/gateway/${params.row.identity_key}`} data-testid="version">
{params.value}
</MuiLink>
</StyledLink>
),
sortComparator: (a, b) => {
if (gte(a, b)) return 1;
@@ -183,7 +165,7 @@ export const PageGateways: FCWithChildren = () => {
renderCell: (params: GridRenderCellParams) => (
<Box
onClick={() => handleSearch(params.value as string)}
sx={{ ...cellStyles, justifyContent: 'flex-start', cursor: 'pointer' }}
sx={{ justifyContent: 'flex-start', cursor: 'pointer' }}
data-testid="location-button"
>
<Tooltip text={params.value} id="gateway-location-text">
@@ -208,14 +190,9 @@ export const PageGateways: FCWithChildren = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...cellStyles }}
component={RRDLink}
to={`/network-components/gateway/${params.row.identity_key}`}
data-testid="host"
>
<StyledLink to={`/network-components/gateway/${params.row.identity_key}`} data-testid="host">
{params.value}
</MuiLink>
</StyledLink>
),
},
{
@@ -227,14 +204,9 @@ export const PageGateways: FCWithChildren = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...cellStyles }}
href={`${NYM_BIG_DIPPER}/account/${params.value}`}
target="_blank"
data-testid="owner"
>
<StyledLink to={`${NYM_BIG_DIPPER}/account/${params.value}`} target="_blank" data-testid="owner">
{splice(7, 29, params.value)}
</MuiLink>
</StyledLink>
),
},
{
@@ -246,14 +218,9 @@ export const PageGateways: FCWithChildren = () => {
headerClassName: 'MuiDataGrid-header-override',
headerAlign: 'left',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...cellStyles }}
component={RRDLink}
to={`/network-components/gateway/${params.row.identity_key}`}
data-testid="pledge-amount"
>
{unymToNym(params.value, 6)}
</MuiLink>
<StyledLink to={`/network-components/gateway/${params.row.identity_key}`} data-testid="pledge-amount">
{`${unymToNym(params.value, 6)}`}
</StyledLink>
),
},
];
explorer/src/pages/Mixnodes/index.tsx
+129 -158
View File
@@ -1,38 +1,30 @@
import * as React from 'react';
import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
import { Button, Card, Grid, Link as MuiLink, Box } from '@mui/material';
import { Link as RRDLink, useParams, useNavigate } from 'react-router-dom';
import { Stack, Card, Grid, Box } from '@mui/material';
import { useParams, useNavigate } from 'react-router-dom';
import { SelectChangeEvent } from '@mui/material/Select';
import { Stack, SxProps } from '@mui/system';
import { Theme, useTheme } from '@mui/material/styles';
import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
import { useWallet } from '@cosmos-kit/react';
import { useMainContext } from '../../context/main';
import { MixnodeRowType, mixnodeToGridRow } from '../../components/MixNodes';
import { TableToolbar } from '../../components/TableToolbar';
import { MixNodeResponse, MixnodeStatusWithAll, toMixnodeStatus } from '../../typeDefs/explorer-api';
import { NYM_BIG_DIPPER } from '../../api/constants';
import { CustomColumnHeading } from '../../components/CustomColumnHeading';
import { Title } from '../../components/Title';
import { cellStyles, UniversalDataGrid } from '../../components/Universal-DataGrid';
import { currencyToString } from '../../utils/currency';
import { splice } from '../../utils';
import { getMixNodeStatusColor } from '../../components/MixNodes/Status';
import { MixNodeStatusDropdown } from '../../components/MixNodes/StatusDropdown';
import { Tooltip } from '../../components/Tooltip';
import { DelegateIconButton } from '../../components/Delegations/components/DelegateIconButton';
import { DelegationModal, DelegationModalProps } from '../../components/Delegations/components/DelegationModal';
import { DelegateModal } from '../../components/Delegations/components/DelegateModal';
const getCellFontStyle = (theme: Theme, row: MixnodeRowType, textColor?: string) => ({
color: textColor || getMixNodeStatusColor(theme, row.status),
});
const getCellStyles = (theme: Theme, row: MixnodeRowType, textColor?: string): SxProps => ({
...cellStyles,
// TODO: should these be here, or change in `cellStyles`??
...getCellFontStyle(theme, row, textColor),
});
import { useMainContext } from '@src/context/main';
import {
DelegateIconButton,
DelegationModal,
DelegationModalProps,
DelegateModal,
CustomColumnHeading,
StyledLink,
Title,
UniversalDataGrid,
TableToolbar,
Tooltip,
MixNodeStatusDropdown,
mixnodeToGridRow,
} from '@src/components';
import { MixNodeResponse, MixnodeStatusWithAll, toMixnodeStatus } from '@src/typeDefs/explorer-api';
import { NYM_BIG_DIPPER } from '@src/api/constants';
import { currencyToString } from '@src/utils/currency';
import { splice } from '@src/utils';
import { useGetMixNodeStatusColor } from '@src/hooks';
export const PageMixnodes: FCWithChildren = () => {
const { mixnodes, fetchMixnodes } = useMainContext();
@@ -46,7 +38,6 @@ export const PageMixnodes: FCWithChildren = () => {
const [confirmationModalProps, setConfirmationModalProps] = React.useState<DelegationModalProps | undefined>();
const { status } = useParams<{ status: MixnodeStatusWithAll | undefined }>();
const theme = useTheme();
const navigate = useNavigate();
const wallet = useWallet();
@@ -92,86 +83,90 @@ export const PageMixnodes: FCWithChildren = () => {
);
};
const handleOnDelegate = ({ identityKey, mixId }: { identityKey: string; mixId: number }) => {
if (wallet.status !== 'Connected') {
setConfirmationModalProps({
status: 'info',
message: 'Please connect your wallet to delegate',
});
} else {
setItemSelectedForDelegation({ identityKey, mixId });
}
};
const columns: GridColDef[] = [
{
field: 'identity_key',
width: 215,
headerName: 'Identity Key',
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
headerClassName: 'MuiDataGrid-header-override',
width: 215,
headerAlign: 'left',
renderCell: (params: GridRenderCellParams) => (
<Stack direction="row" alignItems="center" gap={1}>
<DelegateIconButton
size="small"
onDelegate={() => {
if (wallet.status !== 'Connected') {
setConfirmationModalProps({
status: 'info',
message: 'Please connect your wallet to delegate',
});
} else {
setItemSelectedForDelegation({ identityKey: params.row.identity_key, mixId: params.row.mix_id });
}
}}
onDelegate={() => handleOnDelegate({ identityKey: params.value, mixId: params.row.mix_id })}
/>
<CopyToClipboard smallIcons value={params.value} tooltip={`Copy identity key ${params.value} to clipboard`} />
<MuiLink
sx={getCellStyles(theme, params.row)}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
data-testid="identity-link"
color={useGetMixNodeStatusColor(params.row.status)}
dataTestId="identity-link"
>
{splice(7, 29, params.value)}
</MuiLink>
</StyledLink>
</Stack>
),
},
{
field: 'mix_id',
headerName: 'Mix ID',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Mix ID" />,
headerClassName: 'MuiDataGrid-header-override',
width: 85,
align: 'center',
headerName: 'Mix ID',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Mix ID" />,
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={getCellStyles(theme, params.row)}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.value}`}
color={useGetMixNodeStatusColor(params.row.status)}
data-testid="mix-id"
>
{params.value}
</MuiLink>
</StyledLink>
),
},
{
field: 'bond',
headerName: 'Stake',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Stake" />,
type: 'number',
headerClassName: 'MuiDataGrid-header-override',
width: 150,
align: 'left',
type: 'number',
disableColumnMenu: true,
headerName: 'Stake',
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderHeader: () => <CustomColumnHeading headingTitle="Stake" />,
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={getCellStyles(theme, params.row)}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
color={useGetMixNodeStatusColor(params.row.status)}
>
{currencyToString({ amount: params.value, dp: 2 })}
</MuiLink>
{currencyToString(params.value)}
</StyledLink>
),
},
{
field: 'stake_saturation',
width: 185,
align: 'center',
headerName: 'Stake Saturation',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => (
<CustomColumnHeading
@@ -179,45 +174,39 @@ export const PageMixnodes: FCWithChildren = () => {
tooltipInfo="Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is 940k NYMs, computed as S/K where S is target amount of tokens staked in the network and K is the number of nodes in the reward set."
/>
),
headerClassName: 'MuiDataGrid-header-override',
width: 185,
align: 'center',
headerAlign: 'center',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{
...getCellStyles(theme, params.row, params.value > 100 ? 'theme.palette.warning.main' : undefined),
}}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
>
{`${params.value} %`}
</MuiLink>
color={useGetMixNodeStatusColor(params.row.status)}
>{`${params.value} %`}</StyledLink>
),
},
{
field: 'pledge_amount',
headerName: 'Bond',
disableColumnMenu: true,
width: 150,
headerClassName: 'MuiDataGrid-header-override',
renderHeader: () => <CustomColumnHeading headingTitle="Bond" tooltipInfo="Node operator's share of stake." />,
type: 'number',
headerAlign: 'left',
align: 'left',
type: 'number',
headerName: 'Bond',
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Bond" tooltipInfo="Node operator's share of stake." />,
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={getCellStyles(theme, params.row)}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
color={useGetMixNodeStatusColor(params.row.status)}
>
{currencyToString({ amount: params.value, dp: 2 })}
</MuiLink>
{currencyToString(params.value)}
</StyledLink>
),
},
{
field: 'profit_percentage',
width: 145,
align: 'center',
headerName: 'Profit Margin',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => (
<CustomColumnHeading
@@ -225,47 +214,41 @@ export const PageMixnodes: FCWithChildren = () => {
tooltipInfo="Percentage of the delegators rewards that the operator takes as fee before rewards are distributed to the delegators."
/>
),
headerClassName: 'MuiDataGrid-header-override',
width: 145,
headerAlign: 'center',
align: 'center',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...getCellStyles(theme, params.row) }}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
>
{params.value}%
</MuiLink>
color={useGetMixNodeStatusColor(params.row.status)}
>{`${params.value}%`}</StyledLink>
),
},
{
field: 'operating_cost',
width: 170,
align: 'center',
headerName: 'Operating Cost',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => (
<CustomColumnHeading
headingTitle="Operating Cost"
tooltipInfo="Monthly operational cost of running this node. This cost is set by the operator and it influences how the rewards are split between the operator and delegators."
/>
),
headerClassName: 'MuiDataGrid-header-override',
width: 170,
headerAlign: 'center',
align: 'center',
disableColumnMenu: true,
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
>
{params.value} NYM
</MuiLink>
color={useGetMixNodeStatusColor(params.row.status)}
>{`${params.value} NYM`}</StyledLink>
),
},
{
field: 'node_performance',
width: 165,
align: 'center',
headerName: 'Routing Score',
headerAlign: 'center',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => (
<CustomColumnHeading
@@ -273,85 +256,72 @@ export const PageMixnodes: FCWithChildren = () => {
tooltipInfo="Mixnode's most recent score (measured in the last 15 minutes). Routing score is relative to that of the network. Each time a gateway is tested, the test packets have to go through the full path of the network (gateway + 3 nodes). If a node in the path drop packets it will affect the score of the gateway and other nodes in the test."
/>
),
headerClassName: 'MuiDataGrid-header-override',
width: 165,
headerAlign: 'center',
align: 'center',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={{ ...getCellStyles(theme, params.row), textAlign: 'left' }}
component={RRDLink}
<StyledLink
to={`/network-components/mixnode/${params.row.mix_id}`}
>
{params.value}%
</MuiLink>
color={useGetMixNodeStatusColor(params.row.status)}
>{`${params.value}%`}</StyledLink>
),
},
{
field: 'owner',
headerName: 'Owner',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Owner" />,
width: 120,
headerName: 'Owner',
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Owner" />,
renderCell: (params: GridRenderCellParams) => (
<MuiLink
href={`${NYM_BIG_DIPPER}/account/${params.value}`}
<StyledLink
to={`${NYM_BIG_DIPPER}/account/${params.value}`}
color={useGetMixNodeStatusColor(params.row.status)}
target="_blank"
sx={getCellStyles(theme, params.row)}
data-testid="big-dipper-link"
>
{splice(7, 29, params.value)}
</MuiLink>
</StyledLink>
),
},
{
field: 'location',
width: 150,
headerName: 'Location',
renderHeader: () => <CustomColumnHeading headingTitle="Location" />,
disableColumnMenu: true,
width: 120,
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Location" />,
renderCell: (params: GridRenderCellParams) => (
<Button
onClick={() => handleSearch(params.value as string)}
sx={{
...getCellStyles(theme, params.row),
justifyContent: 'flex-start',
}}
>
<Tooltip text={params.value} id="mixnode-location-text">
<Box
sx={{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}}
>
{params.value}
</Box>
</Tooltip>
</Button>
<Tooltip text={params.value} id="mixnode-location-text">
<Box
sx={{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer',
color: useGetMixNodeStatusColor(params.row.status),
}}
onClick={() => handleSearch(params.value)}
>
{params.value}
</Box>
</Tooltip>
),
},
{
field: 'host',
headerName: 'Host',
renderHeader: () => <CustomColumnHeading headingTitle="Host" />,
disableColumnMenu: true,
headerClassName: 'MuiDataGrid-header-override',
width: 130,
headerName: 'Host',
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Host" />,
renderCell: (params: GridRenderCellParams) => (
<MuiLink
sx={getCellStyles(theme, params.row)}
component={RRDLink}
<StyledLink
color={useGetMixNodeStatusColor(params.row.status)}
to={`/network-components/mixnode/${params.row.mix_id}`}
>
{params.value}
</MuiLink>
</StyledLink>
),
},
];
@@ -359,6 +329,7 @@ export const PageMixnodes: FCWithChildren = () => {
const handlePageSize = (event: SelectChangeEvent<string>) => {
setPageSize(event.target.value);
};
return (
<>
<Title text="Mixnodes" />
explorer/src/pages/MixnodesMap/index.tsx
+4 -14
View File
@@ -5,7 +5,7 @@ import { ContentCard } from '../../components/ContentCard';
import { CustomColumnHeading } from '../../components/CustomColumnHeading';
import { TableToolbar } from '../../components/TableToolbar';
import { Title } from '../../components/Title';
import { UniversalDataGrid, cellStyles } from '../../components/Universal-DataGrid';
import { UniversalDataGrid } from '../../components/Universal-DataGrid';
import { WorldMap } from '../../components/WorldMap';
import { useMainContext } from '../../context/main';
import { CountryDataRowType, countryDataToGridRow } from '../../utils';
@@ -31,11 +31,7 @@ export const PageMixnodesMap: FCWithChildren = () => {
flex: 1,
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles} data-testid="country-name">
{params.value}
</Typography>
),
renderCell: (params: GridRenderCellParams) => <Typography data-testid="country-name">{params.value}</Typography>,
},
{
field: 'nodes',
@@ -44,9 +40,7 @@ export const PageMixnodesMap: FCWithChildren = () => {
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles} data-testid="number-of-nodes">
{params.value}
</Typography>
<Typography data-testid="number-of-nodes">{params.value}</Typography>
),
},
{
@@ -55,11 +49,7 @@ export const PageMixnodesMap: FCWithChildren = () => {
flex: 1,
headerAlign: 'left',
headerClassName: 'MuiDataGrid-header-override',
renderCell: (params: GridRenderCellParams) => (
<Typography sx={cellStyles} data-testid="percentage">
{params.value}
</Typography>
),
renderCell: (params: GridRenderCellParams) => <Typography data-testid="percentage">{params.value}</Typography>,
},
];