fix type and merge issues with viem + main

src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.tsx

@@ -4,10 +4,8 @@ import { Address } from 'viem'
 import { Typography } from '@ensdomains/thorin'
 
 import { AvatarWithZorb } from '@app/components/AvatarWithZorb'
-// import { useChainId } from '@app/hooks/chain/useChainId'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
 import { QuerySpace } from '@app/types'
-// import { emptyAddress } from '@app/utils/constants'
 import { shortenAddress } from '@app/utils/utils'
 
 const Container = styled.div(
@@ -52,8 +50,10 @@ export const AvatarWithIdentifier = ({
   size = '10',
   shortenAddressAsTitle = true,
 }: Props) => {
-  const primary = usePrimaryName({ address })
-  // const network = useChainId()
+  const primary = usePrimaryName({
+    address,
+    enabled: !name,
+  })
 
   const _name = name || primary.data?.beautifiedName
   const _title = _name || (shortenAddressAsTitle ? shortenAddress(address) : address)
@@ -64,13 +64,7 @@ export const AvatarWithIdentifier = ({
 
   return (
     <Container>
-      <AvatarWithZorb
-        label={_title}
-        address={address}
-        name={_name}
-        size={size}
-        // network={network} // TODO: Check if network is needed
-      />
+      <AvatarWithZorb label={_title} address={address} name={_name} size={size} />
       <TextContainer>
         {isTitleFullAddress ? (
           <AddressTitleContainer data-testid="avatar-label-title">{_title}</AddressTitleContainer>

src/components/@molecules/NameListView/NameListView.tsx

@@ -62,6 +62,15 @@ type NameListViewProps = {
 export const NameListView = ({ address, isSelf, setError, setLoading }: NameListViewProps) => {
   const { t } = useTranslation('names')
 
+  /**
+   * Normal useQueries are in idle state until it reaches the client side, but useInfiniteQuery does not and
+   * starts in success state when it has persistent data. This causes a hydration error
+   */
+  const [isMounted, setIsMounted] = useState(false)
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
   const [mode, setMode] = useState<NameTableMode>('view')
   const [selectedNames, setSelectedNames] = useState<string[]>([])
   const handleClickName = (name: string) => () => {
@@ -147,7 +156,9 @@ export const NameListView = ({ address, isSelf, setError, setLoading }: NameList
   const isLoading = isNamesLoading || !address
 
   let InnerContent: ReactNode
-  if (isLoading) {
+  if (!isMounted) {
+    InnerContent = null
+  } else if (isLoading) {
     InnerContent = (
       <EmptyDetailContainer>
         <Spinner color="accent" />
@@ -180,7 +191,6 @@ export const NameListView = ({ address, isSelf, setError, setLoading }: NameList
       </InfiniteScrollContainer>
     )
   } else {
-    console.log('')
     InnerContent = `${names.length}`
   }
 

src/components/@molecules/TransactionDialogManager/DisplayItems.tsx

@@ -22,7 +22,6 @@ const Container = styled.div(
   `,
 )
 
-// TODO: Check border color and background
 const DisplayItemContainer = styled.div<{ $shrink?: boolean; $fade?: boolean }>(
   ({ theme, $shrink, $fade }) => css`
     display: grid;

src/components/@molecules/TransactionDialogManager/TransactionDialogManager.tsx

@@ -113,7 +113,7 @@ export const TransactionDialogManager = ({
         <TransactionStageModal
           actionName={transactionItem.name}
           displayItems={transaction.displayItems(transactionItem.data as any, t)}
-          // TODO: check helper and backToInput types in transaction-flow/types.ts
+          // TODO: Look into why helper type is not being inferred
           helper={
             'helper' in transaction && typeof transaction.helper === 'function'
               ? transaction.helper(transactionItem.data as any, t)

src/components/AvatarWithZorb.tsx

@@ -57,7 +57,6 @@ export const NameAvatar = ({
   noCache = false,
   ...props
 }: ComponentProps<typeof Avatar> & BaseProps & Required<Name>) => {
-
   const { data: avatar } = useEnsAvatar({ name, cacheTime: noCache ? 0 : undefined })
   const zorb = useZorb(name, 'name')
 

src/components/ProfileSnippet.tsx

@@ -228,7 +228,6 @@ export const ProfileSnippet = ({
   return (
     <Container $banner={banner} data-testid="profile-snippet">
       <FirstItems>
-        {/** TODO: Double check that network is no longer needed */}
         <NameAvatar
           size={{ min: '24', sm: '32' }}
           label={name}

src/components/pages/profile/[name]/Profile.tsx

@@ -64,7 +64,7 @@ const TabButton = styled.button<{ $selected: boolean }>(
 )
 
 const tabs = ['profile', 'records', 'ownership', 'subnames', 'permissions', 'more'] as const
-type Tab = typeof tabs[number]
+type Tab = (typeof tabs)[number]
 
 type Props = {
   isSelf: boolean

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 import { useAccount } from 'wagmi'
 
-import { Dialog, Helper, Typography, mq } from '@ensdomains/thorin'
+import { Dialog, Helper, mq, Typography } from '@ensdomains/thorin'
 
 import { BaseLinkWithHistory } from '@app/components/@atoms/BaseLink'
 import { InnerDialog } from '@app/components/@atoms/InnerDialog'
@@ -109,8 +109,6 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
   const chainId = useChainId()
   const { address } = useAccount()
   const primary = usePrimaryName({ address })
-  // TODO: Double check this line
-  // const selected = { name: nameDetails.normalisedName, address: address! }
   const selected = { name: nameDetails.normalisedName, address: address!, chainId }
   const { normalisedName, beautifiedName } = nameDetails
   const defaultResolverAddress = useContractAddress({ contract: 'ensPublicResolver' })

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

@@ -42,8 +42,6 @@ export type BackObj = { back: boolean }
 
 export type RegistrationData = Prettify<UnionToIntersection<RegistrationStepData[RegistrationStep]>>
 
-// TODO: Check if we need chainId
-// export type SelectedItemProperties = { address: Address; name: string }
 export type SelectedItemProperties = { address: string; name: string; chainId: number }
 
 export type RegistrationReducerDataItem = Prettify<

src/components/pages/profile/[name]/tabs/MoreTab/MoreTab.tsx

@@ -26,7 +26,6 @@ type Props = {
 }
 
 const MoreTab = ({ name, nameDetails, abilities }: Props) => {
-  // TODO: Check history for why profileIsCachedData is used
   const { canBeWrapped, ownerData, wrapperData, isWrapped, isCachedData, profile } = nameDetails
 
   return (

src/components/pages/profile/[name]/tabs/OwnershipTab/OwnershipTab.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Banner } from '@ensdomains/thorin'
@@ -26,17 +27,18 @@ type Props = {
 
 export const OwnershipTab = ({ name, details }: Props) => {
   const roles = useRoles(name, { grouped: true })
-  console.log('roles', roles)
   const nameType = useNameType(name)
   const warning = useOwnershipWarning({ name, details, nameType })
   const isLoading = roles.isLoading || details.isLoading
   if (isLoading) return null
   return (
-    <Container>
-      {warning.data && <Banner alert="warning">{warning.data}</Banner>}
-      <RolesSection name={name} roles={roles.data!} details={details} />
-      <ExpirySection name={name} details={details} />
-      <ContractSection details={details} />
-    </Container>
+    <Suspense>
+      <Container>
+        {warning.data && <Banner alert="warning">{warning.data}</Banner>}
+        <RolesSection name={name} roles={roles.data!} details={details} />
+        <ExpirySection name={name} details={details} />
+        <ContractSection details={details} />
+      </Container>
+    </Suspense>
   )
 }

src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/RolesSection.tsx

@@ -74,7 +74,7 @@ export const RolesSection = ({ name, roles, details }: Props) => {
                   buttonId="send-name-disabled-button"
                   buttonText={label}
                   mobileWidth={150}
-                  // mobileButtonWidth="initial" // TODO: Check if this is needed
+                  buttonWidth="fit"
                   prefix={icon}
                   size="medium"
                 />

src/constants/chains.ts

@@ -19,10 +19,9 @@ type ContractName =
   | 'LegacyDNSSECImpl'
   | 'LegacyPublicResolver'
 
-export const deploymentAddresses = JSON.parse(process.env.DEPLOYMENT_ADDRESSES! || '{}') as Record<
-  ContractName | 'ENSRegistry',
-  Address
->
+export const deploymentAddresses = JSON.parse(
+  process.env.NEXT_PUBLIC_DEPLOYMENT_ADDRESSES!,
+) as Record<ContractName | 'ENSRegistry', Address>
 
 export const localhostWithEns = {
   ...localhost,

src/constants/resolverAddressData.ts

@@ -326,8 +326,6 @@ export const KNOWN_RESOLVER_DATA: KnownResolverData = {
         '1337': [
           {
             address: deploymentAddresses.PublicResolver,
-            // TODO: double check this address matches up
-            // address: '0x0E801D84Fa97b50751Dbf25036d067dCf18858bF',
             deployer: 'ENS Labs',
             tag: 'latest',
             isNameWrapperAware: true,
@@ -352,8 +350,6 @@ export const KNOWN_RESOLVER_DATA: KnownResolverData = {
           },
           {
             address: deploymentAddresses.LegacyPublicResolver,
-            // TODO: check this matches up
-            // address: '0x84eA74d481Ee0A5332c457a4d796187F6Ba67fEB',
             deployer: 'ENS Labs',
             tag: null,
             isNameWrapperAware: false,

src/constants/resolverInterfaceIds.ts

@@ -11,6 +11,4 @@ export const RESOLVER_INTERFACE_IDS = {
   VersionableResolver: '0xd700ff33',
 } as const
 export type ResolverInterfaceName = keyof typeof RESOLVER_INTERFACE_IDS
-// TODO: Prettier is autocorrcting from this to the line below
-// export type ResolverInterfaceId = (typeof RESOLVER_INTERFACE_IDS)[ResolverInterfaceName]
-export type ResolverInterfaceId = typeof RESOLVER_INTERFACE_IDS[ResolverInterfaceName]
+export type ResolverInterfaceId = (typeof RESOLVER_INTERFACE_IDS)[ResolverInterfaceName]

src/hooks/abilities/useAbilities.ts

@@ -143,7 +143,6 @@ export const useAbilities = ({ name, enabled = true }: UseAbilitiesParameters) =
         }),
       }
     },
-    // TODO: Check if we can remove the listing of basicNameData parts without causing inifinite loop
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       name,

src/hooks/chain/useGasPrice.ts

@@ -1,7 +1,6 @@
 import { useFeeData } from 'wagmi'
 
 export const useGasPrice = () => {
-  // TODO: check to see why useFeeData is returning strings instead of bigints
   const { data, isLoading, isFetching } = useFeeData({ watch: true })
 
   const gasPrice =

src/hooks/ensjs/public/usePrimaryName.ts

@@ -7,6 +7,7 @@ import { getName, GetNameParameters, GetNameReturnType } from '@ensdomains/ensjs
 import { useQueryKeyFactory } from '@app/hooks/useQueryKeyFactory'
 import { CreateQueryKey, PartialBy, PublicClientWithChain, QueryConfig } from '@app/types'
 import { tryBeautify } from '@app/utils/beautify'
+import { emptyAddress } from '@app/utils/constants'
 
 type UsePrimaryNameParameters = PartialBy<GetNameParameters, 'address'> & {
   allowMismatch?: boolean
@@ -61,7 +62,7 @@ export const usePrimaryName = <TParams extends UsePrimaryNameParameters>({
 
   const query = useQuery(queryKey, getPrimaryNameQueryFn, {
     cacheTime,
-    enabled: enabled && !!params.address,
+    enabled: enabled && !!params.address && params.address !== emptyAddress,
     staleTime,
     onError,
     onSettled,

src/layouts/Content.tsx

@@ -279,11 +279,12 @@ export const Content = ({
 
   if (!children.leading && singleColumnContent) LeadingComponent = null
 
+  const fullTitle = `${title} - ENS`
   return (
     <>
       {!noTitle && (
         <Head>
-          <title>{title} - ENS</title>
+          <title>{fullTitle}</title>
         </Head>
       )}
 

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

@@ -11,6 +11,7 @@ import useRoles, { Role, RoleRecord } from '@app/hooks/ownership/useRoles/useRol
 import { getAvailableRoles } from '@app/hooks/ownership/useRoles/utils/getAvailableRoles'
 import { useBasicName } from '@app/hooks/useBasicName'
 import { makeTransactionItem } from '@app/transaction-flow/transaction'
+import { makeTransferNameOrSubnameTransactionItem } from '@app/transaction-flow/transaction/utils/makeTransferNameOrSubnameTransactionItem'
 import { TransactionDialogPassthrough } from '@app/transaction-flow/types'
 
 import { EditRoleView } from './views/EditRoleView/EditRoleView'
@@ -84,30 +85,22 @@ const EditRoles = ({ data: { name }, dispatch, onDismiss }: Props) => {
       dirtyValues['eth-record']
         ? makeTransactionItem('updateEthAddress', { name, address: dirtyValues['eth-record'] })
         : null,
-      dirtyValues.manager && !!abilities.data?.sendNameFunctionCallDetails?.sendManager?.contract
-        ? makeTransactionItem(isOwnerOrManager ? 'transferName' : 'transferSubname', {
+      dirtyValues.manager
+        ? makeTransferNameOrSubnameTransactionItem({
             name,
             newOwnerAddress: dirtyValues.manager,
-            contract: abilities.data?.sendNameFunctionCallDetails?.sendManager?.contract,
             sendType: 'sendManager',
-            reclaim: abilities.data?.sendNameFunctionCallDetails?.sendManager?.method === 'reclaim',
-          } as any) // TODO: need to synchronize transaction types and abilities object
-        : null,
-      dirtyValues.owner && !!abilities.data?.sendNameFunctionCallDetails?.sendOwner?.contract
-        ? makeTransactionItem('transferName', {
-            name,
-            newOwnerAddress: dirtyValues.owner,
-            contract: abilities.data?.sendNameFunctionCallDetails?.sendOwner?.contract,
-            sendType: 'sendOwner',
+            isOwnerOrManager,
+            abilities: abilities.data,
           })
         : null,
-      dirtyValues['parent-owner'] &&
-      abilities.data?.sendNameFunctionCallDetails?.sendOwner?.contract
-        ? makeTransactionItem(isOwnerOrManager ? 'transferName' : 'transferSubname', {
+      dirtyValues.owner
+        ? makeTransferNameOrSubnameTransactionItem({
             name,
-            newOwnerAddress: dirtyValues['parent-owner'],
-            contract: abilities.data?.sendNameFunctionCallDetails?.sendOwner?.contract,
+            newOwnerAddress: dirtyValues.owner,
             sendType: 'sendOwner',
+            isOwnerOrManager,
+            abilities: abilities.data,
           })
         : null,
     ].filter((t) => !!t)

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

@@ -210,8 +210,9 @@ const ExtendNames = ({ data: { names, isSelf }, dispatch, onDismiss }: Props) =>
     duration: yearsToSeconds(1),
   })
   const rentFee = priceData ? priceData.base + priceData.premium : undefined
-
-  const totalRentFee = rentFee ? rentFee * BigInt(years) : undefined
+  const test = 10n + 10n
+  console.log('rentFee', rentFee, typeof rentFee, test, typeof test)
+  const totalRentFee = rentFee ? BigInt(rentFee) * BigInt(years) : undefined
   const transactions = [
     makeTransactionItem('extendNames', { names, duration, rentPrice: totalRentFee!, isSelf }),
   ]