Merge pull request #582 from ensdomains/fix/registration-steps-chainid

fix: add chainid identifier to registration-status

src/components/pages/profile/[name]/registration/Registration.tsx

@@ -110,7 +110,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
   const chainId = useChainId()
   const { address } = useAccount()
   const primary = usePrimary(address!, !address)
-  const selected = { name: nameDetails.normalisedName, address: address! }
+  const selected = { name: nameDetails.normalisedName, address: address!, chainId }
   const { normalisedName, beautifiedName } = nameDetails
   const defaultResolverAddress = useContractAddress('PublicResolver')
   const { data: resolverExists, isLoading: resolverExistsLoading } = useResolverExists(

src/components/pages/profile/[name]/registration/types.ts

@@ -41,7 +41,7 @@ export type BackObj = { back: boolean }
 
 export type RegistrationData = Prettify<UnionToIntersection<RegistrationStepData[RegistrationStep]>>
 
-export type SelectedItemProperties = { address: string; name: string }
+export type SelectedItemProperties = { address: string; name: string; chainId: number }
 
 export type RegistrationReducerDataItem = Prettify<
   Omit<RegistrationData, 'paymentMethodChoice'> & {

src/components/pages/profile/[name]/registration/useMoonpayRegistration.ts

@@ -10,12 +10,12 @@ import { useQueryKeys } from '@app/utils/cacheKeyFactory'
 import { MOONPAY_WORKER_URL } from '@app/utils/constants'
 import { getLabelFromName } from '@app/utils/utils'
 
-import { MoonpayTransactionStatus } from './types'
+import { MoonpayTransactionStatus, SelectedItemProperties } from './types'
 
 export const useMoonpayRegistration = (
   dispatch: ReturnType<typeof useRegistrationReducer>['dispatch'],
   normalisedName: string,
-  selected: { name: string; address: string },
+  selected: SelectedItemProperties,
   item: ReturnType<typeof useRegistrationReducer>['item'],
 ) => {
   const chainId = useChainId()

src/hooks/useRegistrationReducer.ts

@@ -7,6 +7,8 @@ import {
 } from '@app/components/pages/profile/[name]/registration/types'
 import { useLocalStorageReducer } from '@app/hooks/useLocalStorage'
 
+import { useChainId } from './useChainId'
+
 export const randomSecret = () => {
   // the first 4 bytes of the namehash of enslabs.eth
   const platformSource = '9923eb94'
@@ -31,6 +33,7 @@ const defaultData: RegistrationReducerDataItem = {
   name: '',
   isMoonpayFlow: false,
   externalTransactionId: '',
+  chainId: 1,
 }
 
 const isBrowser = !!(
@@ -57,7 +60,11 @@ const makeDefaultData = (selected: SelectedItemProperties): RegistrationReducerD
 export const getSelectedIndex = (
   state: RegistrationReducerData,
   selected: SelectedItemProperties,
-) => state.items.findIndex((x) => x.address === selected.address && x.name === selected.name)
+) =>
+  state.items.findIndex(
+    (x) =>
+      x.address === selected.address && x.name === selected.name && x.chainId === selected.chainId,
+  )
 
 /* eslint-disable no-param-reassign */
 const reducer = (state: RegistrationReducerData, action: RegistrationReducerAction) => {
@@ -138,7 +145,8 @@ const useRegistrationReducer = ({
   address: string | undefined
   name: string
 }) => {
-  const selected = { address, name } as SelectedItemProperties
+  const chainId = useChainId()
+  const selected = { address: address!, name, chainId } as const
   const [state, dispatch] = useLocalStorageReducer<
     RegistrationReducerData,
     RegistrationReducerAction

src/pages/register.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react'
 import { useAccount } from 'wagmi'
 
 import Registration from '@app/components/pages/profile/[name]/registration/Registration'
+import { useChainId } from '@app/hooks/useChainId'
 import { useInitial } from '@app/hooks/useInitial'
 import { useNameDetails } from '@app/hooks/useNameDetails'
 import { getSelectedIndex } from '@app/hooks/useRegistrationReducer'
@@ -15,6 +16,7 @@ export default function Page() {
   const initial = useInitial()
 
   const { address } = useAccount()
+  const chainId = useChainId()
 
   const nameDetails = useNameDetails(name, true)
   const { isLoading: detailsLoading, registrationStatus } = nameDetails
@@ -31,6 +33,7 @@ export default function Page() {
       const index = getSelectedIndex(registrationData, {
         address: address!,
         name: nameDetails.normalisedName,
+        chainId,
       })
       if (index !== -1) {
         const { stepIndex, queue } = registrationData.items[index]