transaction-flow unit tests

src/hooks/useIsWrapped.ts

@@ -0,0 +1,16 @@
+import { useOwner } from './ensjs/public/useOwner'
+
+type UseIsWrappedParameters = {
+  name: string
+  enabled?: boolean
+}
+
+export const useIsWrapped = ({ name, enabled = true }: UseIsWrappedParameters) => {
+  const { data: ownerData, isLoading, isCachedData } = useOwner({ name, enabled })
+
+  return {
+    data: ownerData ? ownerData.ownershipLevel === 'nameWrapper' : undefined,
+    isLoading,
+    isCachedData,
+  }
+}

src/test-utils.tsx

@@ -48,6 +48,7 @@ jest.mock('wagmi', () => {
     useSignTypedData: jest.fn(),
     useBlockNumber: jest.fn(),
     useSendTransaction: jest.fn(),
+    useEnsAvatar: jest.fn(),
     configureChains: jest.fn(() => ({})),
   }
 })

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

@@ -1,14 +1,14 @@
 import { mockFunction, render, screen } from '@app/test-utils'
 
-import { useEstimateGasLimitForTransactions } from '@app/hooks/gasEstimation/useEstimateGasLimitForTransactions'
+import { usePrice } from '@app/hooks/ensjs/public/usePrice'
+import { useEstimateGasLimitForTransaction } from '@app/hooks/gasEstimation/useEstimateGasLimitForTransactions'
 
-import { usePrice } from '../../../hooks/usePrice'
 import ExtendNames from './ExtendNames-flow'
 
-jest.mock('@app/hooks/useEstimateGasLimitForTransactions')
-jest.mock('../../../hooks/usePrice')
+jest.mock('@app/hooks/gasEstimation/useEstimateGasLimitForTransactions')
+jest.mock('@app/hooks/ensjs/public/usePrice')
 
-const mockUseEstimateGasLimitForTransactions = mockFunction(useEstimateGasLimitForTransactions)
+const mockUseEstimateGasLimitForTransaction = mockFunction(useEstimateGasLimitForTransaction)
 const mockUsePrice = mockFunction(usePrice)
 
 jest.mock('@ensdomains/thorin', () => {
@@ -39,16 +39,18 @@ jest.mock(
 )
 
 describe('Extendnames', () => {
-  mockUseEstimateGasLimitForTransactions.mockReturnValue({
-    gasLimit: '0x5208',
+  mockUseEstimateGasLimitForTransaction.mockReturnValue({
+    gasLimit: 21000n,
+    gasPrice: 100n,
     error: null,
     isLoading: true,
   })
   mockUsePrice.mockReturnValue({
-    total: {
-      mul: () => 0.1,
+    data: {
+      base: 100n,
+      premium: 0n,
     },
-    loading: false,
+    isLoading: false,
   })
   it('should render', async () => {
     render(

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

@@ -21,7 +21,8 @@ import { ProfileRecord } from '@app/constants/profileRecordOptions'
 import { useChainId } from '@app/hooks/chain/useChainId'
 import { useContractAddress } from '@app/hooks/chain/useContractAddress'
 import { useResolverStatus } from '@app/hooks/resolver/useResolverStatus'
-import { useNameDetails } from '@app/hooks/useNameDetails'
+import { useIsWrapped } from '@app/hooks/useIsWrapped'
+import { useProfile } from '@app/hooks/useProfile'
 import { ProfileEditorForm, useProfileEditorForm } from '@app/hooks/useProfileEditorForm'
 import TransactionLoader from '@app/transaction-flow/TransactionLoader'
 import { TransactionItem, makeTransactionItem } from '@app/transaction-flow/transaction'
@@ -158,7 +159,11 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
 
   const { name = '', resumable = false } = data
 
-  const { profile, isWrapped, isLoading: profileLoading } = useNameDetails({ name })
+  const { data: profile, isLoading: isProfileLoading } = useProfile({ name })
+  const { data: isWrapped = false, isLoading: isWrappedLoading } = useIsWrapped({ name })
+
+  const isLoading = isProfileLoading || isWrappedLoading
+
   const existingRecords = profileToProfileRecords(profile)
 
   const {
@@ -206,12 +211,12 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
         }
       })
     }
-    if (!profileLoading) {
+    if (!isLoading) {
       updateProfileRecordsWithTransactionData()
       setIsRecordsUpdated(true)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [profileLoading, transactions, setIsRecordsUpdated, isRecordsUpdated])
+  }, [isLoading, transactions, setIsRecordsUpdated, isRecordsUpdated])
 
   const resolverAddress = useContractAddress({ contract: 'ensPublicResolver' })
 
@@ -256,10 +261,10 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
   }, [resolverStatus.isLoading, resolverStatus.data?.hasLatestResolver, transactions.length])
 
   useEffect(() => {
-    if (!profileLoading && !profile?.isMigrated) {
+    if (!isProfileLoading && !profile?.isMigrated) {
       setView('warning')
     }
-  }, [profileLoading, profile?.isMigrated])
+  }, [isProfileLoading, profile?.isMigrated])
 
   const handleDeleteRecord = (record: ProfileRecord, index: number) => {
     removeRecordAtIndex(index)
@@ -275,7 +280,8 @@ const ProfileEditor = ({ data = {}, transactions = [], dispatch, onDismiss }: Pr
       ? getResolverWrapperAwareness({ chainId, resolverAddress: profile?.resolverAddress })
       : false
 
-  if (profileLoading || resolverStatus.isLoading || !isRecordsUpdated) return <TransactionLoader />
+  if (isLoading || resolverStatus.isLoading || !isRecordsUpdated) return <TransactionLoader />
+
   return (
     <Container
       data-testid="profile-editor"