ChainSafe · Spacesai1or · Sep 21, 2022 · Oct 4, 2022 · Oct 4, 2022 · Oct 4, 2022
diff --git 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
@@ -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
@@ -9,7 +9,7 @@
     <link rel="icon" href="%PUBLIC_URL%/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Nodewatch - Eth2 Node Analytics" />
+    <meta name="description" content="Nodewatch - Ethereum Consensus Node Analytics" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- leaflet css -->
     <link
@@ -18,7 +18,7 @@
       integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
       crossorigin=""
     />
-    <title>Nodewatch - Eth2 Node Analytics</title>
+    <title>Nodewatch - Ethereum Consensus Node Analytics</title>
   </head>
 
   <body>

diff --git 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
@@ -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,16 +22,16 @@ const useStyles = makeStyles(() => {
 function App() {
   const classes = useStyles()
   return (
-    <ThemeSwitcher storageKey="eth2.themeKey" themes={{ light: theme }}>
-      <Eth2CrawlerProvider>
+    <ThemeSwitcher storageKey="Nodewatch.themeKey" themes={{ light: theme }}>
+      <NodewatchCrawlerProvider>
         <div className={classes.root}>
           <NavBar />
           <BodyLayout>
             <HomePage />
           </BodyLayout>
           <Footer />
         </div>
-      </Eth2CrawlerProvider>
+      </NodewatchCrawlerProvider>
     </ThemeSwitcher>
   )
 }

diff --git 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
@@ -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
@@ -30,15 +30,15 @@ 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,
         backgroundColor: theme.palette.primary.background,
         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 (
     <div className={classes.root}>
       <Typography component="p" variant="body1" className={classes.title}>
-        node count eth1 and eth2
+        node count ethereum execution and ethereum consensus
       </Typography>
       <div>
         <Line data={data} options={options} />

diff --git 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
@@ -46,7 +46,7 @@ const NavBar: React.FC = () => {
       <div className={classes.box}>
         <Typography variant="h5">
           <a href="/" className={classes.navLink}>
-            Eth2 Nodewatch
+            Ethereum Consensus Nodewatch
           </a>
         </Typography>
         <Typography variant="h5">

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <div className={classes.root}>

diff --git a/src/Contexts/Eth2CrawlerContext.tsx → src/Contexts/NodewatchCrawlerContext.tsx b/src/Contexts/Eth2CrawlerContext.tsx → 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<IEth2CrawlerContext | undefined>(undefined)
+const NodewatchCrawlerContext = React.createContext<INodewatchCrawlerContext | undefined>(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<GetNodeStats_getNodeStats | undefined>(undefined)
   const [nodeRegionalStats, setNodeRegionalStats] = useState<
     GetRegionalStats_getRegionalStats | undefined
@@ -194,7 +194,7 @@ const Eth2CrawlerProvider = ({ children }: Eth2CrawlerContextProps) => {
   }, [])
 
   return (
-    <Eth2CrawlerContext.Provider
+    <NodewatchCrawlerContext.Provider
       value={{
         nodeStats,
         nodeStatsOverTime,
@@ -219,16 +219,16 @@ const Eth2CrawlerProvider = ({ children }: Eth2CrawlerContextProps) => {
       }}
     >
       {children}
-    </Eth2CrawlerContext.Provider>
+    </NodewatchCrawlerContext.Provider>
   )
 }
 
-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 }