refactor: move resolution logic into hook and add loading indicators

Move ENS name resolution logic from utility function into useResolvedReferrer
hook to follow React Query semantics. Add loading indicators to buttons in
ExtendNames, DesyncedMessage, and Pricing flows while referrer resolves.

- Remove resolveReferrer utility, keep only getReferrerHex
- Inline resolution logic in hook's query function
- Show loading spinner on buttons during referrer resolution
- Update tests to mock getAddressRecord directly

🤖 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

@@ -31,7 +31,7 @@ describe('DesyncedMessage', () => {
     mockUseAccount.mockReturnValue({ isConnected: true })
     mockUseReferrer.mockReturnValue(undefined)
     mockUseResolvedReferrer.mockReturnValue({
-      data: null,
+      data: undefined,
       isLoading: false,
       isError: false,
       error: null,
@@ -45,7 +45,7 @@ describe('DesyncedMessage', () => {
   it('should disable action button when referrer is resolving', () => {
     mockUseReferrer.mockReturnValue('vitalik.eth')
     mockUseResolvedReferrer.mockReturnValue({
-      data: null,
+      data: undefined,
       isLoading: true,
       isError: false,
       error: null,
@@ -54,7 +54,7 @@ describe('DesyncedMessage', () => {
     render(
       <DesyncedMessage
         name="test.eth"
-        expiryDate={new Date(Date.now() - 1000)} // Past date - no minSeconds
+        expiryDate={new Date(Date.now() - 1000)}
         isGracePeriod={false}
       />,
     )
@@ -77,7 +77,7 @@ describe('DesyncedMessage', () => {
     render(
       <DesyncedMessage
         name="test.eth"
-        expiryDate={new Date(Date.now() - 1000)} // Past date - no minSeconds
+        expiryDate={new Date(Date.now() - 1000)}
         isGracePeriod={false}
       />,
     )
@@ -97,7 +97,6 @@ describe('DesyncedMessage', () => {
       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(
@@ -127,13 +126,12 @@ describe('DesyncedMessage', () => {
   it('should pass undefined referrer when no referrer is resolved', async () => {
     mockUseReferrer.mockReturnValue(undefined)
     mockUseResolvedReferrer.mockReturnValue({
-      data: null,
+      data: undefined,
       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(

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

@@ -53,6 +53,7 @@ export const DesyncedMessage = ({
               children: t('banner.desynced.action'),
               colorStyle: 'redPrimary',
               disabled: isReferrerResolving,
+              loading: isReferrerResolving,
               onClick: () => {
                 if (!name) return
                 const minSeconds = calculateMinSeconds(expiryDate)
@@ -69,7 +70,7 @@ export const DesyncedMessage = ({
                     transactions: [
                       createTransactionItem('repairDesyncedName', {
                         name,
-                        referrer: resolvedReferrer ?? undefined,
+                        referrer: resolvedReferrer,
                         hasWrapped: true,
                       }),
                     ],

src/hooks/useResolvedReferrer.test.tsx

@@ -2,83 +2,86 @@ import { renderHook, waitFor } from '@app/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { Address } from 'viem'
 
-import { resolveReferrer } from '@app/utils/referrer'
-
-vi.mock('@app/utils/referrer', () => ({
-  resolveReferrer: vi.fn(),
-}))
+import { getAddressRecord } from '@ensdomains/ensjs/public'
+import { EMPTY_BYTES32 } from '@ensdomains/ensjs/utils'
 
 import { useResolvedReferrer } from './useResolvedReferrer'
 
+vi.mock('@ensdomains/ensjs/public', () => ({
+  getAddressRecord: vi.fn(),
+}))
+
 describe('useResolvedReferrer', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  it('should return null when no referrer provided', () => {
+  it('should return undefined when no referrer provided', () => {
     const { result } = renderHook(() => useResolvedReferrer({ referrer: undefined }))
 
-    expect(result.current.data).toBeNull()
+    expect(result.current.data).toBeUndefined()
     expect(result.current.isLoading).toBe(false)
   })
 
   it('should resolve ENS name to hex', async () => {
-    const mockHex = '0x000000000000000000000000d8da6bf26964af9d7eed9e03e53415d37aa96045' as Address
-    vi.mocked(resolveReferrer).mockResolvedValueOnce(mockHex)
+    const mockAddress = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' as Address
+    vi.mocked(getAddressRecord).mockResolvedValueOnce({
+      value: mockAddress,
+      coin: 60,
+    } as any)
 
     const { result } = renderHook(() => useResolvedReferrer({ referrer: 'vitalik.eth' }))
 
     await waitFor(() => {
-      expect(result.current.data).toBe(mockHex)
+      expect(result.current.data).toBeDefined()
+      expect(result.current.data?.length).toBe(66)
       expect(result.current.isLoading).toBe(false)
     })
 
-    expect(vi.mocked(resolveReferrer)).toHaveBeenCalledWith(expect.anything(), 'vitalik.eth')
+    expect(vi.mocked(getAddressRecord)).toHaveBeenCalled()
   })
 
   it('should handle resolution errors gracefully', async () => {
-    vi.mocked(resolveReferrer).mockRejectedValueOnce(new Error('Resolution failed'))
+    vi.mocked(getAddressRecord).mockRejectedValueOnce(new Error('Resolution failed'))
 
     const { result } = renderHook(() => useResolvedReferrer({ referrer: 'invalid.eth' }))
 
     await waitFor(() => {
-      expect(result.current.data).toBeNull()
+      expect(result.current.data).toBeUndefined()
       expect(result.current.isError).toBe(true)
     })
   })
 
-  it('should handle null resolution result', async () => {
-    vi.mocked(resolveReferrer).mockResolvedValueOnce(null)
+  it('should return EMPTY_BYTES32 when name has no address', async () => {
+    vi.mocked(getAddressRecord).mockResolvedValueOnce(null)
 
     const { result } = renderHook(() => useResolvedReferrer({ referrer: 'nonexistent.eth' }))
 
     await waitFor(() => {
-      expect(result.current.data).toBeNull()
+      expect(result.current.data).toBe(EMPTY_BYTES32)
       expect(result.current.isLoading).toBe(false)
     })
   })
 
-  it('should return null when referrer is empty string', () => {
+  it('should return undefined when referrer is empty string', () => {
     const { result } = renderHook(() => useResolvedReferrer({ referrer: '' }))
 
-    expect(result.current.data).toBeNull()
+    expect(result.current.data).toBeUndefined()
     expect(result.current.isLoading).toBe(false)
-    expect(vi.mocked(resolveReferrer)).not.toHaveBeenCalled()
+    expect(vi.mocked(getAddressRecord)).not.toHaveBeenCalled()
   })
 
-  it('should resolve hex address to padded 32-byte hex', async () => {
+  it('should resolve hex address without calling getAddressRecord', 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.data?.length).toBe(66)
       expect(result.current.isLoading).toBe(false)
     })
 
-    expect(vi.mocked(resolveReferrer)).toHaveBeenCalledWith(expect.anything(), hexAddress)
+    // Should not call getAddressRecord for hex addresses
+    expect(vi.mocked(getAddressRecord)).not.toHaveBeenCalled()
   })
 })

src/hooks/useResolvedReferrer.ts

@@ -1,17 +1,20 @@
 import { QueryFunctionContext } from '@tanstack/react-query'
-import { Hex } from 'viem'
+import { Hex, isHex } from 'viem'
+
+import { getAddressRecord } from '@ensdomains/ensjs/public'
+import { EMPTY_BYTES32 } from '@ensdomains/ensjs/utils'
 
 import { useQueryOptions } from '@app/hooks/useQueryOptions'
 import { ConfigWithEns, CreateQueryKey, QueryConfig } from '@app/types'
 import { prepareQueryOptions } from '@app/utils/prepareQueryOptions'
 import { useQuery } from '@app/utils/query/useQuery'
-import { resolveReferrer } from '@app/utils/referrer'
+import { getReferrerHex } from '@app/utils/referrer'
 
 type UseResolvedReferrerParameters = {
   referrer?: string
 }
 
-type UseResolvedReferrerReturnType = Hex | null
+type UseResolvedReferrerReturnType = Hex | undefined
 
 type UseResolvedReferrerConfig = QueryConfig<UseResolvedReferrerReturnType, Error>
 
@@ -24,23 +27,17 @@ const resolveReferrerQueryFn =
   async <TParams extends UseResolvedReferrerParameters>({
     queryKey: [{ referrer }, chainId],
   }: QueryFunctionContext<UseResolvedReferrerQueryKey<TParams>>) => {
-    if (!referrer) return null
+    if (!referrer) return EMPTY_BYTES32
+
+    if (isHex(referrer)) {
+      return getReferrerHex(referrer)
+    }
 
     const client = config.getClient({ chainId })
-    return resolveReferrer(client, referrer)
+    const addressRecord = await getAddressRecord(client, { name: referrer })
+    return addressRecord?.value ? getReferrerHex(addressRecord.value) : EMPTY_BYTES32
   }
 
-/**
- * Hook to resolve a referrer (ENS name or hex address) to a 32-byte hex value.
- *
- * For ENS names, attempts to:
- * 1. Get ETH address record from the name
- * 2. Fall back to owner/registrant if no address record
- * 3. Convert resolved address to 32-byte hex
- *
- * @param referrer - ENS name or hex address to resolve
- * @returns Query result with resolved hex value
- */
 export const useResolvedReferrer = <TParams extends UseResolvedReferrerParameters>({
   enabled = true,
   gcTime,
@@ -72,7 +69,7 @@ export const useResolvedReferrer = <TParams extends UseResolvedReferrerParameter
   const query = useQuery(preparedOptions)
 
   return {
-    data: query.data ?? null,
+    data: query.data,
     isLoading: query.isLoading,
     isError: query.isError,
     error: query.error,

src/transaction-flow/input/ExtendNames/ExtendNames-flow.test.tsx

@@ -68,7 +68,7 @@ describe('Extendnames', () => {
   mockUseExpiry.mockReturnValue({ data: { expiry: { date: new Date() } }, isLoading: false })
   mockUseReferrer.mockReturnValue(undefined)
   mockUseResolvedReferrer.mockReturnValue({
-    data: null,
+    data: undefined,
     isLoading: false,
     isError: false,
     error: null,
@@ -152,7 +152,7 @@ describe('Extendnames', () => {
   it('should handle failed referrer resolution gracefully', async () => {
     mockUseReferrer.mockReturnValueOnce('invalid.eth')
     mockUseResolvedReferrer.mockReturnValueOnce({
-      data: null,
+      data: undefined,
       isLoading: false,
       isError: true,
       error: new Error('Resolution failed'),
@@ -172,10 +172,10 @@ describe('Extendnames', () => {
     expect(screen.getByTestId('extend-names-modal')).toBeInTheDocument()
   })
 
-  it('should show loading state while referrer is resolving', () => {
+  it('should show disabled button but display pricing content while referrer is resolving', () => {
     mockUseReferrer.mockReturnValueOnce('vitalik.eth')
     mockUseResolvedReferrer.mockReturnValueOnce({
-      data: null,
+      data: undefined,
       isLoading: true,
       isError: false,
       error: null,
@@ -191,7 +191,11 @@ describe('Extendnames', () => {
       />,
     )
 
-    // Should be in loading state when referrer is resolving
-    expect(screen.queryByTestId('extend-names-modal')).toBeInTheDocument()
+    // Pricing content should be visible (Invoice is rendered)
+    expect(screen.getByText('Invoice')).toBeInTheDocument()
+
+    // Next button should be disabled while referrer is resolving
+    const trailingButton = screen.getByTestId('extend-names-confirm')
+    expect(trailingButton).toHaveAttribute('disabled')
   })
 })

src/transaction-flow/input/ExtendNames/ExtendNames-flow.tsx

@@ -234,7 +234,7 @@ const ExtendNames = ({
           duration: seconds,
           names,
           startDateTimestamp: expiryDate?.getTime(),
-          referrer: resolvedReferrer ?? undefined,
+          referrer: resolvedReferrer,
           hasWrapped,
         },
         stateOverride: [
@@ -286,12 +286,9 @@ const ExtendNames = ({
   const view = flow[viewIdx]
 
   const isBaseDataLoading =
-    !isAccountConnected ||
-    isBalanceLoading ||
-    isExpiryEnabledAndLoading ||
-    isEthPriceLoading ||
-    isReferrerResolving
-  const isRegisterLoading = isPriceLoading || (isEstimateGasLoading && !estimateGasLimitError)
+    !isAccountConnected || isBalanceLoading || isExpiryEnabledAndLoading || isEthPriceLoading
+  const isRegisterLoading =
+    isPriceLoading || (isEstimateGasLoading && !estimateGasLimitError) || isReferrerResolving
 
   const { title, alert, buttonProps } = match(view)
     .with('no-ownership-warning', () => ({
@@ -318,6 +315,7 @@ const ExtendNames = ({
       alert: undefined,
       buttonProps: {
         disabled: isRegisterLoading,
+        loading: isRegisterLoading,
         onClick: () => {
           if (!totalRentFee) return
           const transactions = createTransactionItem('extendNames', {
@@ -330,7 +328,7 @@ const ExtendNames = ({
               bufferPercentage: CURRENCY_FLUCTUATION_BUFFER_PERCENTAGE,
               currency: userConfig.currency === 'fiat' ? 'usd' : 'eth',
             }),
-            referrer: resolvedReferrer ?? undefined,
+            referrer: resolvedReferrer,
             hasWrapped,
           })
           dispatch({ name: 'setTransactions', payload: [transactions] })