From dfbcf0c3c41f67ef90774411e82b855a09a4c93f Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Tue, 21 May 2024 04:16:35 +0200
Subject: [PATCH] Add a delay before user can finish V0 migration to encourage
 reading

---
 .changelog/1943.bugfix.md                     |  1 +
 .../migrating-v0-ext-persisted-state.spec.ts  |  4 +--
 src/app/components/CountdownButton/index.tsx  | 32 +++++++++++++++++++
 .../components/Persist/MigrateV0StateForm.tsx |  7 ++--
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 .changelog/1943.bugfix.md
 create mode 100644 src/app/components/CountdownButton/index.tsx

diff --git a/.changelog/1943.bugfix.md b/.changelog/1943.bugfix.md
new file mode 100644
index 0000000000..bf0d35e01f
--- /dev/null
+++ b/.changelog/1943.bugfix.md
@@ -0,0 +1 @@
+Add a delay before user can finish V0 migration to encourage reading
diff --git a/playwright/tests/migrating-v0-ext-persisted-state.spec.ts b/playwright/tests/migrating-v0-ext-persisted-state.spec.ts
index eefb09e127..d3bb84d8d1 100644
--- a/playwright/tests/migrating-v0-ext-persisted-state.spec.ts
+++ b/playwright/tests/migrating-v0-ext-persisted-state.spec.ts
@@ -39,7 +39,7 @@ test('Migrate from V0 extension persisted state to valid RootState', async ({
       ),
     ).toBeVisible()
     await page.getByText('I’ve safely stored my mnemonic').check()
-    await page.getByRole('button', { name: /Next/ }).click()
+    await page.getByRole('button', { name: /Next/ }).click({ timeout: 8000 })
 
     // await expect(page).toHaveScreenshot({ fullPage: true })
     await page.getByRole('button', { name: /Tap to show/ }).click()
@@ -49,7 +49,7 @@ test('Migrate from V0 extension persisted state to valid RootState', async ({
       ),
     ).toBeVisible()
     await page.getByText('I’ve safely stored my private keys').check()
-    await page.getByRole('button', { name: /Open the new version of the wallet/ }).click()
+    await page.getByRole('button', { name: /Open the new version of the wallet/ }).click({ timeout: 8000 })
   })
 
   await test.step('should result in valid RootState', async () => {
diff --git a/src/app/components/CountdownButton/index.tsx b/src/app/components/CountdownButton/index.tsx
new file mode 100644
index 0000000000..e93804c5a0
--- /dev/null
+++ b/src/app/components/CountdownButton/index.tsx
@@ -0,0 +1,32 @@
+import { Button, ButtonExtendedProps } from 'grommet/es6/components/Button'
+import { useEffect, useState } from 'react'
+
+export const CountdownButton = (props: Omit<ButtonExtendedProps, 'disabled'>) => {
+  const [countdown, setCountdown] = useState(5)
+  const isDisabled = countdown > 0
+
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      setCountdown(prevCountdown => {
+        const newCount = prevCountdown - 1
+        if (newCount <= 0) clearInterval(timerId)
+        return newCount
+      })
+    }, 1000)
+
+    return () => clearInterval(timerId)
+  }, [])
+
+  return (
+    <Button
+      {...props}
+      primary
+      disabled={isDisabled}
+      label={
+        <span>
+          {props.label} {isDisabled && <span>({countdown})</span>}
+        </span>
+      }
+    />
+  )
+}
diff --git a/src/app/components/Persist/MigrateV0StateForm.tsx b/src/app/components/Persist/MigrateV0StateForm.tsx
index 722e71aa67..4dd267f24f 100644
--- a/src/app/components/Persist/MigrateV0StateForm.tsx
+++ b/src/app/components/Persist/MigrateV0StateForm.tsx
@@ -23,6 +23,7 @@ import { themeActions } from '../../../styles/theme/slice'
 import { RevealOverlayButton } from '../RevealOverlayButton'
 import { PrivateKeyFormatter } from '../PrivateKeyFormatter'
 import { PasswordWrongError } from '../../../types/errors'
+import { CountdownButton } from '../CountdownButton'
 
 export function MigrateV0StateForm() {
   const { t, i18n } = useTranslation()
@@ -155,14 +156,14 @@ export function MigrateV0StateForm() {
             />
           </FormField>
           {migratingV0State.invalidPrivateKeys.length > 0 ? (
-            <Button
+            <CountdownButton
               type="submit"
               label={t('migrateV0Extension.nextStep', 'Next')}
               fill="horizontal"
               primary
             />
           ) : (
-            <Button
+            <CountdownButton
               type="submit"
               label={t('migrateV0Extension.finishMigration', 'Open the new version of the wallet')}
               fill="horizontal"
@@ -224,7 +225,7 @@ export function MigrateV0StateForm() {
               )}
             />
           </FormField>
-          <Button
+          <CountdownButton
             type="submit"
             label={t('migrateV0Extension.finishMigration', 'Open the new version of the wallet')}
             fill="horizontal"