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>
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import * as React from 'react'
|
|
import {
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Typography,
|
|
} from '@mui/material'
|
|
import { Box } from '@mui/system'
|
|
import { useTheme } from '@mui/material/styles'
|
|
import { Tooltip } from '@nymproject/react/tooltip/Tooltip'
|
|
import { EconomicsRowsType, EconomicsInfoRowWithIndex } from './types'
|
|
import { UniversalTableProps } from '@/app/components/DetailTable'
|
|
import { textColour } from '@/app/utils'
|
|
|
|
const formatCellValues = (value: EconomicsRowsType, field: string) => (
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }} id="field">
|
|
<Typography sx={{ mr: 1, fontWeight: '600', fontSize: '12px' }} id={field}>
|
|
{value.value}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
|
|
export const DelegatorsInfoTable: FCWithChildren<
|
|
UniversalTableProps<EconomicsInfoRowWithIndex>
|
|
> = ({ tableName, columnsData, rows }) => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<TableContainer component={Paper}>
|
|
<Table sx={{ minWidth: 650 }} aria-label={tableName}>
|
|
<TableHead>
|
|
<TableRow>
|
|
{columnsData?.map(({ field, title, tooltipInfo, width }) => (
|
|
<TableCell
|
|
key={field}
|
|
sx={{ fontSize: 14, fontWeight: 600, width }}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
{tooltipInfo && (
|
|
<Tooltip
|
|
title={tooltipInfo}
|
|
id={field}
|
|
placement="top-start"
|
|
textColor={
|
|
theme.palette.nym.networkExplorer.tooltip.color
|
|
}
|
|
bgColor={
|
|
theme.palette.nym.networkExplorer.tooltip.background
|
|
}
|
|
maxWidth={230}
|
|
arrow
|
|
/>
|
|
)}
|
|
{title}
|
|
</Box>
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{rows?.map((eachRow) => (
|
|
<TableRow
|
|
key={eachRow.id}
|
|
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
|
>
|
|
{columnsData?.map((_, index: number) => {
|
|
const { field } = columnsData[index]
|
|
const value: EconomicsRowsType = (eachRow as any)[field]
|
|
return (
|
|
<TableCell
|
|
key={_.title}
|
|
sx={{
|
|
color: textColour(value, field, theme),
|
|
}}
|
|
data-testid={`${_.title.replace(/ /g, '-')}-value`}
|
|
>
|
|
{formatCellValues(value, columnsData[index].field)}
|
|
</TableCell>
|
|
)
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)
|
|
}
|