Merge pull request #1943 from oasisprotocol/lw/countdown-btn

Add a delay before user can finish V0 migration to encourage reading

.changelog/1943.bugfix.md

@@ -0,0 +1 @@
+Add a delay before user can finish V0 migration to encourage reading

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 () => {

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>
+      }
+    />
+  )
+}

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"