feat: add faq to migration flow (#963)

* feat: update initial migration state from settings

when selecting 'upgrade wallet' beta link from settings, begin the migration from it's initial state instead of in progress

* feat: add FAQ link to every migration screen

* fix: end all slide descriptions with punctuation

* feat: remove previously dismissed migration on settings click

src/api/migration-tool/cross-extension-messaging/nami-migration-client.extension.ts

@@ -30,10 +30,14 @@ export const dismissMigration = ({
   });
 };
 
-export const disableMigration = () =>
-  storage.local.set({
+export const disableMigration = async () => {
+  const date = new Date();
+  const timeInPast = date.setTime(date.getTime() - 1000);
+  await storage.local.set({
+    [DISMISS_MIGRATION_UNTIL]: timeInPast,
     [MIGRATION_KEY]: MigrationState.None,
   });
+};
 
 export const handleLaceMigrationRequests = () =>
   runtime.onMessageExternal.addListener(

src/ui/app/pages/settings.jsx

@@ -52,11 +52,11 @@ import { Events } from '../../../features/analytics/events';
 import { LegalSettings } from '../../../features/settings/legal/LegalSettings';
 import { usePostHog } from 'posthog-js/react';
 import { useFeatureFlagsContext } from '../../../features/feature-flags/provider';
-import { enableMigration } from '../../../api/migration-tool/cross-extension-messaging/nami-migration-client.extension';
 import {
   MigrationState,
   MIGRATION_KEY,
 } from '../../../api/migration-tool/migrator/migration-state.data';
+import { disableMigration } from '../../../api/migration-tool/cross-extension-messaging/nami-migration-client.extension';
 import { storage } from 'webextension-polyfill';
 
 const Settings = () => {
@@ -129,7 +129,7 @@ const Overview = () => {
           width="65%"
           rightIcon={<ChevronRightIcon />}
           onClick={async () => {
-            await enableMigration();
+            await disableMigration();
           }}
         >
           <Flex

src/ui/lace-migration/components/all-done/all-done.component.jsx

@@ -19,7 +19,7 @@ export const AllDone = ({ isLaceInstalled, onAction }) => {
           )}
         </Box>
       }
-      description="Your Nami wallet is now part of the Lace family"
+      description="Your Nami wallet is now part of the Lace family."
       buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
       buttonIcon={Arrow}
       onButtonClick={onAction}

src/ui/lace-migration/components/almost-there/almost-there.component.jsx

@@ -6,12 +6,19 @@ import { ReactComponent as Arrow } from '../../assets/arrow.svg';
 import { ReactComponent as PendingDark } from '../../assets/pending-dark-mode.svg';
 import { ReactComponent as PendingWhite } from '../../assets/pending-white-mode.svg';
 
-export const AlmostThere = ({ isLaceInstalled, onAction, isDismissable, dismissibleSeconds }) => {
+export const AlmostThere = ({
+  isLaceInstalled,
+  onAction,
+  isDismissable,
+  dismissibleSeconds,
+}) => {
   const { colorMode } = useColorMode();
   return (
     <Slide
       showTerms={false}
-      title={isLaceInstalled ? "It's time to upgrade your wallet!" : "Let’s begin..."}
+      title={
+        isLaceInstalled ? "It's time to upgrade your wallet!" : 'Let’s begin...'
+      }
       image={
         <Box mb={'60px'}>
           {colorMode === 'light' ? (
@@ -21,7 +28,11 @@ export const AlmostThere = ({ isLaceInstalled, onAction, isDismissable, dismissi
           )}
         </Box>
       }
-      description={isLaceInstalled ? 'Your Nami wallet is now part of the Lace family' : 'Download the Lace extension to begin'}
+      description={
+        isLaceInstalled
+          ? 'Your Nami wallet is now part of the Lace family.'
+          : 'Download the Lace extension to begin.'
+      }
       buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
       buttonIcon={isLaceInstalled ? Arrow : Download}
       onButtonClick={onAction}

src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx

@@ -14,7 +14,7 @@ export const Slide1 = ({ onAction, isDismissable, dismissibleSeconds }) => {
           <BackpackImg width="91px" height="126px" />
         </Box>
       }
-      description="The Nami Wallet is now integrated into Lace. Click 'Upgrade your wallet' to begin the process"
+      description="The Nami Wallet is now integrated into Lace. Click 'Upgrade your wallet' to begin the process."
       buttonText="Upgrade your wallet"
       buttonIcon={Arrow}
       onButtonClick={onAction}

src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx

@@ -20,7 +20,7 @@ export const Slide2 = ({ onAction, isDismissable, dismissibleSeconds }) => {
           )}
         </Box>
       }
-      description="On the surface, Nami is the same. But now, with Lace's advanced technology supporting it"
+      description="On the surface, Nami is the same. But now, with Lace's advanced technology supporting it."
       buttonText="Upgrade your wallet"
       buttonIcon={Arrow}
       onButtonClick={onAction}

src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx

@@ -12,7 +12,7 @@ export const NoWallet = ({ onAction, isDismissable, dismissibleSeconds }) => (
         <BackpackImg width="91px" height="126px" />
       </Box>
     }
-    description="To create or import a wallet, proceed using the Lace extension"
+    description="To create or import a wallet, proceed using the Lace extension."
     buttonText="Get started with Lace"
     buttonIcon={LaceIcon}
     onButtonClick={onAction}

src/ui/lace-migration/components/slide.component.jsx

@@ -153,6 +153,16 @@ export const Slide = ({
           <Box>{image}</Box>
           <Text fontSize="16px" fontWeight="400">
             {description}
+            <Link
+              target="_blank"
+              href="https://www.lace.io/faq?question=what-is-happening-with-nami"
+              title="FAQ"
+              color="#3489F7"
+              textDecoration="underline"
+              style={{ marginLeft: 4 }}
+            >
+              FAQ
+            </Link>
           </Text>
         </Flex>
       </Box>