Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Yana
|
f7f95f0ac7 |
@@ -39,10 +39,6 @@ export const originalNavOptions: NavOptionType[] = [
|
||||
url: `${BIG_DIPPER}/validators`,
|
||||
title: 'Validators',
|
||||
},
|
||||
{
|
||||
url: 'network-components/service-providers',
|
||||
title: 'Service Providers',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -3,7 +3,6 @@ import { Box, Grid, Link, Typography } from '@mui/material';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { PeopleAlt } from '@mui/icons-material';
|
||||
import { WorldMap } from '../../components/WorldMap';
|
||||
import { useMainContext } from '../../context/main';
|
||||
import { formatNumber } from '../../utils';
|
||||
@@ -72,17 +71,6 @@ export const PageOverview: FCWithChildren = () => {
|
||||
/>
|
||||
</Grid>
|
||||
)}
|
||||
{serviceProviders && (
|
||||
<Grid item xs={12} md={4}>
|
||||
<StatsCard
|
||||
onClick={() => navigate('/network-components/service-providers')}
|
||||
title="Service providers"
|
||||
icon={<PeopleAlt />}
|
||||
count={serviceProviders.data?.length}
|
||||
errorMsg={summaryOverview?.error}
|
||||
/>
|
||||
</Grid>
|
||||
)}
|
||||
{validators && (
|
||||
<Grid item xs={12} md={4}>
|
||||
<StatsCard
|
||||
|
||||
@@ -1,135 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Box, Button, Card, FormControl, Grid, ListItem, Menu, SelectChangeEvent, Typography } from '@mui/material';
|
||||
import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
|
||||
import { TableToolbar } from '../../components/TableToolbar';
|
||||
import { Title } from '../../components/Title';
|
||||
import { UniversalDataGrid } from '../../components/Universal-DataGrid';
|
||||
import { useMainContext } from '../../context/main';
|
||||
import { CustomColumnHeading } from '../../components/CustomColumnHeading';
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{
|
||||
headerName: 'Client ID',
|
||||
field: 'address',
|
||||
disableColumnMenu: true,
|
||||
flex: 3,
|
||||
},
|
||||
{
|
||||
headerName: 'Type',
|
||||
field: 'service_type',
|
||||
disableColumnMenu: true,
|
||||
flex: 1,
|
||||
},
|
||||
{
|
||||
headerName: 'Routing score',
|
||||
field: 'routing_score',
|
||||
disableColumnMenu: true,
|
||||
flex: 2,
|
||||
sortingOrder: ['asc', 'desc'],
|
||||
sortComparator: (a?: string, b?: string) => {
|
||||
if (!a) return -1; // Place undefined values at the end
|
||||
if (!b) return 1; // Place undefined values at the end
|
||||
|
||||
const aToNum = parseInt(a, 10);
|
||||
const bToNum = parseInt(b, 10);
|
||||
|
||||
if (aToNum > bToNum) return 1;
|
||||
|
||||
return -1; // Sort numbers in ascending order
|
||||
},
|
||||
renderCell: (params: GridRenderCellParams) => (!params.value ? '-' : params.value),
|
||||
renderHeader: () => (
|
||||
<CustomColumnHeading
|
||||
headingTitle="Routing score"
|
||||
tooltipInfo="Routing score is only displayed for the service providers that had a successful ping within the last two hours"
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const SupportedApps = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const anchorRef = React.useRef<HTMLButtonElement>(null);
|
||||
|
||||
return (
|
||||
<FormControl size="small">
|
||||
<Button
|
||||
ref={anchorRef}
|
||||
onClick={handleClick}
|
||||
size="large"
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
sx={{ mr: 2, textTransform: 'capitalize' }}
|
||||
>
|
||||
Supported Apps
|
||||
</Button>
|
||||
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
|
||||
<ListItem>Keybase</ListItem>
|
||||
<ListItem>Telegram</ListItem>
|
||||
<ListItem>Electrum</ListItem>
|
||||
<ListItem>Blockstream Green</ListItem>
|
||||
</Menu>
|
||||
</FormControl>
|
||||
);
|
||||
};
|
||||
|
||||
export const ServiceProviders = () => {
|
||||
const { serviceProviders } = useMainContext();
|
||||
const [pageSize, setPageSize] = React.useState('10');
|
||||
|
||||
const handleOnPageSizeChange = (event: SelectChangeEvent<string>) => {
|
||||
setPageSize(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box mb={2}>
|
||||
<Title text="Service Providers" />
|
||||
</Box>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Card
|
||||
sx={{
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
{serviceProviders?.data ? (
|
||||
<>
|
||||
<TableToolbar
|
||||
onChangePageSize={handleOnPageSizeChange}
|
||||
pageSize={pageSize}
|
||||
childrenBefore={<SupportedApps />}
|
||||
/>
|
||||
<UniversalDataGrid
|
||||
pagination
|
||||
rows={serviceProviders.data}
|
||||
columns={columns}
|
||||
pageSize={pageSize}
|
||||
initialState={{
|
||||
sorting: {
|
||||
sortModel: [
|
||||
{
|
||||
field: 'routing_score',
|
||||
sort: 'desc',
|
||||
},
|
||||
],
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Typography>No service providers to display</Typography>
|
||||
)}
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -5,7 +5,6 @@ import { PageGateways } from '../pages/Gateways';
|
||||
import { PageGatewayDetail } from '../pages/GatewayDetail';
|
||||
import { PageMixnodeDetail } from '../pages/MixnodeDetail';
|
||||
import { PageMixnodes } from '../pages/Mixnodes';
|
||||
import { ServiceProviders } from '../pages/ServiceProviders';
|
||||
|
||||
const ValidatorRoute: FCWithChildren = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -22,6 +21,5 @@ export const NetworkComponentsRoutes: FCWithChildren = () => (
|
||||
<Route path="gateways" element={<PageGateways />} />
|
||||
<Route path="gateway/:id" element={<PageGatewayDetail />} />
|
||||
<Route path="validators" element={<ValidatorRoute />} />
|
||||
<Route path="service-providers" element={<ServiceProviders />} />
|
||||
</ReactRouterRoutes>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user