Add Relay as provider

src/app/preferences/components/ProviderList.tsx

@@ -3,9 +3,11 @@
 import { gaEvent } from "@/components/GATracker"
 import { HotspottyIcon } from "@/components/icons/HotspottyIcon"
 import { MokenIcon } from "@/components/icons/MokenIcon"
+import { RelayIcon } from "@/components/icons/RelayIcon"
 import { usePreferences } from "@/context/usePreferences"
 import clsx from "clsx"
 import { useSearchParams } from "next/navigation"
+import { useMemo } from "react"
 
 export type Provider = {
   Icon: JSX.Element
@@ -21,13 +23,32 @@ export const PROVIDERS: Provider[] = [
       `https://app.hotspotty.net/hotspots/${hotspotId}/rewards`,
   },
   {
-    Icon: <MokenIcon className="h-6 w-6 text-[#9546ea]" />,
+    Icon: <MokenIcon />,
     label: "Moken",
     getUrl: (hotspotId: string) =>
       `https://explorer.moken.io/hotspots/${hotspotId}`,
   },
+  {
+    Icon: <RelayIcon />,
+    label: "Relay",
+    getUrl: (hotspotId: string) =>
+      `https://explorer.relaywireless.com/hotspots/${hotspotId}`,
+  },
 ]
 
+const shuffle = <T,>(arr: T[]) => {
+  let i = arr.length,
+    j,
+    temp
+  while (--i > 0) {
+    j = Math.floor(Math.random() * (i + 1))
+    temp = arr[j]
+    arr[j] = arr[i]
+    arr[i] = temp
+  }
+  return arr
+}
+
 const PROVIDER_KEY = "provider"
 const DEFAULT_HOTSPOT_KEY =
   "112Y5Vn5wzsreeyCijSEiBWHJekJPJCELvvm9615GvVGWKfu99Ta"
@@ -37,9 +58,11 @@ export const ProviderList = () => {
   const searchParams = useSearchParams()
   const hotspotKey = searchParams.get("redirect") || DEFAULT_HOTSPOT_KEY
 
+  const providers = useMemo(() => shuffle(PROVIDERS), [])
+
   return (
     <div className="flex-col gap-2 gap-y-4 pl-2">
-      {PROVIDERS.map((providerItem) => {
+      {providers.map((providerItem) => {
         const { label, Icon } = providerItem
         const active = provider?.label === label
         return (

src/components/icons/MokenIcon.tsx

@@ -1,4 +1,4 @@
-export function MokenIcon(props: { className?: string }) {
+export const MokenIcon = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/components/icons/RelayIcon.tsx

@@ -0,0 +1,17 @@
+export const RelayIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 256 256"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="256" height="256" rx="64" fill="#3A63F0" />
+      <path
+        d="M73 195.894H102.492V147.721H124.015L150.443 195.894H183L153.372 143.076C169.242 136.44 178.028 122.97 178.028 104.391C178.028 77.3849 159.706 60 128.034 60H73V195.894ZM102.492 124.629V83.4895H122.381C139.409 83.4895 147.65 90.8549 147.65 104.391C147.65 117.861 139.409 124.629 122.517 124.629H102.492Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

src/context/usePreferences.tsx

@@ -5,6 +5,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useState,
 } from "react"
 
@@ -17,15 +18,32 @@ const PreferencesContext = createContext<PreferencesContext>({
   provider: undefined,
   setProvider: () => undefined,
 })
+
 const PROVIDER_KEY = "provider"
+const VERSION_KEY = "version"
+// change version to reset provider preference
+const VERSION = "3"
 
-const getProvider = (providerLabel: string) => {
+const getProvider = (providerLabel?: string) => {
   return PROVIDERS.find((provider) => provider.label === providerLabel)
 }
 
+const getLocalValue = (key: string) => {
+  if (!window) return undefined
+  return localStorage.getItem(key)
+}
+
 export const PreferencesProvider = ({ children }: PropsWithChildren) => {
+  const localVersion = getLocalValue(VERSION_KEY)
+
+  useEffect(() => {
+    if (!!window) localStorage?.setItem(VERSION_KEY, VERSION)
+  }, [])
+
   const [provider, setProvider] = useState(
-    !!window ? getProvider(localStorage.getItem(PROVIDER_KEY) || "") : undefined
+    localVersion === VERSION
+      ? getProvider(getLocalValue(PROVIDER_KEY) || "")
+      : undefined
   )
 
   const setProviderCB = useCallback(