- {producer.name}
+
+ {producer.name}
+
{!!producer.endpoints.api.length +
producer.endpoints.ssl.length && (
diff --git a/webapp/src/components/GeoMap/CountryMap.js b/webapp/src/components/GeoMap/CountryMap.js
index 3ad8fe181..8c812fb89 100644
--- a/webapp/src/components/GeoMap/CountryMap.js
+++ b/webapp/src/components/GeoMap/CountryMap.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react'
+import React, { useEffect, useRef, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
import { makeStyles } from '@mui/styles'
import PropTypes from 'prop-types'
import { countries } from '../../utils/countries'
-import Tooltip from '../Tooltip'
-import NodeCard from '../NodeCard'
+import { eosConfig } from '../../config'
import HighMapsWrapper from './HighMapsWrapper'
import styles from './styles'
@@ -13,21 +13,8 @@ const useStyles = makeStyles(styles)
const ClusterMap = ({ data, map, mapCode }) => {
const classes = useStyles()
+ const navigate = useNavigate()
const myRef = useRef()
- const [openTooltip, setOpenTooltip] = useState(false)
- const [pointData, setPointData] = useState({
- vertical: 'center',
- horizontal: 'center',
- })
-
- const handlePopoverOpen = useCallback((values) => {
- setPointData(values)
- setOpenTooltip(true)
- }, [])
-
- const handlePopoverClose = () => {
- setOpenTooltip(false)
- }
const setupMapData = useCallback(
(data, map, mapCode = '') => {
@@ -61,14 +48,27 @@ const ClusterMap = ({ data, map, mapCode }) => {
},
plotOptions: {
series: {
+ dataLabels: {
+ enabled: true,
+ useHTML: true,
+ style: {
+ fontWeight: 'bold',
+ fontSize: '0.8rem',
+ paddingBottom: '8px',
+ },
+ formatter: function () {
+ const producer = this?.point?.producer
+
+ return producer?.owner
+ ? `${producer?.owner}`
+ : ''
+ },
+ },
events: {
click: function (e) {
- handlePopoverOpen({
- node: e.point.node,
- producer: e.point.producer,
- horizontal: e.screenX,
- vertical: e.screenY,
- })
+ navigate(
+ `/${eosConfig.producersRoute}/${e.point.producer?.owner}`,
+ )
},
},
},
@@ -93,7 +93,7 @@ const ClusterMap = ({ data, map, mapCode }) => {
new HighMapsWrapper['Map'](myRef.current, options)
},
- [handlePopoverOpen],
+ [navigate],
)
useEffect(() => {
@@ -102,22 +102,7 @@ const ClusterMap = ({ data, map, mapCode }) => {
}
}, [data, map, mapCode, setupMapData])
- return (
- <>
-
-
-
-
-
- )
+ return
}
ClusterMap.propTypes = {
diff --git a/webapp/src/components/NodeCard/Endpoints.js b/webapp/src/components/NodeCard/Endpoints.js
deleted file mode 100644
index cff9f5d03..000000000
--- a/webapp/src/components/NodeCard/Endpoints.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { makeStyles } from '@mui/styles'
-
-import styles from './styles'
-
-const useStyles = makeStyles(styles)
-
-const Endpoints = ({ node }) => {
- const classes = useStyles()
- const { t } = useTranslation('nodeCardComponent')
-
- if (!node?.p2p_endpoint && !node?.api_endpoint && !node?.ssl_endpoint) {
- return <>
- }
-
- const endpoints = [
- { key: 'p2p_endpoint', value: 'P2P' },
- { key: 'api_endpoint', value: 'API' },
- { key: 'ssl_endpoint', value: 'SSL' },
- ]
-
- return (
- <>
- {t('endpoints')}
- {endpoints.map(
- ({ key, value }, index) =>
- !!node[key]?.length && (
-
- {value}:{' '}
-
- {node[key] || 'N/A'}
-
-
- ),
- )}
-
- )
-}
-
-export default Endpoints
diff --git a/webapp/src/components/NodeCard/Features.js b/webapp/src/components/NodeCard/Features.js
deleted file mode 100644
index 81ad6a574..000000000
--- a/webapp/src/components/NodeCard/Features.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { makeStyles } from '@mui/styles'
-
-import styles from './styles'
-
-const useStyles = makeStyles(styles)
-
-const Features = ({ node }) => {
- const classes = useStyles()
- const { t } = useTranslation('nodeCardComponent')
-
- if (!node.features?.length)
- return <>
-
- return (
- <>
- {t('features')}
- {node.features.map((feature, i) => (
- {feature}
- ))}
-
- )
-}
-
-export default Features
diff --git a/webapp/src/components/NodeCard/Keys.js b/webapp/src/components/NodeCard/Keys.js
index c9124dda5..26b04e220 100644
--- a/webapp/src/components/NodeCard/Keys.js
+++ b/webapp/src/components/NodeCard/Keys.js
@@ -1,6 +1,9 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { makeStyles } from '@mui/styles'
+import KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';
+
+import MoreInfoModal from '../MoreInfoModal'
import styles from './styles'
@@ -10,16 +13,21 @@ const Keys = ({ node }) => {
const classes = useStyles()
const { t } = useTranslation('nodeCardComponent')
- if (!node.keys?.length) return <>
+ if (!node?.node_info?.length || !node?.node_info[0]?.features?.keys)
+ return <>
+
+ const keys = node.node_info[0].features.keys
return (
<>
- {t('keys')}
- {Object.keys(node.keys).map((key, i) => (
-
+ {t('keys')}
+ {Object.keys(keys).map((key, i) => (
+
{key}:
-
{node.keys[key]}
-
+
+ {keys[key]}
+
+
))}
)
diff --git a/webapp/src/components/NodeCard/NodesCard.js b/webapp/src/components/NodeCard/NodesCard.js
index fdd56d204..8c1d72cf4 100644
--- a/webapp/src/components/NodeCard/NodesCard.js
+++ b/webapp/src/components/NodeCard/NodesCard.js
@@ -6,17 +6,16 @@ import { makeStyles } from '@mui/styles'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Chip from '@mui/material/Chip'
-import KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';
import ChipList from '../ChipList'
import CountryFlag from '../CountryFlag'
import ProducerHealthIndicators from '../ProducerHealthIndicators'
-import MoreInfoModal from '../MoreInfoModal'
import ShowInfo from './ShowInfo'
-import styles from './styles'
import SupportedAPIs from './SupportedAPIs'
import EndpointsChips from './EndpointsChips'
+import Keys from './Keys'
+import styles from './styles'
const useStyles = makeStyles(styles)
@@ -39,27 +38,6 @@ const NodesCard = ({ nodes, hideFeatures = false }) => {
)
}
- const Keys = ({ node }) => {
- if (!node?.node_info?.length || !node?.node_info[0]?.features?.keys)
- return <>
-
- const keys = node.node_info[0].features.keys
-
- return (
- <>
- {t('keys')}
- {Object.keys(keys).map((key, i) => (
-
-
{key}:
-
- {keys[key]}
-
-
- {!node ? (
- <>
- - {t('emptyNode')}
-
- ) : (
- <>
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
-
-
- )
-}
-
-NodeCard.propTypes = {
- producer: PropTypes.any,
- node: PropTypes.any,
-}
-export default NodeCard
diff --git a/webapp/src/components/NodeCard/styles.js b/webapp/src/components/NodeCard/styles.js
index cedbd27e3..5ef48f3b0 100644
--- a/webapp/src/components/NodeCard/styles.js
+++ b/webapp/src/components/NodeCard/styles.js
@@ -1,9 +1,4 @@
export default (theme) => ({
- root: {
- height: '100%',
- display: 'flex',
- flexFlow: 'column',
- },
content: {
flex: 1,
},
@@ -13,16 +8,9 @@ export default (theme) => ({
textTransform: 'unset !important',
},
},
- dl: {
- marginTop: -16,
- marginBottom: -16,
- },
bold: {
fontWeight: 'bold',
},
- breakLine: {
- wordBreak: 'break-word',
- },
nodes: {
width: '260px',
padding: theme.spacing(0, 3, 0),
diff --git a/webapp/src/components/ViewBPProfile/index.js b/webapp/src/components/ViewBPProfile/index.js
index 4a5bf2045..9a94b0d6a 100644
--- a/webapp/src/components/ViewBPProfile/index.js
+++ b/webapp/src/components/ViewBPProfile/index.js
@@ -16,6 +16,7 @@ const ViewBPProfile = ({ producer }) => {
return (