Fouad
e5f41731ae
* bootstrap next app + add overview page * fix AssetList type * fix up nav stuff * Refactor Nav component and add network components pages * Refactor WorldMap component and update TelegramIcon, GitHubIcon, NymVpnIcon, DiscordIcon, and TwitterIcon components * add service providers page * mixnodes page * delegations page + use material react table for all tables * nodes map page * Refactor StyledLink component and remove unnecessary console.log statements * Refactor ESLint configuration, remove unused dependencies, and update component imports * update deps * Refactor imports and update dependencies * fix dark mode * build single mixnode page * build single gateway page * Refactor handleOnDelegate function to use useCallback in mixnodes page.tsx * Add defaults for constants --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com>
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import React, { useMemo } from 'react'
|
|
import {
|
|
Alert,
|
|
Box,
|
|
CircularProgress,
|
|
Grid,
|
|
SelectChangeEvent,
|
|
Typography,
|
|
} from '@mui/material'
|
|
import { ContentCard } from '@/app/components/ContentCard'
|
|
import { TableToolbar } from '@/app/components/TableToolbar'
|
|
import { Title } from '@/app/components/Title'
|
|
import { WorldMap } from '@/app/components/WorldMap'
|
|
import { useMainContext } from '@/app/context/main'
|
|
import { CountryDataRowType, countryDataToGridRow } from '@/app/utils'
|
|
import {
|
|
MRT_ColumnDef,
|
|
MaterialReactTable,
|
|
useMaterialReactTable,
|
|
} from 'material-react-table'
|
|
|
|
const PageMixnodesMap = () => {
|
|
const { countryData } = useMainContext()
|
|
|
|
const data = useMemo(() => {
|
|
return countryDataToGridRow(Object.values(countryData?.data || {}))
|
|
}, [countryData])
|
|
|
|
const columns = useMemo<MRT_ColumnDef<CountryDataRowType>[]>(() => {
|
|
return [
|
|
{
|
|
id: 'delegations-data',
|
|
header: 'Global Mixnodes Data',
|
|
columns: [
|
|
{
|
|
id: 'country-name',
|
|
header: 'Location',
|
|
accessorKey: 'countryName',
|
|
},
|
|
{
|
|
id: 'nodes',
|
|
header: 'Nodes',
|
|
accessorKey: 'nodes',
|
|
},
|
|
{
|
|
id: 'percentage',
|
|
header: 'Percentage',
|
|
accessorKey: 'percentage',
|
|
},
|
|
],
|
|
},
|
|
]
|
|
}, [])
|
|
|
|
const table = useMaterialReactTable({
|
|
columns,
|
|
data,
|
|
})
|
|
|
|
return (
|
|
<Box component="main" sx={{ flexGrow: 1 }}>
|
|
<Grid>
|
|
<Grid item data-testid="mixnodes-globe">
|
|
<Title text="Mixnodes Around the Globe" />
|
|
</Grid>
|
|
<Grid item>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<ContentCard title="Distribution of nodes">
|
|
<WorldMap loading={false} countryData={countryData} />
|
|
<Box sx={{ marginTop: 2 }} />
|
|
<TableToolbar />
|
|
<MaterialReactTable table={table} />
|
|
</ContentCard>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default PageMixnodesMap
|