test: add tests for referrer resolution and clean up variable names

- Add DesyncedMessage.test.tsx with tests for button disabled state
  during referrer resolution and referrer passed to transaction
- Add Pricing.test.tsx test for isLoading prop showing loading button
- Add useResolvedReferrer.test.tsx test for hex address pass-through
- Rename referrerParam to referrer and referrerHex to resolvedReferrer
  across all components for clarity
- Remove debug console.logs from useResolvedReferrer and ExtendNames
- Simplify resolveReferrer to only use getAddressRecord (remove getOwner)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: storywithoutend

src/components/@molecules/DesyncedMessage/DesyncedMessage.test.tsx

@@ -0,0 +1,172 @@
+import { mockFunction, render, screen, userEvent } from '@app/test-utils'
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Hex } from 'viem'
+import { useAccount } from 'wagmi'
+
+import { useReferrer } from '@app/hooks/useReferrer'
+import { useResolvedReferrer } from '@app/hooks/useResolvedReferrer'
+import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { ONE_DAY } from '@app/utils/time'
+
+import { DesyncedMessage } from './DesyncedMessage'
+
+vi.mock('wagmi')
+vi.mock('@app/hooks/useReferrer')
+vi.mock('@app/hooks/useResolvedReferrer')
+vi.mock('@app/transaction-flow/TransactionFlowProvider')
+
+const mockUseAccount = mockFunction(useAccount)
+const mockUseReferrer = mockFunction(useReferrer)
+const mockUseResolvedReferrer = mockFunction(useResolvedReferrer)
+const mockUseTransactionFlow = mockFunction(useTransactionFlow)
+
+const mockCreateTransactionFlow = vi.fn()
+const mockShowExtendNamesInput = vi.fn()
+const mockUsePreparedDataInput = () => mockShowExtendNamesInput
+
+describe('DesyncedMessage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseAccount.mockReturnValue({ isConnected: true })
+    mockUseReferrer.mockReturnValue(undefined)
+    mockUseResolvedReferrer.mockReturnValue({
+      data: null,
+      isLoading: false,
+      isError: false,
+      error: null,
+    })
+    mockUseTransactionFlow.mockReturnValue({
+      createTransactionFlow: mockCreateTransactionFlow,
+      usePreparedDataInput: mockUsePreparedDataInput,
+    })
+  })
+
+  it('should disable action button when referrer is resolving', () => {
+    mockUseReferrer.mockReturnValue('vitalik.eth')
+    mockUseResolvedReferrer.mockReturnValue({
+      data: null,
+      isLoading: true,
+      isError: false,
+      error: null,
+    })
+
+    render(
+      <DesyncedMessage
+        name="test.eth"
+        expiryDate={new Date(Date.now() - 1000)} // Past date - no minSeconds
+        isGracePeriod={false}
+      />,
+    )
+
+    const actionButton = screen.getByRole('button')
+    expect(actionButton).toBeDisabled()
+  })
+
+  it('should enable action button when referrer resolution completes', () => {
+    const mockReferrerHex =
+      '0x000000000000000000000000d8da6bf26964af9d7eed9e03e53415d37aa96045' as Hex
+    mockUseReferrer.mockReturnValue('vitalik.eth')
+    mockUseResolvedReferrer.mockReturnValue({
+      data: mockReferrerHex,
+      isLoading: false,
+      isError: false,
+      error: null,
+    })
+
+    render(
+      <DesyncedMessage
+        name="test.eth"
+        expiryDate={new Date(Date.now() - 1000)} // Past date - no minSeconds
+        isGracePeriod={false}
+      />,
+    )
+
+    const actionButton = screen.getByRole('button')
+    expect(actionButton).not.toBeDisabled()
+  })
+
+  it('should pass resolved referrer hex to transaction when clicking action button', async () => {
+    const mockReferrerHex =
+      '0x000000000000000000000000d8da6bf26964af9d7eed9e03e53415d37aa96045' as Hex
+    mockUseReferrer.mockReturnValue('vitalik.eth')
+    mockUseResolvedReferrer.mockReturnValue({
+      data: mockReferrerHex,
+      isLoading: false,
+      isError: false,
+      error: null,
+    })
+
+    // Set expiryDate far in the future so minSeconds calculates to 0 (triggers createTransactionFlow)
+    const futureDate = new Date(Date.now() + ONE_DAY * 1000 + 10000)
+
+    render(
+      <DesyncedMessage name="test.eth" expiryDate={futureDate} isGracePeriod={false} />,
+    )
+
+    const actionButton = screen.getByRole('button')
+    await userEvent.click(actionButton)
+
+    expect(mockCreateTransactionFlow).toHaveBeenCalledWith(
+      'repair-desynced-name-test.eth',
+      expect.objectContaining({
+        transactions: [
+          expect.objectContaining({
+            name: 'repairDesyncedName',
+            data: expect.objectContaining({
+              name: 'test.eth',
+              referrer: mockReferrerHex,
+              hasWrapped: true,
+            }),
+          }),
+        ],
+      }),
+    )
+  })
+
+  it('should pass undefined referrer when no referrer is resolved', async () => {
+    mockUseReferrer.mockReturnValue(undefined)
+    mockUseResolvedReferrer.mockReturnValue({
+      data: null,
+      isLoading: false,
+      isError: false,
+      error: null,
+    })
+
+    // Set expiryDate far in the future so minSeconds calculates to 0 (triggers createTransactionFlow)
+    const futureDate = new Date(Date.now() + ONE_DAY * 1000 + 10000)
+
+    render(
+      <DesyncedMessage name="test.eth" expiryDate={futureDate} isGracePeriod={false} />,
+    )
+
+    const actionButton = screen.getByRole('button')
+    await userEvent.click(actionButton)
+
+    expect(mockCreateTransactionFlow).toHaveBeenCalledWith(
+      'repair-desynced-name-test.eth',
+      expect.objectContaining({
+        transactions: [
+          expect.objectContaining({
+            name: 'repairDesyncedName',
+            data: expect.objectContaining({
+              name: 'test.eth',
+              referrer: undefined,
+              hasWrapped: true,
+            }),
+          }),
+        ],
+      }),
+    )
+  })
+
+  it('should call useResolvedReferrer with the referrer param', () => {
+    mockUseReferrer.mockReturnValue('nick.eth')
+
+    render(
+      <DesyncedMessage name="test.eth" expiryDate={new Date()} isGracePeriod={false} />,
+    )
+
+    expect(mockUseResolvedReferrer).toHaveBeenCalledWith({ referrer: 'nick.eth' })
+  })
+})

src/components/@molecules/DesyncedMessage/DesyncedMessage.tsx

@@ -33,8 +33,10 @@ export const DesyncedMessage = ({
   const { isConnected } = useAccount()
   const { createTransactionFlow, usePreparedDataInput } = useTransactionFlow()
   const showExtendNamesInput = usePreparedDataInput('ExtendNames')
-  const referrerParam = useReferrer()
-  const { data: referrerHex, isLoading: isReferrerResolving } = useResolvedReferrer(referrerParam)
+  const referrer = useReferrer()
+  const { data: resolvedReferrer, isLoading: isReferrerResolving } = useResolvedReferrer({
+    referrer,
+  })
 
   return (
     <BannerMessageWithAction
@@ -67,7 +69,7 @@ export const DesyncedMessage = ({
                     transactions: [
                       createTransactionItem('repairDesyncedName', {
                         name,
-                        referrer: referrerHex ?? undefined,
+                        referrer: resolvedReferrer ?? undefined,
                         hasWrapped: true,
                       }),
                     ],

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

@@ -112,9 +112,10 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
   const chainId = useChainId()
   const { address } = useAccount()
   const primary = usePrimaryName({ address })
-  const referrerParam = useReferrer()
-  const { data: resolvedReferrerHex, isLoading: isResolvingReferrer } =
-    useResolvedReferrer(referrerParam)
+  const referrer = useReferrer()
+  const { data: resolvedReferrer, isLoading: isResolvingReferrer } = useResolvedReferrer({
+    referrer,
+  })
   const selected = useMemo(
     () => ({ name: nameDetails.normalisedName, address: address!, chainId }),
     [address, chainId, nameDetails.normalisedName],
@@ -170,11 +171,11 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
       initiateMoonpayRegistrationMutation.mutate(secondsToYears(seconds))
       return
     }
-    if (resolvedReferrerHex) {
+    if (resolvedReferrer) {
       dispatch({
         name: 'setReferrer',
         selected,
-        payload: resolvedReferrerHex,
+        payload: resolvedReferrer,
       })
     }
     dispatch({

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.test.tsx

@@ -53,4 +53,19 @@ describe('ActionButton', () => {
     )
     expect(screen.getByText('action.next')).toBeInTheDocument()
   })
+
+  it('should show loading button when isLoading is true', () => {
+    render(
+      <ActionButton
+        {...{
+          ...baseMockData,
+          paymentMethodChoice: PaymentMethod.ethereum,
+          isLoading: true,
+        }}
+      />,
+    )
+    const button = screen.getByTestId('next-button')
+    expect(button).toBeDisabled()
+    expect(screen.getByText('loading')).toBeInTheDocument()
+  })
 })

src/hooks/useResolvedReferrer.test.tsx

@@ -2,10 +2,10 @@ import { renderHook, waitFor } from '@app/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Address } from 'viem'
 
-import { resolveReferrerToHex } from '@app/utils/referrer'
+import { resolveReferrer } from '@app/utils/referrer'
 
 vi.mock('@app/utils/referrer', () => ({
-  resolveReferrerToHex: vi.fn(),
+  resolveReferrer: vi.fn(),
 }))
 
 import { useResolvedReferrer } from './useResolvedReferrer'
@@ -16,33 +16,30 @@ describe('useResolvedReferrer', () => {
   })
 
   it('should return null when no referrer provided', () => {
-    const { result } = renderHook(() => useResolvedReferrer(undefined))
+    const { result } = renderHook(() => useResolvedReferrer({ referrer: undefined }))
 
     expect(result.current.data).toBeNull()
     expect(result.current.isLoading).toBe(false)
   })
 
   it('should resolve ENS name to hex', async () => {
     const mockHex = '0x000000000000000000000000d8da6bf26964af9d7eed9e03e53415d37aa96045' as Address
-    vi.mocked(resolveReferrerToHex).mockResolvedValueOnce(mockHex)
+    vi.mocked(resolveReferrer).mockResolvedValueOnce(mockHex)
 
-    const { result } = renderHook(() => useResolvedReferrer('vitalik.eth'))
+    const { result } = renderHook(() => useResolvedReferrer({ referrer: 'vitalik.eth' }))
 
     await waitFor(() => {
       expect(result.current.data).toBe(mockHex)
       expect(result.current.isLoading).toBe(false)
     })
 
-    expect(vi.mocked(resolveReferrerToHex)).toHaveBeenCalledWith(
-      expect.anything(),
-      'vitalik.eth'
-    )
+    expect(vi.mocked(resolveReferrer)).toHaveBeenCalledWith(expect.anything(), 'vitalik.eth')
   })
 
   it('should handle resolution errors gracefully', async () => {
-    vi.mocked(resolveReferrerToHex).mockRejectedValueOnce(new Error('Resolution failed'))
+    vi.mocked(resolveReferrer).mockRejectedValueOnce(new Error('Resolution failed'))
 
-    const { result } = renderHook(() => useResolvedReferrer('invalid.eth'))
+    const { result } = renderHook(() => useResolvedReferrer({ referrer: 'invalid.eth' }))
 
     await waitFor(() => {
       expect(result.current.data).toBeNull()
@@ -51,9 +48,9 @@ describe('useResolvedReferrer', () => {
   })
 
   it('should handle null resolution result', async () => {
-    vi.mocked(resolveReferrerToHex).mockResolvedValueOnce(null)
+    vi.mocked(resolveReferrer).mockResolvedValueOnce(null)
 
-    const { result } = renderHook(() => useResolvedReferrer('nonexistent.eth'))
+    const { result } = renderHook(() => useResolvedReferrer({ referrer: 'nonexistent.eth' }))
 
     await waitFor(() => {
       expect(result.current.data).toBeNull()
@@ -62,10 +59,26 @@ describe('useResolvedReferrer', () => {
   })
 
   it('should return null when referrer is empty string', () => {
-    const { result } = renderHook(() => useResolvedReferrer(''))
+    const { result } = renderHook(() => useResolvedReferrer({ referrer: '' }))
 
     expect(result.current.data).toBeNull()
     expect(result.current.isLoading).toBe(false)
-    expect(vi.mocked(resolveReferrerToHex)).not.toHaveBeenCalled()
+    expect(vi.mocked(resolveReferrer)).not.toHaveBeenCalled()
+  })
+
+  it('should resolve hex address to padded 32-byte hex', async () => {
+    const hexAddress = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'
+    const paddedHex =
+      '0x000000000000000000000000d8da6bf26964af9d7eed9e03e53415d37aa96045' as Address
+    vi.mocked(resolveReferrer).mockResolvedValueOnce(paddedHex)
+
+    const { result } = renderHook(() => useResolvedReferrer({ referrer: hexAddress }))
+
+    await waitFor(() => {
+      expect(result.current.data).toBe(paddedHex)
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(vi.mocked(resolveReferrer)).toHaveBeenCalledWith(expect.anything(), hexAddress)
   })
 })