diff --git a/README.md b/README.md index 678b42a..795bed7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# NodeWatch Frontend (UI) +# Nodewatch Frontend (UI) -A web-based user interface will be developed to display the data collected by a [devp2p crawler](https://github.com/ChainSafe/eth2-crawler) targeted at Eth2 nodes. It will contain the following: +A web-based user interface will be developed to display the data collected by a [devp2p crawler](https://github.com/ChainSafe/eth2-crawler) targeted at Ethereum Consensus nodes. It will contain the following: - Client breakdown by agent type - Toggle connectable vs all seen in last month diff --git a/package.json b/package.json index 8648981..dfd57d3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "eth2-crawler-ui", + "name": "nodewatch-ui", "version": "0.1.0", "private": true, "engines": { diff --git a/public/index.html b/public/index.html index c05794a..018a540 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ - + - Nodewatch - Eth2 Node Analytics + Nodewatch - Ethereum Consensus Node Analytics diff --git a/public/manifest.json b/public/manifest.json index 5b70346..d6a1cdc 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Eth 2 Crawler", - "name": "Eth 2 Crawler", + "short_name": "Nodewatch", + "name": "Nodewatch", "icons": [ { "src": "favicon.ico", diff --git a/src/App.tsx b/src/App.tsx index b98a711..d1259e8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import React from "react" import HomePage from "./Components/Pages/HomePage" import { ThemeSwitcher, createStyles, makeStyles } from "@chainsafe/common-theme" import { theme } from "./Components/Themes/theme" -import { Eth2CrawlerProvider } from "./Contexts/Eth2CrawlerContext" +import { NodewatchCrawlerProvider } from "./Contexts/NodewatchCrawlerContext" import BodyLayout from "./Components/Layouts/BodyLayout" import NavBar from "./Components/Modules/Navbar" import Footer from "./Components/Modules/Footer" @@ -22,8 +22,8 @@ const useStyles = makeStyles(() => { function App() { const classes = useStyles() return ( - - + +
@@ -31,7 +31,7 @@ function App() {
- + ) } diff --git a/src/Components/Modules/CountryStats/index.tsx b/src/Components/Modules/CountryStats/index.tsx index b8d6660..3bc6d65 100644 --- a/src/Components/Modules/CountryStats/index.tsx +++ b/src/Components/Modules/CountryStats/index.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: LGPL-3.0-only import React, { useCallback, useEffect, useMemo, useState } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { ECTheme } from "../../Themes/types" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import CountryBox from "./CountryBox" import StatsChartBox from "./StatsChartBox" import { Typography } from "@chainsafe/common-components" @@ -71,7 +71,7 @@ const HALF_PAGE_SIZE = PAGE_SIZE / 2 const CountryStats: React.FC = () => { const classes = useStyles() - const { nodeCountByCountries } = useEth2CrawlerApi() + const { nodeCountByCountries } = useNodewatchCrawlerApi() const [pageNo, setPageNo] = useState(0) const { width } = useWindowDimensions() diff --git a/src/Components/Modules/DemographicsStats/ClientTypes.tsx b/src/Components/Modules/DemographicsStats/ClientTypes.tsx index 0a086a5..b96fb17 100644 --- a/src/Components/Modules/DemographicsStats/ClientTypes.tsx +++ b/src/Components/Modules/DemographicsStats/ClientTypes.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: LGPL-3.0-only import React, { useMemo } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { Typography } from "@chainsafe/common-components" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import { ECTheme } from "../../Themes/types" import { BarChart, Bar, Tooltip, XAxis, YAxis, ResponsiveContainer } from "recharts" @@ -34,7 +34,7 @@ const ClientTypes = () => { const classes = useStyles() const theme: ECTheme = useTheme() - const { clients } = useEth2CrawlerApi() + const { clients } = useNodewatchCrawlerApi() const chartData = useMemo( () => diff --git a/src/Components/Modules/DemographicsStats/NodeCount12.tsx b/src/Components/Modules/DemographicsStats/NodeCount12.tsx index 4dbf18b..c396aea 100644 --- a/src/Components/Modules/DemographicsStats/NodeCount12.tsx +++ b/src/Components/Modules/DemographicsStats/NodeCount12.tsx @@ -30,7 +30,7 @@ const NodeCount12 = () => { labels: ["1", "2", "3", "4", "5", "6", "7"], datasets: [ { - label: "Node count: eth1", + label: "Node count: Ethereum Execution", data: [65, 59, 80, 81, 56, 55, 40], fill: true, borderColor: theme.palette.primary.main, @@ -38,7 +38,7 @@ const NodeCount12 = () => { tension: 0.1, }, { - label: "Node count: eth2", + label: "Node count: Ethereum Consensus", data: [99, 56, 55, 40, 65, 59, 100], fill: true, borderColor: theme.palette.primary.main, @@ -69,7 +69,7 @@ const NodeCount12 = () => { return (
- node count eth1 and eth2 + node count ethereum execution and ethereum consensus
diff --git a/src/Components/Modules/HeatMap/MapLeaflet.tsx b/src/Components/Modules/HeatMap/MapLeaflet.tsx index 03ce2ca..978ed9a 100644 --- a/src/Components/Modules/HeatMap/MapLeaflet.tsx +++ b/src/Components/Modules/HeatMap/MapLeaflet.tsx @@ -6,7 +6,7 @@ import React, { useEffect } from "react" // import { CircleMarker, MapContainer, TileLayer, Tooltip } from "react-leaflet" import L, { LatLngTuple } from "leaflet" // import { createStyles, makeStyles } from "@chainsafe/common-theme" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" // import useWindowDimensions from "../../../utilHooks/useWindowDimensions" import "leaflet/dist/leaflet.css" import "leaflet.heat" @@ -46,7 +46,7 @@ const minZoom = 1.4 const NodeMap = ({ rootClassName }: { rootClassName: string }) => { // const classes = useStyles() - const { heatmap } = useEth2CrawlerApi() + const { heatmap } = useNodewatchCrawlerApi() // const { width } = useWindowDimensions() // const circleRadius = width < 480 ? 1 : width < 720 ? 2 : width < 1280 ? 4 : 4 diff --git a/src/Components/Modules/Navbar.tsx b/src/Components/Modules/Navbar.tsx index 806987b..2bcb573 100644 --- a/src/Components/Modules/Navbar.tsx +++ b/src/Components/Modules/Navbar.tsx @@ -46,7 +46,7 @@ const NavBar: React.FC = () => {
- Eth2 Nodewatch + Ethereum Consensus Nodewatch diff --git a/src/Components/Modules/NodeStats/NodeStatsOverTime.tsx b/src/Components/Modules/NodeStats/NodeStatsOverTime.tsx index dbfe2b3..f9d221c 100644 --- a/src/Components/Modules/NodeStats/NodeStatsOverTime.tsx +++ b/src/Components/Modules/NodeStats/NodeStatsOverTime.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: LGPL-3.0-only import React, { useMemo } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { Typography } from "@chainsafe/common-components" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import { ECTheme } from "../../Themes/types" import { XAxis, @@ -61,7 +61,7 @@ const NodeStatusOverTime = () => { const classes = useStyles() const theme: ECTheme = useTheme() - const { nodeStatsOverTime } = useEth2CrawlerApi() + const { nodeStatsOverTime } = useNodewatchCrawlerApi() const chartData = useMemo( () => diff --git a/src/Components/Modules/SoftwareStats/AltAirPercentage.tsx b/src/Components/Modules/SoftwareStats/AltAirPercentage.tsx index df82a5c..29a7b36 100644 --- a/src/Components/Modules/SoftwareStats/AltAirPercentage.tsx +++ b/src/Components/Modules/SoftwareStats/AltAirPercentage.tsx @@ -6,7 +6,7 @@ import React, { useMemo, useState } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { ECTheme } from "../../Themes/types" import { PieChart, Pie, Sector, ResponsiveContainer } from "recharts" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import { Typography } from "@chainsafe/common-components" const useStyles = makeStyles(({ constants, palette }: ECTheme) => { @@ -67,7 +67,7 @@ const AltAirPercentage: React.FC = () => { setActiveIndex(index) } - const { altAirPercentage } = useEth2CrawlerApi() + const { altAirPercentage } = useNodewatchCrawlerApi() const data = useMemo(() => { return altAirPercentage !== undefined diff --git a/src/Components/Modules/SoftwareStats/NetworkTypes.tsx b/src/Components/Modules/SoftwareStats/NetworkTypes.tsx index f466726..0a5fa39 100644 --- a/src/Components/Modules/SoftwareStats/NetworkTypes.tsx +++ b/src/Components/Modules/SoftwareStats/NetworkTypes.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: LGPL-3.0-only import React, { useMemo } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { Typography } from "@chainsafe/common-components" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import { ECTheme } from "../../Themes/types" import { BarChart, Bar, Tooltip, XAxis, YAxis, ResponsiveContainer } from "recharts" @@ -34,7 +34,7 @@ const NetworkTypes = () => { const classes = useStyles() const theme: ECTheme = useTheme() - const { networks } = useEth2CrawlerApi() + const { networks } = useNodewatchCrawlerApi() const chartData = useMemo( () => diff --git a/src/Components/Modules/SoftwareStats/OperatingSystems.tsx b/src/Components/Modules/SoftwareStats/OperatingSystems.tsx index f5544c7..c0ac8fd 100644 --- a/src/Components/Modules/SoftwareStats/OperatingSystems.tsx +++ b/src/Components/Modules/SoftwareStats/OperatingSystems.tsx @@ -5,7 +5,7 @@ SPDX-License-Identifier: LGPL-3.0-only import React, { useMemo } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { Typography } from "@chainsafe/common-components" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import { ECTheme } from "../../Themes/types" import { BarChart, Bar, Tooltip, XAxis, YAxis, ResponsiveContainer } from "recharts" @@ -34,7 +34,7 @@ const OperatingSystems = () => { const classes = useStyles() const theme: ECTheme = useTheme() - const { operatingSystems } = useEth2CrawlerApi() + const { operatingSystems } = useNodewatchCrawlerApi() const chartData = useMemo( () => diff --git a/src/Components/Modules/SoftwareStats/VersionVariance.tsx b/src/Components/Modules/SoftwareStats/VersionVariance.tsx index e8cf731..8fcf06d 100644 --- a/src/Components/Modules/SoftwareStats/VersionVariance.tsx +++ b/src/Components/Modules/SoftwareStats/VersionVariance.tsx @@ -6,7 +6,7 @@ import React, { useMemo } from "react" import { createStyles, makeStyles, useTheme } from "@chainsafe/common-theme" import { ECTheme } from "../../Themes/types" import { Typography } from "@chainsafe/common-components" -import { useEth2CrawlerApi } from "../../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../../Contexts/NodewatchCrawlerContext" import { BarChart, Bar, Tooltip, XAxis, YAxis, ResponsiveContainer } from "recharts" import { useCallback } from "react" import ToolTipIcon from "../../Elements/Icons/ToolTipIcon" @@ -53,7 +53,7 @@ const VersionVariance = () => { const theme: ECTheme = useTheme() const backgroundColors = Object.values(theme.constants.chartColors) - const { clientVersions } = useEth2CrawlerApi() + const { clientVersions } = useNodewatchCrawlerApi() const sortedClientVersions = useMemo( () => diff --git a/src/Components/Pages/HomePage.tsx b/src/Components/Pages/HomePage.tsx index 5bece15..6a9ef4c 100644 --- a/src/Components/Pages/HomePage.tsx +++ b/src/Components/Pages/HomePage.tsx @@ -9,7 +9,7 @@ import ClientTypes from "../Modules/DemographicsStats/ClientTypes" import HeatMap from "../Modules/HeatMap/MapLeaflet" import NetworkTypes from "../Modules/SoftwareStats/NetworkTypes" import OperatingSystems from "../Modules/SoftwareStats/OperatingSystems" -import { useEth2CrawlerApi } from "../../Contexts/Eth2CrawlerContext" +import { useNodewatchCrawlerApi } from "../../Contexts/NodewatchCrawlerContext" import VersionVariance from "../Modules/SoftwareStats/VersionVariance" import SectionTile from "../Layouts/SectionTile/SectionTile" import CardStat from "../Layouts/SectionTile/CardStat" @@ -68,7 +68,7 @@ const useStyles = makeStyles(({ constants, breakpoints, palette }: ECTheme) => { function HomePage() { const classes = useStyles() - const { nodeStats, nodeRegionalStats } = useEth2CrawlerApi() + const { nodeStats, nodeRegionalStats } = useNodewatchCrawlerApi() return (
diff --git a/src/Contexts/Eth2CrawlerContext.tsx b/src/Contexts/NodewatchCrawlerContext.tsx similarity index 92% rename from src/Contexts/Eth2CrawlerContext.tsx rename to src/Contexts/NodewatchCrawlerContext.tsx index 4f6f8ce..4a9c8a8 100644 --- a/src/Contexts/Eth2CrawlerContext.tsx +++ b/src/Contexts/NodewatchCrawlerContext.tsx @@ -46,11 +46,11 @@ import { } from "../GraphQL/types/GetNodesByCountries" import { GetAltAirUpgradePercentage } from "../GraphQL/types/GetAltAirUpgradePercentage" -type Eth2CrawlerContextProps = { +type NodewatchCrawlerContextProps = { children: React.ReactNode | React.ReactNode[] } -interface IEth2CrawlerContext { +interface INodewatchCrawlerContext { clients: GetClientCounts_aggregateByAgentName[] operatingSystems: GetOperatingSystems_aggregateByOperatingSystem[] networks: GetNetworks_aggregateByNetwork[] @@ -73,12 +73,12 @@ interface IEth2CrawlerContext { isLoadingAltAirPercentage: boolean } -const Eth2CrawlerContext = React.createContext(undefined) +const NodewatchCrawlerContext = React.createContext(undefined) const subgraphUrl = process.env.REACT_APP_GRAPHQL_URL || "" const graphClient = new GraphQLClient(subgraphUrl) -const Eth2CrawlerProvider = ({ children }: Eth2CrawlerContextProps) => { +const NodewatchCrawlerProvider = ({ children }: NodewatchCrawlerContextProps) => { const [nodeStats, setNodeStats] = useState(undefined) const [nodeRegionalStats, setNodeRegionalStats] = useState< GetRegionalStats_getRegionalStats | undefined @@ -194,7 +194,7 @@ const Eth2CrawlerProvider = ({ children }: Eth2CrawlerContextProps) => { }, []) return ( - { }} > {children} - + ) } -const useEth2CrawlerApi = () => { - const context = React.useContext(Eth2CrawlerContext) +const useNodewatchCrawlerApi = () => { + const context = React.useContext(NodewatchCrawlerContext) if (context === undefined) { - throw new Error("useEth2CrawlerApi must be used within a Eth2CrawlerProvider") + throw new Error("useNodewatchCrawlerApi must be used within a NodewatchCrawlerProvider") } return context } -export { Eth2CrawlerProvider, useEth2CrawlerApi } +export { useNodewatchCrawlerApi, NodewatchCrawlerProvider }