start working on the tx flow

public/locales/en/transactionFlow.json

@@ -413,6 +413,10 @@
         "remove": "Remove Dentity from profile",
         "link": "Go to Dentity"
       }
+    },
+    "approveMigration": {
+      "title": "Approve ENSv2 migration",
+      "description": "Approving your names for migration now will automatically migrate them at the launch of ENSv2, without additional fees.\nOnly the address that owns the names can approve them, and all eligible names in your address must be approved together."
     }
   },
   "transaction": {

src/components/pages/migrate/MigrationNamesList.tsx

@@ -120,10 +120,6 @@ const NameCard = styled.div(
   `,
 )
 
-const filter: Record<Tab, GetNamesForAddressParameters['filter']> = {
-  eligible: { owner: true },
-}
-
 const MigrationName = ({ name, t }: { name: NameWithRelation; t: TFunction }) => {
   const now = new Date()
   const { data: avatar } = useEnsAvatar({ ...ensAvatarConfig, name: name.name! })
@@ -143,6 +139,11 @@ const MigrationName = ({ name, t }: { name: NameWithRelation; t: TFunction }) =>
   )
 }
 
+const filter: Record<Tab, GetNamesForAddressParameters['filter']> = {
+  eligible: { owner: true, registrant: false, resolvedAddress: true, wrappedOwner: false },
+  ineligible: { owner: false },
+}
+
 export const MigrationNamesList = ({ address }: { address?: Address }) => {
   const [activeTab, setTab] = useState<Tab>('eligible')
 

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

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Dialog } from '@ensdomains/thorin'
+
+export const ApproveMigration = ({ onDismiss }: { onDismiss: () => void }) => {
+  const { t } = useTranslation(['transactionFlow', 'common'])
+
+  const [viewIdx, setViewIdx] = useState(0)
+  const incrementView = () => setViewIdx(() => Math.min(flow.length - 1, viewIdx + 1))
+  const decrementView = () => (viewIdx <= 0 ? onDismiss() : setViewIdx(viewIdx - 1))
+
+  return (
+    <>
+      <Dialog.Heading title={t('input.approveMigration.title')} />
+      <Dialog.Footer
+        leading={
+          <Button colorStyle="accentSecondary" onClick={decrementView}>
+            {t(viewIdx === 0 ? 'action.cancel' : 'action.back', { ns: 'common' })}
+          </Button>
+        }
+        trailing={<Button>lol</Button>}
+      />
+    </>
+  )
+}