new network hook

components/MangoProvider.tsx

@@ -5,8 +5,8 @@ import { useRouter } from 'next/router'
 import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useInterval from './shared/useInterval'
-import { isNetworkSlow } from 'utils'
 import { SECONDS } from 'utils/constants'
+import useNetworkSpeed from 'hooks/useNetworkSpeed'
 
 const set = mangoStore.getState().set
 const actions = mangoStore.getState().actions
@@ -16,7 +16,7 @@ const HydrateStore = () => {
   const { name: marketName } = router.query
   const { mangoAccountPk, mangoAccountAddress } = useMangoAccount()
   const connection = mangoStore((s) => s.connection)
-  const slowNetwork = isNetworkSlow()
+  const slowNetwork = useNetworkSpeed()
 
   useEffect(() => {
     if (marketName && typeof marketName === 'string') {

hooks/useNetworkSpeed.tsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react'
+import isNetworkSlow from 'utils/network'
+
+export default function useNetworkSpeed() {
+  const [slowNetwork, setSlowNetwork] = useState(true)
+
+  useEffect(() => {
+    setSlowNetwork(isNetworkSlow())
+  }, [])
+
+  return slowNetwork
+}

utils/index.ts

@@ -44,18 +44,3 @@ export const copyToClipboard = (copyThis: string) => {
   document.execCommand('copy')
   document.body.removeChild(el)
 }
-
-export function getNetworkInfo() {
-  const connection =
-    (navigator as any).connection ||
-    (navigator as any).mozConnection ||
-    (navigator as any).webkitConnection
-  if (connection) {
-    return connection.effectiveType
-  }
-  return 'unknown'
-}
-
-export function isNetworkSlow() {
-  return ['slow-2g', '2g', '3g'].includes(getNetworkInfo()) ? true : false
-}

utils/network.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function getNetworkInfo() {
+  const connection =
+    (navigator as any).connection ||
+    (navigator as any).mozConnection ||
+    (navigator as any).webkitConnection
+  if (connection) {
+    return connection.effectiveType
+  }
+  return 'unknown'
+}
+
+export default function isNetworkSlow() {
+  return ['slow-2g', '2g', '3g'].includes(getNetworkInfo()) ? true : false
+}