helium · mbthiery · Jul 10, 2024 · Jul 15, 2024 · Jul 15, 2024 · Jul 15, 2024
diff --git a/public/connected-devices.png b/public/connected-devices.png
diff --git a/public/connected-dots.png b/public/connected-dots.png
diff --git a/public/hotspot-waves.png b/public/hotspot-waves.png
diff --git a/public/hotspot.png b/public/hotspot.png
diff --git a/public/kuzco-logo.png b/public/kuzco-logo.png
diff --git a/public/latitude.png b/public/latitude.png
diff --git a/public/longitude.png b/public/longitude.png
diff --git a/public/tech-info.png b/public/tech-info.png
diff --git a/src/app/layout.module.css b/src/app/layout.module.css
@@ -0,0 +1,3 @@
+.overall {
+  text-rendering: geometricPrecision;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,13 +1,22 @@
 import { GAScript } from "@/components/GAScript"
 import { GATracker } from "@/components/GATracker"
 import { Header } from "@/components/Header"
-import { HotspotsMap } from "@/components/HotspotsMap"
 import { Providers } from "@/components/Providers"
 import "@/styles/tailwind.css"
 import "focus-visible"
+import { DM_Sans } from "next/font/google"
 import Head from "next/head"
 import { Suspense } from "react"
 import "react-tooltip/dist/react-tooltip.css"
+import styles from "./layout.module.css"
+import { HotspotsMap } from "./new/HotspotsMap"
+import { Nav } from "./new/Nav/Nav"
+
+const dm_sans = DM_Sans({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-dm-sans",
+})
 
 export const metadata = {
   manifest: "/manifest.json",
@@ -55,7 +64,11 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${dm_sans.variable} ${styles.overall}`}
+    >
       <Head>
         <link
           rel="preconnect"
@@ -81,6 +94,7 @@ export default function RootLayout({
             <GATracker />
           </Suspense>
           <Header />
+          <Nav />
           <HotspotsMap>{children}</HotspotsMap>
         </Providers>
       </body>

diff --git a/src/app/new/HotspotsMap/ConnectionPower.tsx b/src/app/new/HotspotsMap/ConnectionPower.tsx
@@ -0,0 +1,29 @@
+import { RssiPill } from "@/components/shared/RssiPill"
+import clsx from "clsx"
+
+export const ConnectionPower = () => {
+  return (
+    <div
+      className={clsx(
+        "absolute bottom-4 right-3 justify-center sm:flex",
+        "sm:bottom-6 sm:right-6 sm:w-auto sm:justify-end"
+      )}
+    >
+      <div className="flex gap-4 rounded-xl bg-[#131313]/60 px-3 py-3 font-sans backdrop-blur">
+        <p className="text-sm text-white opacity-75">Signal Strength</p>
+        <div className="flex items-center gap-2">
+          <RssiPill strength="strong" />
+          <p className="text-sm text-white opacity-75">High</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <RssiPill strength="medium" />
+          <p className="text-sm text-white opacity-75">Medium</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <RssiPill strength="low" />
+          <p className="text-sm text-white opacity-75">Low</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/new/HotspotsMap/HexHotspotItem.tsx b/src/app/new/HotspotsMap/HexHotspotItem.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import { usePreferences } from "@/context/usePreferences"
+import animalHash from "angry-purple-tiger"
+import Link from "next/link"
+import { gaEvent } from "../GATracker"
+import { HeliumIotIcon } from "../icons/HeliumIotIcon"
+import { HeliumMobileIcon } from "../icons/HeliumMobileIcon"
+import { Hotspot } from "./HexHotspots"
+
+type HexHotSpotItemProps = {
+  hotspot: Hotspot
+}
+
+export const HexHotSpotItem = ({ hotspot }: HexHotSpotItemProps) => {
+  const { provider } = usePreferences()
+
+  const hotspotName = animalHash(hotspot.hotspot_id)
+  const hasSmallCells = hotspot.cells.length > 0
+  const Avatar = hasSmallCells ? HeliumMobileIcon : HeliumIotIcon
+  const subtitle = hasSmallCells
+    ? `${hotspot.cells.length} small cell${
+        hotspot.cells.length === 1 ? "" : "s"
+      }`
+    : "IoT Hotspot"
+
+  return (
+    <li key={hotspot.hotspot_id}>
+      <div className="group relative flex items-center px-2 py-3">
+        <Link
+          href={
+            !provider
+              ? `/preferences?redirect=${hotspot.hotspot_id}`
+              : provider.getUrl(hotspot.hotspot_id)
+          }
+          className="-m-1 block flex-1 p-1"
+          target={!!provider ? "_" : "_self"}
+          onClick={() => {
+            if (!!provider) {
+              gaEvent({
+                action: "outbound_click",
+                event: {
+                  description: provider.label,
+                },
+              })
+            }
+          }}
+        >
+          <div
+            className="absolute inset-0 group-hover:bg-zinc-300/30 dark:group-hover:bg-zinc-700/30"
+            aria-hidden="true"
+          />
+          <div className="relative flex min-w-0 flex-1 items-center gap-4">
+            <Avatar className="inline-block h-8 w-8 flex-shrink-0" />
+            <div className="truncate">
+              <p className="truncate text-sm font-medium leading-5 text-gray-900 dark:text-zinc-100">
+                {hotspotName}
+              </p>
+              <p className="truncate text-xs text-gray-600 dark:text-zinc-300">
+                {subtitle}
+              </p>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </li>
+  )
+}
diff --git a/src/app/new/HotspotsMap/HexHotspots.tsx b/src/app/new/HotspotsMap/HexHotspots.tsx
@@ -0,0 +1,113 @@
+import { Tooltip } from "@/app/stats/components/Tooltip"
+import { PreferencesProvider } from "@/context/usePreferences"
+import clsx from "clsx"
+import { HexHotSpotItem } from "./HexHotspotItem"
+
+interface SmallCell {
+  cell_id: string
+}
+
+export interface Hotspot {
+  hotspot_id: string
+  active: boolean
+  cells: SmallCell[]
+}
+
+interface HexData {
+  hex: string
+  resolution: number
+  hotspots: Hotspot[]
+}
+
+const RECENT = "recently rewarded"
+const NOT_RECENT = "not recently rewarded"
+
+const TOOLTIP_DESCRIPTIONS = {
+  [RECENT]: "A Hotspot that has received rewards in the past 30 days.",
+  [NOT_RECENT]:
+    "A Hotspot that has not received rewards in the past 30 days. Such a hotstop is most likely offline. It is also possible for it to be online but not rewarded if it is not transmitting data, not participating in PoC, or only recently online.",
+}
+
+function getGroupedHotspots(hotspots: Hotspot[]) {
+  const groupedHotspots: {
+    [RECENT]: Hotspot[]
+    [NOT_RECENT]: Hotspot[]
+  } = {
+    [RECENT]: [],
+    [NOT_RECENT]: [],
+  }
+
+  hotspots.forEach((hotspot) => {
+    const group = hotspot.active ? RECENT : NOT_RECENT
+    groupedHotspots[group].push(hotspot)
+  })
+
+  return groupedHotspots
+}
+
+export async function HexHotspots({ hexId }: { hexId: string }) {
+  const { hotspots } = (await fetch(
+    `${process.env.NEXT_PUBLIC_HOTSPOTTY_EXPLORER_API_URL}/hex/${hexId}`,
+    {
+      headers: {
+        Authorization: `bearer ${process.env.NEXT_PUBLIC_HOTSPOTTY_EXPLORER_API_TOKEN}`,
+      },
+    }
+  ).then((res) => res.json())) as HexData
+
+  const groupedList = getGroupedHotspots(hotspots)
+
+  if (hotspots.length === 0) {
+    return (
+      <div className="mb-2 text-sm font-medium text-gray-900 dark:text-zinc-200">
+        This hex contains no Hotspots.
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative flex-1 overflow-y-auto">
+      {(Object.keys(groupedList) as Array<keyof typeof groupedList>).map(
+        (group) => {
+          if (groupedList[group].length === 0) return
+          return (
+            <div key={group}>
+              <div
+                className={clsx(
+                  "sticky top-0 z-10 flex items-center justify-between rounded-lg px-2.5 py-1 text-sm font-medium",
+                  "bg-zinc-300/80 text-gray-700",
+                  "dark:bg-zinc-500/50 dark:text-white"
+                )}
+              >
+                <div className="flex gap-2">
+                  <span className="capitalize">{group}</span>
+                  <Tooltip
+                    id={group}
+                    description={TOOLTIP_DESCRIPTIONS[group]}
+                    width="tiny"
+                  />
+                </div>
+                <span className="ml-2 text-xs font-normal">
+                  {groupedList[group].length} Hotspots
+                </span>
+              </div>
+              <PreferencesProvider>
+                <ul
+                  role="list"
+                  className="z-0 flex-1 divide-y divide-gray-200 overflow-y-auto dark:divide-white/10"
+                >
+                  {groupedList[group].map((hotspot) => (
+                    <HexHotSpotItem
+                      key={hotspot.hotspot_id}
+                      hotspot={hotspot}
+                    />
+                  ))}
+                </ul>
+              </PreferencesProvider>
+            </div>
+          )
+        }
+      )}
+    </div>
+  )
+}
diff --git a/src/app/new/HotspotsMap/LoadingHexHotspots.tsx b/src/app/new/HotspotsMap/LoadingHexHotspots.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx"
+
+export function LoadingHexHotspots({ count }: { count: number }) {
+  return (
+    <div>
+      <div
+        className={clsx(
+          "flex items-center justify-between rounded-lg px-6 py-1 text-sm font-medium",
+          "bg-zinc-300/80 text-gray-700",
+          "dark:bg-zinc-500/50 dark:text-white"
+        )}
+      >
+        <span className="capitalize">Active</span>
+      </div>
+      <ul
+        role="list"
+        className="flex-1 divide-y divide-gray-200 overflow-y-auto dark:divide-white/10"
+      >
+        {[...Array(count).keys()].map((i) => (
+          <li key={i}>
+            <div className="group relative flex animate-pulse items-center px-5 py-6">
+              <div className="-m-1 block flex-1 p-1">
+                <div className="relative flex min-w-0 flex-1 items-center gap-4">
+                  <span className="relative inline-block flex-shrink-0">
+                    <div className="h-10 w-10 rounded-full bg-gray-500 dark:bg-gray-700" />
+                  </span>
+                  <div className="flex-1 space-y-6 py-1">
+                    <div className="h-2 rounded bg-gray-500 dark:bg-gray-700" />
+                    <div className="h-2 rounded bg-gray-500 dark:bg-gray-700" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/app/new/HotspotsMap/MapZoom.tsx b/src/app/new/HotspotsMap/MapZoom.tsx
@@ -0,0 +1,64 @@
+import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline"
+import clsx from "clsx"
+import { useEffect, useState } from "react"
+import { useMap } from "react-map-gl"
+import { MAX_MAP_ZOOM, MIN_MAP_ZOOM } from "./utils"
+
+export const MapZoom = () => {
+  const map = useMap()
+  const [_currentZoom, setCurrentZoom] = useState(map.current?.getZoom())
+  const zoom = map.current?.getZoom()
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentZoom(map.current?.getZoom())
+    }, 250)
+    return () => clearInterval(interval)
+  }, [map, setCurrentZoom])
+
+  const isZoomInDisabled = zoom === MAX_MAP_ZOOM
+  const isZoomOutDisabled = zoom === MIN_MAP_ZOOM
+
+  return (
+    <div
+      className={clsx(
+        "absolute flex gap-2",
+        "bottom-[72px] right-4",
+        "sm:right-6 sm:top-24 sm:flex-col",
+        "sm:flex"
+      )}
+    >
+      <button
+        className={clsx(
+          "group flex h-10 w-10 items-center justify-center rounded-xl bg-[#131313]/60 backdrop-blur"
+        )}
+        disabled={isZoomInDisabled}
+        onClick={() => map.current?.zoomIn()}
+      >
+        <PlusIcon
+          className={clsx(
+            "h-8 w-8 rounded-lg stroke-[#DBE0E6] p-1.5 opacity-75 transition group-disabled:stroke-[#64686D]",
+            !isZoomInDisabled &&
+              "group-hover:bg-[#8A8A8A]/20 group-hover:stroke-white group-hover:opacity-100",
+            isZoomOutDisabled && "cursor-not-allowed"
+          )}
+        />
+      </button>
+      <button
+        className={clsx(
+          "group flex h-10 w-10 items-center justify-center rounded-xl bg-[#131313]/60 backdrop-blur"
+        )}
+        disabled={isZoomOutDisabled}
+        onClick={() => map.current?.zoomOut()}
+      >
+        <MinusIcon
+          className={clsx(
+            "h-8 w-8 rounded-lg stroke-[#DBE0E6] p-1.5 opacity-75 transition group-disabled:stroke-[#64686D]",
+            !isZoomOutDisabled &&
+              "group-hover:bg-[#8A8A8A]/20 group-hover:stroke-white group-hover:opacity-100",
+            isZoomOutDisabled && "cursor-not-allowed"
+          )}
+        />
+      </button>
+    </div>
+  )
+}