Merge pull request #201 from Consensys/fix/CZK-842-network-prompt-reg…

…istration

fix: redirect user to the right registration page when baseDomain does not match network selected

packages/linea-ens-app/src/hooks/useDomainRedirect.ts

@@ -0,0 +1,38 @@
+import { useRouter } from 'next/router'
+import { Chain } from 'viem'
+
+import { getBaseDomain } from '@app/constants/chains'
+
+interface UseDomainRedirectProps {
+  chain?: Chain
+  nameDetails: {
+    name: string
+  }
+  isLoading: boolean
+  route: string
+}
+
+export function useDomainRedirect({
+  chain,
+  nameDetails,
+  isLoading,
+  route,
+}: UseDomainRedirectProps) {
+  const router = useRouter()
+
+  if (!isLoading) {
+    const baseDomain = getBaseDomain(chain)
+    const nameSplit = nameDetails.name.split('.')
+
+    if (nameSplit.length > 2) {
+      // Handle names like name.baseDomain.eth
+      const label = nameSplit.slice(0, -2).join('.')
+      const domain = nameSplit[1]
+
+      if (domain !== baseDomain) {
+        const fixedName = `${label}.${baseDomain}.eth`
+        router.push(`/${fixedName}/${route}`)
+      }
+    }
+  }
+}

packages/linea-ens-app/src/layouts/Basic.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useErrorBoundary, withErrorBoundary } from 'react-use-error-boundary'
 import styled, { css } from 'styled-components'
-import { useAccount, useSwitchChain } from 'wagmi'
+import { useAccount } from 'wagmi'
 
 import { mq } from '@ensdomains/thorin'
 
@@ -61,17 +61,15 @@ export const StyledFeedbackSVG = styled(FeedbackSVG)(() => css``)
 
 export const Basic = withErrorBoundary(({ children }: { children: React.ReactNode }) => {
   const { chainId, isConnected } = useAccount()
-  const { switchChain } = useSwitchChain()
 
   const router = useRouterWithHistory()
   const [error] = useErrorBoundary()
 
   useEffect(() => {
     if (isConnected && !getSupportedChainById(chainId)) {
-      switchChain({ chainId: 59141 })
       router.push('/unsupportedNetwork')
     }
-  }, [isConnected, chainId, switchChain, router])
+  }, [isConnected, chainId, router])
 
   return (
     <Container className="min-safe">

packages/linea-ens-app/src/pages/profile.tsx

@@ -3,6 +3,7 @@ import { useAccount } from 'wagmi'
 
 import ProfileContent from '@app/components/pages/profile/[name]/Profile'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
+import { useDomainRedirect } from '@app/hooks/useDomainRedirect'
 import { useInitial } from '@app/hooks/useInitial'
 import { useNameDetails } from '@app/hooks/useNameDetails'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
@@ -16,7 +17,7 @@ export default function Page() {
 
   const initial = useInitial()
 
-  const { address } = useAccount()
+  const { address, chain } = useAccount()
 
   const primary = usePrimaryName({ address: address as Hex })
 
@@ -28,6 +29,8 @@ export default function Page() {
 
   const isLoading = detailsLoading || primary.isLoading || initial || !router.isReady
 
+  useDomainRedirect({ chain, nameDetails, isLoading, route: '' })
+
   if (isViewingExpired && gracePeriodEndDate && gracePeriodEndDate > new Date()) {
     router.push(`/profile/${name}`)
     return null

packages/linea-ens-app/src/pages/register.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react'
 import { useAccount, useChainId } from 'wagmi'
 
 import RegistrationPoh from '@app/components/pages/profile/[name]/registration/RegistrationPoh'
+import { useDomainRedirect } from '@app/hooks/useDomainRedirect'
 import { useInitial } from '@app/hooks/useInitial'
 import { useNameDetails } from '@app/hooks/useNameDetails'
 import { getSelectedIndex } from '@app/hooks/useRegistrationReducer'
@@ -16,14 +17,16 @@ export default function Page() {
 
   const initial = useInitial()
 
-  const { address } = useAccount()
+  const { address, chain } = useAccount()
   const chainId = useChainId()
 
   const nameDetails = useNameDetails({ name })
   const { isLoading: detailsLoading, registrationStatus } = nameDetails
 
   const isLoading = detailsLoading || initial
 
+  useDomainRedirect({ chain, nameDetails, isLoading, route: 'register' })
+
   if (!isLoading && registrationStatus !== 'available' && registrationStatus !== 'premium') {
     let redirect = true
 

packages/linea-ens-app/src/pages/unsupportedNetwork.tsx

@@ -51,7 +51,7 @@ export default function Page() {
   }, [isConnected, chainId, router])
 
   const handleChangeNetwork = () => {
-    switchChain({ chainId: 59141 })
+    switchChain({ chainId: 59144 })
   }
 
   return (