various chain refactors

.github/workflows/test.yaml

@@ -88,7 +88,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Build stateful and export
-        run: pnpm build && pnpm export
+        run: NEXT_PUBLIC_CHAIN_NAME=holesky && pnpm build && pnpm export
 
       - name: Tar stateful files
         run: tar -cvf stateful-build.tar out

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.123",
   "scripts": {
     "dev": "NODE_NO_WARNINGS=1 next dev",
+    "dev:holesky": "NEXT_PUBLIC_CHAIN_NAME=holesky pnpm dev",
+    "dev:sepolia": "NEXT_PUBLIC_CHAIN_NAME=sepolia pnpm dev",
     "dev:https": "next dev --experimental-https --port 443",
     "dev:nlocal": "NEXT_PUBLIC_PROVIDER=http://localhost:8545 NEXT_PUBLIC_AVUP_ENDPOINT=http://localhost:8787 pnpm dev",
     "dev:localname": "NEXT_PUBLIC_PROVIDER=\"http://$(\"hostname\"):8545\" && NEXT_PUBLIC_AVUP_ENDPOINT=\"http://$(\"hostname\"):8787\" && NEXT_PUBLIC_GRAPH_URI=\"http://$(\"hostname\"):8000/subgraphs/name/graphprotocol/ens\" && pnpm dev",

src/components/@molecules/NetworkNotifications/NetworkNotifications.tsx

@@ -6,9 +6,8 @@ import { Button, Toast } from '@ensdomains/thorin'
 
 import { shouldOpenModal } from './utils'
 import { useChainId } from 'wagmi'
-import { useAccountSafely } from '@app/hooks/account/useAccountSafely'
 import { useRouter } from 'next/router'
-
+import { getSupportedChainById } from '@app/constants/chains'
 const appLinks = {
   Ethereum: 'app.ens.domains',
   Sepolia: 'sepolia.app.ens.domains',
@@ -19,33 +18,29 @@ const appLinks = {
 export const NetworkNotifications = () => {
   const { t } = useTranslation()
   const account = useAccount()
+  const connectedChainId = useChainId()
   const router = useRouter()
   const [open, setOpen] = useState<boolean>(false)
 
-  const connectedChainName = account?.chain?.name
-  const connectedChainId = account?.chain?.id
-
-  const chain = useChainId()
-
-  console.log('account', account)
-  console.log('connectedChainName', connectedChainName, chain)
+  const accountChainId = account?.chainId
 
   useEffect(() => {
-    setOpen(shouldOpenModal(connectedChainName, connectedChainId))
-  }, [connectedChainName, connectedChainId])
+    setOpen(shouldOpenModal(connectedChainId, accountChainId))
+  }, [connectedChainId, accountChainId])
 
-  if (!connectedChainName || !router.isReady) return null
+  const accountChainName = getSupportedChainById(accountChainId)?.name
+  if (!accountChainName) return null
 
   return (
     <Toast
-      description={t(`networkNotifications.${connectedChainName}.description`)}
+      description={t(`networkNotifications.${accountChainName}.description`)}
       open={open}
-      title={t(`networkNotifications.${connectedChainName}.title`)}
+      title={t(`networkNotifications.${accountChainName}.title`)}
       variant="desktop"
       onClose={() => setOpen(false)}
     >
-      <Button size="small" as="a" href={`https://${appLinks[connectedChainName]}`}>
-        {t(`networkNotifications.${connectedChainName}.action`)}
+      <Button size="small" as="a" href={`https://${appLinks[accountChainName]}`}>
+        {t(`networkNotifications.${accountChainName}.action`)}
       </Button>
     </Toast>
   )

src/components/@molecules/NetworkNotifications/utils.ts

@@ -1,21 +1,10 @@
-import { getChainsFromUrl, getSupportedChainById } from '@app/constants/chains'
+import { getSupportedChainById } from '@app/constants/chains'
 
 export const shouldOpenModal = (
-  connectedChainName: string | undefined,
-  connectedChainId: number | undefined,
+  connectedChainName: number | undefined,
+  accountChainId: number | undefined,
 ): boolean => {
-  if (!connectedChainName) return false
-  if (!getSupportedChainById(connectedChainId)) return false
-
-  const currentChain = getChainsFromUrl()?.[0]
-  if (!currentChain?.id) return false
-
-  if (currentChain?.id === connectedChainId) {
-    return false
-  }
-  if (currentChain?.id !== connectedChainId) {
-    return true
-  }
-
-  return false
+  if (!connectedChainName || !accountChainId) return false
+  if (!getSupportedChainById(accountChainId)) return false
+  return connectedChainName !== accountChainId
 }

src/constants/chains.ts

@@ -59,48 +59,39 @@ export const getChainsFromUrl = () => {
 
   const { hostname, search } = window.location
   const params = new URLSearchParams(search)
-  const chainParam = params.get('chain')
   const segments = hostname.split('.')
 
+
+  // Chain override
+  const chain = process.env.NEXT_PUBLIC_CHAIN_NAME
+  if (chain === 'holesky') return [holeskyWithEns]
+  if (chain === 'sepolia') return [sepoliaWithEns]
+
+  // Previews
   if (segments.length === 4) {
+    /* Used for testing preview on mainnet at: test.app.ens.domains. Update by configuring dns */
     if (segments[0] === 'test') {
-      return [mainnetWithEns, holeskyWithEns, sepoliaWithEns]
+      return [mainnetWithEns]
     }
     if (segments.slice(1).join('.') === 'ens-app-v3.pages.dev') {
-      return [sepoliaWithEns, mainnetWithEns, holeskyWithEns]
+      return [holeskyWithEns]
     }
   }
 
+  // Dev environment
   if (hostname === 'localhost' || hostname === '127.0.0.1') {
-    if (chainParam) {
-      if (chainParam === 'holesky') return [holeskyWithEns, sepoliaWithEns, mainnetWithEns]
-      if (chainParam === 'sepolia') return [sepoliaWithEns, mainnetWithEns, holeskyWithEns]
-    }
-    return [
-      ...(isLocalProvider ? ([localhostWithEns] as const) : ([] as const)),
-      holeskyWithEns,
-      mainnetWithEns,
-      sepoliaWithEns,
-    ]
+    if (isLocalProvider) return [localhostWithEns]
+    return [mainnetWithEns]
   }
 
   return match(segments[0])
     .with('sepolia', () => [
-      ...(isLocalProvider ? ([localhostWithEns] as const) : ([] as const)),
       sepoliaWithEns,
-      mainnetWithEns,
-      holeskyWithEns,
     ])
     .with('holesky', () => [
-      ...(isLocalProvider ? ([localhostWithEns] as const) : ([] as const)),
       holeskyWithEns,
-      sepoliaWithEns,
-      mainnetWithEns,
     ])
     .otherwise(() => [
-      ...(isLocalProvider ? ([localhostWithEns] as const) : ([] as const)),
       mainnetWithEns,
-      holeskyWithEns,
-      sepoliaWithEns,
     ])
 }