Subdao reorg (#1005)

Co-authored-by: Tyler Whitman <twhit093@gmail.com>
helium · Aug 11, 2022 · e0a70af · e0a70af
1 parent e4a642c
commit e0a70af
Show file tree

Hide file tree

Showing 33 changed files with 540 additions and 221 deletions.
diff --git a/components/InfoBox/AccountDetailsInfoBox.js b/components/InfoBox/AccountDetailsInfoBox.js
@@ -56,7 +56,7 @@ const AccountDetailsInfoBox = () => {
       subtitles={subtitles}
       breadcrumbs={
         maker
-          ? [{ title: 'Makers', path: '/hotspots/makers' }]
+          ? [{ title: 'Makers', path: '/iot/makers' }]
           : [{ title: 'Overview', path: '/' }]
       }
     >

diff --git a/components/InfoBox/BlocksInfoPanes/BlockStatisticsPane.js b/components/InfoBox/BlocksInfoPanes/BlockStatisticsPane.js
@@ -7,7 +7,7 @@ import { useState, useEffect } from 'react'
 import ElectionTimeWidget from '../../Widgets/ElectionTimeWidget'
 
 const BlockStatisticsPane = () => {
-  let { data: blocks } = useApi('/metrics/blocks')
+  const { data: blocks } = useApi('/metrics/blocks')
 
   const [processingData, setProcessingData] = useState(true)
   const [blockTimeDay, setBlockTimeDay] = useState()

diff --git a/components/InfoBox/Hotspots/MakersPane.js → components/InfoBox/Common/MakersPane.js b/components/InfoBox/Hotspots/MakersPane.js → components/InfoBox/Common/MakersPane.js
@@ -7,8 +7,8 @@ import LocationIcon from '../../Icons/Location'
 import { Tooltip } from 'antd'
 import { useMakers } from '../../../data/makers'
 
-const MakersPane = () => {
-  const { makers } = useMakers()
+const MakersPane = ({ type = 'lorawan' }) => {
+  const { makers } = useMakers({ type })
 
   const keyExtractor = useCallback((maker) => maker.address, [])
 

diff --git a/components/InfoBox/HotspotDetailsInfoBox.js b/components/InfoBox/HotspotDetailsInfoBox.js
@@ -171,9 +171,9 @@ const HotspotDetailsInfoBox = ({ address, isLoading, hotspot }) => {
   )
 
   const generateBreadcrumbs = (hotspot) => {
-    if (!hotspot) return [{ title: 'Hotspots', path: '/hotspots' }]
+    if (!hotspot) return [{ title: 'IOT', path: '/iot' }]
     return [
-      { title: 'Hotspots', path: '/hotspots/latest' },
+      { title: 'IOT', path: '/iot' },
       ...(hotspot.location
         ? // if the hotspot has a location, show breadcrumbs for it
           [
@@ -192,7 +192,7 @@ const HotspotDetailsInfoBox = ({ address, isLoading, hotspot }) => {
                   <HexIndex index={hotspot.location} />
                 </div>
               ),
-              path: `/hotspots/hex/${hotspot.location}`,
+              path: `/iot/hex/${hotspot.location}`,
             },
           ]
         : []),
@@ -256,7 +256,12 @@ const HotspotDetailsInfoBox = ({ address, isLoading, hotspot }) => {
           title="5G Statistics"
           key="5g-statistics"
           path="5g-statistics"
-          hidden={!(maker?.id === MAKER_IDS.FREEDOM_FI || maker?.id === MAKER_IDS.BOBCAT_5G)}
+          hidden={
+            !(
+              maker?.id === MAKER_IDS.FREEDOM_FI ||
+              maker?.id === MAKER_IDS.BOBCAT_5G
+            )
+          }
         >
           {isLoading ? (
             <SkeletonWidgets />

diff --git a/components/InfoBox/HotspotsInfoBox.js b/components/InfoBox/HotspotsInfoBox.js
diff --git a/components/InfoBox/InfoBoxSwitch.js b/components/InfoBox/InfoBoxSwitch.js
@@ -1,6 +1,6 @@
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route, Redirect } from 'react-router-dom'
 import OverviewInfoBox from './OverviewInfoBox'
-import HotspotsInfoBox from './HotspotsInfoBox'
+import IotInfoBox from './Iot/IotInfoBox'
 import HotspotDetailsInfoBox from './HotspotDetailsInfoBox'
 import ValidatorsInfoBox from './ValidatorsInfoBox'
 import BlocksInfoBox from './BlocksInfoBox'
@@ -15,24 +15,28 @@ import MarketInfoBox from './MarketInfoBox'
 import CommunityToolsInfoBox from './CommunityTools/CommunityToolsInfoBox'
 import ErrorInfoBox from './ErrorInfoBox'
 import CityDetailsInfoBox from './CityDetailsInfoBox'
+import MobileInfoBox from './Mobile/MobileInfoBox'
 
 const InfoBoxSwitch = () => {
   // Match locales with regular expression containing each locale separated by `|`
   const base = '/:locale(en|fr)?'
 
   return (
     <Switch>
-      <Route path={`${base}/hotspots/hex/:index([a-z0-9]{15})`}>
+      <Route path={`${base}/iot/hex/:index([a-z0-9]{15})`}>
         <HexDetailsInfoBox />
       </Route>
       <Route path={`${base}/hotspots/:address([a-zA-Z0-9]{40,})`}>
         <HotspotDetailsInfoBox />
       </Route>
-      <Route path={`${base}/hotspots/cities/:cityid`}>
+      <Route path={`${base}/iot/cities/:cityid`}>
         <CityDetailsInfoBox />
       </Route>
-      <Route path={`${base}/hotspots`}>
-        <HotspotsInfoBox />
+      <Route path={`${base}/iot`}>
+        <IotInfoBox />
+      </Route>
+      <Route path={`${base}/mobile`}>
+        <MobileInfoBox />
       </Route>
       <Route path={`${base}/accounts/:address([a-zA-Z0-9]{40,})`}>
         <AccountDetailsInfoBox />

diff --git a/...ts/InfoBox/Hotspots/CellStatisticsPane.js → components/InfoBox/Iot/CellStatisticsPane.js b/...ts/InfoBox/Hotspots/CellStatisticsPane.js → components/InfoBox/Iot/CellStatisticsPane.js
@@ -8,11 +8,7 @@ const CellStatisticsPane = () => {
 
   return (
     <InfoBoxPaneContainer>
-      <TrendWidget
-        title="5G Hotspots"
-        series={stats?.count}
-        isLoading={!stats}
-      />
+      <TrendWidget title="5G Radios" series={stats?.count} isLoading={!stats} />
       <StatWidget
         title="Indoor Radios"
         series={stats?.indoorCount}

diff --git a/components/InfoBox/Iot/IotInfoBox.js b/components/InfoBox/Iot/IotInfoBox.js
@@ -0,0 +1,33 @@
+import { useEffect } from 'react'
+import InfoBox from '../InfoBox'
+import TabNavbar, { TabPane } from '../../Nav/TabNavbar'
+import StatisticsPane from './StatisticsPane'
+import MakersPane from '../Common/MakersPane'
+import TopCitiesPane from './TopCitiesPane'
+import useMapLayer from '../../../hooks/useMapLayer'
+
+const IotInfoBox = () => {
+  const { setMapLayer } = useMapLayer()
+
+  useEffect(() => {
+    setMapLayer('default')
+  }, [setMapLayer])
+
+  return (
+    <InfoBox title="IOT (Coming Soon)" metaTitle="IOT">
+      <TabNavbar htmlTitleRoot="IOT">
+        <TabPane title="Statistics" key="statistics">
+          <StatisticsPane />
+        </TabPane>
+        <TabPane title="Makers" key="makers" path="makers">
+          <MakersPane />
+        </TabPane>
+        <TabPane title="Cities" key="latest" path="cities">
+          <TopCitiesPane />
+        </TabPane>
+      </TabNavbar>
+    </InfoBox>
+  )
+}
+
+export default IotInfoBox
diff --git a/...ts/InfoBox/Hotspots/LatestHotspotsPane.js → components/InfoBox/Iot/LatestHotspotsPane.js b/...ts/InfoBox/Hotspots/LatestHotspotsPane.js → components/InfoBox/Iot/LatestHotspotsPane.js
diff --git a/...onents/InfoBox/Hotspots/StatisticsPane.js → components/InfoBox/Iot/StatisticsPane.js b/...onents/InfoBox/Hotspots/StatisticsPane.js → components/InfoBox/Iot/StatisticsPane.js
@@ -7,11 +7,14 @@ import useApi from '../../../hooks/useApi'
 import InfoBoxPaneContainer from '../Common/InfoBoxPaneContainer'
 import Widget from '../../Widgets/Widget'
 import { maxBy, last } from 'lodash'
+import { useDataCredits } from '../../../data/datacredits'
+import LargeBalance from '../../Common/LargeBalance'
 
 const StatisticsPane = () => {
   const { data: stats } = useApi('/metrics/hotspots')
   const { data: makers } = useApi('/makers')
   const { latestHotspots } = useLatestHotspots()
+  const { dataCredits } = useDataCredits()
 
   const latestHotspot = useMemo(() => {
     if (!latestHotspots) return null
@@ -41,6 +44,16 @@ const StatisticsPane = () => {
         series={stats?.dataOnlyCount}
         isLoading={!stats}
       />
+      <Widget
+        title="Packets Sent (24h)"
+        value={<LargeBalance value={dataCredits?.lastDay?.stateChannel} />}
+        isLoading={!dataCredits}
+      />
+      <Widget
+        title="Packets Sent (30d)"
+        value={<LargeBalance value={dataCredits?.lastMonth?.stateChannel} />}
+        isLoading={!dataCredits}
+      />
       <StatWidget
         title="% Online"
         series={stats?.onlinePct}
@@ -53,7 +66,7 @@ const StatisticsPane = () => {
         value={makers?.length}
         subtitle={`Latest: ${maxBy(makers, 'id')?.name}`}
         isLoading={!makers}
-        linkTo="/hotspots/makers"
+        linkTo="/iot/makers"
       />
       <StatWidget
         title="Cities"

diff --git a/components/InfoBox/Hotspots/TopCitiesPane.js → components/InfoBox/Iot/TopCitiesPane.js b/components/InfoBox/Hotspots/TopCitiesPane.js → components/InfoBox/Iot/TopCitiesPane.js
@@ -17,10 +17,7 @@ const TopCitiesPane = () => {
 
   const keyExtractor = useCallback((city) => city.cityId, [])
 
-  const linkExtractor = useCallback(
-    (city) => `/hotspots/cities/${city.cityId}`,
-    [],
-  )
+  const linkExtractor = useCallback((city) => `/iot/cities/${city.cityId}`, [])
 
   const renderItem = useCallback((city) => {
     const cityTitle = city?.longCity ? city.longCity : city.longState

diff --git a/components/InfoBox/MarketInfoBox.js b/components/InfoBox/MarketInfoBox.js
@@ -45,16 +45,38 @@ const MarketInfoBox = () => {
               isLoading={!oraclePrices}
             />
             <Widget
-              title="Market Price"
-              tooltip={<span>Based on data provided by <a target="_blank" rel="noreferrer" href="https://www.coingecko.com/en/coins/helium">CoinGecko</a></span>}
+              title="HNT Market Price"
+              tooltip={
+                <span>
+                  Based on data provided by{' '}
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://www.coingecko.com/en/coins/helium"
+                  >
+                    CoinGecko
+                  </a>
+                </span>
+              }
               value={<Currency value={market?.price} />}
               change={round(market?.priceChange, 2)}
               changeSuffix="%"
               isLoading={!market}
             />
             <Widget
-              title="Market Cap"
-              tooltip={<span>Based on data provided by <a target="_blank" rel="noreferrer" href="https://www.coingecko.com/en/coins/helium">CoinGecko</a></span>}
+              title="HNT Market Cap"
+              tooltip={
+                <span>
+                  Based on data provided by{' '}
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://www.coingecko.com/en/coins/helium"
+                  >
+                    CoinGecko
+                  </a>
+                </span>
+              }
               value={
                 <Currency
                   value={market?.price * stats?.circulatingSupply}

diff --git a/components/InfoBox/Mobile/MobileInfoBox.js b/components/InfoBox/Mobile/MobileInfoBox.js
@@ -0,0 +1,29 @@
+import { useEffect } from 'react'
+import InfoBox from '../InfoBox'
+import TabNavbar, { TabPane } from '../../Nav/TabNavbar'
+import StatisticsPane from './StatisticsPane'
+import useMapLayer from '../../../hooks/useMapLayer'
+import MakersPane from '../Common/MakersPane'
+
+const MobileInfoBox = () => {
+  const { setMapLayer } = useMapLayer()
+
+  useEffect(() => {
+    setMapLayer('cbrs')
+  }, [setMapLayer])
+
+  return (
+    <InfoBox title="MOBILE" metaTitle="MOBILE">
+      <TabNavbar htmlTitleRoot="MOBILE">
+        <TabPane title="Statistics" key="statistics">
+          <StatisticsPane />
+        </TabPane>
+        <TabPane title="Makers" key="makers" path="makers">
+          <MakersPane type="5g" />
+        </TabPane>
+      </TabNavbar>
+    </InfoBox>
+  )
+}
+
+export default MobileInfoBox
diff --git a/components/InfoBox/Mobile/StatisticsPane.js b/components/InfoBox/Mobile/StatisticsPane.js
@@ -0,0 +1,36 @@
+import TrendWidget from '../../Widgets/TrendWidget'
+import useApi from '../../../hooks/useApi'
+import InfoBoxPaneContainer from '../Common/InfoBoxPaneContainer'
+import StatWidget from '../../Widgets/StatWidget'
+
+const StatisticsPane = () => {
+  const { data: stats } = useApi('/metrics/cells')
+
+  return (
+    <InfoBoxPaneContainer>
+      <TrendWidget title="5G Radios" series={stats?.count} isLoading={!stats} />
+      <StatWidget
+        title="Indoor Radios"
+        series={stats?.indoorCount}
+        isLoading={!stats}
+      />
+      <StatWidget
+        title="Outdoor Radios"
+        series={stats?.outdoorCount}
+        isLoading={!stats}
+      />
+      <StatWidget
+        title="Cities"
+        series={stats?.citiesCount}
+        isLoading={!stats}
+      />
+      <StatWidget
+        title="States"
+        series={stats?.statesCount}
+        isLoading={!stats}
+      />
+    </InfoBoxPaneContainer>
+  )
+}
+
+export default StatisticsPane