start tx flow

public/locales/en/migrate.json

@@ -92,5 +92,11 @@
       "twitter": "X (Twitter)",
       "dao": "DAO forums"
     }
+  },
+  "details": {
+    "approve": {
+      "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."
+    }
   }
 }

public/locales/en/transactionFlow.json

@@ -413,10 +413,6 @@
         "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/pages/migrate.tsx

@@ -25,6 +25,7 @@ import {
 import { Carousel } from '@app/components/pages/migrate/Carousel'
 import { MigrationNamesList } from '@app/components/pages/migrate/MigrationNamesList'
 import { useQueryParameterState } from '@app/hooks/useQueryParameterState'
+import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
 
 import DAOSVG from '../assets/DAO.svg'
 import SocialX from '../assets/social/SocialX.svg'
@@ -244,6 +245,8 @@ export default function Page() {
 
   const [currentTab, setTab] = useQueryParameterState<Tab>('tab', 'ensv2')
 
+  const { createTransactionFlow } = useTransactionFlow()
+
   return (
     <>
       <Main>
@@ -313,7 +316,11 @@ export default function Page() {
                 <Button
                   onClick={() => {
                     if (isConnected) {
-                      // nothing for now
+                      createTransactionFlow('migrate-names', {
+                        transactions: [
+                          /* smth here */
+                        ],
+                      })
                     } else {
                       openConnectModal?.()
                     }

src/transaction-flow/intro/MigrateNames.tsx

@@ -0,0 +1,9 @@
+import { useTranslation } from 'react-i18next'
+
+import { Typography } from '@ensdomains/thorin'
+
+export const MigrateNames = () => {
+  const { t } = useTranslation('migrate')
+
+  return <Typography>{t('details.approve.description')}</Typography>
+}