wire up MigrationHelper

src/components/pages/migrate/MigrationNamesList.tsx

@@ -144,16 +144,16 @@ const MigrationName = ({ name, t }: { name: NameWithRelation; t: TFunction }) =>
   )
 }
 
-export const MigrationNamesList = ({
+export const MigrationNamesList = <T extends NameListTab>({
   activeTab,
   setTab,
   names,
   tabs,
 }: {
-  activeTab: NameListTab
+  activeTab: T
   names: NameWithRelation[]
-  setTab: (tab: NameListTab) => void
-  tabs: NameListTab[]
+  setTab: (tab: T) => void
+  tabs: T[]
 }) => {
   const { t } = useTranslation('migrate')
 

src/components/pages/migrate/MigrationTab.tsx

@@ -321,11 +321,15 @@ const LandingTab = ({
   )
 }
 
+type MigrationHelperTab = Exclude<NameListTab, 'claimed'>
+
 const filterNames = (names: NameWithRelation[]) => {
   const eligibleNames: NameWithRelation[] = []
   const inelegibleNames: NameWithRelation[] = []
 
-  for (const name of names) {
+  for (const name of names.filter(
+    ({ expiryDate }) => expiryDate?.date && expiryDate?.date > new Date(),
+  )) {
     if (name.parentName === 'eth' && (name.relation.wrappedOwner || name.relation.registrant)) {
       eligibleNames.push(name)
     } else {
@@ -344,7 +348,7 @@ const filterTabs = ({
   eligibleNames: NameWithRelation[]
   inelegibleNames: NameWithRelation[]
 }) => {
-  const tabs: ('eligible' | 'ineligible' | 'approved')[] = []
+  const tabs: MigrationHelperTab[] = []
 
   if (eligibleNames.length) {
     tabs.push('eligible')
@@ -380,10 +384,16 @@ const MigrationsTab = ({
   inelegibleNames: NameWithRelation[]
   approvedNames: NameWithRelation[]
 }) => {
+  const tabs = filterTabs({ approvedNames, eligibleNames, inelegibleNames })
+
   const { createTransactionFlow } = useTransactionFlow()
-  const [activeNameListTab, setNameListTab] = useState<NameListTab>('eligible')
+  const [activeNameListTab, setNameListTab] = useState<MigrationHelperTab>(tabs[0])
 
-  const tabs = filterTabs({ approvedNames, eligibleNames, inelegibleNames })
+  const names: Record<MigrationHelperTab, NameWithRelation[]> = {
+    eligible: eligibleNames,
+    ineligible: inelegibleNames,
+    approved: approvedNames,
+  }
 
   return (
     <>
@@ -441,12 +451,12 @@ const MigrationsTab = ({
           <Button colorStyle="greenSecondary">{t('cta.learn-more')}</Button>
         </ButtonContainer>
       </Header>
-      {approvedNames.length === eligibleNames.length ? (
+      {approvedNames.length !== 0 && approvedNames.length === eligibleNames.length ? (
         <AllNamesAreApprovedBanner>{t('banner.all-approved')}</AllNamesAreApprovedBanner>
       ) : null}
       {isConnected ? (
         <MigrationNamesList
-          names={activeNameListTab === 'eligible' ? eligibleNames : inelegibleNames}
+          names={names[activeNameListTab]}
           activeTab={activeNameListTab}
           setTab={setNameListTab}
           tabs={tabs}
@@ -510,9 +520,9 @@ const ExtensionTab = ({
     filter: { owner: false, wrappedOwner: true, registrant: true, resolvedAddress: false },
   })
 
-  const names = infiniteData.filter((name) => name.parentName === 'eth')
+  const names = infiniteData.filter((name) => name.parentName === 'eth' && name.expiryDate)
 
-  const approvedNames = useApprovedNamesForMigration({ names })
+  const approvedNames = useApprovedNamesForMigration({ names, owner: address })
 
   const allNamesAreApproved = approvedNames.length !== 0 && approvedNames.length === names.length
 
@@ -574,9 +584,14 @@ export const MigrationTab = ({
     filter: { registrant: true, owner: true, resolvedAddress: true, wrappedOwner: true },
   })
 
-  const { eligibleNames, inelegibleNames } = filterNames(names)
+  const { eligibleNames: initialEligibleNames, inelegibleNames } = filterNames(names)
+
+  const approvedNames = useApprovedNamesForMigration({
+    names: initialEligibleNames,
+    owner: address,
+  })
 
-  const approvedNames = useApprovedNamesForMigration({ names: eligibleNames })
+  const eligibleNames = initialEligibleNames.filter((name) => !approvedNames.includes(name))
 
   return match(tab)
     .with('ensv2', () => (

src/hooks/migration/useApprovedNamesForMigration.ts

@@ -1,13 +1,17 @@
-import { erc721Abi } from 'viem'
+import { Address, erc721Abi } from 'viem'
 import { usePublicClient, useReadContracts } from 'wagmi'
 
 import { getChainContractAddress } from '@ensdomains/ensjs/contracts'
 import { NameWithRelation } from '@ensdomains/ensjs/subgraph'
 
+import { migrationHelperContract } from '@app/migrationHelper/migrationHelper'
+
 export const useApprovedNamesForMigration = ({
   names,
+  owner,
 }: {
   names: NameWithRelation[]
+  owner?: Address
 }): NameWithRelation[] => {
   const client = usePublicClient()
 
@@ -19,7 +23,7 @@ export const useApprovedNamesForMigration = ({
       }),
       abi: erc721Abi,
       functionName: 'isApprovedForAll',
-      args: ['contract-go-here', true],
+      args: [owner, migrationHelperContract[client.chain.id]],
     })),
     multicallAddress: getChainContractAddress({ client, contract: 'multicall3' }),
   })

src/migrationHelper/migrationHelper.ts

@@ -0,0 +1,9 @@
+import { goerli, holesky, localhost, mainnet, sepolia } from 'viem/chains'
+
+export const migrationHelperContract = {
+  [mainnet.id]: '0xnot-deployed-yet',
+  [localhost.id]: '0xnot-deployed-yet',
+  [goerli.id]: '0xwillnotdeploy',
+  [holesky.id]: '0x76aafA281Ed5155f83926a12ACB92e237e322A8C',
+  [sepolia.id]: '0xf9c8c83adda8d52d9284cdbef23da10b5f9869bf',
+} as const

src/transaction-flow/transaction/approveNameWrapperForMigration.ts

@@ -6,6 +6,7 @@ import {
   registrySetApprovalForAllSnippet,
 } from '@ensdomains/ensjs/contracts'
 
+import { migrationHelperContract } from '@app/migrationHelper/migrationHelper'
 import { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
 
 type Data = { address: Address }
@@ -38,13 +39,7 @@ const transaction = async ({ client }: TransactionFunctionParameters<Data>) => {
     data: encodeFunctionData({
       abi: registrySetApprovalForAllSnippet,
       functionName: 'setApprovalForAll',
-      args: [
-        getChainContractAddress({
-          client,
-          contract: 'contract-address-will-go-here',
-        }),
-        true,
-      ],
+      args: [migrationHelperContract[client.chain.id], true],
     }),
   }
 }

src/transaction-flow/transaction/approveRegistrarForMigration.ts

@@ -7,6 +7,7 @@ import {
   registrySetApprovalForAllSnippet,
 } from '@ensdomains/ensjs/contracts'
 
+import { migrationHelperContract } from '@app/migrationHelper/migrationHelper'
 import type { Transaction, TransactionDisplayItem, TransactionFunctionParameters } from '@app/types'
 
 type Data = { address: Address }
@@ -39,13 +40,7 @@ const transaction = async ({ client }: TransactionFunctionParameters<Data>) => {
     data: encodeFunctionData({
       abi: registrySetApprovalForAllSnippet,
       functionName: 'setApprovalForAll',
-      args: [
-        getChainContractAddress({
-          client,
-          contract: 'address-will-go-here',
-        }),
-        true,
-      ],
+      args: [migrationHelperContract[client.chain.id], true],
     }),
   }
 }