From 6423d17269b094bbeefdeabec70261fac4b7d0c7 Mon Sep 17 00:00:00 2001
From: mbthiery <mbthiery@gmail.com>
Date: Tue, 10 Oct 2023 15:09:50 -0400
Subject: [PATCH 1/3] Add Relay as provider

---
 src/app/preferences/components/ProviderList.tsx |  9 ++++++++-
 src/components/icons/MokenIcon.tsx              |  2 +-
 src/components/icons/RelayIcon.tsx              | 17 +++++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/components/icons/RelayIcon.tsx

diff --git a/src/app/preferences/components/ProviderList.tsx b/src/app/preferences/components/ProviderList.tsx
index 4dedd47..df6349b 100644
--- a/src/app/preferences/components/ProviderList.tsx
+++ b/src/app/preferences/components/ProviderList.tsx
@@ -3,6 +3,7 @@
 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"
@@ -21,11 +22,17 @@ 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 PROVIDER_KEY = "provider"
diff --git a/src/components/icons/MokenIcon.tsx b/src/components/icons/MokenIcon.tsx
index 311494a..a9698b8 100644
--- a/src/components/icons/MokenIcon.tsx
+++ b/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"
diff --git a/src/components/icons/RelayIcon.tsx b/src/components/icons/RelayIcon.tsx
new file mode 100644
index 0000000..865920d
--- /dev/null
+++ b/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>
+  )
+}

From b9575064ea6fa8674a42f873287355f33c577051 Mon Sep 17 00:00:00 2001
From: mbthiery <mbthiery@gmail.com>
Date: Tue, 10 Oct 2023 17:07:41 -0400
Subject: [PATCH 2/3] Shuffle provider list

---
 .../preferences/components/ProviderList.tsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/preferences/components/ProviderList.tsx b/src/app/preferences/components/ProviderList.tsx
index df6349b..4c475a5 100644
--- a/src/app/preferences/components/ProviderList.tsx
+++ b/src/app/preferences/components/ProviderList.tsx
@@ -7,6 +7,7 @@ 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
@@ -35,6 +36,19 @@ export const PROVIDERS: Provider[] = [
   },
 ]
 
+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"
@@ -44,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 (

From 3744f2d61b9a6a63e1a4c58d20b61cd9b60e2775 Mon Sep 17 00:00:00 2001
From: mbthiery <mbthiery@gmail.com>
Date: Wed, 25 Oct 2023 17:11:00 -0400
Subject: [PATCH 3/3] Add ability to reset provider preference

---
 src/context/usePreferences.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/context/usePreferences.tsx b/src/context/usePreferences.tsx
index 66058a0..c894f2e 100644
--- a/src/context/usePreferences.tsx
+++ b/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(